@extends('admin.admin_dashboard')
@section('admin')

@php
    $maxTrend = max(array_column($monthlyTrend, 'count') ?: [1]);
@endphp

<div class="page-content" data-chm-live-url="{{ route('helpdesk.dashboard.live') }}">
    <x-chm.layout.page title="Support Desk" subtitle="Tickets, SLA compliance & team performance" icon="bx bx-support">
        <x-slot:breadcrumb>
            <x-chm.breadcrumb-item :href="route('admin.dashboard')">Home</x-chm.breadcrumb-item>
            <x-chm.breadcrumb-item :active="true">Help Desk</x-chm.breadcrumb-item>
        </x-slot:breadcrumb>

        <x-slot:actions>
            @can('create', App\Models\HelpDesk\Ticket::class)
                <x-chm.button variant="primary" icon="bx bx-plus" :href="route('helpdesk.tickets.create')">New ticket</x-chm.button>
            @endcan
            @can('ticket.reports')
                <x-chm.button variant="outline-primary" icon="bx bx-bar-chart-alt-2" :href="route('helpdesk.reports.index')">Reports</x-chm.button>
            @endcan
        </x-slot:actions>

        <div class="row row-cols-2 row-cols-md-4 g-3 mb-4">
            <x-chm.stat-card label="Open tickets" :value="number_format($stats['open'] ?? 0)" icon="bx bx-folder-open" color="primary" live-key="open" />
            <x-chm.stat-card label="Today's tickets" :value="number_format($stats['today'] ?? 0)" icon="bx bx-calendar" color="info" live-key="today" />
            <x-chm.stat-card label="Critical / emergency" :value="number_format($stats['critical'] ?? 0)" icon="bx bx-error" color="danger" live-key="critical" />
            <x-chm.stat-card label="Overdue" :value="number_format($stats['overdue'] ?? 0)" icon="bx bx-time-five" color="warning" live-key="overdue" />
            <x-chm.stat-card label="Resolved today" :value="number_format($stats['resolved_today'] ?? 0)" icon="bx bx-check-circle" color="success" live-key="resolved_today" />
            <x-chm.stat-card label="Closed today" :value="number_format($stats['closed_today'] ?? 0)" icon="bx bx-lock" color="secondary" live-key="closed_today" />
            <x-chm.stat-card label="My assigned" :value="number_format($stats['my_assigned'] ?? 0)" icon="bx bx-user-check" color="primary" live-key="my_assigned" />
            <x-chm.stat-card label="SLA compliance" :value="($stats['sla_compliance'] ?? 0).'%'" icon="bx bx-shield-quarter" color="success" live-key="sla_compliance" />
        </div>

        <div class="row row-cols-2 row-cols-md-4 g-3 mb-4">
            <x-chm.stat-card label="Avg response (hrs)" :value="$stats['avg_response_hours'] ?? '—'" icon="bx bx-reply" color="info" live-key="avg_response_hours" />
            <x-chm.stat-card label="Avg resolution (hrs)" :value="$stats['avg_resolution_hours'] ?? '—'" icon="bx bx-timer" color="info" live-key="avg_resolution_hours" />
            <x-chm.stat-card label="Escalated open" :value="number_format($stats['escalated'] ?? 0)" icon="bx bx-up-arrow-alt" color="danger" live-key="escalated" />
            <x-chm.stat-card label="Waiting for user" :value="number_format($stats['waiting_user'] ?? 0)" icon="bx bx-user-voice" color="warning" live-key="waiting_user" />
        </div>

        <div class="row g-4 mb-4">
            <div class="col-lg-8">
                <x-chm.card title="Monthly ticket trend">
                    @forelse($monthlyTrend as $row)
                        @php $pct = $maxTrend > 0 ? round(($row['count'] / $maxTrend) * 100) : 0; @endphp
                        <div class="mb-3">
                            <div class="d-flex justify-content-between small mb-1">
                                <span>{{ $row['month'] }}</span>
                                <span>{{ number_format($row['count']) }}</span>
                            </div>
                            <x-chm.progress :value="$pct" />
                        </div>
                    @empty
                        <p class="text-muted mb-0">No ticket data yet.</p>
                    @endforelse
                </x-chm.card>
            </div>
            <div class="col-lg-4">
                <x-chm.card title="Top categories">
                    @forelse($byCategory as $row)
                        <div class="d-flex justify-content-between border-bottom py-2 small">
                            <span>{{ $row['label'] }}</span>
                            <span class="badge bg-light text-dark border">{{ $row['count'] }}</span>
                        </div>
                    @empty
                        <p class="text-muted mb-0">No categories yet.</p>
                    @endforelse
                </x-chm.card>
            </div>
        </div>

        <div class="row g-4">
            <div class="col-lg-6">
                <x-chm.card title="By department">
                    @forelse($byDepartment as $row)
                        <div class="d-flex justify-content-between border-bottom py-2 small">
                            <span>{{ $row['label'] }}</span>
                            <span class="badge bg-light text-dark border">{{ $row['count'] }}</span>
                        </div>
                    @empty
                        <p class="text-muted mb-0">No department data.</p>
                    @endforelse
                </x-chm.card>
            </div>
            <div class="col-lg-6">
                <x-chm.card title="Top technicians">
                    @forelse($byTechnician as $row)
                        <div class="d-flex justify-content-between border-bottom py-2 small">
                            <span>{{ $row['label'] }}</span>
                            <span class="badge bg-light text-dark border">{{ $row['count'] }}</span>
                        </div>
                    @empty
                        <p class="text-muted mb-0">No assignments yet.</p>
                    @endforelse
                </x-chm.card>
            </div>
        </div>

        <x-chm.card title="Recent activity" class="mt-4">
            <div class="table-responsive">
                <table class="table table-sm align-middle mb-0">
                    <thead>
                        <tr>
                            <th>Ticket</th>
                            <th>Subject</th>
                            <th>Requester</th>
                            <th>Assigned</th>
                            <th>Status</th>
                            <th>Updated</th>
                        </tr>
                    </thead>
                    <tbody data-chm-live-region="recent_tickets">
                        @forelse($recentTickets as $ticket)
                            <tr>
                                <td><a href="{{ route('helpdesk.tickets.show', $ticket) }}">{{ $ticket->ticket_number }}</a></td>
                                <td>{{ Str::limit($ticket->title, 40) }}</td>
                                <td>{{ $ticket->requester->name ?? '—' }}</td>
                                <td>{{ $ticket->assignee->name ?? '—' }}</td>
                                <td><x-chm.status-badge :status="$ticket->status->badgeVariant()" :label="$ticket->status->label()" /></td>
                                <td class="text-muted small">{{ $ticket->updated_at?->diffForHumans() }}</td>
                            </tr>
                        @empty
                            <tr><td colspan="6" class="text-muted">No recent tickets.</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </x-chm.card>
    </x-chm.layout.page>
</div>

@endsection