{{-- resources/views/vehicles/select.blade.php --}}

@php
    /** @var \Illuminate\Support\Collection|\App\Models\Vehicle[] $vehicles */
    $title = 'Fahrzeug auswählen';
    $pageTitle = 'Fahrzeug auswählen';
    $pageSubtitle = 'Bitte wähle ein Fahrzeug aus, um fortzufahren.';

    $countReady = $vehicles->filter(fn($v) => (int) ($v->is_active ?? 0) === 0)->count();
    $countNotReady = $vehicles->filter(fn($v) => (int) ($v->is_active ?? 0) === 1)->count();
    $countWorkshop = $vehicles->filter(fn($v) => (int) ($v->is_active ?? 0) === 2)->count();
@endphp

<x-app-layout :title="$title" :pageTitle="$pageTitle" :pageSubtitle="$pageSubtitle">
    <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-6 sm:py-8 space-y-6">

        {{-- Header / Info --}}
        <div class="rounded-2xl border border-gray-200 bg-white p-5 shadow-sm ring-1 ring-black/5">
            <div class="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
                <div class="min-w-0">
                    <div class="text-sm font-semibold text-gray-900">Auswahl erforderlich</div>
                    <div class="mt-1 text-sm text-gray-600">
                        Nach der Auswahl werden alle Module auf dieses Fahrzeug gefiltert.
                    </div>

                    <div class="mt-4 flex flex-wrap items-center gap-2">
                        <span
                            class="inline-flex items-center rounded-full bg-emerald-50 px-3 py-1.5 text-xs font-semibold text-emerald-700 ring-1 ring-emerald-200">
                            Einsatzbereit: {{ $countReady }}
                        </span>
                        <span
                            class="inline-flex items-center rounded-full bg-amber-50 px-3 py-1.5 text-xs font-semibold text-amber-800 ring-1 ring-amber-200">
                            Nicht einsatzbereit: {{ $countNotReady }}
                        </span>
                        <span
                            class="inline-flex items-center rounded-full bg-blue-50 px-3 py-1.5 text-xs font-semibold text-blue-700 ring-1 ring-blue-200">
                            Werkstatt: {{ $countWorkshop }}
                        </span>
                    </div>
                </div>

                <div class="shrink-0 flex items-center gap-2">
                    <span
                        class="inline-flex items-center rounded-full bg-brand/10 px-3 py-1.5 text-xs font-semibold text-brand ring-1 ring-brand/15">
                        {{ $vehicles->count() }} Fahrzeuge
                    </span>
                </div>
            </div>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-12 gap-6">

            {{-- Sidebar with subtle pattern --}}
            <aside class="lg:col-span-4 space-y-4 lg:sticky lg:top-6 h-fit">
                <div class="rounded-2xl border border-gray-200 bg-white shadow-sm ring-1 ring-black/5 overflow-hidden">
                    <div class="relative p-5">
                        {{-- subtle pattern/background --}}
                        <div class="pointer-events-none absolute inset-0 bg-gradient-to-br from-brand/8 to-transparent">
                        </div>
                        <div
                            class="pointer-events-none absolute -top-24 -right-24 h-48 w-48 rounded-full bg-brand/10 blur-2xl">
                        </div>

                        <div class="relative">
                            <div class="text-sm font-semibold text-gray-900">Legende</div>

                            <div class="mt-4 space-y-3 text-sm">
                                <div class="flex items-center justify-between gap-3">
                                    <div class="flex items-center gap-3">
                                        <span
                                            class="h-3.5 w-3.5 rounded-full bg-emerald-500 ring-4 ring-emerald-500/15"></span>
                                        <span class="font-semibold text-gray-900">Einsatzbereit</span>
                                    </div>
                                    <span class="text-xs font-semibold text-gray-600">{{ $countReady }}</span>
                                </div>

                                <div class="flex items-center justify-between gap-3">
                                    <div class="flex items-center gap-3">
                                        <span
                                            class="h-3.5 w-3.5 rounded-full bg-amber-500 ring-4 ring-amber-500/15"></span>
                                        <span class="font-semibold text-gray-900">Nicht einsatzbereit</span>
                                    </div>
                                    <span class="text-xs font-semibold text-gray-600">{{ $countNotReady }}</span>
                                </div>

                                <div class="flex items-center justify-between gap-3">
                                    <div class="flex items-center gap-3">
                                        <span
                                            class="h-3.5 w-3.5 rounded-full bg-blue-500 ring-4 ring-blue-500/15"></span>
                                        <span class="font-semibold text-gray-900">Werkstatt</span>
                                    </div>
                                    <span class="text-xs font-semibold text-gray-600">{{ $countWorkshop }}</span>
                                </div>
                            </div>

                            <div
                                class="mt-5 rounded-2xl border border-gray-200 bg-white/70 backdrop-blur p-4 text-sm text-gray-600">
                                Tippe auf ein Fahrzeug. Die Auswahl gilt für Dokumente, Erinnerungen, Schäden und
                                Historie.
                            </div>
                        </div>
                    </div>
                </div>

                <div class="rounded-2xl border border-gray-200 bg-white shadow-sm ring-1 ring-black/5 overflow-hidden">
                    <div class="relative p-5">
                        {{-- subtle pattern/background --}}
                        <div class="pointer-events-none absolute inset-0 bg-gradient-to-br from-brand/6 to-transparent">
                        </div>
                        <div
                            class="pointer-events-none absolute -bottom-24 -left-24 h-48 w-48 rounded-full bg-brand/10 blur-2xl">
                        </div>

                        <div class="relative">
                            <div class="text-sm font-semibold text-gray-900">Hinweis</div>
                            <div class="mt-2 text-sm text-gray-600">
                                Mitarbeiter arbeiten fahrzeuggebunden. Chef und KFZ Beauftragter arbeiten global ohne
                                Fahrzeugauswahl.
                            </div>
                        </div>
                    </div>
                </div>
            </aside>

            {{-- List --}}
            <section class="lg:col-span-8">
                <div class="rounded-2xl border border-gray-200 bg-white overflow-hidden shadow-sm ring-1 ring-black/5">
                    <div class="px-5 py-4 border-b border-gray-100">
                        <div class="flex items-center justify-between gap-3">
                            <div>
                                <div class="text-sm font-semibold text-gray-900">Fahrzeuge</div>
                                <div class="mt-1 text-xs text-gray-500">Klicke eine Zeile zur Auswahl.</div>
                            </div>

                            <div class="hidden sm:flex items-center gap-2 text-xs font-semibold">
                                <span
                                    class="inline-flex items-center rounded-full bg-brand/10 px-3 py-1.5 text-brand ring-1 ring-brand/15">
                                    Letzte Auswahl:
                                    @if (!empty($currentVehicle))
                                        {{ $currentVehicle->call_sign ?? ($currentVehicle->name ?? '—') }}
                                    @else
                                        —
                                    @endif
                                </span>
                            </div>
                        </div>
                    </div>

                    <div class="p-3 sm:p-4 space-y-3">
                        @forelse($vehicles as $vehicle)
                            @php
                                $isCurrent = $currentVehicle && (int) $currentVehicle->id === (int) $vehicle->id;

                                $displayName = $vehicle->name ?? ($vehicle->call_sign ?? 'RTW');
                                $callSign = $vehicle->call_sign ?? 'RTW';
                                $plate = $vehicle->license_plate ?? '—';

                                $responsibles =
                                    $vehicle->responsibleUsers?->pluck('name')->filter()->values() ?? collect();
                                $visible = $responsibles->take(3);
                                $rest = max(0, $responsibles->count() - $visible->count());
                                $responsibleText = $responsibles->isEmpty() ? '—' : $responsibles->join(', ');

                                $stripe = match ((int) ($vehicle->is_active ?? 0)) {
                                    0 => 'from-emerald-500 to-emerald-400',
                                    1 => 'from-amber-500 to-amber-400',
                                    2 => 'from-blue-500 to-blue-400',
                                    default => 'from-gray-400 to-gray-300',
                                };

                                // Brand-nuanced status badge mapping (instead of gray)
                                $statusBadge = match ((int) ($vehicle->is_active ?? 0)) {
                                    0 => 'bg-emerald-50 text-emerald-700 ring-emerald-200',
                                    1 => 'bg-amber-50 text-amber-800 ring-amber-200',
                                    2 => 'bg-blue-50 text-blue-700 ring-blue-200',
                                    default => 'bg-gray-100 text-gray-700 ring-gray-200',
                                };
                            @endphp

                            <form method="POST" action="{{ route('vehicles.select.store') }}" class="m-0">
                                @csrf
                                <input type="hidden" name="vehicle_id" value="{{ $vehicle->id }}">

                                <button type="submit"
                                    class="group w-full text-left rounded-2xl border border-gray-200 bg-white overflow-hidden
                                               transition shadow-sm hover:shadow-md hover:-translate-y-[1px]
                                               focus:outline-none focus:ring-2 focus:ring-brand/30">
                                    <div class="flex">
                                        {{-- Stripe --}}
                                        <div class="relative w-2">
                                            <div class="absolute inset-0 bg-gradient-to-b {{ $stripe }}"></div>
                                            <div
                                                class="absolute inset-0 opacity-0 group-hover:opacity-100 transition bg-white/10">
                                            </div>
                                        </div>

                                        <div class="flex-1 p-4 sm:p-5">
                                            <div class="flex items-start justify-between gap-4">
                                                <div class="min-w-0 flex-1">
                                                    <div class="flex items-center gap-2 min-w-0">
                                                        <div class="text-base font-semibold text-gray-900 truncate">
                                                            {{ $displayName }}
                                                        </div>

                                                        @if ($isCurrent)
                                                            <span
                                                                class="shrink-0 inline-flex items-center gap-1 rounded-full bg-brand/10 px-2.5 py-1 text-xs font-semibold text-brand ring-1 ring-brand/15">
                                                                <span class="h-1.5 w-1.5 rounded-full bg-brand"></span>
                                                                Aktuell
                                                            </span>
                                                        @endif
                                                    </div>

                                                    <div class="mt-1 flex flex-wrap items-center gap-2">
                                                        <span
                                                            class="inline-flex items-center rounded-full bg-gray-100 px-2.5 py-1 text-xs font-semibold text-gray-700 ring-1 ring-gray-200">
                                                            {{ $callSign }}
                                                        </span>

                                                        <span
                                                            class="inline-flex items-center rounded-full bg-gray-100 px-2.5 py-1 text-xs font-semibold text-gray-700 ring-1 ring-gray-200">
                                                            {{ $plate }}
                                                        </span>

                                                        <span
                                                            class="rounded-full px-2.5 py-1 text-xs font-semibold ring-1 {{ $statusBadge }}">
                                                            {{ $vehicle->status_label }}
                                                        </span>
                                                    </div>

                                                    {{-- Verantwortliche --}}
                                                    <div class="mt-4 flex items-center justify-between gap-3">
                                                        <div class="text-xs font-semibold text-gray-500">Verantwortliche
                                                        </div>

                                                        <div class="min-w-0 flex items-center gap-2"
                                                            title="{{ $responsibleText }}">
                                                            @if ($visible->isEmpty())
                                                                <span
                                                                    class="text-sm font-semibold text-gray-900">—</span>
                                                            @else
                                                                <div class="flex -space-x-2 shrink-0">
                                                                    @foreach ($visible as $name)
                                                                        <span
                                                                            class="inline-flex h-9 w-9 items-center justify-center rounded-full bg-brand/10 text-xs font-bold text-brand ring-2 ring-white">
                                                                            {{ mb_strtoupper(mb_substr($name, 0, 1)) }}
                                                                        </span>
                                                                    @endforeach
                                                                </div>

                                                                <div class="min-w-0 text-sm text-gray-700 truncate">
                                                                    {{ $visible->join(', ') }}@if ($rest > 0)
                                                                        , +{{ $rest }}
                                                                    @endif
                                                                </div>
                                                            @endif
                                                        </div>
                                                    </div>
                                                </div>

                                                {{-- Right CTA --}}
                                                <div class="shrink-0 flex items-center gap-2">
                                                    <span
                                                        class="hidden sm:inline-flex items-center gap-2 rounded-xl bg-brand px-3.5 py-2 text-xs font-semibold text-white shadow-sm hover:bg-brand-600">
                                                        <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none"
                                                            stroke="currentColor" stroke-width="2">
                                                            <path d="M5 12h14" />
                                                            <path d="M13 6l6 6-6 6" />
                                                        </svg>
                                                        Auswählen
                                                    </span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </button>
                            </form>
                            @empty
                                <div class="rounded-2xl border border-gray-200 bg-white p-6">
                                    <div class="text-sm font-semibold text-gray-900">Keine Fahrzeuge</div>
                                    <div class="mt-1 text-sm text-gray-600">Dir sind aktuell keine Fahrzeuge zugewiesen.
                                    </div>
                                </div>
                            @endforelse
                        </div>
                    </div>
                </section>
            </div>

        </div>
    </x-app-layout>