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

@php
    use Illuminate\Support\Facades\URL;

    /** @var \App\Models\Damage $damage */
    $vehicle = app(\App\Support\VehicleContext::class)->current();

    $title = ($vehicle?->call_sign ?? 'RTW') . ' – Schaden';
    $pageTitle = 'Schaden';
    $pageSubtitle = $vehicle
        ? trim(($vehicle->call_sign ?? '') . ' • ' . ($vehicle->license_plate ?? '') . ' • ' . $damage->title)
        : $damage->title;

    $statusBadge = match ((int) $damage->status) {
        \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 = match ((int) ($damage->urgency ?? \App\Models\Damage::URGENCY_MEDIUM)) {
        \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'],
    };

    $operationalBadge =
        $damage->is_operational ?? true
            ? ['Einsatzrelevant', 'bg-gray-100 text-gray-700 ring-gray-200']
            : ['Nicht einsatzrelevant', 'bg-gray-100 text-gray-700 ring-gray-200'];

    $reportedAt = $damage->reported_at ?? $damage->created_at;
@endphp

<x-ux-layout :title="$title" :pageTitle="$pageTitle" :pageSubtitle="$pageSubtitle">
    <div class="grid grid-cols-12 gap-6">

        <!-- Main -->
        <section class="col-span-12 lg:col-span-8 space-y-6">

            @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

            <!-- Header Card -->
            <div class="rounded-2xl border border-gray-200 bg-white p-5">
                <div class="flex flex-col gap-4 md:flex-row md:items-start md:justify-between">
                    <div class="min-w-0">
                        <div class="flex flex-wrap items-center gap-2">
                            <span class="rounded-full px-2.5 py-1 text-xs font-semibold ring-1 {{ $statusBadge[1] }}">
                                {{ $statusBadge[0] }}
                            </span>

                            <span class="rounded-full px-2.5 py-1 text-xs font-semibold ring-1 {{ $urgencyBadge[1] }}">
                                {{ $urgencyBadge[0] }}
                            </span>

                            <span
                                class="rounded-full px-2.5 py-1 text-xs font-semibold ring-1 {{ $operationalBadge[1] }}">
                                {{ $operationalBadge[0] }}
                            </span>

                            <span
                                class="rounded-full bg-brand/10 px-2.5 py-1 text-xs font-semibold text-brand ring-1 ring-brand/15">
                                {{ $damage->damage_type }}
                            </span>
                        </div>

                        <h2 class="mt-3 text-xl font-bold tracking-tight">{{ $damage->title }}</h2>

                        <p class="mt-1 text-sm text-gray-600">
                            Gemeldet am <b>{{ $reportedAt?->format('d.m.Y H:i') }}</b>
                            durch <b>{{ $damage->reporter?->name ?? 'System' }}</b>
                            @if ($damage->occurred_at)
                                • Ereignis: <b>{{ $damage->occurred_at->format('d.m.Y H:i') }}</b>
                            @endif
                        </p>

                        <div class="mt-4 rounded-2xl border border-gray-200 bg-gray-50 p-4">
                            <div class="text-sm font-semibold">Beschreibung</div>
                            <div class="mt-2 text-sm text-gray-700 whitespace-pre-line">
                                {{ $damage->description ?: '—' }}
                            </div>
                        </div>
                    </div>

                    <div class="flex items-center gap-2">
                        @can('update', $damage)
                            <a href="{{ route('damages.edit', $damage) }}"
                                class="rounded-xl bg-brand px-4 py-2.5 text-sm font-semibold text-white hover:bg-brand-600">
                                Bearbeiten
                            </a>
                        @endcan
                    </div>
                </div>
            </div>

            <!-- Maßnahmen -->
            <div class="rounded-2xl border border-gray-200 bg-white p-5" id="measures">
                <div class="flex items-center justify-between">
                    <h3 class="text-lg font-semibold">Maßnahmen</h3>

                    @can('create', [\App\Models\DamageMeasure::class, $damage])
                        <button type="button"
                            class="rounded-xl border border-gray-200 bg-white px-4 py-2.5 text-sm font-semibold hover:bg-gray-50"
                            onclick="document.getElementById('add-measure-form').classList.toggle('hidden')">
                            Maßnahme hinzufügen
                        </button>
                    @endcan
                </div>

                @can('create', [\App\Models\DamageMeasure::class, $damage])
                    <form id="add-measure-form" method="POST" action="{{ route('damages.measures.store', $damage) }}"
                        class="mt-4 hidden space-y-3">
                        @csrf
                        <div>
                            <label class="text-sm font-semibold">Maßnahme</label>
                            <textarea name="body" rows="3" maxlength="5000" required
                                class="mt-2 w-full rounded-xl border-gray-200 bg-white text-sm focus:border-brand focus:ring-brand"
                                placeholder="z. B. Hersteller-Support kontaktieren">{{ old('body') }}</textarea>
                            @error('body')
                                <div class="mt-2 text-sm text-red-600">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="flex items-center justify-end gap-2">
                            <button type="button"
                                class="rounded-xl border border-gray-200 bg-white px-4 py-2.5 text-sm font-semibold hover:bg-gray-50"
                                onclick="document.getElementById('add-measure-form').classList.add('hidden')">
                                Abbrechen
                            </button>
                            <button
                                class="rounded-xl bg-brand px-4 py-2.5 text-sm font-semibold text-white hover:bg-brand-600">
                                Speichern
                            </button>
                        </div>
                    </form>
                @endcan

                <div class="mt-4 space-y-3">
                    @forelse($damage->measures as $m)
                        <div class="rounded-xl border border-gray-200 p-4">
                            <div class="flex items-center justify-between gap-3">
                                <div class="min-w-0">
                                    <div class="font-semibold text-gray-900">{{ $m->body }}</div>
                                    <div class="mt-1 text-sm text-gray-600">
                                        Von: {{ $m->creator?->name ?? 'System' }}
                                        • {{ $m->created_at?->format('d.m.Y H:i') }}
                                    </div>
                                </div>

                                <div class="flex items-center gap-2 shrink-0">
                                    @if ($m->completed_at)
                                        <span
                                            class="rounded-full bg-gray-100 px-2.5 py-1 text-xs font-semibold text-gray-700 ring-1 ring-gray-200">
                                            Erledigt
                                        </span>
                                    @else
                                        <span
                                            class="rounded-full bg-brand/10 px-2.5 py-1 text-xs font-semibold text-brand ring-1 ring-brand/15">
                                            Offen
                                        </span>
                                    @endif

                                    @can('update', $m)
                                        @if (!$m->completed_at)
                                            <form method="POST"
                                                action="{{ route('damages.measures.complete', [$damage, $m]) }}">
                                                @csrf
                                                @method('PATCH')
                                                <button
                                                    class="rounded-xl border border-gray-200 bg-white px-3 py-2 text-xs font-semibold hover:bg-gray-50">
                                                    Erledigen
                                                </button>
                                            </form>
                                        @endif
                                    @endcan

                                    @can('delete', $m)
                                        <form method="POST"
                                            action="{{ route('damages.measures.destroy', [$damage, $m]) }}"
                                            onsubmit="return confirm('Maßnahme wirklich löschen?')">
                                            @csrf
                                            @method('DELETE')
                                            <button
                                                class="rounded-xl border border-red-200 bg-white px-3 py-2 text-xs font-semibold text-red-700 hover:bg-red-50">
                                                Löschen
                                            </button>
                                        </form>
                                    @endcan
                                </div>
                            </div>
                        </div>
                    @empty
                        <div class="rounded-xl border border-gray-200 p-4 text-sm text-gray-600">
                            Keine Maßnahmen vorhanden.
                        </div>
                    @endforelse
                </div>
            </div>

            <!-- Anhänge -->
            <div class="rounded-2xl border border-gray-200 bg-white p-5" id="attachments">
                <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
                    <h3 class="text-lg font-semibold">Anhänge</h3>

                    @can('create', \App\Models\Attachment::class)
                        <form method="POST" action="{{ route('damages.attachments.store', $damage) }}"
                            enctype="multipart/form-data" x-data="{ count: 0, names: [], hasFiles: false }"
                            class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">

                            @csrf

                            <input id="files" name="files[]" type="file" class="hidden" multiple
                                accept="image/jpeg,image/jpg,image/png,application/pdf"
                                @change="
                                    count = $event.target.files.length;
                                    names = Array.from($event.target.files).map(f => f.name).slice(0, 3);
                                    hasFiles = count > 0;">

                            {{-- Right: actions --}}
                            <div class="flex items-center gap-2 shrink-0">
                                <label for="files"
                                    class="inline-flex items-center rounded-xl border border-gray-200 bg-white px-4 py-2.5 text-sm font-semibold text-gray-700 hover:bg-gray-50 cursor-pointer">
                                    Dateien auswählen
                                </label>

                                <button type="submit" :disabled="!hasFiles"
                                    class="inline-flex items-center rounded-xl bg-brand px-4 py-2.5 text-sm font-semibold text-white hover:bg-brand-600 disabled:opacity-50 disabled:cursor-not-allowed">
                                    Upload
                                </button>
                            </div>
                            {{-- Left: selection info --}}
                            <div class="min-w-0">
                                <div class="text-sm font-semibold text-gray-900">Dateien</div>
                                <div class="mt-1 text-sm text-gray-600">
                                    <template x-if="count === 0">
                                        <span>Keine Dateien ausgewählt</span>
                                    </template>
                                    <template x-if="count === 1">
                                        <span>1 Datei ausgewählt</span>
                                    </template>
                                    <template x-if="count > 1">
                                        <span x-text="count + ' Dateien ausgewählt'"></span>
                                    </template>

                                    <template x-if="names.length">
                                        <div class="mt-1 text-xs text-gray-500 truncate">
                                            <span x-text="names.join(', ')"></span>
                                            <template x-if="count > names.length">
                                                <span x-text="' … +' + (count - names.length)"></span>
                                            </template>
                                        </div>
                                    </template>
                                </div>
                            </div>

                        </form>

                        @error('files')
                            <div class="mt-3 rounded-xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-800">
                                {{ $message }}
                            </div>
                        @enderror
                        @error('files.*')
                            <div class="mt-3 rounded-xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-800">
                                {{ $message }}
                            </div>
                        @enderror
                    @endcan

                </div>

                <div class="mt-4 grid grid-cols-1 sm:grid-cols-2 gap-4">
                    @forelse($damage->attachments as $a)
                        @php
                            $openUrl = URL::signedRoute('attachments.download', ['attachment' => $a->id]);
                            $dlUrl = URL::signedRoute('attachments.download', [
                                'attachment' => $a->id,
                                'download' => 1,
                            ]);

                            $thumbUrl = !empty($a->thumb_path)
                                ? URL::signedRoute('attachments.thumb', ['attachment' => $a->id])
                                : null;

                            $isImage = str_starts_with((string) $a->mime_type, 'image/');
                            $isPdf = (string) $a->mime_type === 'application/pdf';

                            $uploadedAt = $a->uploaded_at ?? $a->created_at;
                        @endphp

                        <div
                            class="group rounded-2xl border border-gray-200 bg-white overflow-hidden shadow-sm hover:shadow-md transition">
                            <div class="flex">
                                {{-- Preview --}}
                                <div class="relative w-28 sm:w-32 shrink-0">
                                    @if ($thumbUrl && $isImage)
                                        <a href="{{ $openUrl }}" target="_blank" class="block">
                                            <img src="{{ $thumbUrl }}" alt=""
                                                class="h-full w-full object-cover aspect-square bg-gray-50
                                        transition-transform duration-200 group-hover:scale-[1.03]">
                                            <div
                                                class="absolute inset-0 bg-black/0 group-hover:bg-black/10 transition">
                                            </div>
                                        </a>
                                    @elseif ($isPdf)
                                        <div
                                            class="h-full w-full aspect-square bg-gray-50 flex items-center justify-center">
                                            <div class="flex flex-col items-center gap-1">
                                                <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">
                                                    PDF
                                                </span>
                                                <span class="text-[11px] text-gray-500">Dokument</span>
                                            </div>
                                        </div>
                                    @else
                                        <div
                                            class="h-full w-full aspect-square bg-gray-50 flex items-center justify-center">
                                            <div class="flex flex-col items-center gap-1">
                                                <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">
                                                    FILE
                                                </span>
                                                <span class="text-[11px] text-gray-500">Anhang</span>
                                            </div>
                                        </div>
                                    @endif
                                </div>

                                {{-- Content --}}
                                <div class="min-w-0 flex-1 p-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">
                                                {{ $a->original_name }}
                                            </div>

                                            <div
                                                class="mt-1 flex flex-wrap items-center gap-x-2 gap-y-1 text-xs text-gray-500">
                                                <span>{{ $uploadedAt?->format('d.m.Y H:i') }}</span>
                                                <span class="text-gray-300">•</span>
                                                <span
                                                    class="truncate max-w-[14rem]">{{ $a->uploader?->name ?? 'System' }}</span>

                                                @if ($isImage)
                                                    <span class="text-gray-300">•</span>
                                                    <span
                                                        class="inline-flex items-center rounded-full bg-brand/10 px-2 py-0.5 text-[11px] font-semibold text-brand ring-1 ring-brand/15">
                                                        Bild
                                                    </span>
                                                @elseif ($isPdf)
                                                    <span class="text-gray-300">•</span>
                                                    <span
                                                        class="inline-flex items-center rounded-full bg-gray-100 px-2 py-0.5 text-[11px] font-semibold text-gray-700 ring-1 ring-gray-200">
                                                        PDF
                                                    </span>
                                                @endif
                                            </div>
                                        </div>

                                        {{-- Quick open (subtle) --}}
                                        <a href="{{ $openUrl }}" target="_blank"
                                            class="shrink-0 rounded-xl border border-gray-200 bg-white px-3 py-2 text-xs font-semibold text-gray-700 hover:bg-gray-50">
                                            Öffnen
                                        </a>
                                    </div>

                                    {{-- Actions --}}
                                    <div class="mt-4 flex items-center justify-end gap-2">
                                        <a href="{{ $dlUrl }}"
                                            class="rounded-xl border border-gray-200 bg-white px-3 py-2 text-xs font-semibold hover:bg-gray-50">
                                            Download
                                        </a>

                                        @can('delete', $a)
                                            <form method="POST" action="{{ route('attachments.destroy', $a) }}"
                                                onsubmit="return confirm('Anhang wirklich löschen?')">
                                                @csrf
                                                @method('DELETE')
                                                <button
                                                    class="rounded-xl border border-red-200 bg-white px-3 py-2 text-xs font-semibold text-red-700 hover:bg-red-50">
                                                    Löschen
                                                </button>
                                            </form>
                                        @endcan
                                    </div>
                                </div>
                            </div>
                        </div>
                    @empty
                        <div class="rounded-2xl border border-gray-200 bg-white p-5 text-sm text-gray-600">
                            Keine Anhänge vorhanden.
                        </div>
                    @endforelse
                </div>

            </div>

            <!-- Verlauf -->
            @hasanyrole('Chef|KFZ Beauftragter')
                <div class="rounded-2xl border border-gray-200 bg-white p-5">
                    <div class="flex items-center justify-between">
                        <h3 class="text-lg font-semibold">Verlauf</h3>
                        <a href="{{ route('history.index', ['q' => $damage->title]) }}"
                            class="rounded-xl border border-gray-200 bg-white px-4 py-2.5 text-sm font-semibold hover:bg-gray-50">
                            Zur Historie
                        </a>
                    </div>

                    <div class="mt-3 text-sm text-gray-600">
                        Änderungen an Schaden/Maßnahmen/Anhängen werden im Audit-Log protokolliert.
                    </div>
                </div>
            @endhasanyrole
        </section>

        <!-- Side -->
        <aside class="col-span-12 lg:col-span-4 space-y-6">
            <div class="rounded-2xl border border-gray-200 bg-white p-5">
                <h3 class="text-lg font-semibold">Übersicht</h3>

                <dl class="mt-4 space-y-3">
                    <div class="rounded-xl border border-gray-200 p-4">
                        <dt class="text-xs text-gray-500">Status</dt>
                        <dd class="mt-1 font-semibold">{{ $statusBadge[0] }}</dd>
                    </div>

                    <div class="rounded-xl border border-gray-200 p-4">
                        <dt class="text-xs text-gray-500">Dringlichkeit</dt>
                        <dd class="mt-1 font-semibold">{{ $urgencyBadge[0] }}</dd>
                    </div>

                    <div class="rounded-xl border border-gray-200 p-4">
                        <dt class="text-xs text-gray-500">Einsatzrelevant</dt>
                        <dd class="mt-1 font-semibold">{{ $damage->is_operational ?? true ? 'Ja' : 'Nein' }}</dd>
                    </div>

                    <div class="rounded-xl border border-gray-200 p-4">
                        <dt class="text-xs text-gray-500">Typ</dt>
                        <dd class="mt-1 font-semibold">{{ $damage->damage_type }}</dd>
                    </div>

                    <div class="rounded-2xl border border-gray-200 bg-gray-50 p-4">
                        <div class="text-sm font-semibold">Hinweis</div>
                        <div class="mt-2 text-sm text-gray-600">
                            Kritisch + Einsatzrelevant kann RTW-Status auf „Nicht einsatzbereit“ setzen.
                        </div>
                    </div>
                </dl>

                <div class="mt-4 flex gap-2">
                    <a href="{{ route('damages.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">
                        Zur Liste
                    </a>

                    @can('update', $damage)
                        <a href="{{ route('damages.edit', $damage) }}"
                            class="w-full rounded-xl bg-brand px-4 py-2.5 text-sm font-semibold text-white hover:bg-brand-600 text-center">
                            Bearbeiten
                        </a>
                    @endcan
                </div>
            </div>
        </aside>

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