@php
    /** @var array<string, mixed> $summary */
    /** @var array<string, mixed> $filterQuery */
@endphp

<x-app-layout>
    <x-page.header title="BI — Treinamento">
        <x-slot name="action">
            <div class="flex w-full min-w-0 flex-col gap-2 sm:flex-row sm:flex-wrap">
                <x-ui.button href="{{ route('dashboard.ranking', $filterQuery) }}" class="w-full justify-center sm:w-auto">
                    Ranking / Pódio
                </x-ui.button>
                <x-ui.button href="{{ route('dashboard.report', $filterQuery) }}" class="w-full justify-center sm:w-auto">
                    Relatório
                </x-ui.button>
            </div>
        </x-slot>
    </x-page.header>

    <div class="min-w-0 max-w-full space-y-8">
        @include('dashboard._filters')

        <div class="grid grid-cols-1 items-stretch gap-6 lg:grid-cols-3">
            @include('dashboard._kpi-metric-card', [
                'label' => 'Total de participantes',
                'count' => $summary['total_participants'],
                'href' => route('dashboard.participants', $filterQuery),
                'description' => 'Usuários com perfil de trainee (portal ou equipe), conforme filtros acima.',
                'bySector' => $summary['participants_by_sector'] ?? [],
                'byTrainingGroup' => $summary['participants_by_training_group'] ?? [],
                'filterQuery' => $filterQuery,
                'accent' => 'default',
            ])
            @include('dashboard._kpi-metric-card', [
                'label' => 'Sem login registrado',
                'count' => $summary['participants_without_login'],
                'href' => route('dashboard.participants-without-login', $filterQuery),
                'description' => 'Participantes que nunca autenticaram. A contagem atualiza após o próximo acesso.',
                'bySector' => $summary['participants_without_login_by_sector'] ?? [],
                'byTrainingGroup' => $summary['participants_without_login_by_training_group'] ?? [],
                'filterQuery' => $filterQuery,
                'accent' => 'slate',
            ])
            @include('dashboard._kpi-metric-card', [
                'label' => 'Começou e não finalizou',
                'count' => $summary['in_progress_participants'],
                'href' => route('dashboard.in-progress', $filterQuery),
                'description' => 'Pessoas com questionário em andamento (sessão não concluída).',
                'bySector' => $summary['in_progress_participants_by_sector'] ?? [],
                'byTrainingGroup' => $summary['in_progress_participants_by_training_group'] ?? [],
                'filterQuery' => $filterQuery,
                'accent' => 'amber',
            ])
        </div>

        @include('dashboard._batteries-progress', [
            'batteriesWithProgress' => $summary['batteries_with_progress'] ?? [],
            'filterQuery' => $filterQuery,
        ])

        @include('dashboard._team-ranking', ['teamRanking' => $summary['team_ranking']])

        @include('dashboard._question-charts', [
            'questionsMostCorrect' => $summary['questions_most_correct'],
            'questionsMostErrors' => $summary['questions_most_errors'],
        ])

        @include('dashboard._question-rankings', [
            'questionsMostCorrect' => $summary['questions_most_correct'],
            'questionsMostErrors' => $summary['questions_most_errors'],
        ])

        @push('scripts')
            @vite('resources/js/dashboard-charts.js')
        @endpush

        @include('dashboard._wrong-alternatives', [
            'topWrongAlternatives' => $summary['top_wrong_alternatives'],
        ])

        @include('dashboard._in-progress-sessions', [
            'inProgressSessions' => $summary['in_progress_sessions'],
        ])

        @include('dashboard._participants-progress', [
            'participantsProgress' => $participantsProgress,
            'filterQuery' => $filterQuery,
            'filters' => $filters,
        ])

        @include('dashboard._question-detail-modal')
    </div>
</x-app-layout>