@props([
    'battery' => null,
    'entries' => [],
    'variant' => 'portal',
    'showCta' => true,
    'headerEyebrow' => 'Top 10 participantes',
    'headerTitle' => 'Ranking da bateria',
    'headerSubtitle' => null,
    'showAreaAndGroup' => false,
    'showJobTitle' => false,
])

@php
    use App\Support\PortalPointsFormatter;

    $topThree = array_slice($entries, 0, 3);
    $podiumSlots = [
        ['rank' => 2, 'entry' => $topThree[1] ?? null, 'medal' => 'silver'],
        ['rank' => 1, 'entry' => $topThree[0] ?? null, 'medal' => 'gold'],
        ['rank' => 3, 'entry' => $topThree[2] ?? null, 'medal' => 'bronze'],
    ];

    $formatScore = static function (float|int|string $points): array {
        $display = PortalPointsFormatter::format($points);

        return [
            'display' => $display,
            'full' => $display,
            'compact' => strlen(str_replace('.', '', $display)) >= 7,
        ];
    };
@endphp

@php
    $rankRootClass = match ($variant) {
        'game' => 'qrank qrank--game',
        'management' => 'qrank qrank--management',
        default => 'qrank',
    };
    $resolvedSubtitle = $headerSubtitle ?? ($battery !== null ? $battery->title : null);
@endphp

<div {{ $attributes->merge(['class' => $rankRootClass]) }}>
    <header class="qrank__header">
        <span class="qrank__header-glow qrank__header-glow--a" aria-hidden="true"></span>
        <span class="qrank__header-glow qrank__header-glow--b" aria-hidden="true"></span>

        <div class="qrank__header-inner">
            <div class="min-w-0">
                <p class="qrank__eyebrow">
                    <span aria-hidden="true">🏆</span>
                    {{ $headerEyebrow }}
                </p>
                <h2 class="qrank__title">{{ $headerTitle }}</h2>
                @if($resolvedSubtitle)
                    <p class="qrank__subtitle">{{ $resolvedSubtitle }}</p>
                @endif
            </div>
            @if($showCta)
                <a href="{{ route('portal.questionnaire.index') }}" class="qrank__cta">
                    <i class="fa-solid fa-gamepad" aria-hidden="true"></i>
                    Ir à bateria de perguntas
                </a>
            @endif
        </div>
    </header>

    <div class="qrank__body">
        @if(count($entries) === 0)
            <div class="qrank__empty">
                <span class="text-3xl" aria-hidden="true">🎯</span>
                <p class="mt-3 text-sm text-slate-600">
                    @if($variant === 'management')
                        Nenhum participante com respostas no escopo dos filtros aplicados.
                    @else
                        Ainda não há participantes com respostas nesta bateria.
                    @endif
                </p>
                @if($variant !== 'management')
                    <p class="mt-1 text-xs text-slate-500">Seja o primeiro a pontuar no questionário!</p>
                @endif
            </div>
        @else
            @if(count($topThree) > 0)
                <section class="qrank__stage" aria-label="Pódio do ranking">
                    <div class="qrank__stage-glow" aria-hidden="true"></div>
                    <div class="qrank__stage-floor" aria-hidden="true"></div>

                    <div class="qrank__podium" role="group">
                        @foreach($podiumSlots as $slot)
                            @php
                                $row = $slot['entry'];
                                $isYou = $row !== null && ($row['is_current_user'] ?? false);
                                $score = $row !== null ? $formatScore($row['total_points']) : null;
                            @endphp
                            <div class="qrank__slot qrank__slot--rank-{{ $slot['rank'] }}">
                                @if($row !== null)
                                    <div @class([
                                        'qrank__card',
                                        'qrank__card--gold' => $slot['medal'] === 'gold',
                                        'qrank__card--silver' => $slot['medal'] === 'silver',
                                        'qrank__card--bronze' => $slot['medal'] === 'bronze',
                                        'qrank__card--you' => $isYou,
                                    ])>
                                        @if($slot['rank'] === 1)
                                            <span class="qrank__crown" aria-hidden="true">👑</span>
                                        @endif

                                        <div @class([
                                            'qrank__medal',
                                            'qrank__medal--gold' => $slot['medal'] === 'gold',
                                            'qrank__medal--silver' => $slot['medal'] === 'silver',
                                            'qrank__medal--bronze' => $slot['medal'] === 'bronze',
                                        ])>
                                            @if($slot['medal'] === 'gold')
                                                <span class="text-2xl leading-none" aria-hidden="true">🥇</span>
                                            @elseif($slot['medal'] === 'silver')
                                                <span class="text-xl leading-none" aria-hidden="true">🥈</span>
                                            @else
                                                <span class="text-xl leading-none" aria-hidden="true">🥉</span>
                                            @endif
                                        </div>

                                        <p class="qrank__name">{{ $row['name'] }}</p>
                                        @if($showJobTitle && ($row['job_title'] ?? null))
                                            <p class="qrank__list-meta text-xs text-slate-500">{{ $row['job_title'] }}</p>
                                        @endif
                                        @if($isYou)
                                            <span class="qrank__you-badge">Você</span>
                                        @endif

                                        <div
                                            @class([
                                                'qrank__score',
                                                'qrank__score--gold' => $slot['medal'] === 'gold',
                                                'qrank__score--silver' => $slot['medal'] === 'silver',
                                                'qrank__score--bronze' => $slot['medal'] === 'bronze',
                                                'qrank__score--compact' => $score['compact'],
                                            ])
                                            aria-label="{{ $score['full'] }} pontos"
                                        >
                                            <p class="qrank__score-row">
                                                <span @class([
                                                    'qrank__score-int',
                                                    'qrank__score-int--gold' => $slot['medal'] === 'gold',
                                                    'qrank__score-int--silver' => $slot['medal'] === 'silver',
                                                    'qrank__score-int--bronze' => $slot['medal'] === 'bronze',
                                                ])>{{ $score['display'] }}</span>
                                            </p>
                                            <span class="qrank__score-label">pts</span>
                                        </div>
                                    </div>

                                    <div @class([
                                        'qrank__pedestal',
                                        'qrank__pedestal--gold' => $slot['medal'] === 'gold',
                                        'qrank__pedestal--silver' => $slot['medal'] === 'silver',
                                        'qrank__pedestal--bronze' => $slot['medal'] === 'bronze',
                                    ])>
                                        <span class="qrank__pedestal-shine" aria-hidden="true"></span>
                                        <span class="qrank__pedestal-rank">{{ $slot['rank'] }}º</span>
                                    </div>
                                @else
                                    <div class="qrank__slot-empty">—</div>
                                    <div class="qrank__pedestal qrank__pedestal--empty"></div>
                                @endif
                            </div>
                        @endforeach
                    </div>
                </section>
            @endif

            <section class="qrank__list">
                <h3 class="qrank__list-title">
                    Classificação completa
                    <span>({{ count($entries) }} {{ count($entries) === 1 ? 'participante' : 'participantes' }})</span>
                </h3>
                <ul class="qrank__list-items" role="list">
                    @foreach($entries as $row)
                        @php
                            $listScore = $formatScore($row['total_points']);
                        @endphp
                        <li @class([
                            'qrank__list-item',
                            'qrank__list-item--you' => $row['is_current_user'],
                            'qrank__list-item--top1' => $row['rank'] === 1 && ! $row['is_current_user'],
                            'qrank__list-item--top2' => $row['rank'] === 2 && ! $row['is_current_user'],
                            'qrank__list-item--top3' => $row['rank'] === 3 && ! $row['is_current_user'],
                        ])>
                            <span @class([
                                'qrank__list-rank',
                                'qrank__list-rank--1' => $row['rank'] === 1,
                                'qrank__list-rank--2' => $row['rank'] === 2,
                                'qrank__list-rank--3' => $row['rank'] === 3,
                                'qrank__list-rank--default' => $row['rank'] > 3,
                            ])>
                                @if($row['rank'] === 1)
                                    <span class="sr-only">1º lugar</span><span aria-hidden="true">🥇</span>
                                @elseif($row['rank'] === 2)
                                    <span class="sr-only">2º lugar</span><span aria-hidden="true">🥈</span>
                                @elseif($row['rank'] === 3)
                                    <span class="sr-only">3º lugar</span><span aria-hidden="true">🥉</span>
                                @else
                                    {{ $row['rank'] }}
                                @endif
                            </span>
                            <div class="qrank__list-main">
                                <p class="qrank__list-name">
                                    {{ $row['name'] }}
                                    @if($row['is_current_user'])
                                        <span class="qrank__you-badge">Você</span>
                                    @endif
                                </p>
                                @if($showJobTitle && ($row['job_title'] ?? null))
                                    <p class="qrank__list-meta text-xs text-slate-500">
                                        {{ $row['job_title'] }}
                                    </p>
                                @endif
                                @if($showAreaAndGroup && (($row['sector_name'] ?? null) || ($row['team_name'] ?? null)))
                                    <p class="qrank__list-meta text-xs text-slate-500">
                                        @if($row['sector_name'] ?? null)
                                            <span>{{ $row['sector_name'] }}</span>
                                        @endif
                                        @if(($row['sector_name'] ?? null) && ($row['team_name'] ?? null))
                                            <span class="mx-1" aria-hidden="true">·</span>
                                        @endif
                                        @if($row['team_name'] ?? null)
                                            <span>{{ $row['team_name'] }}</span>
                                        @endif
                                    </p>
                                @endif
                                @if(($row['elapsed_seconds'] ?? 0) > 0)
                                    <p class="qrank__list-time">
                                        <i class="fa-regular fa-clock mr-1" aria-hidden="true"></i>
                                        {{ sprintf('%02d:%02d', intdiv($row['elapsed_seconds'], 60), $row['elapsed_seconds'] % 60) }}
                                    </p>
                                @endif
                            </div>
                            <div class="qrank__list-points" aria-label="{{ $listScore['full'] }} pontos">
                                <div @class([
                                    'qrank__list-points-box',
                                    'qrank__list-points-box--compact' => $listScore['compact'],
                                ])>
                                    <p class="qrank__list-score-row">
                                        <span class="qrank__list-score-int">{{ $listScore['display'] }}</span>
                                    </p>
                                    <span class="qrank__score-label">pts</span>
                                </div>
                            </div>
                        </li>
                    @endforeach
                </ul>
            </section>
        @endif
    </div>
</div>