@extends('layouts.app')

@section('title', __('ui.local_experts_title').' · Coaster World')

@section('content')
@php
    $tierIcons = ['bronze' => '📍', 'silver' => '🧭', 'gold' => '✦', 'legend' => '👑'];
    $reputationIcons = ['newcomer' => '•', 'contributor' => '✦', 'trusted' => '✓', 'reference' => '◆', 'ambassador' => '★'];
@endphp

<section class="local-experts-hero">
    <div class="container local-experts-hero-grid">
        <div>
            <span class="eyebrow">{{ __('ui.local_experts_kicker') }}</span>
            <h1>{{ __('ui.local_experts_title') }}</h1>
            <p>{{ __('ui.local_experts_intro') }}</p>
            <div class="local-experts-rule">
                <span>🛡️</span>
                <p>{{ __('ui.local_experts_rule') }}</p>
            </div>
        </div>
        <div class="local-experts-hero-stats">
            <div><strong>{{ $expertCount }}</strong><span>{{ __('ui.local_experts_stat_people') }}</span></div>
            <div><strong>{{ $coveredParkCount }}</strong><span>{{ __('ui.local_experts_stat_parks') }}</span></div>
            <div><strong>{{ $entryCount }}</strong><span>{{ __('ui.local_experts_stat_expertises') }}</span></div>
        </div>
    </div>
</section>

<section class="section local-experts-filter-section">
    <div class="container">
        <form class="local-experts-filter" method="get" action="{{ route('experts.index') }}">
            <label>
                <span>{{ __('ui.local_experts_filter_country') }}</span>
                <select name="country" onchange="this.form.submit()">
                    <option value="0">{{ __('ui.local_experts_filter_all_countries') }}</option>
                    @foreach($countries as $country)
                        @php
                            $countryTranslation = $country->translations->firstWhere('locale', app()->getLocale())
                                ?? $country->translations->firstWhere('locale', 'en')
                                ?? $country->translations->first();
                        @endphp
                        <option value="{{ $country->id }}" @selected((int) $countryId === (int) $country->id)>{{ $countryTranslation?->name ?: $country->official_name }}</option>
                    @endforeach
                </select>
            </label>
            <label>
                <span>{{ __('ui.local_experts_filter_park') }}</span>
                <select name="park">
                    <option value="0">{{ __('ui.local_experts_filter_all_parks') }}</option>
                    @foreach($parksForFilter as $filterPark)
                        @php
                            $filterParkTranslation = $filterPark->translations->firstWhere('locale', app()->getLocale())
                                ?? $filterPark->translations->firstWhere('locale', 'en')
                                ?? $filterPark->translations->first();
                        @endphp
                        <option value="{{ $filterPark->id }}" @selected((int) $parkId === (int) $filterPark->id)>{{ $filterParkTranslation?->name ?: $filterPark->official_name }}</option>
                    @endforeach
                </select>
            </label>
            <button class="button button-primary" type="submit">{{ __('ui.local_experts_filter_apply') }}</button>
            @if($countryId || $parkId)
                <a class="button button-ghost" href="{{ route('experts.index') }}">{{ __('ui.local_experts_filter_reset') }}</a>
            @endif
        </form>
    </div>
</section>

<section class="section section-soft local-experts-list-section">
    <div class="container">
        <div class="section-heading local-experts-heading">
            <div>
                <span class="eyebrow">{{ __('ui.local_experts_directory_kicker') }}</span>
                <h2>{{ $selectedPark ? __('ui.local_experts_for_park', ['park' => $selectedPark->translations->firstWhere('locale', app()->getLocale())?->name ?: $selectedPark->official_name]) : __('ui.local_experts_directory_title') }}</h2>
                <p>{{ __('ui.local_experts_directory_intro') }}</p>
            </div>
        </div>

        @if($entries->count())
            <div class="local-expert-grid">
                @foreach($entries as $entry)
                    @php
                        $user = $entry['user'];
                        $park = $entry['park'];
                        $parkTranslation = $park->translations->firstWhere('locale', app()->getLocale())
                            ?? $park->translations->firstWhere('locale', 'en')
                            ?? $park->translations->first();
                        $countryTranslation = $park->country?->translations?->firstWhere('locale', app()->getLocale())
                            ?? $park->country?->translations?->firstWhere('locale', 'en')
                            ?? $park->country?->translations?->first();
                        $displayName = $user->username ?: $user->name;
                        $initial = mb_strtoupper(mb_substr($displayName ?: '?', 0, 1));
                        $tier = $entry['tier'];
                        $repTier = $entry['reputation']['tier'] ?? 'newcomer';
                    @endphp
                    <article class="local-expert-card is-{{ $tier }}">
                        <div class="local-expert-rank">#{{ $entries->firstItem() + $loop->index }}</div>
                        <div class="local-expert-head">
                            <a class="local-expert-avatar" href="{{ route('profiles.public', $user->username) }}">{{ $initial }}</a>
                            <div>
                                <a href="{{ route('profiles.public', $user->username) }}" class="local-expert-user">{{ '@'.$displayName }}</a>
                                <span>{{ $tierIcons[$tier] ?? '📍' }} {{ __('ui.local_experts_tier_'.$tier) }}</span>
                            </div>
                            <strong class="local-expert-score">{{ $entry['score'] }}<small>{{ __('ui.local_experts_points_short') }}</small></strong>
                        </div>

                        <a class="local-expert-park" href="{{ route('parks.show', $park->slug) }}">
                            <span>🎡</span>
                            <div>
                                <strong>{{ $parkTranslation?->name ?: $park->official_name }}</strong>
                                <small><x-country-label :code="$park->country?->iso2" :name="$countryTranslation?->name ?: $park->country?->official_name" size="small" /></small>
                            </div>
                        </a>

                        <div class="local-expert-signals">
                            <span title="{{ __('ui.local_experts_visits') }}">🎟️ <strong>{{ $entry['visits'] }}</strong></span>
                            <span title="{{ __('ui.local_experts_rides') }}">🎢 <strong>{{ $entry['rides'] }}</strong></span>
                            <span title="{{ __('ui.local_experts_contributions') }}">✦ <strong>{{ $entry['contributions'] }}</strong></span>
                            <span title="{{ __('ui.local_experts_reviews') }}">⭐ <strong>{{ $entry['reviews'] }}</strong></span>
                            <span title="{{ __('ui.local_experts_photos') }}">📷 <strong>{{ $entry['photos'] }}</strong></span>
                            <span title="{{ __('ui.local_experts_helpful') }}">👍 <strong>{{ $entry['helpful'] }}</strong></span>
                        </div>

                        <div class="local-expert-reputation is-{{ $repTier }}">
                            <span>{{ $reputationIcons[$repTier] ?? '•' }}</span>
                            <div>
                                <small>{{ __('ui.local_experts_reputation') }}</small>
                                <strong>{{ __('ui.local_experts_reputation_'.$repTier) }}</strong>
                            </div>
                            <b>{{ $entry['reputation']['score'] ?? 0 }}</b>
                        </div>
                    </article>
                @endforeach
            </div>

            @if($entries->hasPages())
                <div class="pagination-wrap">{{ $entries->links() }}</div>
            @endif
        @else
            <div class="local-experts-empty">
                <span>🧭</span>
                <div>
                    <strong>{{ __('ui.local_experts_empty_title') }}</strong>
                    <p>{{ __('ui.local_experts_empty_text') }}</p>
                </div>
                @auth
                    <a class="button button-primary" href="{{ route('community.feed') }}">{{ __('ui.local_experts_empty_action') }}</a>
                @endauth
            </div>
        @endif
    </div>
</section>

<section class="section local-experts-how-section">
    <div class="container">
        <div class="section-heading">
            <span class="eyebrow">{{ __('ui.local_experts_how_kicker') }}</span>
            <h2>{{ __('ui.local_experts_how_title') }}</h2>
            <p>{{ __('ui.local_experts_how_intro') }}</p>
        </div>
        <div class="local-experts-how-grid">
            <article><span>🎟️</span><strong>{{ __('ui.local_experts_how_visit_title') }}</strong><p>{{ __('ui.local_experts_how_visit_text') }}</p></article>
            <article><span>✦</span><strong>{{ __('ui.local_experts_how_contribute_title') }}</strong><p>{{ __('ui.local_experts_how_contribute_text') }}</p></article>
            <article><span>⭐</span><strong>{{ __('ui.local_experts_how_share_title') }}</strong><p>{{ __('ui.local_experts_how_share_text') }}</p></article>
            <article><span>🛡️</span><strong>{{ __('ui.local_experts_how_trust_title') }}</strong><p>{{ __('ui.local_experts_how_trust_text') }}</p></article>
        </div>
    </div>
</section>
@endsection