@extends('layouts.app')

@section('content')
    @php
        $modelTypeAccent = [
            'anatomy'    => 'rose',
            'cellular'   => 'emerald',
            'equipment'  => 'sky',
            'person'     => 'amber',
            'place'      => 'indigo',
            'historical' => 'fuchsia',
        ];
        $hasFilters = ! empty($search) || ! empty($system) || ! empty($species);
    @endphp

    <div class="library-head">
        <div>
            <h1 class="section-title text-3xl">Model Library</h1>
            <p class="mt-1 text-sm text-slate-400">{{ $models->total() }} {{ \Illuminate\Support\Str::plural('model', $models->total()) }} available across {{ count($systems) }} body {{ \Illuminate\Support\Str::plural('system', count($systems)) }}.</p>
        </div>

        @if($hasFilters)
            <a href="{{ route('models.index') }}" class="filter-clear">Clear filters</a>
        @endif
    </div>

    <form method="get" class="library-filter">
        <div class="library-filter-field">
            <label class="library-filter-label" for="filter-q">Search</label>
            <input id="filter-q" type="text" name="q" value="{{ $search }}" placeholder="Search by title…">
        </div>

        <div class="library-filter-field">
            <label class="library-filter-label" for="filter-system">Body system</label>
            <select id="filter-system" name="system">
                <option value="">All systems</option>
                @foreach($systems as $option)
                    <option value="{{ $option }}" @selected($system === $option)>{{ $option }}</option>
                @endforeach
            </select>
        </div>

        <div class="library-filter-field">
            <label class="library-filter-label" for="filter-species">Species</label>
            <select id="filter-species" name="species">
                <option value="">All species</option>
                @foreach($speciesOptions as $option)
                    <option value="{{ $option }}" @selected($species === $option)>{{ $option }}</option>
                @endforeach
            </select>
        </div>

        <button class="btn-primary library-filter-submit" type="submit">Apply</button>
    </form>

    @if($hasFilters)
        <div class="library-active-filters">
            <span class="text-xs uppercase tracking-wide text-slate-400">Active:</span>
            @if($search)
                <span class="library-chip">Title: <strong>{{ $search }}</strong></span>
            @endif
            @if($system)
                <span class="library-chip">System: <strong>{{ $system }}</strong></span>
            @endif
            @if($species)
                <span class="library-chip">Species: <strong>{{ $species }}</strong></span>
            @endif
        </div>
    @endif

    <div class="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
        @forelse($models as $model)
            @php $accent = $modelTypeAccent[$model->model_type] ?? 'sky'; @endphp
            <a href="{{ route('models.show', $model->slug) }}" class="model-card model-card-{{ $accent }}">
                @if($model->thumbnail_url)
                    <div class="model-card-thumb">
                        <img src="{{ $model->thumbnail_url }}" alt="" loading="lazy" referrerpolicy="no-referrer">
                    </div>
                @else
                    <div class="model-card-thumb model-card-thumb-fallback" aria-hidden="true">
                        <span>{{ \Illuminate\Support\Str::upper(\Illuminate\Support\Str::substr($model->title, 0, 1)) }}</span>
                    </div>
                @endif
                <div class="model-card-inner">
                    <span class="model-card-type">{{ ucfirst($model->model_type) }}</span>
                    <h2 class="model-card-title">{{ $model->title }}</h2>
                    <p class="model-card-meta">{{ $model->body_system }} &middot; {{ $model->programme }} &middot; {{ $model->species }}</p>
                    <div class="model-card-foot">
                        <span class="model-card-time">{{ $model->estimated_minutes }} min</span>
                        <span class="model-card-cta">View &rarr;</span>
                    </div>
                </div>
            </a>
        @empty
            <div class="library-empty md:col-span-2 lg:col-span-3">
                <p class="text-base font-medium text-white">No models match your filters.</p>
                <p class="mt-1 text-sm text-slate-300">Try clearing a filter or searching with a different keyword.</p>
                @if($hasFilters)
                    <a href="{{ route('models.index') }}" class="mt-3 inline-block text-sm text-blue-300 hover:text-blue-200">Clear all filters &rarr;</a>
                @endif
            </div>
        @endforelse
    </div>

    <div class="mt-6">
        {{ $models->links() }}
    </div>
@endsection