{{-- Shared admin analytics overview (KPIs, breakdowns, alerts). --}}
@php
    $overview = $adminOverview ?? [];
    $kpis = $overview['kpis'] ?? [];
    $breakdowns = $overview['breakdowns'] ?? [];
    $alerts = $overview['alerts'] ?? [];
    $links = $overview['links'] ?? [];
@endphp

@if ($alerts !== [])
    <div class="space-y-2">
        @foreach ($alerts as $alert)
            @php
                $tone = match ($alert['severity'] ?? 'info') {
                    'critical' => 'border-rose-200 bg-rose-50 text-rose-900',
                    'warning' => 'border-amber-200 bg-amber-50 text-amber-900',
                    default => 'border-sky-200 bg-sky-50 text-sky-900',
                };
            @endphp
            <div class="rounded-xl border px-4 py-3 text-sm {{ $tone }}">{{ $alert['message'] }}</div>
        @endforeach
    </div>
@endif

@if ($kpis !== [])
    <div class="grid grid-cols-2 gap-3 lg:grid-cols-3">
        @foreach ($kpis as $kpi)
            <div class="rounded-2xl border border-slate-200 bg-white px-4 py-4">
                <p class="text-xs font-medium uppercase tracking-wide text-slate-500">{{ $kpi['label'] }}</p>
                <p class="mt-1 text-2xl font-semibold text-slate-900">{{ $kpi['value'] }}</p>
                @if (! empty($kpi['hint']))
                    <p class="mt-1 text-xs text-slate-500">{{ $kpi['hint'] }}</p>
                @endif
            </div>
        @endforeach
    </div>
@endif

@foreach ($breakdowns as $section)
    <section class="rounded-2xl border border-slate-200 bg-white p-5">
        <h2 class="text-sm font-semibold text-slate-900">{{ $section['title'] }}</h2>
        @if (($section['rows'] ?? []) === [])
            <p class="mt-3 text-sm text-slate-500">No data for this period.</p>
        @else
            <ul class="mt-4 space-y-3">
                @foreach ($section['rows'] as $row)
                    <li>
                        <div class="flex items-center justify-between gap-3 text-sm">
                            <span class="font-medium text-slate-800">{{ $row['label'] }}</span>
                            <span class="tabular-nums text-slate-600">
                                {{ $row['value'] }}
                                @if (isset($row['pct']) && $row['pct'] !== null)
                                    <span class="text-slate-400">({{ $row['pct'] }}%)</span>
                                @endif
                            </span>
                        </div>
                        @if (isset($row['pct']) && $row['pct'] !== null)
                            <div class="mt-1.5 h-1.5 overflow-hidden rounded-full bg-slate-100">
                                <div class="h-full rounded-full bg-indigo-500" style="width: {{ min(100, max(0, (float) $row['pct'])) }}%"></div>
                            </div>
                        @endif
                    </li>
                @endforeach
            </ul>
        @endif
    </section>
@endforeach

@if ($links !== [])
    <div class="flex flex-wrap gap-2">
        @foreach ($links as $link)
            <a href="{{ $link['href'] }}" class="rounded-xl border border-slate-200 bg-white px-4 py-2 text-sm font-medium text-slate-700 hover:border-indigo-200 hover:bg-indigo-50/50">
                {{ $link['label'] }}
            </a>
        @endforeach
    </div>
@endif