@php
    use App\Enums\NocTrackingStatus;
    use App\Enums\WorkStatus;
@endphp

<div>
    <div class="mb-2">
        <h1 class="text-2xl font-bold text-[var(--setel-text)]">Panel NOC</h1>
        <p class="mt-1 text-sm text-[var(--setel-text-muted)]">
            Vista global de OT: cierre de pendientes/observadas y revisión de cerradas.
        </p>
    </div>

    <div class="grid gap-4 sm:grid-cols-2 xl:grid-cols-3">
        <div class="setel-card p-5">
            <p class="text-sm text-[var(--setel-text-muted)]">OT en sistema</p>
            <p class="mt-1 text-3xl font-bold tabular-nums text-[var(--setel-text)]">{{ number_format((int) ($stats['queue_total'] ?? 0)) }}</p>
            <p class="mt-2 text-xs text-[var(--setel-text-muted)]">Total registrado</p>
        </div>
        <div class="setel-card p-5">
            <p class="text-sm text-[var(--setel-text-muted)]">Pendiente seguimiento</p>
            <p class="mt-1 text-3xl font-bold tabular-nums text-[var(--setel-text)]">{{ number_format((int) ($stats['noc_pendiente'] ?? 0)) }}</p>
        </div>
        <div class="setel-card p-5">
            <p class="text-sm text-[var(--setel-text-muted)]">Observadas</p>
            <p class="mt-1 text-3xl font-bold tabular-nums text-[var(--setel-text)]">{{ number_format((int) ($stats['noc_observado'] ?? 0)) }}</p>
        </div>
        <div class="setel-card p-5">
            <p class="text-sm text-[var(--setel-text-muted)]">Cerradas (tracking)</p>
            <p class="mt-1 text-3xl font-bold tabular-nums text-[var(--setel-text)]">{{ number_format((int) ($stats['noc_cerrado'] ?? 0)) }}</p>
        </div>
        <div class="setel-card p-5">
            <p class="text-sm text-[var(--setel-text-muted)]">Cierres este mes</p>
            <p class="mt-1 text-3xl font-bold tabular-nums text-[var(--setel-text)]">{{ number_format((int) ($stats['noc_closed_month'] ?? 0)) }}</p>
            <p class="mt-2 text-xs text-[var(--setel-text-muted)]">OT con seguimiento NOC cerrado y actualización en {{ now()->translatedFormat('F') }}</p>
        </div>
        <div class="setel-card border-l-4 border-l-amber-500 p-5">
            <p class="text-sm text-[var(--setel-text-muted)]">SLA vencido en cola</p>
            <p class="mt-1 text-3xl font-bold tabular-nums text-amber-700 dark:text-amber-400">{{ number_format((int) ($stats['sla_breached_queue'] ?? 0)) }}</p>
        </div>
    </div>

    <div class="setel-card overflow-hidden">
        <div class="flex items-center justify-between border-b border-[var(--setel-card-border)] px-5 py-4">
            <h2 class="text-lg font-semibold text-[var(--setel-text)]">Últimas OT actualizadas</h2>
            <div class="flex flex-wrap gap-3">
                <a href="{{ route('noc.tracking.open') }}" wire:navigate class="text-sm font-medium text-[var(--setel-primary)] hover:underline">Pendientes / observadas</a>
                <a href="{{ route('noc.tracking.review') }}" wire:navigate class="text-sm font-medium text-[var(--setel-primary)] hover:underline">Cerradas (revisión)</a>
            </div>
        </div>
        <div class="setel-table-wrap">
            <table class="setel-table">
                <thead>
                    <tr>
                        <th>OT</th>
                        <th>Sitio</th>
                        <th>Técnico</th>
                        <th>Estado OT</th>
                        <th>Seguimiento NOC</th>
                        <th>Actualizado</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($stats['recent_works'] ?? [] as $work)
                        <tr>
                            <td class="font-mono text-xs">
                                <a href="{{ route('works.show', $work) }}" wire:navigate class="text-[var(--setel-primary)] hover:underline">{{ $work->ot }}</a>
                            </td>
                            <td>{{ $work->site?->name ?? '—' }}</td>
                            <td class="text-sm">{{ $work->technician?->fullName() ?? '—' }}</td>
                            <td>
                                @php $st = WorkStatus::tryFrom((string) $work->work_status); @endphp
                                <span class="{{ $st?->badgeClass() ?? 'setel-badge setel-badge--neutral' }} text-xs">{{ $st?->label() ?? $work->work_status }}</span>
                            </td>
                            <td>
                                @php $nt = NocTrackingStatus::tryFrom((string) ($work->noc_tracking_status ?? '')); @endphp
                                <span class="{{ $nt?->badgeClass() ?? 'setel-badge setel-badge--neutral' }} text-xs">{{ $nt?->label() ?? ($work->noc_tracking_status ?? '—') }}</span>
                            </td>
                            <td class="text-xs text-[var(--setel-text-muted)]">{{ $work->updated_at?->format('d/m/Y H:i') }}</td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="6" class="py-8 text-center text-sm text-[var(--setel-text-muted)]">No hay OT recientes.</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>
