@php
    use Illuminate\Support\Str;

    $isDev = auth()->user()?->hasRole('developer');

    $type = (string) ($update->type ?? 'release');
    $typeLabel = match ($type) {
        'security' => 'Security',
        'fix' => 'Fix',
        'feature' => 'Feature',
        'maintenance' => 'Maintenance',
        default => Str::upper($type ?: 'UPDATE'),
    };

    $pill = match ($type) {
        'security' => 'bg-red-50 text-red-700 border-red-200',
        'fix' => 'bg-amber-50 text-amber-800 border-amber-200',
        'feature' => 'bg-emerald-50 text-emerald-700 border-emerald-200',
        'maintenance' => 'bg-blue-50 text-blue-700 border-blue-200',
        default => 'bg-neutral-100 text-rk-slate border-rk',
    };

    $published = $update->published_at ?? $update->created_at;
@endphp

<x-layouts.app title="Update" userRole="{{ auth()->user()->isDistrictUser() ? 'Bezirksstelle' : 'Ortstelle' }}">
    <div class="flex flex-col gap-4">

        {{-- Header --}}
        <div class="rounded-3xl bg-white border border-rk shadow-sm overflow-hidden">
            <div class="p-6 sm:p-7">
                <div class="flex flex-col lg:flex-row lg:items-start lg:justify-between gap-4">

                    <div class="min-w-0">
                        <div class="flex items-start gap-4">
                            <div class="shrink-0 h-12 w-12 rounded-2xl bg-rk-red/10 flex items-center justify-center">
                                <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24"
                                    fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                    stroke-linejoin="round" aria-hidden="true" class="text-rk-red">
                                    <path d="M12 20h9" />
                                    <path d="M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z" />
                                </svg>
                            </div>

                            <div class="min-w-0">
                                <div class="flex items-center gap-2 flex-wrap">
                                    <div class="text-xl font-semibold truncate">{{ $update->title }}</div>

                                    @if ($update->version)
                                        <span
                                            class="inline-flex items-center rounded-full px-3 py-1 text-xs font-semibold border bg-white border-rk text-rk-slate">
                                            Version {{ ltrim($update->version, 'v') }}
                                        </span>
                                    @endif

                                    <span
                                        class="inline-flex items-center rounded-full px-3 py-1 text-xs font-semibold border {{ $pill }}">
                                        {{ strtoupper($update->type) }}
                                    </span>
                                </div>


                                <div class="mt-2 flex flex-wrap items-center gap-x-4 gap-y-1 text-sm text-rk-slate">
                                    <div class="inline-flex items-center gap-2">
                                        <span class="text-rk-slate/70">Veröffentlicht:</span>
                                        <span class="font-semibold text-rk-charcoal">
                                            {{ optional($published)->format('d.m.Y H:i') }}
                                        </span>
                                    </div>

                                    <span class="hidden sm:inline text-rk-slate/40">·</span>

                                    <div class="inline-flex items-center gap-2">
                                        <span class="text-rk-slate/70">Autor:</span>
                                        <span class="font-semibold text-rk-charcoal">
                                            {{ $update->creator?->email ?? '—' }}
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="flex flex-wrap items-center gap-2 lg:justify-end">
                        <a href="{{ route('updates.index') }}" class="btn-rk-soft">
                            Zurück
                        </a>

                        @if ($isDev)
                            <a href="{{ route('updates.edit', $update) }}" class="btn-rk-soft-green">
                                Bearbeiten
                            </a>

                            <form method="POST" action="{{ route('updates.destroy', $update) }}"
                                onsubmit="return confirm('Update wirklich löschen?')">
                                @csrf
                                @method('DELETE')
                                <button class="btn-rk-soft-red">
                                    Löschen
                                </button>
                            </form>
                        @endif
                    </div>

                </div>
            </div>

            {{-- subtle footer bar --}}
            <div
                class="px-6 sm:px-7 py-3 bg-neutral-50 border-t border-rk text-xs text-rk-slate flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2">
                <div class="inline-flex items-center gap-2">
                    <span class="font-semibold text-rk-charcoal">Update-ID:</span>
                    <span class="font-mono">{{ $update->id }}</span>
                </div>

                <div class="inline-flex items-center gap-2">
                    <span class="text-rk-slate/70">Erstellt:</span>
                    <span
                        class="font-semibold text-rk-charcoal">{{ optional($update->created_at)->format('d.m.Y H:i') }}</span>

                    @if ($update->editor?->email)
                        <span class="text-rk-slate/40">·</span>
                        <span class="text-rk-slate/70">Letzte Änderung:</span>
                        <span class="font-semibold text-rk-charcoal">{{ $update->editor->email }}</span>
                    @endif
                </div>
            </div>
        </div>

        {{-- Content --}}
        <div class="rounded-3xl bg-white border border-rk shadow-sm overflow-hidden">
            <div class="p-6 sm:p-7">
                <div class="flex items-center justify-between gap-3">
                    <div>
                        <div class="text-sm font-semibold">Inhalt</div>
                        <div class="mt-1 text-xs text-rk-slate">Änderungen & Hinweise im Detail.</div>
                    </div>
                </div>

                <div class="mt-5">
                    <div class="rounded-3xl border border-rk bg-neutral-50 p-5">
                        <div
                            class="text-sm leading-relaxed
                        [&_p]:my-2
                        [&_ul]:my-2 [&_ol]:my-2
                        [&_li]:my-0
                        [&_h1]:my-3 [&_h2]:my-3 [&_h3]:my-2
                        [&_blockquote]:my-3 [&_blockquote]:pl-4 [&_blockquote]:border-l-2 [&_blockquote]:border-rk
                        [&_pre]:my-3">
                            {!! $update->body !!}
                        </div>
                    </div>
                </div>

                {{-- Optional: quick meta line --}}
                <div class="mt-5 flex flex-wrap items-center gap-2 text-xs text-rk-slate">
                    <span
                        class="inline-flex items-center rounded-full border border-rk bg-white px-3 py-1 font-semibold">
                        {{ $typeLabel }}
                    </span>

                    <span
                        class="inline-flex items-center rounded-full border border-rk bg-white px-3 py-1 font-semibold">
                        {{ optional($published)->format('d.m.Y H:i') }}
                    </span>

                    @if ($update->creator?->email)
                        <span
                            class="inline-flex items-center rounded-full border border-rk bg-white px-3 py-1 font-semibold">
                            {{ $update->creator->email }}
                        </span>
                    @endif
                </div>
            </div>
        </div>
    </div>
</x-layouts.app>