@php
    use App\Enums\TrainingDashboardRankingScope;

    /** @var array<string, mixed> $filterQuery */
    /** @var array<string, mixed> $rankingPresentation */
    $presentation = $rankingPresentation;
    $scope = $presentation['rankingScope'];
    $entries = $presentation['rankingEntries'];
    $groupedSections = $presentation['rankingGroupedSections'] ?? null;
@endphp

<x-app-layout>
    <x-page.header title="Ranking / Pódio — 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', $filterQuery) }}" class="w-full justify-center sm:w-auto">
                    Painel BI
                </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>

    @push('styles')
        @vite('resources/css/dashboard-ranking.css')
    @endpush

    <div class="min-w-0 max-w-full space-y-8">
        @include('dashboard._report-nav', ['filterQuery' => $filterQuery])

        @include('dashboard._filters')

        @include('dashboard._ranking-tabs', [
            'filterQuery' => $filterQuery,
            'rankingScope' => $scope,
        ])

        @if($groupedSections === null)
            <x-portal.battery-ranking
                variant="management"
                :show-cta="false"
                :entries="$entries"
                :header-eyebrow="$presentation['rankingHeaderEyebrow']"
                :header-title="$presentation['rankingHeaderTitle']"
                :header-subtitle="$presentation['rankingHeaderSubtitle']"
                :show-area-and-group="$presentation['rankingShowAreaAndGroup']"
                :show-job-title="true"
            />
        @else
            <x-page.card>
                <p class="text-sm text-gray-600">{{ $presentation['rankingHeaderSubtitle'] }}</p>
            </x-page.card>

            <div class="space-y-8">
                @forelse($groupedSections as $section)
                    <x-portal.battery-ranking
                        variant="management"
                        :show-cta="false"
                        :entries="$section['entries']"
                        header-eyebrow="{{ $scope === TrainingDashboardRankingScope::Sector ? 'Por área' : 'Por grupo' }}"
                        :header-title="$section['section_name']"
                        header-subtitle="Top {{ count($section['entries']) }} no escopo dos filtros."
                        :show-area-and-group="$presentation['rankingShowAreaAndGroup']"
                        :show-job-title="true"
                    />
                @empty
                    <x-page.card>
                        <p class="text-sm text-gray-600">
                            Nenhum participante com respostas no escopo dos filtros aplicados.
                        </p>
                    </x-page.card>
                @endforelse
            </div>
        @endif
    </div>
</x-app-layout>