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

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

    $title = ($vehicle?->call_sign ?? 'RTW') . ' – Historie';
    $pageTitle = 'Historie';
    $pageSubtitle = $vehicle
        ? trim(
            ($vehicle->call_sign ?? '') . ' • ' . ($vehicle->license_plate ?? '') . ' • Änderungsprotokoll (Audit-Log)',
        )
        : 'Änderungsprotokoll (Audit-Log)';

    $areaBadge = [
        'Dokumente' => 'bg-brand/10 text-brand ring-brand/15',
        'Erinnerungen' => 'bg-yellow-50 text-yellow-800 ring-yellow-200',
        'Schäden' => 'bg-red-50 text-red-700 ring-red-200',
        'Benutzer' => 'bg-gray-100 text-gray-700 ring-gray-200',
    ];

    $eventBadge = [
        'created' => 'bg-emerald-50 text-emerald-700 ring-emerald-200',
        'updated' => 'bg-amber-50 text-amber-700 ring-amber-200',
        'deleted' => 'bg-red-50 text-red-700 ring-red-200',
    ];

    $guessArea = function (?string $type) {
        $base = class_basename((string) $type);

        return match ($base) {
            'Document', 'DocumentCategory' => 'Dokumente',
            'Reminder' => 'Erinnerungen',
            'Damage', 'DamageMeasure' => 'Schäden',
            'User', 'UserInvitation' => 'Benutzer',
            default => $base ?: 'Sonstiges',
        };
    };
@endphp

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

        {{-- Desktop Toolbar --}}
        <form method="GET" action="{{ route('history.index') }}"
            class="hidden lg:block rounded-2xl border border-gray-200 bg-white p-5">
            <div class="flex items-center justify-between gap-3">
                <div class="flex items-center gap-3">
                    <label class="relative 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" type="text" placeholder="Historie durchsuchen…"
                            value="{{ $filters['q'] }}"
                            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">
                    </label>

                    <select name="days"
                        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="7" {{ $filters['days'] === '7' ? 'selected' : '' }}>Zeitraum: 7 Tage
                        </option>
                        <option value="30" {{ $filters['days'] === '30' ? 'selected' : '' }}>Zeitraum: 30 Tage
                        </option>
                        <option value="90" {{ $filters['days'] === '90' ? 'selected' : '' }}>Zeitraum: 90 Tage
                        </option>
                        <option value="all" {{ $filters['days'] === 'all' ? 'selected' : '' }}>Zeitraum: Alle
                        </option>
                    </select>

                    <select name="area"
                        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" {{ $filters['area'] === 'all' ? 'selected' : '' }}>Bereich: Alle</option>
                        <option value="documents" {{ $filters['area'] === 'documents' ? 'selected' : '' }}>Dokumente
                        </option>
                        <option value="reminders" {{ $filters['area'] === 'reminders' ? 'selected' : '' }}>Erinnerungen
                        </option>
                        <option value="damages" {{ $filters['area'] === 'damages' ? 'selected' : '' }}>Schäden</option>
                        <option value="users" {{ $filters['area'] === 'users' ? 'selected' : '' }}>Benutzer</option>
                    </select>

                    <select name="user"
                        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="">User: Alle</option>
                        @foreach ($users as $u)
                            <option value="{{ $u->id }}"
                                {{ (int) ($filters['user'] ?? 0) === (int) $u->id ? 'selected' : '' }}>
                                {{ $u->name }}
                            </option>
                        @endforeach
                    </select>
                </div>

                <div class="flex items-center gap-2">
                    <button type="submit"
                        class="rounded-xl border border-gray-200 bg-white px-4 py-2.5 text-sm font-semibold hover:bg-gray-50">
                        Anwenden
                    </button>
                    <a href="{{ route('history.index') }}"
                        class="rounded-xl bg-brand px-4 py-2.5 text-sm font-semibold text-white hover:bg-brand-600">
                        Reset
                    </a>
                </div>
            </div>
        </form>

        {{-- Mobile Toolbar --}}
        <div class="lg:hidden rounded-2xl border border-gray-200 bg-white p-5">
            <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">
                        {{ $filters['days'] === 'all' ? 'Alle' : ($filters['days'] ?? '7') . ' Tage' }}
                        • {{ $filters['area'] === 'all' ? 'Alle Bereiche' : ucfirst((string) $filters['area']) }}
                        @if (!empty($filters['user']))
                            • User gefiltert
                        @endif
                        @if (!empty($filters['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>

            {{-- Active filters pills (mobile) --}}
            <div class="mt-4 flex flex-wrap items-center gap-2 text-xs text-gray-600">
                @if (!empty($filters['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">{{ $filters['q'] }}</span>
                    </span>
                @endif
                @if (($filters['area'] ?? 'all') !== 'all')
                    <span class="rounded-full bg-gray-100 px-2.5 py-1 ring-1 ring-gray-200">
                        Bereich: <span class="font-semibold text-gray-900">{{ $filters['area'] }}</span>
                    </span>
                @endif
                @if (($filters['days'] ?? '7') !== '7')
                    <span class="rounded-full bg-gray-100 px-2.5 py-1 ring-1 ring-gray-200">
                        Zeitraum: <span class="font-semibold text-gray-900">{{ $filters['days'] }}</span>
                    </span>
                @endif

                <a href="{{ route('history.index') }}" class="rounded-full px-2.5 py-1 text-brand hover:bg-brand/10">
                    Reset
                </a>
            </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</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('history.index') }}"
                    class="px-5 py-4 space-y-4 max-h-[70vh] overflow-y-auto">
                    <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" type="text" placeholder="Historie durchsuchen…"
                                value="{{ $filters['q'] }}"
                                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">Zeitraum</div>
                        <select name="days"
                            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="7" {{ $filters['days'] === '7' ? 'selected' : '' }}>7 Tage</option>
                            <option value="30" {{ $filters['days'] === '30' ? 'selected' : '' }}>30 Tage</option>
                            <option value="90" {{ $filters['days'] === '90' ? 'selected' : '' }}>90 Tage</option>
                            <option value="all" {{ $filters['days'] === 'all' ? 'selected' : '' }}>Alle</option>
                        </select>
                    </label>

                    <label class="block">
                        <div class="text-sm font-semibold text-gray-800">Bereich</div>
                        <select name="area"
                            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" {{ $filters['area'] === 'all' ? 'selected' : '' }}>Alle</option>
                            <option value="documents" {{ $filters['area'] === 'documents' ? 'selected' : '' }}>
                                Dokumente</option>
                            <option value="reminders" {{ $filters['area'] === 'reminders' ? 'selected' : '' }}>
                                Erinnerungen</option>
                            <option value="damages" {{ $filters['area'] === 'damages' ? 'selected' : '' }}>Schäden
                            </option>
                            <option value="users" {{ $filters['area'] === 'users' ? 'selected' : '' }}>Benutzer
                            </option>
                        </select>
                    </label>

                    <label class="block">
                        <div class="text-sm font-semibold text-gray-800">Benutzer</div>
                        <select name="user"
                            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="">Alle</option>
                            @foreach ($users as $u)
                                <option value="{{ $u->id }}"
                                    {{ (int) ($filters['user'] ?? 0) === (int) $u->id ? 'selected' : '' }}>
                                    {{ $u->name }}
                                </option>
                            @endforeach
                        </select>
                    </label>

                    <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>
                        <a href="{{ route('history.index') }}"
                            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">
                            Reset
                        </a>
                    </div>
                </form>
            </div>
        </div>

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

            {{-- Mobile Cards --}}
            <div class="lg:hidden divide-y divide-gray-200">
                @forelse($logs as $log)
                    @php
                        $area = $guessArea($log->auditable_type);
                        $titleText =
                            $log->title ??
                            trim(($log->event ?? '') . ' ' . class_basename((string) $log->auditable_type));
                        $userName = $log->user?->name ?? 'System';

                        $changes =
                            is_array($log->meta) && !empty($log->meta['changes']) && is_array($log->meta['changes'])
                                ? implode(', ', array_keys($log->meta['changes']))
                                : null;

                        $detailText = $changes ? 'Änderungen: ' . $changes : null;

                        $eventClass = $eventBadge[$log->event] ?? 'bg-gray-100 text-gray-700 ring-gray-200';
                        $areaClass = $areaBadge[$area] ?? 'bg-gray-100 text-gray-700 ring-gray-200';

                        $payload = [
                            'time' => $log->created_at?->format('d.m.Y H:i'),
                            'area' => $area,
                            'event' => strtoupper((string) $log->event),
                            'action' => $titleText,
                            'user' => $userName,
                            'detail' => $detailText ?: '—',
                            'meta' => $log->meta,
                        ];
                    @endphp

                    <div class="px-5 py-4 bg-white">
                        <div class="flex items-start justify-between gap-3">
                            <div class="min-w-0">
                                <div class="text-sm font-semibold text-gray-900 truncate">{{ $titleText }}</div>
                                <div class="mt-1 text-sm text-gray-600">
                                    <span
                                        class="font-semibold text-gray-800">{{ $log->created_at?->format('d.m.Y H:i') }}</span>
                                    <span class="text-gray-400">•</span>
                                    <span class="text-gray-500 truncate">{{ $userName }}</span>
                                </div>

                                <div class="mt-3 flex flex-wrap items-center gap-2">
                                    <span
                                        class="inline-flex items-center rounded-full px-2.5 py-1 text-xs font-semibold ring-1 {{ $eventClass }}">
                                        {{ strtoupper((string) $log->event) }}
                                    </span>
                                    <span
                                        class="rounded-full px-2.5 py-1 text-xs font-semibold ring-1 {{ $areaClass }}">
                                        {{ $area }}
                                    </span>
                                </div>

                                <div class="mt-3 text-sm text-gray-700 line-clamp-2">
                                    {{ $detailText ?? '—' }}
                                </div>
                            </div>
                        </div>

                        <div class="mt-4 flex justify-end">
                            <button type="button"
                                class="rounded-xl border border-gray-200 bg-white px-3 py-2 text-xs font-semibold hover:bg-gray-50"
                                @click="detailOpen = true; detail = @js($payload)">
                                Details
                            </button>
                        </div>
                    </div>
                @empty
                    <div class="px-6 py-8 text-sm text-gray-600">
                        Keine Einträge vorhanden.
                    </div>
                @endforelse
            </div>

            {{-- Desktop Table --}}
            <div class="hidden lg:block">
                <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">Zeitpunkt</th>
                            <th class="px-5 py-3 text-left font-semibold">Ereignis</th>
                            <th class="px-5 py-3 text-left font-semibold">Bereich</th>
                            <th class="px-5 py-3 text-left font-semibold">Benutzer</th>
                            <th class="px-5 py-3 text-left font-semibold">Details</th>
                            <th class="px-5 py-3 text-right font-semibold"></th>
                        </tr>
                    </thead>

                    <tbody class="divide-y divide-gray-200">
                        @forelse($logs as $log)
                            @php
                                $area = $guessArea($log->auditable_type);
                                $titleText =
                                    $log->title ??
                                    trim(($log->event ?? '') . ' ' . class_basename((string) $log->auditable_type));
                                $userName = $log->user?->name ?? 'System';

                                $changes =
                                    is_array($log->meta) &&
                                    !empty($log->meta['changes']) &&
                                    is_array($log->meta['changes'])
                                        ? implode(', ', array_keys($log->meta['changes']))
                                        : null;

                                $detailText = $changes ? 'Änderungen: ' . $changes : null;

                                $eventClass = $eventBadge[$log->event] ?? 'bg-gray-100 text-gray-700 ring-gray-200';
                                $areaClass = $areaBadge[$area] ?? 'bg-gray-100 text-gray-700 ring-gray-200';

                                $payload = [
                                    'time' => $log->created_at?->format('d.m.Y H:i'),
                                    'area' => $area,
                                    'event' => strtoupper((string) $log->event),
                                    'action' => $titleText,
                                    'user' => $userName,
                                    'detail' => $detailText ?: '—',
                                    'meta' => $log->meta,
                                ];
                            @endphp

                            <tr class="bg-white">
                                <td class="px-5 py-4 whitespace-nowrap">{{ $log->created_at?->format('d.m.Y H:i') }}
                                </td>

                                <td class="px-5 py-4">
                                    <div class="font-semibold">{{ $titleText }}</div>
                                    <div class="mt-1">
                                        <span
                                            class="inline-flex items-center rounded-full px-2.5 py-1 text-xs font-semibold ring-1 {{ $eventClass }}">
                                            {{ strtoupper((string) $log->event) }}
                                        </span>
                                    </div>
                                </td>

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

                                <td class="px-5 py-4">{{ $userName }}</td>

                                <td class="px-5 py-4">
                                    <div class="text-sm text-gray-700 line-clamp-2">
                                        {{ $detailText ?? '—' }}
                                    </div>
                                </td>

                                <td class="px-5 py-4 text-right">
                                    <button type="button"
                                        class="rounded-xl border border-gray-200 bg-white px-3 py-2 text-xs font-semibold hover:bg-gray-50"
                                        @click="detailOpen = true; detail = @js($payload)">
                                        Details
                                    </button>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="6" class="px-6 py-8 text-sm text-gray-600">
                                    Keine Einträge vorhanden.
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>

                <div class="px-5 py-4 border-t border-gray-200 text-xs text-gray-500">
                    UX: Suche/Filter/Export/Bericht werden als nächstes an echte Query-Parameter gebunden.
                </div>
            </div>
        </div>

        <div class="overflow-x-auto">
            {{ $logs->links() }}
        </div>

        {{-- Details Modal (mobile fullscreen, desktop centered) --}}
        <div x-show="detailOpen" x-transition.opacity class="fixed inset-0 z-50 flex items-center justify-center"
            aria-hidden="true" style="display:none">
            <div class="absolute inset-0 bg-gray-900/50" @click="detailOpen = false"></div>

            <div x-show="detailOpen" x-transition
                class="relative w-full h-[100vh] sm:h-auto sm:max-w-xl sm:rounded-2xl bg-white shadow-xl ring-1 ring-black/5 overflow-hidden"
                role="dialog" aria-modal="true">
                <div class="flex items-center justify-between border-b border-gray-200 px-6 py-4">
                    <div>
                        <div class="text-lg font-semibold">Ereignisdetails</div>
                        <div class="text-sm text-gray-600">{{ $vehicle?->call_sign ?? '—' }} • Audit-Log</div>
                    </div>

                    <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="detailOpen = 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>

                <div class="px-6 py-5 space-y-4 max-h-[calc(100vh-128px)] overflow-y-auto">
                    <div class="rounded-2xl border border-gray-200 bg-gray-50 p-4">
                        <div class="text-xs text-gray-500">Zeitpunkt</div>
                        <div class="mt-1 font-semibold" x-text="detail?.time ?? '—'"></div>
                    </div>

                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                        <div class="rounded-2xl border border-gray-200 p-4">
                            <div class="text-xs text-gray-500">Bereich</div>
                            <div class="mt-1 font-semibold" x-text="detail?.area ?? '—'"></div>
                        </div>

                        <div class="rounded-2xl border border-gray-200 p-4">
                            <div class="text-xs text-gray-500">Benutzer</div>
                            <div class="mt-1 font-semibold" x-text="detail?.user ?? '—'"></div>
                        </div>

                        <div class="sm:col-span-2 rounded-2xl border border-gray-200 p-4">
                            <div class="text-xs text-gray-500">Ereignis</div>
                            <div class="mt-1 font-semibold" x-text="detail?.action ?? '—'"></div>
                            <div class="mt-2 text-sm text-gray-700" x-text="detail?.detail ?? '—'"></div>
                        </div>
                    </div>

                    <div class="rounded-2xl border border-gray-200 p-4" x-show="detail?.meta" x-cloak>
                        <div class="text-xs text-gray-500">Meta</div>
                        <pre class="mt-2 text-xs text-gray-700 whitespace-pre-wrap" x-text="JSON.stringify(detail?.meta ?? {}, null, 2)"></pre>
                    </div>

                    <div class="text-xs text-gray-500">
                        Später: Vorher/Nachher (diff) und Deep-Link zum Objekt (z. B. Schaden/Dokument).
                    </div>
                </div>

                <div
                    class="flex flex-col sm:flex-row sm:items-center sm:justify-end gap-2 border-t border-gray-200 px-6 py-4">
                    <button
                        class="w-full sm:w-auto rounded-xl border border-gray-200 bg-white px-4 py-2.5 text-sm font-semibold hover:bg-gray-50"
                        @click="detailOpen = false">
                        Schließen
                    </button>
                    <button
                        class="w-full sm:w-auto rounded-xl bg-brand px-4 py-2.5 text-sm font-semibold text-white hover:bg-brand-600">
                        Als PDF exportieren
                    </button>
                </div>
            </div>
        </div>

    </div>
</x-ux-layout>