@extends('layouts.app')

@section('title', __('ui.explore_title').' — Coaster World')

@section('content')
<section class="explore-hero">
    <div class="container">
        <span class="eyebrow">{{ __('ui.explore_kicker') }}</span>
        <h1>{{ __('ui.explore_title') }}</h1>
        <p>{{ __('ui.explore_intro') }}</p>

        <form action="{{ route('explore') }}" method="get" class="explore-filters">
            <div class="explore-search-field">
                <label for="explore-q">{{ __('ui.explore_search_label') }}</label>
                <input id="explore-q" name="q" type="search" value="{{ $query }}" placeholder="{{ __('ui.explore_search_placeholder') }}">
            </div>

            <div>
                <label for="explore-country">{{ __('ui.explore_country') }}</label>
                <select id="explore-country" name="country">
                    <option value="">{{ __('ui.explore_all_countries') }}</option>
                    @foreach($countries as $countryItem)
                        <option value="{{ $countryItem['iso2'] }}" @selected($country === $countryItem['iso2'])>
                            {{ $countryItem['name'] }}
                        </option>
                    @endforeach
                </select>
            </div>

            <div>
                <label for="explore-status">{{ __('ui.explore_status') }}</label>
                <select id="explore-status" name="status">
                    <option value="all" @selected($status === 'all')>{{ __('ui.explore_status_all') }}</option>
                    <option value="open" @selected($status === 'open')>{{ __('ui.explore_status_open') }}</option>
                    <option value="closed" @selected($status === 'closed')>{{ __('ui.explore_status_closed') }}</option>
                </select>
            </div>

            <div>
                <label for="explore-sort">{{ __('ui.explore_sort') }}</label>
                <select id="explore-sort" name="sort">
                    <option value="name" @selected($sort === 'name')>{{ __('ui.explore_sort_name') }}</option>
                    <option value="newest" @selected($sort === 'newest')>{{ __('ui.explore_sort_newest') }}</option>
                    <option value="speed" @selected($sort === 'speed')>{{ __('ui.explore_sort_speed') }}</option>
                    <option value="height" @selected($sort === 'height')>{{ __('ui.explore_sort_height') }}</option>
                </select>
            </div>

            <input type="hidden" name="kind" value="{{ $kind }}">
            <button type="submit" class="primary-button">{{ __('ui.explore_apply') }}</button>
        </form>

        <nav class="explore-kind-tabs" aria-label="{{ __('ui.explore_catalogue') }}">
            @foreach(['all', 'park', 'coaster', 'attraction'] as $kindOption)
                <a
                    href="{{ route('explore', array_filter([
                        'q' => $query,
                        'country' => $country,
                        'status' => $status !== 'all' ? $status : null,
                        'sort' => $sort !== 'name' ? $sort : null,
                        'kind' => $kindOption !== 'all' ? $kindOption : null,
                    ])) }}"
                    class="{{ $kind === $kindOption ? 'is-active' : '' }}"
                    @if($kind === $kindOption)
                        aria-current="page"
                    @endif
                >
                    {{ __('ui.explore_kind_'.$kindOption) }}
                </a>
            @endforeach
        </nav>
    </div>
</section>

<section class="section explore-results">
    <div class="container">
        <div class="explore-results-head">
            <div>
                <span class="eyebrow">{{ __('ui.explore_catalogue') }}</span>
                <h2>{{ __('ui.explore_results_title') }}</h2>
            </div>
            <strong>{{ trans_choice('ui.explore_result_count', $items->total(), ['count' => $items->total()]) }}</strong>
        </div>

        @if($items->count() > 0)
            <div class="explore-grid">
                @foreach($items as $item)
                    @php
                        $open = in_array($item['status'], ['active', 'operating', 'open'], true);
                        $symbol = match($item['kind']) {
                            'park' => '◎',
                            'coaster' => '↗',
                            default => '◆',
                        };
                    @endphp
                    <a href="{{ $item['href'] }}" class="explore-card explore-card-{{ $item['kind'] }}">
                        <div class="explore-card-top">
                            <span class="explore-card-symbol">{{ $symbol }}</span>
                            <span class="explore-card-kind">{{ __('ui.explore_kind_'.$item['kind']) }}</span>
                            <span class="explore-card-status {{ $open ? 'is-open' : 'is-closed' }}">
                                {{ $open ? __('ui.explore_open') : __('ui.explore_closed') }}
                            </span>
                        </div>
                        <div class="explore-card-copy">
                            <span>
                                @if($item['kind'] === 'park' && (($item['city'] ?? null) || ($item['country_name'] ?? null)))
                                    @if($item['city'] ?? null){{ $item['city'] }}@if($item['country_name'] ?? null) · @endif @endif
                                    @if($item['country_name'] ?? null)<x-country-label :code="$item['country_code'] ?? null" :name="$item['country_name']" size="small" />@endif
                                @else
                                    {{ $item['subtitle'] ?: 'Coaster World' }}
                                @endif
                            </span>
                            <h3>{{ $item['name'] }}</h3>
                            @if(in_array($item['kind'], ['coaster', 'attraction'], true))
                                <x-ride-queue-badges :single-rider-available="$item['single_rider_available'] ?? false" :priority-access-name="$item['priority_access_name'] ?? null" size="compact" class="explore-queue-badges" />
                            @endif
                            <p>{{ $item['metric'] ?: __('ui.explore_details_pending') }}</p>
                        </div>
                        <div class="explore-card-foot">
                            <span>{{ $item['year'] ?: '—' }}</span>
                            <strong>{{ __('ui.explore_view') }} →</strong>
                        </div>
                    </a>
                @endforeach
            </div>

            @if($items->hasPages())
                <div class="pagination-wrap">{{ $items->links() }}</div>
            @endif
        @else
            <div class="empty-state explore-empty">
                <div class="empty-state-icon">⌕</div>
                <h3>{{ __('ui.explore_empty_title') }}</h3>
                <p>{{ __('ui.explore_empty_text') }}</p>
                <a href="{{ route('explore') }}" class="secondary-button">{{ __('ui.explore_reset') }}</a>
            </div>
        @endif
    </div>
</section>
@endsection