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

@section('content')
<section class="progression-hub-hero">
    <div class="container progression-hub-hero-grid">
        <div>
            <span class="eyebrow">{{ __('ui.progression_hub_kicker') }}</span>
            <h1>{{ __('ui.progression_hub_title') }}</h1>
            <p>{{ __('ui.progression_hub_intro') }}</p>
            <div class="progression-hub-actions">
                <a href="{{ route('binder.index') }}" class="button button-primary">{{ __('ui.binder_open_action') }}</a>
                <a href="#progression-badges" class="button button-ghost">{{ __('ui.progression_hub_badges_action') }}</a>
                <a href="{{ route('rankings.index') }}" class="button button-ghost">{{ __('ui.rankings_nav') }}</a>
            </div>
        </div>
        <div class="progression-level-orbit">
            <div>
                <small>{{ __('ui.progression_explorer_rank_'.$explorerRankKey) }}</small>
                <strong>{{ $explorerLevel }}</strong>
                <span>{{ __('ui.progression_explorer_level') }}</span>
                <div class="progression-orbit-progress" aria-label="{{ __('ui.progression_global_progress') }}"><i style="width: {{ $explorerLevelPercent }}%"></i></div>
                <em>{{ $totalXp }} XP · {{ __('ui.progression_global_remaining', ['xp' => $explorerXpRemaining]) }}</em>
            </div>
        </div>
    </div>
</section>

<section class="progression-hub-stats">
    <div class="container">
        <div class="progression-hub-stat-grid">
            <div><span>{{ __('ui.progression_hub_coasters') }}</span><strong>{{ $metrics['coaster_count'] }}</strong></div>
            <div><span>{{ __('ui.progression_hub_parks') }}</span><strong>{{ $metrics['park_count'] }}</strong></div>
            <div><span>{{ __('ui.progression_hub_countries') }}</span><strong>{{ $metrics['country_count'] }}</strong></div>
            <div><span>{{ __('ui.progression_hub_manufacturers') }}</span><strong>{{ $metrics['manufacturer_count'] }}</strong></div>
            <div><span>{{ __('ui.progression_hub_challenges') }}</span><strong>{{ $metrics['challenge_completed_count'] }}</strong></div>
            <div><span>{{ __('ui.progression_hub_badges') }}</span><strong>{{ $unlocks->pluck('achievement_id')->unique()->count() }} / {{ $achievements->count() }}</strong><small>{{ $achievementCompletionPercent }}% {{ __('ui.progression_completed_short') }}</small></div>
        </div>
    </div>
</section>

@if($skills->isNotEmpty())
<section class="section">
    <div class="container">
        <div class="section-heading">
            <span class="eyebrow">{{ __('ui.progression_skills_kicker') }}</span>
            <h2>{{ __('ui.progression_skills_title') }}</h2>
            <p>{{ __('ui.progression_skills_intro') }}</p>
        </div>
        <div class="progression-skill-grid">
            @foreach($skills as $userSkill)
                @php
                    $skill = $userSkill->skill;
                    $tr = $skill?->translations?->firstWhere('locale', app()->getLocale())
                        ?? $skill?->translations?->firstWhere('locale', 'en');
                @endphp
                <article class="progression-skill-card">
                    <div class="progression-skill-head">
                        <div class="progression-skill-title">
                            <i>{{ data_get($skill?->metadata, 'icon', '✦') }}</i>
                            <div>
                                <span>{{ __('ui.progression_level', ['level' => $userSkill->level]) }}</span>
                                <strong>{{ $tr?->name ?: $skill?->key }}</strong>
                            </div>
                        </div>
                        <b>{{ $userSkill->xp_total }} XP</b>
                    </div>
                    @if($tr?->description)<p>{{ $tr->description }}</p>@endif
                    <div class="progression-skill-bar"><i style="width: {{ $userSkill->level_percent }}%"></i></div>
                    <small>{{ __('ui.progression_next_level', ['xp' => max(0, $userSkill->next_level_xp - $userSkill->xp_total)]) }}</small>
                </article>
            @endforeach
        </div>
    </div>
</section>
@endif

@if($recentXpEvents->isNotEmpty())
<section class="section section-soft progression-xp-section">
    <div class="container">
        <div class="section-heading split-heading progression-xp-heading">
            <div>
                <span class="eyebrow">{{ __('ui.progression_xp_kicker') }}</span>
                <h2>{{ __('ui.progression_xp_title') }}</h2>
                <p>{{ __('ui.progression_xp_intro') }}</p>
            </div>
            <div class="progression-xp-total"><strong>{{ $totalXp }}</strong><span>XP</span></div>
        </div>
        <div class="progression-xp-feed">
            @foreach($recentXpEvents as $event)
                @php
                    $skill = $event->skill;
                    $skillTr = $skill?->translations?->firstWhere('locale', app()->getLocale())
                        ?? $skill?->translations?->firstWhere('locale', 'en');
                    $eventKey = 'progression_xp_event_'.str_replace(['.', '-'], '_', $event->event_key);
                    $eventLabel = __('ui.'.$eventKey);
                    if ($eventLabel === 'ui.'.$eventKey) $eventLabel = $event->event_key;
                @endphp
                <article class="progression-xp-event">
                    <div class="progression-xp-icon">{{ data_get($skill?->metadata, 'icon', '✦') }}</div>
                    <div class="progression-xp-copy">
                        <strong>{{ $eventLabel }}</strong>
                        <span>{{ $skillTr?->name ?: $skill?->key }} · {{ $event->occurred_at?->diffForHumans() }}</span>
                    </div>
                    <b>+{{ $event->xp_delta }} XP</b>
                </article>
            @endforeach
        </div>
    </div>
</section>
@endif

@if($nextAchievements->isNotEmpty())
<section class="section">
    <div class="container">
        <div class="section-heading">
            <span class="eyebrow">{{ __('ui.progression_next_kicker') }}</span>
            <h2>{{ __('ui.progression_next_title') }}</h2>
            <p>{{ __('ui.progression_next_intro') }}</p>
        </div>
        <div class="progression-next-grid">
            @foreach($nextAchievements as $achievement)
                @php
                    $tr = $achievement->translations->firstWhere('locale', app()->getLocale())
                        ?? $achievement->translations->firstWhere('locale', 'en');
                @endphp
                <article>
                    <div class="progression-next-top"><span>{{ __('ui.progression_category_'.$achievement->category) }}</span><b>{{ $achievement->user_percent }}%</b></div>
                    <strong>{{ $tr?->name ?: $achievement->key }}</strong>
                    <p>{{ $tr?->description }}</p>
                    <div class="progression-next-bar"><i style="width: {{ $achievement->user_percent }}%"></i></div>
                    <small>{{ $achievement->user_metric }} / {{ $achievement->threshold }}</small>
                </article>
            @endforeach
        </div>
    </div>
</section>
@endif

<section class="section" id="progression-cards">
    <div class="container">
        <div class="section-heading split-heading progression-hub-heading">
            <div>
                <span class="eyebrow">{{ __('ui.progression_cards_kicker') }}</span>
                <h2>{{ __('ui.progression_hub_card_collection') }}</h2>
                <p>{{ __('ui.progression_hub_card_intro') }}</p>
            </div>
            @if($ownedCards->isNotEmpty())
            <div class="progression-tier-summary">
                @foreach(['ride','thrill','extreme','legend'] as $tier)
                    <span class="is-{{ $tier }}">{{ __('ui.progression_tier_'.$tier) }} <b>{{ $cardTiers->get($tier, 0) }}</b></span>
                @endforeach
            </div>
            @endif
        </div>

        @if($ownedCards->isNotEmpty())
        <div class="progression-card-grid progression-card-grid-full">
            @foreach($ownedCards as $ownedCard)
                @php
                    $card=$ownedCard->card;
                    $coaster=$card?->coaster;
                    $attraction=$coaster?->attraction;
                    $tr=$attraction?->translations?->firstWhere('locale',app()->getLocale()) ?? $attraction?->translations?->firstWhere('locale','en');
                    $ptr=$attraction?->park?->translations?->firstWhere('locale',app()->getLocale()) ?? $attraction?->park?->translations?->firstWhere('locale','en');
                @endphp
                @if($coaster && $attraction)
                <a href="{{ route('coasters.show',$coaster) }}" class="progression-coaster-card is-{{ $card->visual_tier }}">
                    <div class="progression-card-tier">{{ __('ui.progression_tier_'.$card->visual_tier) }}</div>
                    <div class="progression-card-symbol">🎢</div>
                    <div class="progression-card-copy">
                        <span>{{ $ptr?->name ?: $attraction->park?->official_name }}</span>
                        <strong>{{ $tr?->name ?: $attraction->official_name }}</strong>
                        <x-ride-queue-badges :attraction="$attraction" size="compact" class="progression-queue-badges" />
                        <small>{{ $coaster->manufacturer?->name ?: __('ui.coaster_unknown') }}</small>
                    </div>
                    <div class="progression-card-stats">
                        <span>{{ $coaster->speed_kmh ? rtrim(rtrim((string)$coaster->speed_kmh,'0'),'.').' km/h' : '—' }}</span>
                        <span>{{ $coaster->height_m ? rtrim(rtrim((string)$coaster->height_m,'0'),'.').' m' : '—' }}</span>
                        <span>{{ $coaster->inversions ?? '—' }} {{ __('ui.park_inversions_short') }}</span>
                    </div>
                </a>
                @endif
            @endforeach
        </div>
        @else
            <div class="empty-state"><div class="empty-state-icon">🎢</div><h3>{{ __('ui.progression_cards_empty_title') }}</h3><p>{{ __('ui.progression_cards_empty_text') }}</p></div>
        @endif
    </div>
</section>

<section class="section section-soft" id="progression-badges">
    <div class="container">
        <div class="section-heading split-heading progression-badges-heading">
            <div>
                <span class="eyebrow">{{ __('ui.progression_badges_kicker') }}</span>
                <h2>{{ __('ui.progression_hub_all_badges') }}</h2>
                <p>{{ __('ui.progression_hub_badges_intro') }}</p>
            </div>
            <div class="progression-badge-filters" data-progression-badge-filters>
                <button type="button" class="is-active" data-progression-badge-filter="all">{{ __('ui.progression_filter_all') }}</button>
                <button type="button" data-progression-badge-filter="unlocked">{{ __('ui.progression_filter_unlocked') }}</button>
                <button type="button" data-progression-badge-filter="locked">{{ __('ui.progression_filter_locked') }}</button>
                <button type="button" data-progression-badge-filter="coaster">{{ __('ui.progression_filter_coaster') }}</button>
                <button type="button" data-progression-badge-filter="park">{{ __('ui.progression_filter_park') }}</button>
                <button type="button" data-progression-badge-filter="travel">{{ __('ui.progression_filter_travel') }}</button>
                <button type="button" data-progression-badge-filter="social">{{ __('ui.progression_filter_social') }}</button>
                <button type="button" data-progression-badge-filter="community">{{ __('ui.progression_filter_community') }}</button>
            </div>
        </div>
        <div class="progression-filter-empty" data-progression-badge-empty hidden>{{ __('ui.progression_filter_empty') }}</div>
        <div class="progression-badge-grid progression-badge-grid-all">
            @foreach($achievements as $achievement)
                @php
                    $tr=$achievement->translations->firstWhere('locale',app()->getLocale()) ?? $achievement->translations->firstWhere('locale','en');
                    $unlock=$unlocks->firstWhere('achievement_id',$achievement->id);
                @endphp
                <article class="progression-badge {{ $achievement->is_unlocked_for_user ? 'is-unlocked' : 'is-locked' }} is-tier-{{ data_get($achievement->metadata, 'tier', 'bronze') }}"
                    data-progression-badge
                    data-progression-state="{{ $achievement->is_unlocked_for_user ? 'unlocked' : 'locked' }}"
                    data-progression-category="{{ $achievement->category }}">
                    <div class="progression-badge-icon">{{ data_get($achievement->metadata, 'icon', $achievement->is_unlocked_for_user ? '✦' : '◇') }}</div>
                    <span>{{ __('ui.progression_category_'.$achievement->category) }}</span>
                    <strong>{{ $tr?->name ?: $achievement->key }}</strong>
                    <p>{{ $tr?->description }}</p>
                    @if($unlock)
                        <small>{{ __('ui.progression_unlocked_on', ['date' => $unlock->unlocked_at?->format('d/m/Y') ?: '—']) }}</small>
                    @else
                        <div class="progression-badge-progress"><i style="width: {{ $achievement->user_percent }}%"></i></div>
                        <small>{{ $achievement->user_metric }} / {{ $achievement->threshold }}</small>
                    @endif
                </article>
            @endforeach
        </div>
    </div>
</section>
@endsection