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

@section('content')
@php
    $icons = [
        'xp' => '✦', 'coasters' => '🎢', 'parks' => '🏰', 'countries' => '🌍', 'manufacturers' => '🏗️',
        'badges' => '🏆', 'challenges' => '⚡', 'expert_parks' => '📍', 'reputation' => '🛡️', 'best_expertise' => '👑',
    ];
    $targetName = null;
    if ($spotlightTarget) {
        if ($spotlightType === 'manufacturer') {
            $targetName = $spotlightTarget->name;
        } else {
            $tr = $spotlightTarget->translations?->firstWhere('locale', app()->getLocale())
                ?? $spotlightTarget->translations?->firstWhere('locale', 'en')
                ?? $spotlightTarget->translations?->first();
            $targetName = $tr?->name ?: $spotlightTarget->official_name;
        }
    }
    $personalPark = $personalRecords['best_expertise_park'] ?? null;
    $personalParkName = null;
    if ($personalPark) {
        $ptr = $personalPark->translations?->firstWhere('locale', app()->getLocale())
            ?? $personalPark->translations?->firstWhere('locale', 'en')
            ?? $personalPark->translations?->first();
        $personalParkName = $ptr?->name ?: $personalPark->official_name;
    }
@endphp

<section class="hof-hero">
    <div class="container hof-hero-grid">
        <div>
            <span class="eyebrow">{{ __('ui.hof_kicker') }}</span>
            <h1>{{ __('ui.hof_title') }}</h1>
            <p>{{ __('ui.hof_intro') }}</p>
            <div class="hof-hero-actions">
                <a class="button button-primary" href="{{ route('rankings.index', ['scope' => 'community', 'period' => 'season']) }}">{{ __('ui.hof_back_rankings') }}</a>
                <a class="button button-ghost" href="{{ route('experts.index') }}">{{ __('ui.hof_local_experts') }}</a>
            </div>
        </div>
        <div class="hof-crown" aria-hidden="true"><span>👑</span><strong>{{ $eligibleCount }}</strong><small>{{ __('ui.hof_visible_explorers') }}</small></div>
    </div>
</section>

<section class="section hof-legends-section">
    <div class="container">
        <div class="section-heading split-heading">
            <div>
                <span class="eyebrow">{{ __('ui.hof_legends_kicker') }}</span>
                <h2>{{ __('ui.hof_legends_title') }}</h2>
                <p>{{ __('ui.hof_legends_intro') }}</p>
            </div>
        </div>
        <div class="hof-legend-grid">
            @foreach($categories as $metricKey)
                @php $leader = $leaders[$metricKey] ?? null; @endphp
                <a href="{{ route('rankings.hall', ['category' => $metricKey]) }}" class="hof-legend-card {{ $category === $metricKey ? 'is-active' : '' }}">
                    <span class="hof-legend-icon">{{ $icons[$metricKey] ?? '★' }}</span>
                    <small>{{ __('ui.hof_metric_'.$metricKey) }}</small>
                    @if($leader && (int) $leader[$metricKey] > 0)
                        <strong>{{ $leader['user']->username ?: $leader['user']->name }}</strong>
                        <b>{{ number_format((int) $leader[$metricKey], 0, ',', ' ') }}</b>
                    @else
                        <strong>{{ __('ui.hof_no_record') }}</strong><b>—</b>
                    @endif
                </a>
            @endforeach
        </div>
    </div>
</section>

<section class="section section-soft hof-category-section">
    <div class="container">
        <div class="section-heading split-heading">
            <div>
                <span class="eyebrow">{{ __('ui.hof_category_kicker') }}</span>
                <h2>{{ $icons[$category] ?? '★' }} {{ __('ui.hof_metric_'.$category) }}</h2>
                <p>{{ __('ui.hof_category_intro') }}</p>
            </div>
            @if($viewerEntry)
                <div class="hof-my-rank">
                    <span>{{ __('ui.hof_your_rank') }}</span>
                    <strong>#{{ $viewerEntry['position'] }}</strong>
                    <b>{{ number_format((int) $viewerEntry[$category], 0, ',', ' ') }}</b>
                </div>
            @endif
        </div>

        @if($categoryEntries->isNotEmpty())
            <div class="hof-ranking-card">
                @foreach($categoryEntries as $entry)
                    @php
                        $u = $entry['user'];
                        $isMe = (int) $u->id === (int) auth()->id();
                    @endphp
                    <div class="hof-ranking-row {{ $isMe ? 'is-me' : '' }}">
                        <strong class="hof-rank">#{{ $entry['position'] }}</strong>
                        <div class="rankings-avatar is-small">{{ mb_strtoupper(mb_substr((string) ($u->username ?: $u->name), 0, 1)) }}</div>
                        <div class="hof-user">
                            @if($u->username)<a href="{{ route('profiles.public', $u->username) }}">{{ $u->username }}</a>@else<strong>{{ $u->name }}</strong>@endif
                            <small>{{ $isMe ? __('ui.rankings_you') : __('ui.hof_explorer') }}</small>
                        </div>
                        <b class="hof-value">{{ number_format((int) $entry[$category], 0, ',', ' ') }}</b>
                    </div>
                @endforeach
            </div>
        @else
            <div class="empty-state hof-empty"><div class="empty-state-icon">🏁</div><h3>{{ __('ui.hof_empty_title') }}</h3><p>{{ __('ui.hof_empty_text') }}</p></div>
        @endif
    </div>
</section>

<section class="section hof-spotlight-section">
    <div class="container">
        <div class="section-heading">
            <span class="eyebrow">{{ __('ui.hof_spotlight_kicker') }}</span>
            <h2>{{ __('ui.hof_spotlight_title') }}</h2>
            <p>{{ __('ui.hof_spotlight_intro') }}</p>
        </div>
        <form class="hof-spotlight-form" method="get" action="{{ route('rankings.hall') }}">
            <input type="hidden" name="category" value="{{ $category }}">
            <label><span>{{ __('ui.hof_spotlight_type') }}</span>
                <select name="focus" onchange="this.form.target.value=0;this.form.submit()">
                    @foreach($spotlightTypes as $typeKey)<option value="{{ $typeKey }}" @selected($spotlightType === $typeKey)>{{ __('ui.hof_focus_'.$typeKey) }}</option>@endforeach
                </select>
            </label>
            <label><span>{{ __('ui.hof_spotlight_target') }}</span>
                <select name="target">
                    <option value="0">{{ __('ui.hof_spotlight_choose') }}</option>
                    @if($spotlightType === 'park')
                        @foreach($parks as $option)
                            @php $tr = $option->translations->firstWhere('locale', app()->getLocale()) ?? $option->translations->firstWhere('locale', 'en') ?? $option->translations->first(); @endphp
                            <option value="{{ $option->id }}" @selected((int) $spotlightId === (int) $option->id)>{{ $tr?->name ?: $option->official_name }}</option>
                        @endforeach
                    @elseif($spotlightType === 'country')
                        @foreach($countries as $option)
                            @php $tr = $option->translations->firstWhere('locale', app()->getLocale()) ?? $option->translations->firstWhere('locale', 'en') ?? $option->translations->first(); @endphp
                            <option value="{{ $option->id }}" @selected((int) $spotlightId === (int) $option->id)>{{ $tr?->name ?: $option->official_name }}</option>
                        @endforeach
                    @else
                        @foreach($manufacturers as $option)<option value="{{ $option->id }}" @selected((int) $spotlightId === (int) $option->id)>{{ $option->name }}</option>@endforeach
                    @endif
                </select>
            </label>
            <button class="button button-primary" type="submit">{{ __('ui.hof_spotlight_apply') }}</button>
        </form>

        @if($spotlightTarget)
            <div class="hof-spotlight-head"><strong>{{ __('ui.hof_spotlight_for', ['name' => $targetName]) }}</strong><span>{{ __('ui.hof_top_25') }}</span></div>
            @if($spotlightEntries->isNotEmpty())
                <div class="hof-ranking-card is-spotlight">
                    @foreach($spotlightEntries as $entry)
                        @php $u = $entry['user']; @endphp
                        <div class="hof-ranking-row">
                            <strong class="hof-rank">#{{ $entry['position'] }}</strong>
                            <div class="rankings-avatar is-small">{{ mb_strtoupper(mb_substr((string) ($u->username ?: $u->name), 0, 1)) }}</div>
                            <div class="hof-user">
                                @if($u->username)<a href="{{ route('profiles.public', $u->username) }}">{{ $u->username }}</a>@else<strong>{{ $u->name }}</strong>@endif
                                @if($spotlightType === 'park')
                                    <small>🎟️ {{ $entry['visits'] ?? 0 }} · 🎢 {{ $entry['rides'] ?? 0 }} · {{ __('ui.local_experts_tier_'.($entry['tier'] ?? 'progress')) }}</small>
                                @elseif($spotlightType === 'country')
                                    <small>🎢 {{ $entry['coasters'] ?? 0 }} · 🏰 {{ $entry['parks'] ?? 0 }} · 🎟️ {{ $entry['rides'] ?? 0 }}</small>
                                @else
                                    <small>🎢 {{ $entry['coasters'] ?? 0 }} · 🎟️ {{ $entry['rides'] ?? 0 }}</small>
                                @endif
                            </div>
                            <b class="hof-value">{{ number_format((int) $entry['value'], 0, ',', ' ') }}</b>
                        </div>
                    @endforeach
                </div>
            @else
                <div class="hof-inline-empty">{{ __('ui.hof_spotlight_empty') }}</div>
            @endif
        @else
            <div class="hof-inline-empty">{{ __('ui.hof_spotlight_prompt') }}</div>
        @endif
    </div>
</section>

<section class="section section-soft hof-personal-section">
    <div class="container">
        <div class="section-heading">
            <span class="eyebrow">{{ __('ui.hof_personal_kicker') }}</span>
            <h2>{{ __('ui.hof_personal_title') }}</h2>
            <p>{{ __('ui.hof_personal_intro') }}</p>
        </div>
        <div class="hof-personal-grid">
            <article><span>🎟️</span><small>{{ __('ui.hof_record_total_rides') }}</small><strong>{{ number_format($personalRecords['total_rides'], 0, ',', ' ') }}</strong></article>
            <article><span>🎢</span><small>{{ __('ui.hof_metric_coasters') }}</small><strong>{{ $personalRecords['coasters'] }}</strong></article>
            <article><span>🌍</span><small>{{ __('ui.hof_metric_countries') }}</small><strong>{{ $personalRecords['countries'] }}</strong></article>
            <article><span>🏗️</span><small>{{ __('ui.hof_metric_manufacturers') }}</small><strong>{{ $personalRecords['manufacturers'] }}</strong></article>
            <article><span>📅</span><small>{{ __('ui.hof_record_best_day') }}</small><strong>{{ $personalRecords['best_day_count'] }}</strong><em>{{ $personalRecords['best_day_date'] ?: '—' }}</em></article>
            <article><span>🗓️</span><small>{{ __('ui.hof_record_best_year') }}</small><strong>{{ $personalRecords['best_year_count'] }}</strong><em>{{ $personalRecords['best_year'] ?: '—' }}</em></article>
            <article><span>📍</span><small>{{ __('ui.hof_metric_expert_parks') }}</small><strong>{{ $personalRecords['expert_parks'] }}</strong></article>
            <article><span>👑</span><small>{{ __('ui.hof_record_best_expertise') }}</small><strong>{{ (int) data_get($personalRecords, 'best_expertise.score', 0) }}</strong><em>{{ $personalParkName ?: '—' }}</em></article>
            <article><span>🛡️</span><small>{{ __('ui.hof_metric_reputation') }}</small><strong>{{ (int) data_get($personalRecords, 'reputation.score', 0) }}</strong><em>{{ __('ui.local_experts_reputation_'.data_get($personalRecords, 'reputation.tier', 'newcomer')) }}</em></article>
        </div>
    </div>
</section>

<section class="section hof-privacy-section">
    <div class="container"><div class="rankings-privacy-note"><span>🔒</span><div><strong>{{ __('ui.hof_privacy_title') }}</strong><p>{{ __('ui.hof_privacy_text') }}</p></div></div></div>
</section>
@endsection