@php
    $kindMeta = [
        ''      => ['label' => __('Everything'), 'icon' => 'queue-list'],
        'image' => ['label' => __('Photos'),     'icon' => 'photo'],
        'video' => ['label' => __('Video'),      'icon' => 'video-camera'],
        'audio' => ['label' => __('Voice'),      'icon' => 'microphone'],
    ];

    $metrics = [
        ['label' => __('In the showcase'), 'value' => number_format($stats['total']),        'icon' => 'camera',        'accent' => '#2a5786', 'sub' => __('photos and clips')],
        ['label' => __('Jobs covered'),    'value' => number_format($stats['jobs']),         'icon' => 'briefcase',     'accent' => '#0ea5e9', 'sub' => __('with something shot')],
        ['label' => __('Video'),           'value' => number_format($stats['videos']),       'icon' => 'video-camera',  'accent' => '#7c3aed', 'sub' => __('clips ready to cut')],
        ['label' => __('Unconfirmed'),     'value' => number_format($stats['unconfirmed']),  'icon' => 'question-mark-circle', 'accent' => '#c39312', 'sub' => __('nobody asked the client')],
    ];
@endphp

<div class="px-4 py-8 sm:px-6 lg:px-8">
    <div class="mx-auto max-w-7xl space-y-6">

        <x-page-header :title="__('Showcase')"
                       :subtitle="__('Every picture and clip of finished work, gathered from the jobs they were shot on. Quality evidence is kept separately, on the check it proves.')" />

        {{-- KPI cards --}}
        <section class="grid grid-cols-2 gap-4 sm:grid-cols-4">
            @foreach ($metrics as $m)
                <x-card class="group relative flex flex-col overflow-hidden p-5 ring-slate-200/70 transition hover:-translate-y-0.5 hover:shadow-lg hover:shadow-slate-300/40">
                    <div class="flex items-start justify-between gap-2">
                        <p class="truncate text-[11px] font-semibold uppercase tracking-wider text-slate-400" title="{{ $m['label'] }}">{{ $m['label'] }}</p>
                        <span class="flex items-center justify-center rounded-xl text-white shadow-sm ring-1 ring-white/40" style="height: 2rem; width: 2rem; background: linear-gradient(135deg, {{ $m['accent'] }}, {{ $m['accent'] }}bb)">
                            <x-icon :name="$m['icon']" class="h-4 w-4" />
                        </span>
                    </div>
                    <p class="mt-3 font-bold leading-none tracking-tight text-slate-900 tabular-nums" style="font-size: 19px;">{{ $m['value'] }}</p>
                    <span class="mt-2.5 inline-flex w-fit items-center gap-1 rounded-full bg-slate-100 px-2 py-1 text-[11px] font-semibold text-slate-500">{{ $m['sub'] }}</span>
                </x-card>
            @endforeach
        </section>

        {{-- Filters --}}
        <x-card class="p-4 sm:p-5">
            <div class="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
                <div class="flex flex-wrap items-center gap-1 rounded-xl border border-slate-200 bg-slate-50 p-1 text-sm font-medium">
                    @foreach ($kindMeta as $key => $meta)
                        <button type="button" wire:click="$set('kindFilter', '{{ $key }}')"
                                class="flex items-center gap-1.5 rounded-lg px-3.5 py-1.5 transition {{ $kindFilter === $key ? 'bg-white text-indigo-600 shadow-sm ring-1 ring-slate-200' : 'text-slate-500 hover:text-slate-700' }}">
                            <x-icon :name="$meta['icon']" class="h-4 w-4" />
                            {{ $meta['label'] }}
                        </button>
                    @endforeach
                </div>

                <div class="relative max-w-xs flex-1">
                    <span class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3 text-slate-400">
                        <x-icon name="magnifying-glass" class="h-5 w-5" />
                    </span>
                    <input type="text" wire:model.live.debounce.300ms="search"
                           placeholder="{{ __('Search caption, job or customer…') }}"
                           class="block w-full rounded-xl border-slate-200 bg-slate-50 py-2.5 pl-10 pr-3 text-sm text-slate-900 shadow-sm transition placeholder:text-slate-400 focus:border-indigo-500 focus:bg-white focus:ring-indigo-500" />
                </div>
            </div>

            <div class="mt-3 flex flex-wrap items-center gap-3">
                <select wire:model.live="categoryFilter" class="rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                    <option value="">{{ __('All categories') }}</option>
                    @foreach ($categories as $category)
                        <option value="{{ $category->id }}">{{ $category->name }}</option>
                    @endforeach
                </select>

                <select wire:model.live="monthFilter" class="rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                    <option value="">{{ __('Any month') }}</option>
                    @foreach ($months as $value => $label)
                        <option value="{{ $value }}">{{ $label }}</option>
                    @endforeach
                </select>

                <select wire:model.live="consentFilter" class="rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                    <option value="">{{ __('Shareable (default)') }}</option>
                    <option value="cleared">{{ __('Client said yes') }}</option>
                    <option value="unconfirmed">{{ __('Nobody has asked') }}</option>
                    <option value="declined">{{ __('Client said no') }}</option>
                </select>

                @if ($search !== '' || $categoryFilter || $kindFilter !== '' || $consentFilter !== '' || $monthFilter !== '')
                    <button type="button" wire:click="clearFilters" class="text-xs font-semibold text-slate-400 transition hover:text-slate-600">
                        {{ __('Clear filters') }}
                    </button>
                @endif
            </div>

            @if ($consentFilter === 'declined')
                <p class="mt-3 flex items-start gap-2 rounded-xl bg-brand-red-50 px-3.5 py-2.5 text-xs font-medium text-brand-red-700 ring-1 ring-brand-red-600/15">
                    <x-icon name="no-symbol" class="mt-0.5 h-4 w-4 shrink-0" />
                    {{ __('These customers asked us not to show their work. They are here so the record can be checked, not so it can be posted.') }}
                </p>
            @endif
        </x-card>

        {{-- The gallery --}}
        @if ($media->isEmpty())
            <x-card class="p-5">
                <x-empty-state
                    icon="camera"
                    :title="__('Nothing in the showcase yet')"
                    :message="__('Portfolio shots are captured on a job, under Files → Showcase. Photograph the finished work before it leaves the shop, and it turns up here.')"
                    class="border-0 bg-transparent py-8"
                />
            </x-card>
        @else
            <div class="grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-4">
                @foreach ($media as $file)
                    @php $job = $file->job; @endphp
                    <x-media-tile wire:key="showcase-{{ $file->id }}" :file="$file">
                        <div class="border-t border-slate-100 px-2.5 py-2">
                            <a href="{{ route('jobs.show', $job) }}" wire:navigate
                               class="block truncate text-xs font-semibold text-indigo-600 transition hover:text-indigo-700" title="{{ $job->title }}">
                                {{ $job->title ?: $job->job_number }}
                            </a>
                            <p class="truncate text-[11px] text-slate-400">
                                {{ $job->customer?->name ?: __('No customer') }}
                                @if ($job->category) · {{ $job->category->name }} @endif
                            </p>

                            @if ($job->showcase_consent === false)
                                <span class="mt-1.5 inline-flex items-center gap-1 rounded-full bg-brand-red-50 px-2 py-0.5 text-[10px] font-semibold text-brand-red-700 ring-1 ring-brand-red-600/15">
                                    <x-icon name="no-symbol" class="h-3 w-3" />{{ __('Do not show') }}
                                </span>
                            @elseif ($job->showcase_consent === null)
                                <span class="mt-1.5 inline-flex items-center gap-1 rounded-full bg-brand-yellow-50 px-2 py-0.5 text-[10px] font-semibold text-brand-yellow-800 ring-1 ring-brand-yellow-600/20">
                                    <x-icon name="question-mark-circle" class="h-3 w-3" />{{ __('Consent not asked') }}
                                </span>
                            @else
                                <span class="mt-1.5 inline-flex items-center gap-1 rounded-full bg-emerald-50 px-2 py-0.5 text-[10px] font-semibold text-emerald-700 ring-1 ring-emerald-600/15">
                                    <x-icon name="check-circle" class="h-3 w-3" />{{ __('Cleared') }}
                                </span>
                            @endif
                        </div>
                    </x-media-tile>
                @endforeach
            </div>

            <div>
                {{ $media->links() }}
            </div>
        @endif
    </div>
</div>