{{-- resources/views/ui/feedback/index.blade.php --}}
@php
    $q = $q ?? '';
    $type = $type ?? 'alle';
    $status = $status ?? 'alle';
    $priority = $priority ?? 'alle';

    $statusLabel = [
        'open' => 'Offen',
        'triage' => 'Triage',
        'in_progress' => 'In Arbeit',
        'done' => 'Erledigt',
        'rejected' => 'Abgelehnt',
    ];

    $statusBadge = function (?string $s) {
        return match ($s) {
            'done' => 'bg-emerald-50 text-emerald-800 border-emerald-200',
            'in_progress' => 'bg-amber-50 text-amber-900 border-amber-200',
            'triage' => 'bg-blue-50 text-blue-800 border-blue-200',
            'rejected' => 'bg-red-50 text-red-800 border-red-200',
            default => 'bg-neutral-100 text-rk-slate border-rk',
        };
    };

    $prioLabel = [
        'low' => 'Niedrig',
        'medium' => 'Mittel',
        'high' => 'Hoch',
    ];

    $prioBadge = function (?string $p) {
        return match ($p) {
            'high' => 'bg-red-50 text-red-800 border-red-200',
            'medium' => 'bg-amber-50 text-amber-900 border-amber-200',
            'low' => 'bg-neutral-100 text-rk-slate border-rk',
            default => 'bg-neutral-100 text-rk-slate border-rk',
        };
    };

    $typeBadge = function (?string $t) {
        return $t === 'bug'
            ? 'bg-purple-50 text-purple-800 border-purple-200'
            : 'bg-sky-50 text-sky-800 border-sky-200';
    };

    $typeLabel = function (?string $t) {
        return $t === 'bug' ? 'Bug' : 'Verbesserung';
    };

    $hasFilters = $q !== '' || $type !== 'alle' || $status !== 'alle' || $priority !== 'alle';
@endphp

<x-layouts.app title="Verbesserungen & Bugs"
    userRole="{{ auth()->user()->isDistrictUser() ? 'Bezirksstelle' : 'Ortstelle' }}">

    <div class="flex flex-col gap-4">

        {{-- Header --}}
        <div class="rounded-3xl bg-white border border-rk p-6 shadow-sm">
            <div class="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-4">
                <div>
                    <div class="flex items-center gap-3">
                        <div
                            class="h-11 w-11 rounded-2xl border border-rk bg-neutral-50 flex items-center justify-center">
                            <svg class="h-5 w-5 text-rk-red" viewBox="0 0 24 24" fill="none" aria-hidden="true">
                                <path d="M21 15a4 4 0 0 1-4 4H8l-5 3V7a4 4 0 0 1 4-4h10a4 4 0 0 1 4 4v8Z"
                                    stroke="currentColor" stroke-width="2" stroke-linejoin="round" />
                            </svg>
                        </div>
                        <div>
                            <div class="text-xl font-semibold">Verbesserungen & Bugs</div>
                            <div class="mt-1 text-sm text-rk-slate">
                                Meldungen erstellen und Verlauf einsehen.
                            </div>
                        </div>
                    </div>

                    <div class="mt-4 flex flex-wrap 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">
                            {{ $reports->total() }} Meldungen
                        </span>

                        @if ($hasFilters)
                            <span
                                class="inline-flex items-center rounded-full border border-amber-200 bg-amber-50 px-3 py-1 text-xs font-semibold text-amber-900">
                                Filter aktiv
                            </span>
                        @endif
                    </div>
                </div>

                <div class="flex items-center gap-2">
                    <a href="{{ route('feedback.create') }}" class="btn-rk-soft-green">
                        + Meldung erstellen
                    </a>
                </div>
            </div>
        </div>

        {{-- Filter --}}
        <form method="GET" action="{{ route('feedback.index') }}"
            class="rounded-3xl bg-white border border-rk p-5 shadow-sm">

            <div class="grid grid-cols-1 lg:grid-cols-12 gap-3 lg:items-end">
                <div class="lg:col-span-6">
                    <label class="text-xs font-semibold text-rk-slate/80 uppercase tracking-wider">Suche</label>
                    <div class="relative mt-2">
                        <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-4 text-rk-slate">
                            <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" aria-hidden="true">
                                <path d="M21 21l-4.3-4.3" stroke="currentColor" stroke-width="2"
                                    stroke-linecap="round" />
                                <path d="M11 19a8 8 0 1 0 0-16 8 8 0 0 0 0 16Z" stroke="currentColor"
                                    stroke-width="2" />
                            </svg>
                        </div>
                        <input name="q" value="{{ $q }}" type="text"
                            class="w-full rounded-2xl border border-rk bg-white pl-11 pr-4 py-3 text-sm outline-none focus:ring-2 ring-rk focus:border-transparent"
                            placeholder="Titel, Beschreibung, Schritte…">
                    </div>
                </div>

                <div class="lg:col-span-2">
                    <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">
                        <option value="alle" @selected($type === 'alle')>Alle</option>
                        <option value="bug" @selected($type === 'bug')>Bug</option>
                        <option value="feature" @selected($type === 'feature')>Verbesserung</option>
                    </select>
                </div>

                <div class="lg:col-span-2">
                    <label class="text-xs font-semibold text-rk-slate/80 uppercase tracking-wider">Status</label>
                    <select name="status" class="mt-2 w-full rounded-2xl border border-rk bg-white px-4 py-3 text-sm">
                        <option value="alle" @selected($status === 'alle')>Alle</option>
                        <option value="open" @selected($status === 'open')>Offen</option>
                        <option value="triage" @selected($status === 'triage')>Triage</option>
                        <option value="in_progress" @selected($status === 'in_progress')>In Arbeit</option>
                        <option value="done" @selected($status === 'done')>Erledigt</option>
                        <option value="rejected" @selected($status === 'rejected')>Abgelehnt</option>
                    </select>
                </div>

                <div class="lg:col-span-2">
                    <label class="text-xs font-semibold text-rk-slate/80 uppercase tracking-wider">Priorität</label>
                    <select name="priority" class="mt-2 w-full rounded-2xl border border-rk bg-white px-4 py-3 text-sm">
                        <option value="alle" @selected($priority === 'alle')>Alle</option>
                        <option value="low" @selected($priority === 'low')>Niedrig</option>
                        <option value="medium" @selected($priority === 'medium')>Mittel</option>
                        <option value="high" @selected($priority === 'high')>Hoch</option>
                    </select>
                </div>

                <div class="lg:col-span-12 flex flex-col sm:flex-row sm:items-center sm:justify-end gap-2 pt-1">
                    <a href="{{ route('feedback.index') }}" class="btn-rk-soft">
                        Reset
                    </a>
                    <button class="btn-rk-soft-red">
                        Filtern
                    </button>
                </div>
            </div>
        </form>

        {{-- Table --}}
        <div class="rounded-3xl bg-white border border-rk shadow-sm overflow-hidden">
            <div class="px-6 py-5 bg-neutral-50 border-b border-rk flex items-start justify-between gap-3">
                <div>
                    <div class="text-sm font-semibold">Meldungen</div>
                    <div class="mt-1 text-xs text-rk-slate">Neueste zuerst.</div>
                </div>

                <div class="text-xs text-rk-slate">
                    Seite {{ $reports->currentPage() }} / {{ $reports->lastPage() }}
                </div>
            </div>

            <div class="overflow-x-auto">
                <table class="w-full text-sm">
                    <thead class="text-xs text-rk-slate/80 uppercase tracking-wider bg-white">
                        <tr class="border-b border-rk">
                            <th class="py-3 px-6 text-left">#</th>
                            <th class="py-3 px-6 text-left">Titel</th>
                            <th class="py-3 px-6 text-left">Typ</th>
                            <th class="py-3 px-6 text-left">Status</th>
                            <th class="py-3 px-6 text-left">Priorität</th>
                            <th class="py-3 px-6 text-left">Ortstelle</th>
                            <th class="py-3 px-6 text-left">Erstellt</th>
                            <th class="py-3 px-6 text-left">Antworten</th>
                            <th class="py-3 px-6 text-right">Aktion</th>
                        </tr>
                    </thead>

                    <tbody class="divide-y divide-[color:var(--rk-border)]">
                        @forelse($reports as $r)
                            <tr class="hover:bg-neutral-50">
                                <td class="py-4 px-6 text-rk-slate">{{ $r->id }}</td>

                                <td class="py-4 px-6">
                                    <div class="font-semibold text-rk-charcoal">{{ $r->title }}</div>
                                    <div class="mt-1 text-xs text-rk-slate line-clamp-1">
                                        {{ \Illuminate\Support\Str::limit((string) $r->description, 120) }}
                                    </div>
                                </td>

                                <td class="py-4 px-6">
                                    <span
                                        class="inline-flex items-center rounded-full border px-3 py-1 text-xs font-semibold {{ $typeBadge($r->type) }}">
                                        {{ $typeLabel($r->type) }}
                                    </span>
                                </td>

                                <td class="py-4 px-6">
                                    <span
                                        class="inline-flex items-center rounded-full border px-3 py-1 text-xs font-semibold {{ $statusBadge($r->status) }}">
                                        {{ $statusLabel[$r->status] ?? str_replace('_', ' ', (string) $r->status) }}
                                    </span>
                                </td>

                                <td class="py-4 px-6">
                                    <span
                                        class="inline-flex items-center rounded-full border px-3 py-1 text-xs font-semibold {{ $prioBadge($r->priority) }}">
                                        {{ $prioLabel[$r->priority] ?? $r->priority }}
                                    </span>
                                </td>

                                <td class="py-4 px-6 text-rk-slate">
                                    {{ $r->station?->name ?? '—' }}
                                </td>

                                <td class="py-4 px-6 text-rk-slate whitespace-nowrap">
                                    {{ optional($r->created_at)->format('d.m.Y H:i') }}
                                </td>

                                <td class="py-4 px-6">
                                    @php
                                        $replyCount = isset($r->replies_count)
                                            ? (int) $r->replies_count
                                            : (int) $r->replies()->count();
                                    @endphp
                                    <span
                                        class="inline-flex items-center gap-2 rounded-full border border-rk bg-white px-3 py-1 text-xs font-semibold text-rk-slate">
                                        <span
                                            class="h-2 w-2 rounded-full {{ $replyCount > 0 ? 'bg-rk-red' : 'bg-neutral-300' }}"></span>
                                        {{ $replyCount }}
                                    </span>
                                </td>
                                <td class="py-4 px-6 text-right">
                                    <a href="{{ route('feedback.show', $r) }}"
                                        class="inline-flex items-center justify-center h-10 w-10 rounded-2xl border border-rk bg-white hover:bg-neutral-50 transition-rk"
                                        title="Öffnen" aria-label="Öffnen">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"
                                            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="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7z" />
                                            <circle cx="12" cy="12" r="3" />
                                        </svg>
                                    </a>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="9" class="py-12 px-6 text-center">
                                    <div class="text-sm font-semibold">Keine Meldungen gefunden</div>
                                    <div class="mt-1 text-xs text-rk-slate">
                                        Filter zurücksetzen oder neue Meldung erstellen.
                                    </div>
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            <div class="px-6 py-4 border-t border-rk bg-white">
                {{ $reports->links('vendor.pagination.rk') }}
            </div>
        </div>
    </div>
</x-layouts.app>