@php
    use Illuminate\Support\Str;

    /** @var list<array<string, mixed>> $questionsMostCorrect */
    /** @var list<array<string, mixed>> $questionsMostErrors */
    $chartLimit = 8;
    $chartPayload = [
        'mostCorrect' => collect($questionsMostCorrect ?? [])
            ->take($chartLimit)
            ->map(fn (array $row): array => [
                'label' => Str::limit((string) $row['stem'], 80),
                'fullLabel' => (string) $row['stem'],
                'rate' => (float) ($row['success_rate'] ?? 0),
            ])
            ->values()
            ->all(),
        'mostErrors' => collect($questionsMostErrors ?? [])
            ->take($chartLimit)
            ->map(fn (array $row): array => [
                'label' => Str::limit((string) $row['stem'], 80),
                'fullLabel' => (string) $row['stem'],
                'rate' => (float) ($row['error_rate'] ?? 0),
            ])
            ->values()
            ->all(),
    ];
    $hasChartData = count($chartPayload['mostCorrect']) > 0 || count($chartPayload['mostErrors']) > 0;
@endphp

<x-page.card>
    <h2 class="text-base font-semibold text-gray-900">Desempenho por pergunta</h2>
    <p class="mt-1 text-xs text-gray-500">
        Top {{ $chartLimit }} perguntas — barras horizontais por taxa de acerto e de erro (mesmos filtros das tabelas abaixo).
    </p>

    @if (! $hasChartData)
        <p class="mt-6 rounded-lg border border-dashed border-gray-200 bg-gray-50 px-4 py-10 text-center text-sm text-gray-500">
            Nenhuma resposta registrada para exibir gráficos com os filtros atuais.
        </p>
    @else
        <div class="mt-6 grid min-w-0 grid-cols-1 gap-8 xl:grid-cols-2">
            <div>
                <h3 class="mb-3 text-sm font-medium text-green-800">% de acerto</h3>
                <div data-chart-wrapper @class(['relative min-w-0 max-w-full w-full overflow-hidden', 'hidden' => count($chartPayload['mostCorrect']) === 0])>
                    <canvas id="chart-questions-correct" role="img" aria-label="Gráfico de taxa de acerto por pergunta"></canvas>
                </div>
                @if (count($chartPayload['mostCorrect']) === 0)
                    <p class="text-sm text-gray-500">Sem dados de acerto para o período.</p>
                @endif
            </div>

            <div>
                <h3 class="mb-3 text-sm font-medium text-red-800">% de erro</h3>
                <div data-chart-wrapper @class(['relative min-w-0 max-w-full w-full overflow-hidden', 'hidden' => count($chartPayload['mostErrors']) === 0])>
                    <canvas id="chart-questions-errors" role="img" aria-label="Gráfico de taxa de erro por pergunta"></canvas>
                </div>
                @if (count($chartPayload['mostErrors']) === 0)
                    <p class="text-sm text-gray-500">Sem dados de erro para o período.</p>
                @endif
            </div>
        </div>

        <script id="dashboard-question-charts-data" type="application/json">@json($chartPayload)</script>
    @endif
</x-page.card>