@php
    $q = $q ?? request('q', '');
    $type = $type ?? request('type', 'alle');
    $isDev = auth()->user()?->hasRole('developer');

    $pill = function ($t) {
        return match ($t) {
            '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',
        };
    };

    $typeIcon = function ($t) {
        return match ($t) {
            'security' => 'text-red-600',
            'fix' => 'text-amber-700',
            'feature' => 'text-emerald-700',
            'maintenance' => 'text-blue-700',
            default => 'text-rk-slate',
        };
    };
@endphp

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

        {{-- Header --}}
        <div class="flex flex-col sm:flex-row sm:items-end sm:justify-between gap-3">
            <div class="min-w-0">
                <div class="flex items-center gap-3">
                    <div class="h-11 w-11 rounded-2xl bg-rk-red/10 flex items-center justify-center shrink-0">
                        <div class="h-5 w-5 rounded bg-rk-red"></div>
                    </div>

                    <div class="min-w-0">
                        <div class="text-xl font-semibold">Updates</div>
                        <div class="mt-1 text-sm text-rk-slate">Änderungen, Releases, Fixes & Hinweise.</div>
                    </div>
                </div>
            </div>

            <div class="flex items-center gap-2">
                <a href="{{ route('updates.index') }}" class="btn-rk-soft">Aktualisieren</a>

                @if ($isDev)
                    <a href="{{ route('updates.create') }}" class="btn-rk-soft-green">
                        + Update erstellen
                    </a>
                @endif
            </div>
        </div>

        {{-- Filter --}}
        <form method="GET" action="{{ route('updates.index') }}"
            class="rounded-3xl bg-white border border-rk p-4 shadow-sm">
            <div class="grid grid-cols-1 lg:grid-cols-12 gap-3 lg:items-end">
                <div class="lg:col-span-7">
                    <label class="text-xs font-semibold text-rk-slate/80 uppercase tracking-wider">Suche</label>
                    <div class="mt-2 relative">
                        <span class="absolute left-4 top-1/2 -translate-y-1/2 text-rk-slate/70">
                            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"
                                fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                stroke-linejoin="round" aria-hidden="true">
                                <circle cx="11" cy="11" r="7"></circle>
                                <path d="m21 21-4.3-4.3"></path>
                            </svg>
                        </span>
                        <input name="q" value="{{ $q }}"
                            class="w-full rounded-2xl border border-rk bg-white pl-11 pr-4 py-3 text-sm focus:ring-2 ring-rk focus:border-transparent"
                            placeholder="Titel oder Text…">
                    </div>
                </div>

                <div class="lg:col-span-3">
                    <label class="text-xs font-semibold text-rk-slate/80 uppercase tracking-wider">Typ</label>
                    <select name="type" class="mt-2 w-full rounded-2xl border border-rk bg-white px-4 py-3 text-sm">
                        @foreach ($types as $k => $lbl)
                            <option value="{{ $k }}" @selected($type === $k)>{{ $lbl }}
                            </option>
                        @endforeach
                    </select>
                </div>

                <div class="lg:col-span-2 flex gap-2">
                    <a href="{{ route('updates.index') }}"
                        class="mt-6 w-full rounded-2xl border border-rk bg-white px-4 py-3 text-sm font-semibold hover:bg-neutral-50 text-center transition-rk hover:shadow-button">
                        Reset
                    </a>
                    <button type="submit"
                        class="mt-6 w-full rounded-2xl bg-rk-red px-4 py-3 text-sm font-semibold text-white hover:bg-rk-red-dark transition-rk hover:shadow-button">
                        Filtern
                    </button>
                </div>
            </div>
        </form>

        @if (session('success'))
            <div class="rounded-3xl border border-rk bg-neutral-50 p-4 text-sm text-rk-slate">
                {{ session('success') }}
            </div>
        @endif

        {{-- List --}}
        <div class="rounded-3xl bg-white border border-rk shadow-sm overflow-hidden">
            <div class="px-5 py-4 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2">
                <div>
                    <div class="text-sm font-semibold">Einträge</div>
                    <div class="text-xs text-rk-slate">Neueste zuerst.</div>
                </div>

                <div class="inline-flex items-center gap-2">
                    <span
                        class="inline-flex items-center rounded-full border border-rk bg-neutral-50 px-3 py-1 text-xs font-semibold text-rk-slate">
                        {{ $logs->total() }} Einträge
                    </span>
                </div>
            </div>

            <div class="divide-y divide-[color:var(--rk-border)]">
                @forelse($logs as $u)
                    <a href="{{ route('updates.show', $u) }}" class="block group hover:bg-neutral-50 transition-rk">
                        <div class="p-5 flex items-start sm:items-center justify-between gap-4">
                            <div class="min-w-0 flex items-start gap-4">
                                {{-- Icon badge --}}
                                <div
                                    class="h-11 w-11 rounded-2xl border border-rk bg-white flex items-center justify-center shrink-0">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18"
                                        viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                        stroke-linecap="round" stroke-linejoin="round"
                                        class="{{ $typeIcon($u->type) }}" aria-hidden="true">
                                        <path d="M12 2v4"></path>
                                        <path d="M12 18v4"></path>
                                        <path d="M4.93 4.93l2.83 2.83"></path>
                                        <path d="M16.24 16.24l2.83 2.83"></path>
                                        <path d="M2 12h4"></path>
                                        <path d="M18 12h4"></path>
                                        <path d="M4.93 19.07l2.83-2.83"></path>
                                        <path d="M16.24 7.76l2.83-2.83"></path>
                                    </svg>
                                </div>

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

                                            @if ($u->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">
                                                    v{{ ltrim($u->version, 'v') }}
                                                </span>
                                            @endif

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

                                    <div class="mt-1 text-xs text-rk-slate flex flex-wrap gap-x-2 gap-y-1">
                                        <span>
                                            {{ optional($u->published_at)->format('d.m.Y H:i') ?? optional($u->created_at)->format('d.m.Y H:i') }}
                                        </span>
                                        @if ($u->creator?->email)
                                            <span class="text-rk-slate/70">·</span>
                                            <span>{{ $u->creator->email }}</span>
                                        @endif
                                    </div>
                                </div>
                            </div>

                            {{-- CTA --}}
                            <div class="shrink-0 flex items-center gap-2">
                                <span
                                    class="inline-flex items-center justify-center h-10 w-10 rounded-2xl border border-rk bg-white group-hover:bg-neutral-50 transition-rk">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18"
                                        viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                        stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"
                                        class="text-rk-green">
                                        <path d="M7 17L17 7"></path>
                                        <path d="M7 7h10v10"></path>
                                    </svg>
                                </span>
                            </div>
                        </div>
                    </a>
                @empty
                    <div class="p-10 text-center">
                        <div class="text-sm font-semibold">Keine Updates vorhanden</div>
                        <div class="mt-1 text-xs text-rk-slate">Erstelle ein Update, sobald es Änderungen gibt.</div>

                        @if ($isDev)
                            <div class="mt-4">
                                <a href="{{ route('updates.create') }}" class="btn-rk-soft-green">
                                    + Update erstellen
                                </a>
                            </div>
                        @endif
                    </div>
                @endforelse
            </div>

            {{-- Pagination --}}
            <div class="px-5 py-4 border-t border-rk bg-white">
                {{ $logs->links() }}
            </div>
        </div>

    </div>
</x-layouts.app>