@php
    /** @var list<array{rank: int, team_name: string, sector_name: string|null, participants_scored: int, average_points: float, total_points: float}> $teamRanking */
    $teamRanking = $teamRanking ?? [];
@endphp

<x-page.card>
    <h2 class="text-base font-semibold text-gray-900">Ranking por time</h2>
    <p class="mt-1 text-xs text-gray-500">
        Grupos de treinamento ordenados pela média de pontos em sessões com respostas.
        O período dos filtros refere-se à última atualização da sessão do questionário.
    </p>

    <div class="mt-4 overflow-x-auto">
        <x-table.table>
            <thead class="border-b bg-gray-50">
                <tr>
                    <x-table.th class="w-16">Pos.</x-table.th>
                    <x-table.th>Time (grupo)</x-table.th>
                    <x-table.th>Área</x-table.th>
                    <x-table.th class="text-right">Participantes pontuando</x-table.th>
                    <x-table.th class="text-right">Média de pontos</x-table.th>
                    <x-table.th class="text-right">Soma de pontos</x-table.th>
                </tr>
            </thead>
            <tbody class="divide-y">
                @forelse($teamRanking as $row)
                    <tr @class([
                        'hover:bg-gray-50',
                        'bg-amber-50/60' => $row['rank'] === 1,
                        'bg-slate-50/50' => $row['rank'] === 2,
                        'bg-orange-50/40' => $row['rank'] === 3,
                    ])>
                        <x-table.td class="font-semibold tabular-nums text-gray-900">
                            @if($row['rank'] === 1)
                                <span aria-hidden="true">🥇</span>
                            @elseif($row['rank'] === 2)
                                <span aria-hidden="true">🥈</span>
                            @elseif($row['rank'] === 3)
                                <span aria-hidden="true">🥉</span>
                            @else
                                {{ $row['rank'] }}º
                            @endif
                        </x-table.td>
                        <x-table.td class="font-medium text-gray-900">{{ $row['team_name'] }}</x-table.td>
                        <x-table.td class="text-gray-600">{{ $row['sector_name'] ?? '—' }}</x-table.td>
                        <x-table.td class="text-right tabular-nums">{{ number_format($row['participants_scored'], 0, ',', '.') }}</x-table.td>
                        <x-table.td class="text-right font-semibold tabular-nums text-gray-900">
                            {{ number_format($row['average_points'], 2, ',', '.') }}
                        </x-table.td>
                        <x-table.td class="text-right tabular-nums text-gray-700">
                            {{ number_format($row['total_points'], 2, ',', '.') }}
                        </x-table.td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="6" class="px-4 py-8 text-center text-sm text-gray-500">
                            Nenhum time com respostas no questionário para os filtros selecionados.
                        </td>
                    </tr>
                @endforelse
            </tbody>
        </x-table.table>
    </div>
</x-page.card>