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

@php
    /** @var \Illuminate\Pagination\LengthAwarePaginator|\App\Models\Reminder[] $reminders */
    $vehicle = app(\App\Support\VehicleContext::class)->current();

    $title = ($vehicle?->call_sign ?? 'RTW') . ' – Erinnerungen';
    $pageTitle = 'Erinnerungen';
    $pageSubtitle = $vehicle
        ? trim(
            ($vehicle->call_sign ?? '') .
                ' • ' .
                ($vehicle->license_plate ?? '') .
                ' • Aufgaben & Fristen (unabhängig von Dokumenten)',
        )
        : 'Aufgaben & Fristen (unabhängig von Dokumenten)';

    $filter = $filter ?? request('filter', 'open'); // open|overdue|done|all
    $q = (string) request('q', '');
    $priority = (string) request('priority', 'all'); // low|normal|high|all

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

    $prio = [
        'low' => ['cls' => 'bg-gray-100 text-gray-700 ring-gray-200', 'label' => 'Niedrig'],
        'normal' => ['cls' => 'bg-emerald-50 text-emerald-800 ring-emerald-200', 'label' => 'Normal'],
        'high' => ['cls' => 'bg-red-50 text-red-700 ring-red-200', 'label' => 'Hoch'],
    ];

    $status = [
        'open' => ['cls' => 'bg-brand/10 text-brand ring-brand/15', 'label' => 'Offen'],
        'done' => ['cls' => 'bg-gray-100 text-gray-700 ring-gray-200', 'label' => 'Erledigt'],
        'overdue' => ['cls' => 'bg-red-50 text-red-700 ring-red-200', 'label' => 'Überfällig'],
    ];

    // Helper: Query merge ohne doppelte Keys
    $qs = fn(array $merge) => array_merge(request()->query(), $merge);
@endphp

<x-ux-layout :title="$title" :pageTitle="$pageTitle" :pageSubtitle="$pageSubtitle">
    <div class="space-y-6" x-data="{ filtersOpen: false }">

        @if (session('status'))
            <div class="rounded-2xl border border-emerald-200 bg-emerald-50 px-5 py-4 text-sm text-emerald-800">
                {{ session('status') }}
            </div>
        @endif

        {{-- Toolbar --}}
        <div class="rounded-2xl border border-gray-200 bg-white p-5">
            <div class="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">

                {{-- Desktop Toolbar --}}
                <form method="GET" action="{{ route('reminders.index') }}"
                    class="hidden lg:flex flex-col gap-3 lg:flex-row lg:items-center w-full">
                    {{-- Tabs --}}
                    <div class="inline-flex overflow-hidden rounded-xl border border-gray-200 bg-white">
                        <a href="{{ route('reminders.index', $qs(['filter' => 'open'])) }}"
                            class="px-4 py-2.5 text-sm font-semibold {{ $tabBtn($filter === 'open') }}">
                            Offen
                        </a>
                        <a href="{{ route('reminders.index', $qs(['filter' => 'done'])) }}"
                            class="px-4 py-2.5 text-sm font-semibold {{ $tabBtn($filter === 'done') }}">
                            Erledigt
                        </a>
                        <a href="{{ route('reminders.index', $qs(['filter' => 'overdue'])) }}"
                            class="px-4 py-2.5 text-sm font-semibold {{ $tabBtn($filter === 'overdue') }}">
                            Überfällig
                        </a>
                        <a href="{{ route('reminders.index', $qs(['filter' => 'all'])) }}"
                            class="px-4 py-2.5 text-sm font-semibold {{ $tabBtn($filter === 'all') }}">
                            Alle
                        </a>
                    </div>

                    {{-- Search --}}
                    <label class="relative w-full lg:w-[420px]">
                        <span
                            class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3 text-gray-400">
                            <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                stroke-width="2">
                                <path d="M21 21l-4.3-4.3" />
                                <circle cx="11" cy="11" r="7" />
                            </svg>
                        </span>

                        <input name="q" value="{{ $q }}" type="text"
                            placeholder="Erinnerungen suchen…"
                            class="w-full rounded-xl border-gray-200 bg-gray-50 pl-9 pr-3 py-2.5 text-sm focus:border-brand focus:ring-brand"
                            onchange="this.form.submit()">
                    </label>

                    {{-- Priority --}}
                    <select name="priority"
                        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($priority === 'all')>Priorität: Alle</option>
                        <option value="high" @selected($priority === 'high')>Hoch</option>
                        <option value="normal" @selected($priority === 'normal')>Normal</option>
                        <option value="low" @selected($priority === 'low')>Niedrig</option>
                    </select>

                    <input type="hidden" name="filter" value="{{ $filter }}">
                </form>

                {{-- Mobile: Compact header + filter button --}}
                <div class="lg:hidden 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">
                            {{ $filter === 'open' ? 'Offen' : ($filter === 'done' ? 'Erledigt' : ($filter === 'overdue' ? 'Überfällig' : 'Alle')) }}
                            @if ($priority !== 'all')
                                • Priorität: {{ $prio[$priority]['label'] ?? $priority }}
                            @endif
                            @if ($q !== '')
                                • Suche aktiv
                            @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>

                {{-- Actions --}}
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-2 w-full lg:w-auto">
                    <a href="{{ route('reminders.index', $qs(['filter' => $filter, 'q' => $q, 'priority' => $priority])) }}"
                        class="w-full rounded-xl border border-gray-200 bg-white px-4 py-2.5 text-sm font-semibold hover:bg-gray-50 text-center">
                        Aktualisieren
                    </a>

                    @can('create', \App\Models\Reminder::class)
                        <a href="{{ route('reminders.create') }}"
                            class="w-full rounded-xl bg-brand px-4 py-2.5 text-sm font-semibold text-white hover:bg-brand-600 text-center">
                            Erinnerung anlegen
                        </a>
                    @else
                        <button class="w-full rounded-xl bg-gray-200 px-4 py-2.5 text-sm font-semibold text-gray-600"
                            disabled>
                            Keine Berechtigung
                        </button>
                    @endcan
                </div>
            </div>

            {{-- Active filters hint --}}
            <div class="mt-4 flex flex-wrap items-center gap-2 text-xs text-gray-600">
                @if ($q !== '')
                    <span class="rounded-full bg-gray-100 px-2.5 py-1 ring-1 ring-gray-200">
                        Suche: <span class="font-semibold text-gray-900">{{ $q }}</span>
                    </span>
                @endif
                @if ($priority !== 'all')
                    <span class="rounded-full bg-gray-100 px-2.5 py-1 ring-1 ring-gray-200">
                        Priorität: <span
                            class="font-semibold text-gray-900">{{ $prio[$priority]['label'] ?? $priority }}</span>
                    </span>
                @endif

                @if ($q !== '' || $priority !== 'all')
                    <a href="{{ route('reminders.index', $qs(['q' => null, 'priority' => 'all'])) }}"
                        class="rounded-full px-2.5 py-1 text-brand hover:bg-brand/10">
                        Filter zurücksetzen
                    </a>
                @endif
            </div>
        </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 & Suche</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('reminders.index') }}"
                    class="px-5 py-4 space-y-4 max-h-[70vh] overflow-y-auto">
                    {{-- Tabs (stacked) --}}
                    <div class="grid grid-cols-2 gap-2">
                        <a href="{{ route('reminders.index', $qs(['filter' => 'open'])) }}"
                            class="rounded-xl border border-gray-200 px-4 py-2.5 text-sm font-semibold text-center {{ $filter === 'open' ? 'bg-brand/10 text-brand border-brand/20' : 'bg-white text-gray-700 hover:bg-gray-50' }}">
                            Offen
                        </a>
                        <a href="{{ route('reminders.index', $qs(['filter' => 'done'])) }}"
                            class="rounded-xl border border-gray-200 px-4 py-2.5 text-sm font-semibold text-center {{ $filter === 'done' ? 'bg-brand/10 text-brand border-brand/20' : 'bg-white text-gray-700 hover:bg-gray-50' }}">
                            Erledigt
                        </a>
                        <a href="{{ route('reminders.index', $qs(['filter' => 'overdue'])) }}"
                            class="rounded-xl border border-gray-200 px-4 py-2.5 text-sm font-semibold text-center {{ $filter === 'overdue' ? 'bg-brand/10 text-brand border-brand/20' : 'bg-white text-gray-700 hover:bg-gray-50' }}">
                            Überfällig
                        </a>
                        <a href="{{ route('reminders.index', $qs(['filter' => 'all'])) }}"
                            class="rounded-xl border border-gray-200 px-4 py-2.5 text-sm font-semibold text-center {{ $filter === 'all' ? 'bg-brand/10 text-brand border-brand/20' : 'bg-white text-gray-700 hover:bg-gray-50' }}">
                            Alle
                        </a>
                    </div>

                    <label class="block">
                        <div class="text-sm font-semibold text-gray-800">Suche</div>
                        <div class="relative mt-2">
                            <span
                                class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3 text-gray-400">
                                <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                    stroke-width="2">
                                    <path d="M21 21l-4.3-4.3" />
                                    <circle cx="11" cy="11" r="7" />
                                </svg>
                            </span>
                            <input name="q" value="{{ $q }}" type="text"
                                placeholder="Erinnerungen suchen…"
                                class="w-full rounded-xl border-gray-200 bg-gray-50 pl-9 pr-3 py-2.5 text-sm focus:border-brand focus:ring-brand">
                        </div>
                    </label>

                    <label class="block">
                        <div class="text-sm font-semibold text-gray-800">Priorität</div>
                        <select name="priority"
                            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($priority === 'all')>Alle</option>
                            <option value="high" @selected($priority === 'high')>Hoch</option>
                            <option value="normal" @selected($priority === 'normal')>Normal</option>
                            <option value="low" @selected($priority === 'low')>Niedrig</option>
                        </select>
                    </label>

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

                    <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>

                        @if ($q !== '' || $priority !== 'all')
                            <a href="{{ route('reminders.index', $qs(['q' => null, 'priority' => 'all'])) }}"
                                class="w-full rounded-xl border border-gray-200 bg-white px-4 py-2.5 text-sm font-semibold hover:bg-gray-50 text-center">
                                Filter zurücksetzen
                            </a>
                        @endif
                    </div>
                </form>
            </div>
        </div>

        {{-- List --}}
        <div class="overflow-hidden rounded-2xl border border-gray-200 bg-white">
            <div class="flex items-center justify-between border-b border-gray-200 px-5 py-4">
                <h2 class="text-lg font-semibold">Liste</h2>
                <div class="text-sm text-gray-500">{{ $vehicle?->call_sign ?? 'RTW' }}</div>
            </div>

            {{-- Mobile Cards --}}
            <div class="lg:hidden divide-y divide-gray-200">
                @forelse($reminders as $r)
                    @php
                        $isOverdue = !$r->is_done && $r->due_at && $r->due_at->lt(now()->startOfDay());

                        $date = $r->due_at ? $r->due_at->format('d.m.Y') : $r->created_at?->format('d.m.Y') ?? '—';

                        $p = $r->priority ?? 'normal';
                        $pBadge = $prio[$p] ?? $prio['normal'];

                        $stKey = $r->is_done ? 'done' : ($isOverdue ? 'overdue' : 'open');
                        $stBadge = $status[$stKey];

                        $note = $r->notes ?: '—';
                    @endphp

                    <div class="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">{{ $r->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">{{ $r->due_at ? 'Fälligkeit' : 'Erstellt' }}</span>
                                </div>
                                <div class="mt-2 text-xs text-gray-500 line-clamp-2">{{ $note }}</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 {{ $pBadge['cls'] }}">
                                        {{ $pBadge['label'] }}
                                    </span>
                                    <span
                                        class="rounded-full px-2.5 py-1 text-xs font-semibold ring-1 {{ $stBadge['cls'] }}">
                                        {{ $stBadge['label'] }}
                                    </span>
                                </div>
                            </div>
                        </div>

                        <div class="mt-4 flex flex-wrap justify-end gap-2">
                            @can('update', $r)
                                <a href="{{ route('reminders.edit', $r) }}"
                                    class="rounded-xl border border-gray-200 bg-white px-3 py-2 text-xs font-semibold hover:bg-gray-50">
                                    Bearbeiten
                                </a>
                            @endcan

                            @can('update', $r)
                                <form method="POST" action="{{ route('reminders.done', $r) }}">
                                    @csrf
                                    @method('PATCH')
                                    <input type="hidden" name="is_done" value="{{ $r->is_done ? 0 : 1 }}">
                                    <button
                                        class="rounded-xl bg-brand px-3 py-2 text-xs font-semibold text-white hover:bg-brand-600">
                                        {{ $r->is_done ? 'Wieder öffnen' : 'Erledigt' }}
                                    </button>
                                </form>
                            @endcan
                        </div>
                    </div>
                @empty
                    <div class="px-6 py-10 text-sm text-gray-600">
                        Keine Einträge.
                    </div>
                @endforelse
            </div>

            {{-- Desktop Table --}}
            <div class="hidden lg:block overflow-x-auto">
                <table class="w-full text-sm">
                    <thead class="bg-gray-50 text-gray-600">
                        <tr>
                            <th class="px-5 py-3 text-left font-semibold">Datum</th>
                            <th class="px-5 py-3 text-left font-semibold">Titel</th>
                            <th class="px-5 py-3 text-left font-semibold">Priorität</th>
                            <th class="px-5 py-3 text-left font-semibold">Status</th>
                            <th class="px-5 py-3 text-right font-semibold"></th>
                        </tr>
                    </thead>

                    <tbody class="divide-y divide-gray-200">
                        @forelse($reminders as $r)
                            @php
                                $isOverdue = !$r->is_done && $r->due_at && $r->due_at->lt(now()->startOfDay());

                                $date = $r->due_at
                                    ? $r->due_at->format('d.m.Y')
                                    : $r->created_at?->format('d.m.Y') ?? '—';

                                $p = $r->priority ?? 'normal';
                                $pBadge = $prio[$p] ?? $prio['normal'];

                                $stKey = $r->is_done ? 'done' : ($isOverdue ? 'overdue' : 'open');
                                $stBadge = $status[$stKey];

                                $note = $r->notes ?: '—';
                            @endphp

                            <tr class="bg-white">
                                <td class="px-5 py-4 whitespace-nowrap">
                                    <div class="font-medium text-gray-900">{{ $date }}</div>
                                    @if ($r->due_at)
                                        <div class="mt-0.5 text-xs text-gray-500">Fälligkeit</div>
                                    @else
                                        <div class="mt-0.5 text-xs text-gray-500">Erstellt</div>
                                    @endif
                                </td>

                                <td class="px-5 py-4">
                                    <div class="font-semibold text-gray-900">{{ $r->title }}</div>
                                    <div class="mt-1 text-xs text-gray-500 line-clamp-2">{{ $note }}</div>
                                </td>

                                <td class="px-5 py-4">
                                    <span
                                        class="rounded-full px-2.5 py-1 text-xs font-semibold ring-1 {{ $pBadge['cls'] }}">
                                        {{ $pBadge['label'] }}
                                    </span>
                                </td>

                                <td class="px-5 py-4">
                                    <span
                                        class="rounded-full px-2.5 py-1 text-xs font-semibold ring-1 {{ $stBadge['cls'] }}">
                                        {{ $stBadge['label'] }}
                                    </span>
                                </td>

                                <td class="px-5 py-4 text-right">
                                    <div class="inline-flex items-center gap-2">
                                        @can('update', $r)
                                            <a href="{{ route('reminders.edit', $r) }}"
                                                class="rounded-xl border border-gray-200 bg-white px-3 py-2 text-xs font-semibold hover:bg-gray-50">
                                                Bearbeiten
                                            </a>
                                        @endcan

                                        @can('update', $r)
                                            <form method="POST" action="{{ route('reminders.done', $r) }}">
                                                @csrf
                                                @method('PATCH')
                                                <input type="hidden" name="is_done" value="{{ $r->is_done ? 0 : 1 }}">
                                                <button
                                                    class="rounded-xl bg-brand px-3 py-2 text-xs font-semibold text-white hover:bg-brand-600">
                                                    {{ $r->is_done ? 'Wieder öffnen' : 'Erledigt' }}
                                                </button>
                                            </form>
                                        @endcan
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="5" class="px-6 py-10 text-sm text-gray-600">
                                    Keine Einträge.
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

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