@php
    use App\Enums\WorkStatus;
    $by = $stats['works_by_status'] ?? [];
    $total = max(1, (int) ($stats['works_total'] ?? 1));
@endphp

<div class="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
    <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['works_total'] ?? 0)) }}</p>
        <p class="mt-2 text-xs text-[var(--setel-text-muted)]">Total registradas (activas en catálogo)</p>
    </div>
    <div class="setel-card p-5">
        <p class="text-sm text-[var(--setel-text-muted)]">Sitios activos</p>
        <p class="mt-1 text-3xl font-bold tabular-nums text-[var(--setel-text)]">{{ number_format((int) ($stats['sites_active'] ?? 0)) }}</p>
        <p class="mt-2 text-xs text-[var(--setel-text-muted)]">Puntos de instalación operativos</p>
    </div>
    <div class="setel-card p-5">
        <p class="text-sm text-[var(--setel-text-muted)]">Proyectos activos</p>
        <p class="mt-1 text-3xl font-bold tabular-nums text-[var(--setel-text)]">{{ number_format((int) ($stats['projects_active'] ?? 0)) }}</p>
        <p class="mt-2 text-xs text-[var(--setel-text-muted)]">Líneas de despliegue vigentes</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</p>
        <p class="mt-1 text-3xl font-bold tabular-nums text-amber-700 dark:text-amber-400">{{ number_format((int) ($stats['sla_breached'] ?? 0)) }}</p>
        <p class="mt-2 text-xs text-[var(--setel-text-muted)]">OT abiertas/pendientes fuera de escala + SLA</p>
    </div>
</div>

<div class="grid gap-6 lg:grid-cols-3">
    <div class="setel-card overflow-hidden lg:col-span-2">
        <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>
            @if (auth()->user()->canAccessOperations())
                <a href="{{ route('works.index') }}" wire:navigate class="text-sm font-medium text-[var(--setel-primary)] hover:underline">Ver catálogo</a>
            @endif
        </div>
        <div class="setel-table-wrap">
            <table class="setel-table">
                <thead>
                    <tr>
                        <th>OT</th>
                        <th>Sitio</th>
                        <th>Tipo</th>
                        <th>Estado</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 class="text-sm">{{ $work->site?->name ?? '—' }}</td>
                            <td class="text-sm text-[var(--setel-text-muted)]">{{ $work->workType?->name ?? '—' }}</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 class="text-xs text-[var(--setel-text-muted)]">{{ $work->updated_at?->format('d/m/Y H:i') }}</td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="5" class="py-8 text-center text-sm text-[var(--setel-text-muted)]">No hay órdenes de trabajo registradas.</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    <div class="flex flex-col gap-6">
        <div class="setel-card p-5">
            <h2 class="text-lg font-semibold text-[var(--setel-text)]">OT por estado externo</h2>
            <ul class="mt-4 flex flex-col gap-3">
                @foreach (WorkStatus::cases() as $case)
                    @php $n = (int) ($by[$case->value] ?? 0); $pct = round(($n / $total) * 100); @endphp
                    <li>
                        <div class="mb-1 flex justify-between text-sm">
                            <span class="text-[var(--setel-text-muted)]">{{ $case->label() }}</span>
                            <span class="font-semibold tabular-nums text-[var(--setel-text)]">{{ $n }}</span>
                        </div>
                        <div class="h-2 overflow-hidden rounded-full bg-[var(--setel-card-border)]">
                            <div class="h-full rounded-full bg-[var(--setel-primary)]" style="width: {{ $pct }}%"></div>
                        </div>
                    </li>
                @endforeach
            </ul>
        </div>

        <div class="setel-card p-5">
            <h2 class="text-lg font-semibold text-[var(--setel-text)]">Sitios con más OT</h2>
            <ol class="mt-4 list-decimal space-y-2 ps-4 text-sm text-[var(--setel-text)]">
                @forelse ($stats['top_sites'] ?? [] as $site)
                    <li>
                        <span class="font-medium">{{ $site->name }}</span>
                        @if ($site->code)
                            <span class="font-mono text-xs text-[var(--setel-text-muted)]">({{ $site->code }})</span>
                        @endif
                        — {{ number_format($site->works_count) }} OT
                    </li>
                @empty
                    <li class="list-none ps-0 text-[var(--setel-text-muted)]">Sin datos.</li>
                @endforelse
            </ol>
        </div>
    </div>
</div>
