@php
    /** @var list<array<string, mixed>> $topWrongAlternatives */
    $topWrongAlternatives = $topWrongAlternatives ?? [];

    $positionLabel = static function (int $position): string {
        return chr(64 + $position);
    };
@endphp

<x-page.card>
    <h2 class="text-base font-semibold text-gray-900">Erros mais frequentes por pergunta</h2>
    <p class="mt-1 text-xs text-gray-500">
        Alternativas incorretas mais escolhidas (agrupadas por pergunta e opção).
    </p>
    <div class="mt-4 overflow-x-auto">
        <x-table.table>
            <thead class="border-b bg-gray-50">
                <tr>
                    <x-table.th>Pergunta</x-table.th>
                    <x-table.th>Alternativa errada</x-table.th>
                    <x-table.th>Área</x-table.th>
                    <x-table.th>Grupo</x-table.th>
                    <x-table.th class="text-right">Vezes escolhida</x-table.th>
                </tr>
            </thead>
            <tbody class="divide-y">
                @forelse($topWrongAlternatives as $row)
                    <x-dashboard.clickable-question-row
                        :question-id="$row['battery_question_id']"
                        :wrong-position="$row['selected_position']"
                    >
                        <x-table.td class="max-w-xs text-gray-900" title="{{ $row['stem'] }}">
                            {{ \Illuminate\Support\Str::limit($row['stem'], 70) }}
                        </x-table.td>
                        <x-table.td class="text-gray-800">
                            <span class="mr-1 inline-flex rounded bg-red-50 px-1.5 py-0.5 text-xs font-semibold text-red-800">
                                {{ $positionLabel($row['selected_position']) }}
                            </span>
                            {{ $row['alternative_body'] ? \Illuminate\Support\Str::limit($row['alternative_body'], 60) : '—' }}
                        </x-table.td>
                        <x-table.td class="text-gray-700">
                            {{ $row['sector_name'] ?? '—' }}
                        </x-table.td>
                        <x-table.td class="text-gray-700">
                            {{ $row['team_name'] ?? '—' }}
                        </x-table.td>
                        <x-table.td class="text-right font-medium tabular-nums text-red-700">
                            {{ number_format($row['wrong_count'], 0, ',', '.') }}
                        </x-table.td>
                    </x-dashboard.clickable-question-row>
                @empty
                    <tr>
                        <td colspan="5" class="px-4 py-8 text-center text-sm text-gray-500">
                            Nenhum erro registrado para os filtros selecionados.
                        </td>
                    </tr>
                @endforelse
            </tbody>
        </x-table.table>
    </div>
</x-page.card>