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

<div class="grid min-w-0 grid-cols-1 gap-6 xl:grid-cols-2">
    <x-page.card>
        <h2 class="text-base font-semibold text-gray-900">Perguntas com mais acertos</h2>
        <p class="mt-1 text-xs text-gray-500">
            Ordenadas pelo número de respostas corretas (desempate: % de acerto).
        </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>Área / Grupo</x-table.th>
                        <x-table.th class="text-right">Respostas</x-table.th>
                        <x-table.th class="text-right">Acertos</x-table.th>
                        <x-table.th class="text-right">% acerto</x-table.th>
                    </tr>
                </thead>
                <tbody class="divide-y">
                    @forelse($questionsMostCorrect as $row)
                        <x-dashboard.clickable-question-row :question-id="$row['battery_question_id']">
                            <x-table.td class="max-w-xs text-gray-900" title="{{ $row['stem'] }}">
                                {{ \Illuminate\Support\Str::limit($row['stem'], 80) }}
                            </x-table.td>
                            <x-table.td class="text-xs text-gray-700">
                                <div class="font-medium text-gray-900">{{ $row['sector_name'] ?? 'Sem área' }}</div>
                                <div class="mt-0.5">{{ $row['team_name'] ?? 'Sem grupo' }}</div>
                            </x-table.td>
                            <x-table.td class="text-right tabular-nums">{{ number_format($row['total_answers'], 0, ',', '.') }}</x-table.td>
                            <x-table.td class="text-right font-medium tabular-nums text-green-700">
                                {{ number_format($row['correct_count'], 0, ',', '.') }}
                            </x-table.td>
                            <x-table.td class="text-right tabular-nums text-gray-700">
                                {{ number_format($row['success_rate'], 1, ',', '.') }}%
                            </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">
                                Nenhuma resposta registrada para os filtros selecionados.
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </x-table.table>
        </div>
    </x-page.card>

    <x-page.card>
        <h2 class="text-base font-semibold text-gray-900">Perguntas com mais erros</h2>
        <p class="mt-1 text-xs text-gray-500">
            Ordenadas pelo número de respostas incorretas (desempate: % de erro).
        </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>Área / Grupo</x-table.th>
                        <x-table.th class="text-right">Respostas</x-table.th>
                        <x-table.th class="text-right">Erros</x-table.th>
                        <x-table.th class="text-right">% erro</x-table.th>
                    </tr>
                </thead>
                <tbody class="divide-y">
                    @forelse($questionsMostErrors as $row)
                        <x-dashboard.clickable-question-row :question-id="$row['battery_question_id']">
                            <x-table.td class="max-w-xs text-gray-900" title="{{ $row['stem'] }}">
                                {{ \Illuminate\Support\Str::limit($row['stem'], 80) }}
                            </x-table.td>
                            <x-table.td class="text-xs text-gray-700">
                                <div class="font-medium text-gray-900">{{ $row['sector_name'] ?? 'Sem área' }}</div>
                                <div class="mt-0.5">{{ $row['team_name'] ?? 'Sem grupo' }}</div>
                            </x-table.td>
                            <x-table.td class="text-right tabular-nums">{{ number_format($row['total_answers'], 0, ',', '.') }}</x-table.td>
                            <x-table.td class="text-right font-medium tabular-nums text-red-700">
                                {{ number_format($row['incorrect_count'], 0, ',', '.') }}
                            </x-table.td>
                            <x-table.td class="text-right tabular-nums text-gray-700">
                                {{ number_format($row['error_rate'], 1, ',', '.') }}%
                            </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">
                                Nenhuma resposta registrada para os filtros selecionados.
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </x-table.table>
        </div>
    </x-page.card>
</div>