@extends('layouts.app')

@section('content')
<div class="p-6 bg-gray-100 min-h-screen">

    <!-- HEADER -->
    <div class="mb-8">
        <h1 class="text-3xl font-bold text-gray-800">
            📊 Dashboard Administrativo
        </h1>
        <p class="text-gray-500">
            Monitoreo general del sistema Help Desk
        </p>
    </div>

    <!-- KPI CARDS -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-6">

        <x-card title="Total Tickets" :value="$kpis['total'] ?? 0" icon="🎫" />
        <x-card title="Abiertos" :value="$kpis['abiertos'] ?? 0" icon="📂" />
        <x-card title="En Proceso" :value="$kpis['proceso'] ?? 0" icon="⏳" />
        <x-card title="Cerrados" :value="$kpis['cerrados'] ?? 0" icon="✅" />        

        <!-- SLA VENCIDOS -->
        <div class="bg-red-600 text-white p-6 rounded-xl shadow relative">
            <p class="text-sm uppercase opacity-80">SLA Vencidos</p>
            <p class="text-3xl font-bold">{{ $sla_vencidos ?? 0 }}</p>

            @if(($sla_vencidos ?? 0) > 0)
                <span class="absolute top-2 right-2 bg-black text-white text-xs px-2 py-1 rounded">
                    Crítico
                </span>
            @endif
        </div>

    </div>

    <!-- 🚨 ALERTA ITIL GLOBAL -->
    @php
        $criticos = collect($tickets ?? [])
            ->filter(fn($t) => $sla->estadoSLA($t) === 'Vencido')
            ->count();
    @endphp

    @if($criticos > 0)
        <div class="bg-red-600 text-white p-4 rounded-xl shadow flex items-center justify-between">
            <div>
                ⚠️ <strong>Alerta ITIL:</strong> {{ $criticos }} ticket(s) han excedido el SLA.
            </div>
            <span class="bg-black px-3 py-1 rounded text-xs">
                CRÍTICO
            </span>
        </div>
    @endif

    <!-- GRÁFICOS -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mt-10">

        <!-- ESTADO -->
        <div class="bg-white p-6 rounded-xl shadow">
            <h2 class="text-lg font-semibold mb-4 text-gray-700">
                📊 Tickets por Estado
            </h2>
            <canvas id="chartEstado"></canvas>
        </div>

        <!-- PRIORIDAD -->
        <div class="bg-white p-6 rounded-xl shadow">
            <h2 class="text-lg font-semibold mb-4 text-gray-700">
                ⚡ Tickets por Prioridad
            </h2>
            <canvas id="chartPrioridad"></canvas>
        </div>

    </div>

    <!-- TOP TECNICOS -->
    <div class="mt-10 bg-white p-6 rounded-xl shadow">

        <h2 class="text-lg font-semibold mb-4 text-gray-700">
            👨‍💻 Rendimiento de Técnicos
        </h2>

        <table class="w-full text-sm">
            <thead>
                <tr class="border-b">
                    <th class="text-left p-2">Técnico</th>
                    <th class="text-left p-2">Tickets</th>
                </tr>
            </thead>

            <tbody>
                @forelse($topTecnicos ?? [] as $t)
                    <tr class="border-b hover:bg-gray-50">
                        <td class="p-2">{{ $t->name }}</td>
                        <td class="p-2 font-bold">{{ $t->tickets_asignados_count ?? 0 }}</td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="2" class="p-2 text-gray-500 text-center">
                            Sin datos
                        </td>
                    </tr>
                @endforelse
            </tbody>
        </table>

    </div>

    <!-- 📋 SLA DETAIL TABLE (NUEVO NIVEL ITIL) -->
    <div class="mt-10 bg-white p-6 rounded-xl shadow">

        <h2 class="text-lg font-semibold mb-4 text-gray-700">
            ⏱ Monitoreo SLA ITIL en tiempo real
        </h2>

        <table class="w-full text-sm">
            <thead>
                <tr class="border-b bg-gray-50">
                    <th class="p-2 text-left">Ticket</th>
                    <th class="p-2 text-left">SLA %</th>
                    <th class="p-2 text-left">Estado SLA</th>
                    <th class="p-2 text-left">Indicador</th>
                    <th class="p-2 text-center">Acción</th>
                </tr>
            </thead>

            <tbody>
                @forelse($tickets ?? [] as $t)

                    @php
                        // ✅ SI EL TICKET ESTÁ CERRADO O ANULADO
                        $cerrado = in_array(
                            strtolower($t->estado->tipo ?? ''),
                            ['cerrado']
                        );

                        // ✅ SOLO CALCULAR SLA SI NO ESTÁ CERRADO
                        $porcentaje = $cerrado
                            ? 100
                            : min(100, max(0, $sla->porcentajeSLA($t)));

                        $estado = $cerrado
                            ? 'Finalizado'
                            : $sla->estadoSLA($t);

                        $color = $cerrado
                            ? 'green'
                            : $sla->color($t);
                    @endphp

                    <tr class="border-b hover:bg-gray-50">

                        <!-- TICKET -->
                        <td class="p-2 font-semibold">
                            {{ $t->codigo ?? 'N/A' }}
                        </td>

                        <!-- PORCENTAJE -->
                        <td class="p-2">
                            {{ round($porcentaje) }}%
                        </td>

                        <!-- ESTADO -->
                        <td class="p-2 font-medium">

                            @if($cerrado)

                                <span class="text-gray-600 font-semibold">
                                    ✅ Ticket Cerrado
                                </span>

                            @else

                                {{ $estado }}

                            @endif

                        </td>

                        <!-- SEMÁFORO SLA -->
                        <td class="p-2">

                            <div class="w-32 bg-gray-200 rounded h-3 overflow-hidden">

                                <div class="h-3 transition-all duration-300
                                    @if($color === 'red') bg-red-600
                                    @elseif($color === 'orange') bg-orange-500
                                    @elseif($color === 'yellow') bg-yellow-500
                                    @else bg-green-500
                                    @endif"
                                    style="width: {{ $porcentaje }}%">
                                </div>

                            </div>

                        </td>

                        <!-- ACCIÓN -->
                        <td class="p-2 text-center">

                            @if(!$cerrado)

                                <a href="{{ route('tickets.show', $t) }}"
                                class="inline-flex items-center gap-1 bg-blue-600 hover:bg-blue-700 text-white px-3 py-1 rounded-lg text-xs font-medium transition">

                                    👁 Ver Ticket

                                </a>

                            @else

                                <span class="text-xs text-gray-400 italic">
                                    Ticket Finalizado
                                </span>

                            @endif

                        </td>

                    </tr>

                @empty

                    <tr>
                        <td colspan="5" class="text-center p-4 text-gray-500">
                            Sin tickets disponibles
                        </td>
                    </tr>

                @endforelse
            </tbody>
        </table>

    </div>

</div>
@endsection


@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<script>
document.addEventListener("DOMContentLoaded", function () {

    // 🔥 VALIDAR EXISTENCIA
    const estadoCanvas = document.getElementById('chartEstado');
    const prioridadCanvas = document.getElementById('chartPrioridad');

    if (!estadoCanvas || !prioridadCanvas) return;

    // 📊 KPIs (ARRAY FIX)
    const abiertos = @json($kpis['abiertos'] ?? 0);
    const proceso  = @json($kpis['proceso'] ?? 0);
    const cerrados = @json($kpis['cerrados'] ?? 0);

    // 📊 CHART ESTADO
    new Chart(estadoCanvas, {
        type: 'bar',
        data: {
            labels: ['Abiertos', 'En Proceso', 'Cerrados'],
            datasets: [{
                label: 'Tickets',
                data: [abiertos, proceso, cerrados],
                backgroundColor: ['#3b82f6', '#f59e0b', '#10b981']
            }]
        },
        options: {
            responsive: true,
            plugins: {
                legend: { display: false }
            }
        }
    });

    // 📊 PRIORIDAD
    const prioridades = @json($ticketsPorPrioridad->pluck('nombre'));
    const valores = @json($ticketsPorPrioridad->pluck('total'));

    // ⚠️ VALIDACIÓN
    if (prioridades.length === 0) {
        console.warn("No hay datos de prioridad");
        return;
    }

    new Chart(prioridadCanvas, {
        type: 'pie',
        data: {
            labels: prioridades,
            datasets: [{
                data: valores,
                backgroundColor: [
                    '#ef4444',
                    '#f59e0b',
                    '#10b981',
                    '#3b82f6',
                    '#6366f1'
                ]
            }]
        }
    });

});
</script>
@endpush