@props([
    'label',
    'count',
    'href',
    'description',
    'bySector' => [],
    'byTrainingGroup' => [],
    'filterQuery' => [],
    'accent' => 'default',
])

@php
    /** @var list<array{sector_id: int|null, sector_name: string, total: int}> $bySector */
    /** @var list<array{training_group_id: int|null, team_name: string, sector_name: string|null, total: int}> $byTrainingGroup */
    $bySector = $bySector ?? [];
    $byTrainingGroup = $byTrainingGroup ?? [];
    $filterQuery = $filterQuery ?? [];

    $accentStyles = match ($accent) {
        'amber' => [
            'border' => 'border-amber-200',
            'accent' => 'bg-amber-500',
            'value' => 'text-amber-800',
            'link' => 'text-amber-700 hover:text-amber-900',
            'badge' => 'bg-amber-50 text-amber-900 ring-amber-200/80',
        ],
        'slate' => [
            'border' => 'border-slate-200',
            'accent' => 'bg-slate-500',
            'value' => 'text-slate-800',
            'link' => 'text-slate-700 hover:text-slate-900',
            'badge' => 'bg-slate-50 text-slate-900 ring-slate-200/80',
        ],
        default => [
            'border' => 'border-blue-200',
            'accent' => 'bg-blue-600',
            'value' => 'text-gray-900',
            'link' => 'text-blue-700 hover:text-blue-900',
            'badge' => 'bg-blue-50 text-blue-900 ring-blue-200/80',
        ],
    };
    $styles = $accentStyles;
    $hasBreakdown = $count > 0 && ($bySector !== [] || $byTrainingGroup !== []);
@endphp

<x-page.card {{ $attributes->merge(['class' => 'relative overflow-hidden flex flex-col h-full border '.$styles['border']]) }}>
    <div class="absolute inset-x-0 top-0 h-1 {{ $styles['accent'] }}" aria-hidden="true"></div>

    <div class="pt-1">
        <p class="text-sm font-medium text-gray-700">{{ $label }}</p>

        <div class="mt-2 flex items-baseline gap-2">
            @if ($count > 0)
                <a
                    href="{{ $href }}"
                    class="text-3xl font-bold tabular-nums tracking-tight {{ $styles['value'] }} hover:underline underline-offset-4"
                    title="Ver lista detalhada"
                >
                    {{ number_format($count, 0, ',', '.') }}
                </a>
                <a href="{{ $href }}" class="text-xs font-medium {{ $styles['link'] }}">
                    Ver lista →
                </a>
            @else
                <span class="text-3xl font-bold tabular-nums text-gray-300">0</span>
            @endif
        </div>
    </div>

    @if ($hasBreakdown)
        <div class="mt-4 grid flex-1 grid-cols-1 gap-3 sm:grid-cols-2">
            @if ($bySector !== [])
                <div class="rounded-lg border border-gray-100 bg-gray-50/90 p-3">
                    <div class="flex items-center gap-1.5">
                        <span class="inline-flex h-5 w-5 items-center justify-center rounded bg-white text-[10px] text-gray-500 shadow-sm" aria-hidden="true">
                            <i class="fa-solid fa-building"></i>
                        </span>
                        <p class="text-[11px] font-semibold uppercase tracking-wide text-gray-500">Por área</p>
                    </div>
                    <ul class="mt-2 max-h-36 space-y-1.5 overflow-y-auto pr-0.5">
                        @foreach ($bySector as $row)
                            <li class="flex items-center justify-between gap-2 rounded-md border border-gray-100 bg-white px-2.5 py-1.5 shadow-sm">
                                @if ($row['sector_id'] !== null)
                                    <a
                                        href="{{ route('dashboard', array_merge($filterQuery, ['sector_id' => $row['sector_id'], 'training_group_id' => null])) }}"
                                        class="min-w-0 flex-1 truncate text-xs font-medium text-gray-800 hover:text-blue-700"
                                        title="Filtrar painel por {{ $row['sector_name'] }}"
                                    >
                                        {{ $row['sector_name'] }}
                                    </a>
                                @else
                                    <span class="min-w-0 flex-1 truncate text-xs text-gray-600">{{ $row['sector_name'] }}</span>
                                @endif
                                <span class="inline-flex shrink-0 items-center rounded-full px-2 py-0.5 text-xs font-semibold tabular-nums ring-1 ring-inset {{ $styles['badge'] }}">
                                    {{ number_format($row['total'], 0, ',', '.') }}
                                </span>
                            </li>
                        @endforeach
                    </ul>
                </div>
            @endif

            @if ($byTrainingGroup !== [])
                <div class="rounded-lg border border-gray-100 bg-gray-50/90 p-3 {{ $bySector === [] ? 'sm:col-span-2' : '' }}">
                    <div class="flex items-center gap-1.5">
                        <span class="inline-flex h-5 w-5 items-center justify-center rounded bg-white text-[10px] text-gray-500 shadow-sm" aria-hidden="true">
                            <i class="fa-solid fa-users"></i>
                        </span>
                        <p class="text-[11px] font-semibold uppercase tracking-wide text-gray-500">Por grupo</p>
                    </div>
                    <ul class="mt-2 max-h-36 space-y-1.5 overflow-y-auto pr-0.5">
                        @foreach ($byTrainingGroup as $row)
                            <li class="flex items-center justify-between gap-2 rounded-md border border-gray-100 bg-white px-2.5 py-1.5 shadow-sm">
                                @if ($row['training_group_id'] !== null)
                                    <a
                                        href="{{ route('dashboard', array_merge($filterQuery, ['training_group_id' => $row['training_group_id']])) }}"
                                        class="min-w-0 flex-1 text-xs font-medium text-gray-800 hover:text-blue-700"
                                        title="Filtrar painel por {{ $row['team_name'] }}"
                                    >
                                        <span class="block truncate">{{ $row['team_name'] }}</span>
                                        @if (! empty($row['sector_name']))
                                            <span class="block truncate text-[10px] font-normal text-gray-400">{{ $row['sector_name'] }}</span>
                                        @endif
                                    </a>
                                @else
                                    <span class="min-w-0 flex-1 truncate text-xs text-gray-600">{{ $row['team_name'] }}</span>
                                @endif
                                <span class="inline-flex shrink-0 items-center rounded-full px-2 py-0.5 text-xs font-semibold tabular-nums ring-1 ring-inset {{ $styles['badge'] }}">
                                    {{ number_format($row['total'], 0, ',', '.') }}
                                </span>
                            </li>
                        @endforeach
                    </ul>
                </div>
            @endif
        </div>
    @endif

    <p class="mt-auto pt-3 text-xs leading-relaxed text-gray-500">{{ $description }}</p>
</x-page.card>