{% extends "base.html" %}
{% block content %}
<div x-data="csDashboard()" x-init="init()">
    <div class="mb-6">
        <h1 class="text-2xl font-bold text-gray-900">Customer Service Dashboard</h1>
        <p class="text-gray-500 mt-1">Welcome back, <span x-text="user.full_name"></span></p>
    </div>

    <!-- KPI Cards -->
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-5">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm text-gray-500 font-medium">New Today</p>
                    <p class="text-3xl font-bold text-gray-900 mt-1" x-text="kpi.newToday || 0"></p>
                </div>
                <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center">
                    <svg class="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
                    </svg>
                </div>
            </div>
        </div>

        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-5">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm text-gray-500 font-medium">Open Tickets</p>
                    <p class="text-3xl font-bold text-gray-900 mt-1" x-text="kpi.openTickets || 0"></p>
                </div>
                <div class="w-12 h-12 bg-yellow-100 rounded-lg flex items-center justify-center">
                    <svg class="w-6 h-6 text-yellow-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/>
                    </svg>
                </div>
            </div>
        </div>

        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-5">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm text-gray-500 font-medium">Avg Response Time</p>
                    <p class="text-3xl font-bold text-gray-900 mt-1" x-text="kpi.avgResponseTime || '—'"></p>
                </div>
                <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center">
                    <svg class="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
                    </svg>
                </div>
            </div>
        </div>

        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-5">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm text-gray-500 font-medium">SLA Compliance</p>
                    <p class="text-3xl font-bold text-gray-900 mt-1" x-text="(kpi.slaCompliance || 0) + '%'"></p>
                </div>
                <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center">
                    <svg class="w-6 h-6 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                    </svg>
                </div>
            </div>
        </div>
    </div>

    <!-- Priority Breakdown + Escalated -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
        <!-- Open by Priority -->
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-5">
            <h3 class="text-sm font-semibold text-gray-700 uppercase tracking-wide mb-4">Open by Priority</h3>
            <div class="space-y-2">
                <a href="/tickets?group=priority&priority=urgent" class="flex items-center justify-between rounded-lg px-2 py-1.5 hover:bg-red-50 transition">
                    <span class="text-red-600 font-medium">🔴 Urgent</span>
                    <span class="text-2xl font-bold" x-text="kpi.byPriority?.urgent || 0"></span>
                </a>
                <a href="/tickets?group=priority&priority=high" class="flex items-center justify-between rounded-lg px-2 py-1.5 hover:bg-orange-50 transition">
                    <span class="text-orange-600 font-medium">🟠 High</span>
                    <span class="text-2xl font-bold" x-text="kpi.byPriority?.high || 0"></span>
                </a>
                <a href="/tickets?group=priority&priority=medium" class="flex items-center justify-between rounded-lg px-2 py-1.5 hover:bg-yellow-50 transition">
                    <span class="text-yellow-600 font-medium">🟡 Medium</span>
                    <span class="text-2xl font-bold" x-text="kpi.byPriority?.medium || 0"></span>
                </a>
                <a href="/tickets?group=priority&priority=low" class="flex items-center justify-between rounded-lg px-2 py-1.5 hover:bg-green-50 transition">
                    <span class="text-green-600 font-medium">🟢 Low</span>
                    <span class="text-2xl font-bold" x-text="kpi.byPriority?.low || 0"></span>
                </a>
                <p class="text-[11px] text-gray-400 pt-1">Click a row to open the priority-grouped queue.</p>
            </div>
        </div>

        <!-- Oldest Unassigned -->
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-5">
            <h3 class="text-sm font-semibold text-gray-700 uppercase tracking-wide mb-4">Oldest Unassigned</h3>
            <div x-show="!oldestUnassigned" class="text-gray-400 text-sm py-8 text-center">No unassigned tickets</div>
            <template x-if="oldestUnassigned">
                <div>
                    <a :href="'/tickets/' + oldestUnassigned.id" class="block p-3 bg-orange-50 rounded-lg border border-orange-200 hover:bg-orange-100 transition">
                        <div class="font-medium text-sm" x-text="oldestUnassigned.ticket_number"></div>
                        <div class="text-xs text-gray-600 mt-1" x-text="oldestUnassigned.description?.substring(0, 80)"></div>
                        <div class="text-xs text-gray-400 mt-1">Waiting <span x-text="timeSince(oldestUnassigned.created_at)"></span></div>
                    </a>
                </div>
            </template>
        </div>

        <!-- Escalated -->
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-5">
            <h3 class="text-sm font-semibold text-gray-700 uppercase tracking-wide mb-4">Escalated Tickets</h3>
            <div class="text-3xl font-bold text-red-600 mb-3" x-text="kpi.escalatedCount || 0"></div>
            <div class="space-y-2 max-h-48 overflow-y-auto">
                <template x-for="ticket in escalatedTickets" :key="ticket.id">
                    <a :href="'/tickets/' + ticket.id" class="block p-2 bg-red-50 rounded border border-red-200 hover:bg-red-100 transition">
                        <div class="flex justify-between items-center">
                            <span class="text-sm font-medium" x-text="ticket.ticket_number"></span>
                            <span class="text-xs text-red-600 font-medium" x-text="ticket.priority"></span>
                        </div>
                        <div class="text-xs text-gray-600 mt-0.5" x-text="ticket.description?.substring(0, 60)"></div>
                    </a>
                </template>
                <div x-show="!escalatedTickets.length" class="text-gray-400 text-sm py-4 text-center">No escalated tickets</div>
            </div>
        </div>
    </div>

    <!-- Recent Tickets Table -->
    <div class="bg-white rounded-xl shadow-sm border border-gray-200">
        <div class="px-5 py-4 border-b border-gray-200 flex items-center justify-between">
            <h3 class="text-sm font-semibold text-gray-700 uppercase tracking-wide">Recent Tickets</h3>
            <a href="/tickets" class="text-sm text-denya-600 hover:text-denya-800">View All →</a>
        </div>
        <div class="overflow-x-auto">
            <table class="w-full text-sm">
                <thead class="bg-gray-50 text-gray-600 text-xs uppercase tracking-wider">
                    <tr>
                        <th class="px-5 py-3 text-left">Ticket</th>
                        <th class="px-5 py-3 text-left">Status</th>
                        <th class="px-5 py-3 text-left">Priority</th>
                        <th class="px-5 py-3 text-left">Description</th>
                        <th class="px-5 py-3 text-left">Created</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-100">
                    <template x-for="ticket in recentTickets" :key="ticket.id">
                        <tr class="hover:bg-gray-50 transition cursor-pointer" @click="window.location.href='/tickets/'+ticket.id">
                            <td class="px-5 py-3 font-medium text-denya-600" x-text="ticket.ticket_number"></td>
                            <td class="px-5 py-3"><span class="px-2 py-1 rounded-full text-xs font-medium" :class="statusClass(ticket.status)" x-text="ticket.status"></span></td>
                            <td class="px-5 py-3"><span class="px-2 py-1 rounded text-xs font-medium" :class="priorityClass(ticket.priority)" x-text="priorityBadge(ticket.priority)"></span></td>
                            <td class="px-5 py-3 text-gray-600 max-w-xs truncate" x-text="ticket.description || ''"></td>
                            <td class="px-5 py-3 text-gray-500 text-xs" x-text="formatDate(ticket.created_at)"></td>
                        </tr>
                    </template>
                    <tr x-show="!recentTickets.length">
                        <td colspan="5" class="px-5 py-12 text-center text-gray-400">No tickets found</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

<script>
    function csDashboard() {
        return {
            kpi: { byPriority: {} },
            recentTickets: [],
            escalatedTickets: [],
            oldestUnassigned: null,

            async init() {
                await this.loadKPIs();
                await this.loadRecentTickets();
                await this.loadEscalated();
            },

            async loadKPIs() {
                try {
                    const tickets = await app().apiGet('/api/tickets?page_size=200');
                    if (!tickets?.items) return;
                    const all = tickets.items;

                    const today = new Date();
                    today.setHours(0, 0, 0, 0);

                    // New today
                    const newToday = all.filter(t => new Date(t.created_at) >= today && t.status === 'New').length;

                    // Open tickets (not closed/completed)
                    const open = all.filter(t => !['Closed', 'Completed'].includes(t.status));

                    // By priority
                    const byPriority = { urgent: 0, high: 0, medium: 0, low: 0 };
                    open.forEach(t => { if (t.priority) byPriority[t.priority] = (byPriority[t.priority] || 0) + 1; });

                    // Oldest unassigned
                    const unassigned = all.filter(t => !t.assigned_to && !['Closed', 'Completed'].includes(t.status))
                        .sort((a, b) => new Date(a.created_at) - new Date(b.created_at));
                    this.oldestUnassigned = unassigned[0] || null;

                    // SLA compliance (rough: tickets with sla_deadline not breached)
                    const withSLA = all.filter(t => t.sla_deadline);
                    const slaMet = withSLA.filter(t => new Date(t.sla_deadline) > new Date() || ['Closed', 'Completed'].includes(t.status));

                    this.kpi = {
                        newToday,
                        openTickets: open.length,
                        byPriority,
                        escalatedCount: all.filter(t => t.status === 'Escalated').length,
                        avgResponseTime: this.calcAvgResponse(all),
                        slaCompliance: withSLA.length ? Math.round((slaMet.length / withSLA.length) * 100) : 100
                    };
                } catch (e) { console.error('KPI load error', e); }
            },

            async loadRecentTickets() {
                try {
                    const data = await app().apiGet('/api/tickets?page_size=20');
                    this.recentTickets = data?.items || [];
                } catch (e) { console.error('Recent tickets load error', e); }
            },

            async loadEscalated() {
                try {
                    const data = await app().apiGet('/api/tickets?status=Escalated&page_size=10');
                    this.escalatedTickets = data?.items || [];
                } catch (e) { console.error('Escalated load error', e); }
            },

            calcAvgResponse(all) {
                // Rough approximation — in real system this would come from timeline analysis
                const open = all.filter(t => !['Closed', 'Completed'].includes(t.status));
                if (!open.length) return '—';
                const avgHrs = open.reduce((sum, t) => {
                    const diff = (new Date() - new Date(t.created_at)) / (1000 * 60 * 60);
                    return sum + Math.min(diff, 168); // cap at 1 week
                }, 0) / open.length;
                if (avgHrs < 1) return `${Math.round(avgHrs * 60)}m`;
                return `${Math.round(avgHrs)}h`;
            }
        }
    }
</script>
{% endblock %}