@extends('layouts.app')
@section('title', __('ui.binder_title').' — Coaster World')
@push('head')
<link rel="stylesheet" href="{{ asset('css/card-binder.css') }}?v=1.100.7">
<script src="{{ asset('js/card-binder.js') }}?v=1.100.7" defer></script>
@endpush
@section('content')
<section class="binder-hero">
    <div class="container binder-hero-grid">
        <div>
            <span class="eyebrow">{{ __('ui.binder_kicker') }}</span>
            <h1>{{ __('ui.binder_title') }}</h1>
            <p>{{ __('ui.binder_intro') }}</p>
            <div class="binder-hero-actions">
                <a class="button button-ghost" href="{{ route('progression') }}">{{ __('ui.binder_progression_link') }}</a>
            </div>
        </div>
        <div class="binder-progress-card" aria-label="{{ __('ui.binder_completion') }}">
            <div class="binder-progress-ring" data-binder-progress-ring data-progress="{{ $completionPercent }}">
                <strong>{{ $completionPercent }}%</strong>
                <span>{{ __('ui.binder_completion') }}</span>
            </div>
            <div>
                <strong>{{ $ownedCount }} / {{ $totalCount }}</strong>
                <span>{{ __('ui.binder_cards_unlocked') }}</span>
            </div>
        </div>
    </div>
</section>

<section class="section binder-section">
    <div class="container">
        @if($totalCount > 0)
            <div class="binder-toolbar" data-binder-toolbar>
                <label class="binder-search">
                    <span class="sr-only">{{ __('ui.binder_search') }}</span>
                    <input type="search" placeholder="{{ __('ui.binder_search_placeholder') }}" data-binder-search>
                </label>
                <label>
                    <span class="sr-only">{{ __('ui.binder_filter_status') }}</span>
                    <select data-binder-filter="state">
                        <option value="all">{{ __('ui.binder_filter_all') }}</option>
                        <option value="unlocked">{{ __('ui.binder_filter_unlocked') }}</option>
                        <option value="locked">{{ __('ui.binder_filter_locked') }}</option>
                    </select>
                </label>
                @if($parks->isNotEmpty())
                <label>
                    <span class="sr-only">{{ __('ui.binder_filter_park') }}</span>
                    <select data-binder-filter="park">
                        <option value="all">{{ __('ui.binder_all_parks') }}</option>
                        @foreach($parks as $park)
                            @php $parkTr = $park->translations->firstWhere('locale', app()->getLocale()) ?? $park->translations->firstWhere('locale', 'en'); @endphp
                            <option value="{{ $park->id }}">{{ $parkTr?->name ?: $park->official_name }}</option>
                        @endforeach
                    </select>
                </label>
                @endif
                @if($manufacturers->isNotEmpty())
                <label>
                    <span class="sr-only">{{ __('ui.binder_filter_manufacturer') }}</span>
                    <select data-binder-filter="manufacturer">
                        <option value="all">{{ __('ui.binder_all_manufacturers') }}</option>
                        @foreach($manufacturers as $manufacturer)<option value="{{ $manufacturer->id }}">{{ $manufacturer->name }}</option>@endforeach
                    </select>
                </label>
                @endif
                <div class="binder-filter-count"><strong data-binder-visible-count>{{ $totalCount }}</strong><span>{{ __('ui.binder_cards') }}</span></div>
            </div>

            <div class="binder-book-wrap">
                <div class="binder-book" data-binder-book>
                    @if($series->isNotEmpty())
                        <nav class="binder-series-tabs" aria-label="{{ __('ui.binder_filter_series') }}" data-binder-series-tabs>
                            <button type="button" class="binder-series-tab is-active" data-binder-series-tab="all" aria-pressed="true">
                                <span>{{ __('ui.binder_all_series') }}</span>
                                <small>{{ $totalCount }}</small>
                            </button>
                            @foreach($series as $seriesName)
                                @php
                                    $seriesSlug = \Illuminate\Support\Str::slug($seriesName);
                                    $seriesCount = $cards->filter(fn ($binderCard) => \Illuminate\Support\Str::slug((string) $binderCard->collectionSeriesName()) === $seriesSlug)->count();
                                @endphp
                                <button type="button" class="binder-series-tab" data-binder-series-tab="{{ $seriesSlug }}" aria-pressed="false" title="{{ $seriesName }}">
                                    <span>{{ $seriesName }}</span>
                                    <small>{{ $seriesCount }}</small>
                                </button>
                            @endforeach
                        </nav>
                    @endif
                    <div class="binder-spine" aria-hidden="true"><i></i><i></i><i></i><i></i><i></i></div>
                    <div class="binder-page">
                        <div class="binder-grid" data-binder-grid>
                            @foreach($cards as $card)
                                @php
                                    $coaster = $card->coaster;
                                    $attraction = $card->subjectAttraction();
                                    $park = $attraction?->park;
                                    $tr = $attraction?->translations?->firstWhere('locale', app()->getLocale()) ?? $attraction?->translations?->firstWhere('locale', 'en');
                                    $ptr = $park?->translations?->firstWhere('locale', app()->getLocale()) ?? $park?->translations?->firstWhere('locale', 'en');
                                    $name = $tr?->name ?: $attraction?->official_name ?: $card->card_key;
                                    $parkName = $ptr?->name ?: $park?->official_name ?: 'Coaster World';
                                    $owned = $card->owners->isNotEmpty();
                                    $frontUrl = $owned ? $card->frontUrl() : null;
                                    $lockedPreviewUrl = ! $owned ? $card->lockedPreviewUrl() : null;
                                    $backUrl = $owned ? $card->backUrlFor(app()->getLocale()) : null;
                                    $canOpen = $owned && $frontUrl !== null;
                                    $seriesName = $card->collectionSeriesName() ?: __('ui.binder_series_default');
                                    $seriesSlug = \Illuminate\Support\Str::slug($seriesName ?: 'none');
                                    $manufacturerName = $coaster?->manufacturer?->name ?: '—';
                                    $subjectType = $card->subjectType();
                                    $searchText = mb_strtolower(trim($name.' '.$parkName.' '.$manufacturerName.' '.$seriesName.' '.($card->card_number ?? '')));
                                @endphp
                                <article class="binder-slot is-{{ $owned ? 'unlocked' : 'locked' }}"
                                    data-binder-item
                                    data-state="{{ $owned ? 'unlocked' : 'locked' }}"
                                    data-series="{{ $seriesSlug }}"
                                    data-park="{{ $park?->id ?: 'none' }}"
                                    data-manufacturer="{{ $coaster?->manufacturer?->id ?: 'none' }}"
                                    data-search="{{ $searchText }}">
                                    <button
                                        type="button"
                                        class="binder-card-button rarity-{{ $card->rarity }} tier-{{ $card->visual_tier }}"
                                        @disabled(!$canOpen)
                                        @if($canOpen)
                                            data-binder-open
                                            data-card-title="{{ $name }}"
                                            data-card-park="{{ $parkName }}"
                                            data-card-manufacturer="{{ $manufacturerName }}"
                                            data-card-series="{{ $seriesName }}"
                                            data-card-number="{{ $card->card_number ?: '—' }}"
                                            data-card-rarity="{{ __('ui.binder_rarity_'.$card->rarity) }}"
                                            data-card-kind="{{ __('ui.binder_type_'.$subjectType) }}"
                                            data-card-front="{{ $frontUrl }}"
                                            data-card-back="{{ $backUrl }}"
                                        @endif>
                                        <span class="binder-pocket-gloss" aria-hidden="true"></span>
                                        @if($owned && $frontUrl)
                                            <img src="{{ $frontUrl }}" alt="{{ $name }}" loading="lazy" draggable="false" data-protected-card-media>
                                        @elseif(! $owned && $lockedPreviewUrl)
                                            <img class="binder-card-locked-preview" src="{{ $lockedPreviewUrl }}" alt="" loading="lazy" draggable="false" data-protected-card-media aria-hidden="true">
                                        @else
                                            <span class="binder-card-mystery-visual" aria-hidden="true"><b>?</b></span>
                                        @endif
                                        @unless($owned)
                                            <span class="binder-lock"><b>🔒</b><small>{{ __('ui.binder_locked') }}</small></span>
                                        @endunless
                                        @if($owned && $card->is_limited)<span class="binder-limited">{{ __('ui.binder_limited') }}</span>@endif
                                    </button>
                                    <div class="binder-slot-caption">
                                        <span>{{ $card->card_number ? '#'.$card->card_number : $seriesName }}</span>
                                        <strong>{{ $owned ? $name : __('ui.binder_mystery_card') }}</strong>
                                        @if($owned && $attraction)
                                            <x-ride-queue-badges :attraction="$attraction" size="compact" class="collection-queue-badges" />
                                        @endif
                                        <small>{{ $owned ? $parkName : __($subjectType === 'coaster' ? 'ui.binder_unlock_hint' : 'ui.binder_unlock_hint_attraction') }}</small>
                                    </div>
                                </article>
                            @endforeach
                        </div>
                        <div class="binder-empty-filter" data-binder-empty hidden>
                            <div>🗂️</div>
                            <strong>{{ __('ui.binder_filter_empty_title') }}</strong>
                            <p>{{ __('ui.binder_filter_empty_text') }}</p>
                        </div>
                    </div>
                </div>
            </div>
        @else
            <div class="binder-empty-state">
                <div class="binder-empty-icon">🃏</div>
                <h2>{{ __('ui.binder_empty_title') }}</h2>
                <p>{{ __('ui.binder_empty_text') }}</p>
                <a class="button button-primary" href="{{ route('progression') }}">{{ __('ui.binder_progression_link') }}</a>
            </div>
        @endif
    </div>
</section>

<div class="binder-viewer" data-binder-viewer hidden>
    <button class="binder-viewer-backdrop" type="button" data-binder-close aria-label="{{ __('ui.binder_close') }}"></button>
    <section class="binder-viewer-dialog" role="dialog" aria-modal="true" aria-labelledby="binder-viewer-title">
        <div class="binder-viewer-head">
            <div><span class="eyebrow">{{ __('ui.binder_3d_view') }}</span><h2 id="binder-viewer-title" data-binder-viewer-title></h2></div>
            <button class="binder-viewer-close" type="button" data-binder-close aria-label="{{ __('ui.binder_close') }}">×</button>
        </div>
        <div class="binder-viewer-body">
            <div class="binder-stage" data-binder-stage>
                <div class="binder-card-3d" data-binder-card-3d tabindex="0" role="button" aria-label="{{ __('ui.binder_flip') }}">
                    <div class="binder-card-3d-inner" data-binder-card-inner>
                        <div class="binder-card-face binder-card-front"><img data-binder-front alt="" draggable="false" data-protected-card-media><span class="binder-card-holo" aria-hidden="true"></span></div>
                        <div class="binder-card-face binder-card-back"><img data-binder-back alt="" draggable="false" data-protected-card-media><div class="binder-card-back-fallback" data-binder-back-fallback>{{ __('ui.binder_back_missing') }}</div><span class="binder-card-holo" aria-hidden="true"></span></div>
                    </div>
                </div>
                <small>{{ __('ui.binder_3d_hint') }}</small>
            </div>
            <aside class="binder-viewer-info">
                <div><span>{{ __('ui.binder_type') }}</span><strong data-binder-info="kind"></strong></div>
                <div><span>{{ __('ui.binder_park') }}</span><strong data-binder-info="park"></strong></div>
                <div><span>{{ __('ui.binder_manufacturer') }}</span><strong data-binder-info="manufacturer"></strong></div>
                <div><span>{{ __('ui.binder_series') }}</span><strong data-binder-info="series"></strong></div>
                <div><span>{{ __('ui.binder_number') }}</span><strong data-binder-info="number"></strong></div>
                <div><span>{{ __('ui.binder_rarity') }}</span><strong data-binder-info="rarity"></strong></div>
                <button type="button" class="button button-primary" data-binder-flip>{{ __('ui.binder_flip') }}</button>
            </aside>
        </div>
    </section>
</div>
@endsection