@extends('layouts.app')
@section('title', __('ui.rankings_title').' — Coaster World')

@section('content')
@php
    $queryBase = [
        'scope' => $scope,
        'period' => $period,
        'metric' => $metric,
    ];
    if ($selectedGroup) $queryBase['group'] = $selectedGroup->slug;
    if ($period === 'year' && $year) $queryBase['year'] = $year;

    $metricIcons = [
        'xp' => '✦',
        'coasters' => '🎢',
        'parks' => '🏰',
        'badges' => '🏆',
        'challenges' => '⚡',
    ];

    $periodLabel = match($period) {
        'month' => $from?->locale(app()->getLocale())->translatedFormat('F Y'),
        'season' => __('ui.rankings_period_season_label', ['year' => $from?->format('Y')]),
        'year' => $from?->format('Y'),
        default => __('ui.rankings_period_all'),
    };

    $hasActivity = $entries->contains(fn ($entry) => (int) $entry[$metric] > 0);
@endphp

<section class="rankings-hero">
    <div class="container rankings-hero-grid">
        <div>
            <span class="eyebrow">{{ __('ui.rankings_kicker') }}</span>
            <h1>{{ __('ui.rankings_title') }}</h1>
            <p>{{ __('ui.rankings_intro') }}</p>
            <div class="rankings-hero-actions">
                <a href="{{ route('progression') }}" class="button button-primary">{{ __('ui.rankings_progression_action') }}</a>
                <a href="{{ route('rankings.hall') }}" class="button button-ghost">{{ __('ui.rankings_hall_action') }}</a>
                <a href="{{ route('profile') }}" class="button button-ghost">{{ __('ui.rankings_profile_action') }}</a>
            </div>
        </div>
        <div class="rankings-hero-medal" aria-hidden="true">
            <span>🏆</span>
            <i>1</i>
        </div>
    </div>
</section>

<section class="section rankings-controls-section">
    <div class="container">
        <div class="rankings-scope-tabs" role="navigation" aria-label="{{ __('ui.rankings_scope') }}">
            @foreach(['friends', 'group', 'community'] as $scopeKey)
                @php
                    $scopeParams = array_merge($queryBase, ['scope' => $scopeKey]);
                    if ($scopeKey === 'group' && !$selectedGroup && $groups->isNotEmpty()) {
                        $scopeParams['group'] = $groups->first()->slug;
                    }
                    if ($scopeKey !== 'group') unset($scopeParams['group']);
                @endphp
                <a href="{{ route('rankings.index', $scopeParams) }}" class="rankings-scope-tab {{ $scope === $scopeKey ? 'is-active' : '' }}">
                    <strong>{{ __('ui.rankings_scope_'.$scopeKey) }}</strong>
                    <small>{{ __('ui.rankings_scope_'.$scopeKey.'_help') }}</small>
                </a>
            @endforeach
        </div>

        @if($scope === 'group')
            <form method="get" action="{{ route('rankings.index') }}" class="rankings-group-picker">
                <input type="hidden" name="scope" value="group">
                <input type="hidden" name="period" value="{{ $period }}">
                <input type="hidden" name="metric" value="{{ $metric }}">
                @if($period === 'year' && $year)<input type="hidden" name="year" value="{{ $year }}">@endif
                <label for="ranking-group">{{ __('ui.rankings_group_choose') }}</label>
                <select id="ranking-group" name="group" onchange="this.form.submit()">
                    @foreach($groups as $groupOption)
                        <option value="{{ $groupOption->slug }}" @selected($selectedGroup?->id === $groupOption->id)>
                            {{ $groupOption->name }} · {{ $groupOption->active_members_count }}
                        </option>
                    @endforeach
                </select>
            </form>
        @endif

        <div class="rankings-filter-bar">
            <div class="rankings-filter-block">
                <span>{{ __('ui.rankings_period') }}</span>
                <div class="rankings-pill-row">
                    @foreach($periods as $periodKey)
                        <a href="{{ route('rankings.index', array_merge($queryBase, ['period' => $periodKey])) }}" class="{{ $period === $periodKey ? 'is-active' : '' }}">
                            {{ __('ui.rankings_period_'.$periodKey) }}
                        </a>
                    @endforeach
                </div>
            </div>
            @if($period === 'year')
                <form class="rankings-year-picker" method="get" action="{{ route('rankings.index') }}">
                    <input type="hidden" name="scope" value="{{ $scope }}">
                    <input type="hidden" name="period" value="year">
                    <input type="hidden" name="metric" value="{{ $metric }}">
                    @if($selectedGroup)<input type="hidden" name="group" value="{{ $selectedGroup->slug }}">@endif
                    <label for="ranking-year">{{ __('ui.rankings_year_choose') }}</label>
                    <select id="ranking-year" name="year" onchange="this.form.submit()">
                        @foreach($yearOptions as $yearOption)
                            <option value="{{ $yearOption }}" @selected((int) $year === (int) $yearOption)>{{ $yearOption }}</option>
                        @endforeach
                    </select>
                </form>
            @endif
            <div class="rankings-filter-block rankings-metric-filter">
                <span>{{ __('ui.rankings_metric') }}</span>
                <div class="rankings-pill-row">
                    @foreach($metrics as $metricKey)
                        <a href="{{ route('rankings.index', array_merge($queryBase, ['metric' => $metricKey])) }}" class="{{ $metric === $metricKey ? 'is-active' : '' }}">
                            <i>{{ $metricIcons[$metricKey] }}</i>{{ __('ui.rankings_metric_'.$metricKey) }}
                        </a>
                    @endforeach
                </div>
            </div>
        </div>

        <div class="rankings-context-line">
            <span>{{ $periodLabel }}</span>
            <span>·</span>
            <span>{{ __('ui.rankings_scope_count', ['count' => $eligibleCount]) }}</span>
            @if($selectedGroup)
                <span>·</span>
                <strong>{{ $selectedGroup->name }}</strong>
            @endif
        </div>
    </div>
</section>

<section class="section section-soft rankings-you-section">
    <div class="container">
        <div class="section-heading split-heading">
            <div>
                <span class="eyebrow">{{ __('ui.rankings_you_kicker') }}</span>
                <h2>{{ __('ui.rankings_your_positions') }}</h2>
                <p>{{ __('ui.rankings_your_positions_intro') }}</p>
            </div>
        </div>
        <div class="rankings-you-grid">
            @foreach($metrics as $metricKey)
                @php
                    $position = $viewerPositions[$metricKey] ?? ['position' => null, 'value' => 0];
                @endphp
                <a href="{{ route('rankings.index', array_merge($queryBase, ['metric' => $metricKey])) }}" class="rankings-you-card {{ $metric === $metricKey ? 'is-active' : '' }}">
                    <i>{{ $metricIcons[$metricKey] }}</i>
                    <div>
                        <span>{{ __('ui.rankings_metric_'.$metricKey) }}</span>
                        <strong>{{ $position['position'] ? '#'.$position['position'] : '—' }}</strong>
                    </div>
                    <b>{{ number_format((int) $position['value'], 0, ',', ' ') }}{{ $metricKey === 'xp' ? ' XP' : '' }}</b>
                </a>
            @endforeach
        </div>
    </div>
</section>

@if($hasActivity)
<section class="section rankings-podium-section">
    <div class="container">
        <div class="section-heading">
            <span class="eyebrow">{{ __('ui.rankings_podium_kicker') }}</span>
            <h2>{{ __('ui.rankings_podium_title') }}</h2>
            <p>{{ __('ui.rankings_podium_intro', ['metric' => __('ui.rankings_metric_'.$metric)]) }}</p>
        </div>
        <div class="rankings-podium">
            @foreach($podium as $entry)
                @php
                    $entryUser = $entry['user'];
                    $displayName = $entryUser?->username ?: $entryUser?->name;
                    $countryTranslation = $entryUser?->country?->translations?->firstWhere('locale', app()->getLocale())
                        ?? $entryUser?->country?->translations?->firstWhere('locale', 'en');
                    $countryName = $countryTranslation?->name ?: $entryUser?->country?->official_name;
                    $isMe = $entryUser?->id === $viewer->id;
                @endphp
                <article class="rankings-podium-card {{ $isMe ? 'is-me' : '' }}" data-rank="{{ $entry['position'] }}">
                    <div class="rankings-podium-rank">
                        {{ $entry['position'] === 1 ? '🥇' : ($entry['position'] === 2 ? '🥈' : '🥉') }}
                    </div>
                    <div class="rankings-avatar">{{ mb_strtoupper(mb_substr((string) $displayName, 0, 1)) }}</div>
                    <div class="rankings-podium-copy">
                        <span>#{{ $entry['position'] }} @if($isMe) · {{ __('ui.rankings_you') }} @endif</span>
                        @if($entryUser?->username)
                            <a href="{{ route('profiles.public', $entryUser->username) }}">{{ $displayName }}</a>
                        @else
                            <strong>{{ $displayName }}</strong>
                        @endif
                        <small>@if($countryName)<x-country-label :code="$entryUser?->country?->iso2" :name="$countryName" size="small" />@else{{ __('ui.rankings_explorer') }}@endif · {{ __('ui.rankings_level_value', ['level' => $entry['explorer_level']]) }}</small>
                    </div>
                    <div class="rankings-podium-value">
                        <strong>{{ number_format((int) $entry[$metric], 0, ',', ' ') }}</strong>
                        <span>{{ __('ui.rankings_metric_'.$metric) }}{{ $metric === 'xp' ? ' XP' : '' }}</span>
                    </div>
                    <div class="rankings-podium-mini">
                        <span>🎢 {{ $entry['coasters'] }}</span>
                        <span>🏰 {{ $entry['parks'] }}</span>
                        <span>🏆 {{ $entry['badges'] }}</span>
                    </div>
                </article>
            @endforeach
        </div>
    </div>
</section>

<section class="section rankings-table-section">
    <div class="container">
        <div class="section-heading split-heading">
            <div>
                <span class="eyebrow">{{ __('ui.rankings_table_kicker') }}</span>
                <h2>{{ __('ui.rankings_table_title') }}</h2>
                <p>{{ __('ui.rankings_table_intro') }}</p>
            </div>
            <span class="rankings-top-count">{{ __('ui.rankings_top_count', ['count' => min(50, $eligibleCount)]) }}</span>
        </div>

        <div class="rankings-table-card">
            <div class="rankings-table-head">
                <span>{{ __('ui.rankings_position') }}</span>
                <span>{{ __('ui.rankings_explorer') }}</span>
                <span>{{ __('ui.rankings_metric_xp') }}</span>
                <span>{{ __('ui.rankings_metric_coasters') }}</span>
                <span>{{ __('ui.rankings_metric_parks') }}</span>
                <span>{{ __('ui.rankings_metric_badges') }}</span>
                <span>{{ __('ui.rankings_metric_challenges') }}</span>
            </div>
            <div class="rankings-table-body">
                @foreach($rows as $entry)
                    @php
                        $entryUser = $entry['user'];
                        $displayName = $entryUser?->username ?: $entryUser?->name;
                        $isMe = $entryUser?->id === $viewer->id;
                    @endphp
                    <div class="rankings-table-row {{ $isMe ? 'is-me' : '' }}">
                        <strong class="rankings-row-position">#{{ $entry['position'] }}</strong>
                        <div class="rankings-row-user">
                            <div class="rankings-avatar is-small">{{ mb_strtoupper(mb_substr((string) $displayName, 0, 1)) }}</div>
                            <div>
                                @if($entryUser?->username)
                                    <a href="{{ route('profiles.public', $entryUser->username) }}">{{ $displayName }}</a>
                                @else
                                    <strong>{{ $displayName }}</strong>
                                @endif
                                <small>{{ __('ui.rankings_level_value', ['level' => $entry['explorer_level']]) }} @if($isMe) · {{ __('ui.rankings_you') }} @endif</small>
                            </div>
                        </div>
                        <b class="{{ $metric === 'xp' ? 'is-selected' : '' }}">{{ number_format($entry['xp'], 0, ',', ' ') }}</b>
                        <b class="{{ $metric === 'coasters' ? 'is-selected' : '' }}">{{ $entry['coasters'] }}</b>
                        <b class="{{ $metric === 'parks' ? 'is-selected' : '' }}">{{ $entry['parks'] }}</b>
                        <b class="{{ $metric === 'badges' ? 'is-selected' : '' }}">{{ $entry['badges'] }}</b>
                        <b class="{{ $metric === 'challenges' ? 'is-selected' : '' }}">{{ $entry['challenges'] }}</b>
                    </div>
                @endforeach
            </div>
        </div>

        @if($viewerEntry && !$viewerInTop)
            @php
                $displayName = $viewerEntry['user']?->username ?: $viewerEntry['user']?->name;
            @endphp
            <div class="rankings-outside-top">
                <span>{{ __('ui.rankings_rank_outside_top') }}</span>
                <strong>#{{ $viewerEntry['position'] }}</strong>
                <div>{{ $displayName }}</div>
                <b>{{ number_format((int) $viewerEntry[$metric], 0, ',', ' ') }} {{ $metric === 'xp' ? 'XP' : __('ui.rankings_metric_'.$metric) }}</b>
            </div>
        @endif
    </div>
</section>
@endif

@if(!$hasActivity)
<section class="section rankings-empty-section">
    <div class="container">
        <div class="empty-state rankings-empty">
            <div class="empty-state-icon">🏁</div>
            <h2>{{ __('ui.rankings_no_data_title') }}</h2>
            <p>{{ __('ui.rankings_no_data_text') }}</p>
            <a href="{{ route('progression') }}" class="button button-primary">{{ __('ui.rankings_progression_action') }}</a>
        </div>
    </div>
</section>
@endif

<section class="section rankings-privacy-section">
    <div class="container">
        <div class="rankings-privacy-note">
            <span>🔒</span>
            <div>
                <strong>{{ __('ui.rankings_privacy_title') }}</strong>
                <p>{{ __('ui.rankings_privacy_note') }}</p>
                @if(in_array($period, ['month', 'season'], true))
                    <small>{{ __('ui.rankings_date_precision_note') }}</small>
                @endif
            </div>
        </div>
    </div>
</section>
@endsection