{{-- resources/views/damages/index.blade.php --}}

@php
    $vehicle = app(\App\Support\VehicleContext::class)->current();

    $title = ($vehicle?->call_sign ?? 'RTW') . ' – Schäden';
    $pageTitle = 'Schäden';
    $pageSubtitle =
        'Schäden melden und Status verfolgen. Kritische Schäden können den RTW auf „Nicht einsatzbereit“ setzen.';

    $tab = $filters['tab'] ?? 'active';
    $status = $filters['status'] ?? 'all';

    $tabBtn = fn(bool $active) => $active ? 'bg-brand/10 text-brand' : 'text-gray-700 hover:bg-gray-50';

    $statusBadge = function (int $s): array {
        return match ($s) {
            \App\Models\Damage::STATUS_OPEN => ['Offen', 'bg-red-50 text-red-700 ring-red-200'],
            \App\Models\Damage::STATUS_IN_PROGRESS => [
                'In Bearbeitung',
                'bg-yellow-50 text-yellow-800 ring-yellow-200',
            ],
            \App\Models\Damage::STATUS_RESOLVED => ['Erledigt', 'bg-gray-100 text-gray-700 ring-gray-200'],
            default => ['Status', 'bg-gray-100 text-gray-700 ring-gray-200'],
        };
    };

    $urgencyBadge = function (?int $u): array {
        $u = (int) ($u ?? \App\Models\Damage::URGENCY_MEDIUM);

        return match ($u) {
            \App\Models\Damage::URGENCY_CRITICAL => ['Kritisch', 'bg-red-50 text-red-700 ring-red-200'],
            \App\Models\Damage::URGENCY_MEDIUM => ['Mittel', 'bg-yellow-50 text-yellow-800 ring-yellow-200'],
            \App\Models\Damage::URGENCY_LOW => ['Gering', 'bg-gray-100 text-gray-700 ring-gray-200'],
            default => ['—', 'bg-gray-100 text-gray-700 ring-gray-200'],
        };
    };

    $urgency = (string) ($filters['urgency'] ?? request('urgency', 'all')); // all|critical|medium|low
@endphp

<x-ux-layout :title="$title" :pageTitle="$pageTitle" :pageSubtitle="$pageSubtitle">
    <div class="grid grid-cols-12 gap-6" x-data="{ filtersOpen: false }">
        <section class="col-span-12 space-y-6">
            <div class="rounded-2xl border border-gray-200 bg-white p-5">

                {{-- Desktop Toolbar --}}
                <form method="GET" action="{{ route('damages.index') }}" class="hidden lg:block">
                    <div class="flex items-center justify-between gap-3">
                        <div class="inline-flex overflow-hidden rounded-xl border border-gray-200 bg-white">
                            <a href="{{ route('damages.index', array_merge(request()->query(), ['tab' => 'active'])) }}"
                                class="px-4 py-2.5 text-sm font-semibold {{ $tabBtn($tab === 'active') }}">
                                Aktiv
                            </a>
                            <a href="{{ route('damages.index', array_merge(request()->query(), ['tab' => 'resolved'])) }}"
                                class="px-4 py-2.5 text-sm font-semibold {{ $tabBtn($tab === 'resolved') }}">
                                Erledigt
                            </a>
                        </div>

                        <div class="flex items-center gap-2">
                            <select name="status"
                                class="rounded-xl border-gray-200 bg-white py-2.5 text-sm focus:border-brand focus:ring-brand"
                                onchange="this.form.submit()">
                                <option value="all" @selected($status === 'all')>Status: Alle</option>
                                <option value="open" @selected($status === 'open')>Offen</option>
                                <option value="in_progress" @selected($status === 'in_progress')>In Bearbeitung</option>
                                <option value="resolved" @selected($status === 'resolved')>Erledigt</option>
                            </select>

                            <select name="urgency"
                                class="rounded-xl border-gray-200 bg-white py-2.5 text-sm focus:border-brand focus:ring-brand"
                                onchange="this.form.submit()">
                                <option value="all" @selected($urgency === 'all')>Dringlichkeit: Alle</option>
                                <option value="critical" @selected($urgency === 'critical')>Kritisch</option>
                                <option value="medium" @selected($urgency === 'medium')>Mittel</option>
                                <option value="low" @selected($urgency === 'low')>Gering</option>
                            </select>

                            <input type="hidden" name="tab" value="{{ $tab }}">

                            <a href="{{ route('damages.create') }}"
                                class="rounded-xl bg-brand px-4 py-3 text-sm font-semibold text-white hover:bg-brand-600">
                                Schaden hinzufügen
                            </a>
                        </div>
                    </div>
                </form>

                {{-- Mobile Toolbar --}}
                <div class="lg:hidden space-y-3">
                    <div class="flex items-center justify-between gap-3">
                        <div class="min-w-0">
                            <div class="text-sm font-semibold text-gray-900">Filter</div>
                            <div class="text-xs text-gray-500">
                                {{ $tab === 'active' ? 'Aktiv' : 'Erledigt' }}
                                •
                                {{ $status === 'all' ? 'Status: Alle' : ($status === 'open' ? 'Status: Offen' : ($status === 'in_progress' ? 'Status: In Bearbeitung' : 'Status: Erledigt')) }}
                                @if ($urgency !== 'all')
                                    •
                                    {{ $urgency === 'critical' ? 'Kritisch' : ($urgency === 'medium' ? 'Mittel' : 'Gering') }}
                                @endif
                            </div>
                        </div>

                        <button type="button"
                            class="shrink-0 rounded-xl border border-gray-200 bg-white px-3 py-2 text-sm font-semibold hover:bg-gray-50"
                            @click="filtersOpen = true">
                            Anpassen
                        </button>
                    </div>

                    <a href="{{ route('damages.create') }}"
                        class="inline-flex w-full items-center justify-center gap-2 rounded-xl bg-brand px-4 py-2.5 text-sm font-semibold text-white hover:bg-brand-600 focus:outline-none focus:ring-4 focus:ring-brand/25">
                        <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                            aria-hidden="true">
                            <path d="M12 5v14M5 12h14" />
                        </svg>
                        <span class="truncate">Schaden hinzufügen</span>
                    </a>

                </div>

                {{-- Mobile Filter Modal --}}
                <div x-show="filtersOpen" x-transition.opacity class="fixed inset-0 z-40 lg:hidden" aria-hidden="true">
                    <div class="absolute inset-0 bg-gray-900/50" @click="filtersOpen = false"></div>

                    <div x-show="filtersOpen" x-transition
                        class="absolute inset-x-0 bottom-0 rounded-t-3xl bg-white shadow-xl ring-1 ring-black/5">
                        <div class="flex items-center justify-between border-b border-gray-200 px-5 py-4">
                            <div class="text-base font-semibold">Filter</div>
                            <button type="button"
                                class="inline-flex h-10 w-10 items-center justify-center rounded-xl border border-gray-200 bg-white hover:bg-gray-50"
                                @click="filtersOpen = false" aria-label="Schließen">
                                <svg class="h-5 w-5 text-gray-700" viewBox="0 0 24 24" fill="none"
                                    stroke="currentColor" stroke-width="2">
                                    <path d="M6 6l12 12M18 6l-12 12" />
                                </svg>
                            </button>
                        </div>

                        <form method="GET" action="{{ route('damages.index') }}"
                            class="px-5 py-4 space-y-4 max-h-[70vh] overflow-y-auto">
                            <div class="grid grid-cols-2 gap-2">
                                <a href="{{ route('damages.index', array_merge(request()->query(), ['tab' => 'active'])) }}"
                                    class="rounded-xl border border-gray-200 px-4 py-2.5 text-sm font-semibold text-center {{ $tab === 'active' ? 'bg-brand/10 text-brand border-brand/20' : 'bg-white text-gray-700 hover:bg-gray-50' }}">
                                    Aktiv
                                </a>
                                <a href="{{ route('damages.index', array_merge(request()->query(), ['tab' => 'resolved'])) }}"
                                    class="rounded-xl border border-gray-200 px-4 py-2.5 text-sm font-semibold text-center {{ $tab === 'resolved' ? 'bg-brand/10 text-brand border-brand/20' : 'bg-white text-gray-700 hover:bg-gray-50' }}">
                                    Erledigt
                                </a>
                            </div>

                            <label class="block">
                                <div class="text-sm font-semibold text-gray-800">Status</div>
                                <select name="status"
                                    class="mt-2 w-full rounded-xl border-gray-200 bg-white py-2.5 text-sm focus:border-brand focus:ring-brand">
                                    <option value="all" @selected($status === 'all')>Alle</option>
                                    <option value="open" @selected($status === 'open')>Offen</option>
                                    <option value="in_progress" @selected($status === 'in_progress')>In Bearbeitung</option>
                                    <option value="resolved" @selected($status === 'resolved')>Erledigt</option>
                                </select>
                            </label>

                            <label class="block">
                                <div class="text-sm font-semibold text-gray-800">Dringlichkeit</div>
                                <select name="urgency"
                                    class="mt-2 w-full rounded-xl border-gray-200 bg-white py-2.5 text-sm focus:border-brand focus:ring-brand">
                                    <option value="all" @selected($urgency === 'all')>Alle</option>
                                    <option value="critical" @selected($urgency === 'critical')>Kritisch</option>
                                    <option value="medium" @selected($urgency === 'medium')>Mittel</option>
                                    <option value="low" @selected($urgency === 'low')>Gering</option>
                                </select>
                            </label>

                            <input type="hidden" name="tab" value="{{ $tab }}">

                            <div class="grid grid-cols-1 gap-2 pt-2">
                                <button type="submit"
                                    class="w-full rounded-xl bg-brand px-4 py-2.5 text-sm font-semibold text-white hover:bg-brand-600">
                                    Anwenden
                                </button>
                            </div>
                        </form>
                    </div>
                </div>

                {{-- Mobile Cards --}}
                <div class="mt-5 lg:hidden divide-y divide-gray-200 rounded-xl border border-gray-200 overflow-hidden">
                    @forelse($damages as $d)
                        @php
                            [$sLabel, $sCls] = $statusBadge((int) $d->status);
                            [$uLabel, $uCls] = $urgencyBadge($d->urgency);

                            $date =
                                $d->occurred_at?->format('d.m.Y') ??
                                ($d->reported_at?->format('d.m.Y') ?? ($d->created_at?->format('d.m.Y') ?? '—'));

                            $next = null;
                            if (auth()->user()?->can('update', $d)) {
                                $next = match ((int) $d->status) {
                                    \App\Models\Damage::STATUS_OPEN => [
                                        'label' => 'In Bearbeitung',
                                        'to' => \App\Models\Damage::STATUS_IN_PROGRESS,
                                    ],
                                    \App\Models\Damage::STATUS_IN_PROGRESS => [
                                        'label' => 'Erledigt',
                                        'to' => \App\Models\Damage::STATUS_RESOLVED,
                                    ],
                                    default => null,
                                };
                            }
                        @endphp

                        <div class="bg-white px-5 py-4">
                            <div class="flex items-start justify-between gap-3">
                                <div class="min-w-0">
                                    <div class="text-sm font-semibold text-gray-900 truncate">{{ $d->title }}
                                    </div>
                                    <div class="mt-1 text-sm text-gray-600">
                                        <span class="font-semibold text-gray-800">{{ $date }}</span>
                                        <span class="text-gray-400">•</span>
                                        <span class="text-gray-500">
                                            Maßnahmen: {{ (int) $d->measures_count }} • Anhänge:
                                            {{ (int) $d->attachments_count }}
                                        </span>
                                    </div>

                                    <div class="mt-3 flex flex-wrap items-center gap-2">
                                        <span
                                            class="rounded-full px-2.5 py-1 text-xs font-semibold ring-1 {{ $sCls }}">
                                            {{ $sLabel }}
                                        </span>
                                        <span
                                            class="rounded-full px-2.5 py-1 text-xs font-semibold ring-1 {{ $uCls }}">
                                            {{ $uLabel }}
                                        </span>
                                    </div>
                                </div>
                            </div>

                            <div class="mt-4 flex flex-wrap justify-end gap-2">
                                @can('update', $d)
                                    @if ($next)
                                        <form method="POST" action="{{ route('damages.status', $d) }}" class="inline">
                                            @csrf
                                            @method('PATCH')
                                            <input type="hidden" name="status" value="{{ $next['to'] }}">
                                            <button
                                                class="rounded-xl border border-gray-200 bg-white px-3 py-2 text-xs font-semibold text-gray-800 hover:bg-gray-50">
                                                {{ $next['label'] }}
                                            </button>
                                        </form>
                                    @endif

                                    <a href="{{ route('damages.edit', $d) }}"
                                        class="rounded-xl bg-brand px-3 py-2 text-xs font-semibold text-white hover:bg-brand-600">
                                        Bearbeiten
                                    </a>
                                @endcan

                                <a href="{{ route('damages.show', $d) }}"
                                    class="rounded-xl border border-gray-200 bg-white px-3 py-2 text-xs font-semibold hover:bg-gray-50">
                                    Details
                                </a>
                            </div>
                        </div>
                    @empty
                        <div class="px-6 py-8 text-sm text-gray-600">
                            Keine Schäden vorhanden.
                        </div>
                    @endforelse
                </div>

                {{-- Desktop Table --}}
                <div class="mt-5 hidden lg:block overflow-hidden rounded-xl border border-gray-200">
                    <table class="w-full text-sm">
                        <thead class="bg-gray-50 text-gray-600">
                            <tr>
                                <th class="px-4 py-3 text-left font-semibold">Datum</th>
                                <th class="px-4 py-3 text-left font-semibold">Beschreibung</th>
                                <th class="px-4 py-3 text-left font-semibold">Status</th>
                                <th class="px-4 py-3 text-left font-semibold">Dringlichkeit</th>
                                <th class="px-4 py-3 text-right font-semibold"></th>
                            </tr>
                        </thead>

                        <tbody class="divide-y divide-gray-200">
                            @forelse($damages as $d)
                                @php
                                    [$sLabel, $sCls] = $statusBadge((int) $d->status);
                                    [$uLabel, $uCls] = $urgencyBadge($d->urgency);

                                    $date =
                                        $d->occurred_at?->format('d.m.Y') ??
                                        ($d->reported_at?->format('d.m.Y') ??
                                            ($d->created_at?->format('d.m.Y') ?? '—'));
                                @endphp

                                <tr class="bg-white">
                                    <td class="px-4 py-3 whitespace-nowrap">{{ $date }}</td>

                                    <td class="px-4 py-3">
                                        <div class="font-semibold text-gray-900">{{ $d->title }}</div>
                                        <div class="text-xs text-gray-500">
                                            Maßnahmen: {{ (int) $d->measures_count }} • Anhänge:
                                            {{ (int) $d->attachments_count }}
                                        </div>
                                    </td>

                                    <td class="px-4 py-3">
                                        <span
                                            class="rounded-full px-2.5 py-1 text-xs font-semibold ring-1 {{ $sCls }}">
                                            {{ $sLabel }}
                                        </span>
                                    </td>

                                    <td class="px-4 py-3">
                                        <span
                                            class="rounded-full px-2.5 py-1 text-xs font-semibold ring-1 {{ $uCls }}">
                                            {{ $uLabel }}
                                        </span>
                                    </td>

                                    <td class="px-4 py-3 text-right">
                                        <div class="inline-flex items-center gap-2">
                                            @can('update', $d)
                                                @php
                                                    $next = match ((int) $d->status) {
                                                        \App\Models\Damage::STATUS_OPEN => [
                                                            'label' => 'In Bearbeitung',
                                                            'to' => \App\Models\Damage::STATUS_IN_PROGRESS,
                                                        ],
                                                        \App\Models\Damage::STATUS_IN_PROGRESS => [
                                                            'label' => 'Erledigt',
                                                            'to' => \App\Models\Damage::STATUS_RESOLVED,
                                                        ],
                                                        default => null,
                                                    };
                                                @endphp

                                                @if ($next)
                                                    <form method="POST" action="{{ route('damages.status', $d) }}"
                                                        class="inline">
                                                        @csrf
                                                        @method('PATCH')
                                                        <input type="hidden" name="status"
                                                            value="{{ $next['to'] }}">
                                                        <button
                                                            class="rounded-xl border border-gray-200 bg-white px-3 py-2 text-xs font-semibold text-gray-800 hover:bg-gray-50">
                                                            {{ $next['label'] }}
                                                        </button>
                                                    </form>
                                                @endif

                                                <a href="{{ route('damages.edit', $d) }}"
                                                    class="rounded-xl bg-brand px-3 py-2 text-xs font-semibold text-white hover:bg-brand-600">
                                                    Bearbeiten
                                                </a>
                                            @endcan

                                            <a href="{{ route('damages.show', $d) }}"
                                                class="rounded-xl border border-gray-200 bg-white px-3 py-2 text-xs font-semibold hover:bg-gray-50">
                                                Details
                                            </a>
                                        </div>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="5" class="px-6 py-8 text-sm text-gray-600">
                                        Keine Schäden vorhanden.
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>

                <div class="mt-4 text-xs text-gray-500">
                    UX-Regel: „Kritisch“ + „Einsatzrelevant“ ⇒ Status kann automatisch auf „Nicht einsatzbereit“
                    wechseln.
                </div>

                <div class="mt-6 overflow-x-auto">
                    {{ $damages->links() }}
                </div>
            </div>
        </section>
    </div>
</x-ux-layout>