{{-- resources/views/ui/feedback/show.blade.php --}}

<x-layouts.app title="Meldung #{{ $report->id }}"
    userRole="{{ auth()->user()->isDistrictUser() ? 'Bezirksstelle' : 'Ortstelle' }}">

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

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

        $typeLabel = $report->type === 'bug' ? 'Bug' : 'Verbesserung';

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

        $priorityBadge = function ($prio) {
            return match ($prio) {
                '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 ($type) {
            return $type === 'bug'
                ? 'bg-purple-50 text-purple-800 border-purple-200'
                : 'bg-sky-50 text-sky-800 border-sky-200';
        };

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

    <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 class="min-w-0">
                    <div class="flex items-start gap-4">
                        <div
                            class="hidden sm:flex h-12 w-12 rounded-2xl border border-rk bg-neutral-50 items-center justify-center">
                            <svg class="h-6 w-6 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 class="min-w-0">
                            <div class="flex items-center gap-2 flex-wrap">
                                <div class="text-xl font-semibold truncate">{{ $report->title }}</div>

                                <span
                                    class="inline-flex items-center rounded-full border px-3 py-1 text-xs font-semibold {{ $statusBadge($report->status) }}">
                                    {{ $statuses[$report->status] ?? $report->status }}
                                </span>

                                <span
                                    class="inline-flex items-center rounded-full border px-3 py-1 text-xs font-semibold {{ $priorityBadge($report->priority) }}">
                                    {{ $priorities[$report->priority] ?? $report->priority }}
                                </span>

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

                            <div class="mt-2 flex flex-wrap gap-x-4 gap-y-1 text-sm text-rk-slate">
                                <span class="inline-flex items-center gap-2">
                                    <span class="h-1.5 w-1.5 rounded-full bg-neutral-300"></span>
                                    #{{ $report->id }}
                                </span>
                                <span class="inline-flex items-center gap-2">
                                    <span class="h-1.5 w-1.5 rounded-full bg-neutral-300"></span>
                                    {{ $report->station?->name ?? '—' }}
                                </span>
                                <span class="inline-flex items-center gap-2">
                                    <span class="h-1.5 w-1.5 rounded-full bg-neutral-300"></span>
                                    {{ optional($report->created_at)->format('d.m.Y H:i') }}
                                </span>
                                <span class="inline-flex items-center gap-2">
                                    <span class="h-1.5 w-1.5 rounded-full bg-neutral-300"></span>
                                    {{ $report->creator?->email ?? '—' }}
                                </span>
                            </div>
                        </div>
                    </div>
                </div>

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

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

        @if ($errors->any())
            <div class="rounded-3xl border border-red-200 bg-red-50 p-4 text-sm text-red-900">
                <div class="font-semibold">Bitte prüfen:</div>
                <ul class="mt-2 list-disc pl-5 space-y-1">
                    @foreach ($errors->all() as $e)
                        <li>{{ $e }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <div class="grid grid-cols-1 xl:grid-cols-12 gap-4">

            {{-- Left --}}
            <div class="xl:col-span-8 space-y-4">

                {{-- Beschreibung --}}
                <div class="rounded-3xl bg-white border border-rk p-6 shadow-sm space-y-4">
                    <div>
                        <div class="text-xs font-semibold text-rk-slate/80 uppercase tracking-wider">Beschreibung</div>
                        <div class="mt-2 text-sm whitespace-pre-line leading-relaxed">{{ $report->description }}</div>
                    </div>

                    @if ($report->steps)
                        <div class="rounded-2xl border border-rk bg-neutral-50 p-4">
                            <div class="text-xs font-semibold text-rk-slate/80 uppercase tracking-wider">Schritte</div>
                            <div class="mt-2 text-sm whitespace-pre-line leading-relaxed">{{ $report->steps }}</div>
                        </div>
                    @endif

                    @if ($report->expected || $report->actual)
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div class="rounded-2xl border border-rk bg-neutral-50 p-4">
                                <div class="text-xs font-semibold text-rk-slate/80 uppercase tracking-wider">Erwartet
                                </div>
                                <div class="mt-2 text-sm whitespace-pre-line text-rk-slate leading-relaxed">
                                    {{ $report->expected ?? '—' }}
                                </div>
                            </div>
                            <div class="rounded-2xl border border-rk bg-neutral-50 p-4">
                                <div class="text-xs font-semibold text-rk-slate/80 uppercase tracking-wider">Tatsächlich
                                </div>
                                <div class="mt-2 text-sm whitespace-pre-line text-rk-slate leading-relaxed">
                                    {{ $report->actual ?? '—' }}
                                </div>
                            </div>
                        </div>
                    @endif
                </div>

                {{-- Thread --}}
                <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">
                        <div class="flex items-start justify-between gap-3">
                            <div>
                                <div class="text-sm font-semibold">Nachrichten</div>
                                <div class="mt-1 text-xs text-rk-slate">Neueste zuerst · Rückfragen & Antworten.</div>
                            </div>

                            <span
                                class="inline-flex items-center rounded-full border border-rk bg-white px-3 py-1 text-xs font-semibold text-rk-slate">
                                {{ $replies->total() }} Beiträge
                            </span>
                        </div>
                    </div>

                    <div class="p-6 space-y-3">
                        @forelse($replies as $reply)
                            @php
                                $isMine =
                                    auth()->id() && $reply->user_id && (int) auth()->id() === (int) $reply->user_id;
                            @endphp

                            <div class="rounded-3xl border border-rk bg-white overflow-hidden">
                                {{-- Header: neutral + role accent --}}
                                <div
                                    class="px-4 py-3 bg-neutral-50 flex items-start justify-between gap-3 border-b border-rk">
                                    <div class="min-w-0 flex items-center gap-3">
                                        <div
                                            class="h-9 w-9 rounded-2xl border border-rk bg-white flex items-center justify-center">
                                            <svg class="h-4 w-4 text-rk-slate" viewBox="0 0 24 24" fill="none"
                                                aria-hidden="true">
                                                <path d="M20 21c0-3.3-3.6-6-8-6s-8 2.7-8 6" stroke="currentColor"
                                                    stroke-width="2" stroke-linecap="round" />
                                                <path d="M12 13a4 4 0 1 0 0-8 4 4 0 0 0 0 8Z" stroke="currentColor"
                                                    stroke-width="2" />
                                            </svg>
                                        </div>

                                        <div class="min-w-0">
                                            <div class="text-sm font-semibold truncate">
                                                {{ $reply->author?->name ?? '—' }}
                                                <span class="text-xs font-medium text-rk-slate">·
                                                    {{ $reply->author?->email ?? '' }}</span>
                                            </div>
                                            <div class="mt-0.5 text-xs text-rk-slate">
                                                {{ optional($reply->created_at)->format('d.m.Y H:i') }}
                                            </div>
                                        </div>

                                        @if ($isMine)
                                            <span
                                                class="hidden sm:inline-flex items-center rounded-full border border-rk bg-white px-2.5 py-1 text-[11px] font-semibold text-rk-slate">
                                                Du
                                            </span>
                                        @endif
                                    </div>

                                    <div class="flex items-center gap-2">
                                        <span class="text-xs text-rk-slate">#{{ $reply->id }}</span>
                                        <span
                                            class="h-2 w-2 rounded-full {{ $isMine ? 'bg-rk-red' : 'bg-neutral-300' }}"></span>
                                    </div>
                                </div>

                                <div class="px-4 py-4">
                                    @if ($reply->message)
                                        <div class="text-sm whitespace-pre-line leading-relaxed">{{ $reply->message }}
                                        </div>
                                    @else
                                        <div class="text-sm text-rk-slate italic">Kein Text (nur Anhang).</div>
                                    @endif

                                    @if ($reply->attachments && $reply->attachments->count())
                                        <div class="mt-4 grid grid-cols-2 sm:grid-cols-3 gap-3">
                                            @foreach ($reply->attachments as $att)
                                                @php
                                                    $url = method_exists($att, 'url')
                                                        ? $att->url()
                                                        : \Illuminate\Support\Facades\Storage::disk($att->disk)->url(
                                                            $att->path,
                                                        );
                                                @endphp

                                                <a href="{{ $url }}" target="_blank"
                                                    class="group block rounded-2xl overflow-hidden border border-rk bg-white hover:shadow-button transition-rk">
                                                    <div class="relative">
                                                        <img src="{{ $url }}"
                                                            alt="{{ $att->original_name ?? 'Bild' }}"
                                                            class="h-28 w-full object-cover">
                                                        <div
                                                            class="absolute inset-0 bg-black/0 group-hover:bg-black/10 transition-rk">
                                                        </div>
                                                    </div>
                                                    <div class="px-3 py-2 text-xs text-rk-slate truncate">
                                                        {{ $att->original_name ?? 'Bild' }}
                                                    </div>
                                                </a>
                                            @endforeach
                                        </div>
                                    @endif
                                </div>
                            </div>
                        @empty
                            <div class="rounded-2xl border border-rk bg-white p-4 text-sm text-rk-slate">
                                Noch keine Nachrichten vorhanden.
                            </div>
                        @endforelse

                        @if ($replies->hasPages())
                            <div class="pt-2 flex items-center justify-between gap-2">
                                @if ($replies->previousPageUrl())
                                    <a href="{{ $replies->previousPageUrl() }}" class="btn-rk-soft">Neuere</a>
                                @else
                                    <span class="btn-rk-soft opacity-50 pointer-events-none">Neuere</span>
                                @endif

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

                                @if ($replies->nextPageUrl())
                                    <a href="{{ $replies->nextPageUrl() }}" class="btn-rk-soft">Ältere</a>
                                @else
                                    <span class="btn-rk-soft opacity-50 pointer-events-none">Ältere</span>
                                @endif
                            </div>
                        @endif
                    </div>

                    {{-- Composer --}}
                    <div class="border-t border-rk bg-neutral-50 p-6">
                        <div class="flex items-start justify-between gap-3">
                            <div>
                                <div class="text-sm font-semibold">Antwort schreiben</div>
                                <div class="mt-1 text-xs text-rk-slate">
                                    Text oder Bilder hochladen (optional). Mindestens eines ist erforderlich.
                                </div>
                            </div>
                            <span
                                class="hidden sm:inline-flex items-center rounded-full border border-rk bg-white px-3 py-1 text-xs font-semibold text-rk-slate">
                                Antwort
                            </span>
                        </div>

                        <form method="POST" action="{{ route('feedback.reply.store', $report) }}" class="mt-4"
                            enctype="multipart/form-data">
                            @csrf

                            <div class="rounded-3xl border border-rk bg-white p-4">
                                <textarea name="message" rows="4"
                                    class="w-full resize-y rounded-2xl border border-rk bg-white px-4 py-3 text-sm focus:ring-2 ring-rk focus:border-transparent"
                                    placeholder="Schreibe eine Nachricht…">{{ old('message') }}</textarea>

                                <div class="mt-3 grid grid-cols-1 sm:grid-cols-12 gap-3 sm:items-end">
                                    <div class="sm:col-span-8">
                                        <label class="text-xs font-semibold text-rk-slate/80 uppercase tracking-wider">
                                            Bilder (optional)
                                        </label>
                                        <input type="file" name="images[]" multiple accept="image/*"
                                            class="mt-2 w-full rounded-2xl border border-rk bg-white px-4 py-2.5 text-sm">
                                        <div class="mt-1 text-xs text-rk-slate">
                                            Max. 5 Bilder · je 5MB · JPG/PNG/WebP
                                        </div>
                                    </div>

                                    <div class="sm:col-span-4 flex gap-2 sm:justify-end">
                                        <button type="reset" class="btn-rk-soft w-full sm:w-auto">Leeren</button>
                                        <button type="submit" class="btn-rk-primary w-full sm:w-auto">Senden</button>
                                    </div>
                                </div>
                            </div>

                            @error('message')
                                <div
                                    class="mt-3 rounded-2xl border border-red-200 bg-red-50 px-4 py-3 text-xs text-red-900">
                                    {{ $message }}
                                </div>
                            @enderror
                            @error('images')
                                <div
                                    class="mt-3 rounded-2xl border border-red-200 bg-red-50 px-4 py-3 text-xs text-red-900">
                                    {{ $message }}
                                </div>
                            @enderror
                            @error('images.*')
                                <div
                                    class="mt-3 rounded-2xl border border-red-200 bg-red-50 px-4 py-3 text-xs text-red-900">
                                    {{ $message }}
                                </div>
                            @enderror
                        </form>
                    </div>
                </div>
            </div>

            {{-- Right --}}
            <div class="xl:col-span-4 space-y-4">
                <div class="rounded-3xl bg-white border border-rk p-6 shadow-sm space-y-4">
                    <div class="text-sm font-semibold">Details</div>

                    <div class="text-sm text-rk-slate space-y-2">
                        <div class="flex items-center justify-between gap-3">
                            <span
                                class="text-xs font-semibold text-rk-slate/80 uppercase tracking-wider">Ortstelle</span>
                            <span class="font-semibold text-rk-charcoal">{{ $report->station?->name ?? '—' }}</span>
                        </div>
                        <div class="flex items-center justify-between gap-3">
                            <span class="text-xs font-semibold text-rk-slate/80 uppercase tracking-wider">Erstellt
                                von</span>
                            <span class="text-rk-charcoal">{{ $report->creator?->email ?? '—' }}</span>
                        </div>
                        <div class="flex items-center justify-between gap-3">
                            <span class="text-xs font-semibold text-rk-slate/80 uppercase tracking-wider">Status</span>
                            <span
                                class="inline-flex items-center rounded-full border px-3 py-1 text-xs font-semibold {{ $statusBadge($report->status) }}">
                                {{ $statuses[$report->status] ?? $report->status }}
                            </span>
                        </div>
                        <div class="flex items-center justify-between gap-3">
                            <span
                                class="text-xs font-semibold text-rk-slate/80 uppercase tracking-wider">Priorität</span>
                            <span
                                class="inline-flex items-center rounded-full border px-3 py-1 text-xs font-semibold {{ $priorityBadge($report->priority) }}">
                                {{ $priorities[$report->priority] ?? $report->priority }}
                            </span>
                        </div>
                    </div>

                    @if ($isDev)
                        <form method="POST" action="{{ route('feedback.status', $report) }}"
                            class="rounded-3xl border border-rk bg-neutral-50 p-4 space-y-3">
                            @csrf

                            <div class="text-xs font-semibold text-rk-slate/80 uppercase tracking-wider">
                                Developer Controls
                            </div>

                            <div>
                                <label class="text-xs font-semibold text-rk-slate/80 uppercase tracking-wider">Status
                                    ändern</label>
                                <select name="status"
                                    class="mt-2 w-full rounded-2xl border border-rk bg-white px-4 py-3 text-sm">
                                    @foreach ($statuses as $k => $lbl)
                                        <option value="{{ $k }}" @selected($report->status === $k)>
                                            {{ $lbl }}</option>
                                    @endforeach
                                </select>
                            </div>

                            <div>
                                <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">
                                    @foreach ($priorities as $k => $lbl)
                                        <option value="{{ $k }}" @selected($report->priority === $k)>
                                            {{ $lbl }}</option>
                                    @endforeach
                                </select>
                            </div>

                            <button class="btn-rk-soft-green text-md! w-full p-4">Speichern</button>
                        </form>

                        @if (is_array($report->meta) && count($report->meta))
                            <div class="rounded-3xl border border-rk bg-white p-4">
                                <div class="text-xs font-semibold text-rk-slate/80 uppercase tracking-wider">Technisch
                                </div>
                                <div class="mt-2 text-xs text-rk-slate break-words space-y-1">
                                    @foreach ($report->meta as $k => $v)
                                        <div>
                                            <span class="font-semibold">{{ $k }}:</span>
                                            {{ is_scalar($v) ? $v : json_encode($v) }}
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        @endif
                    @endif
                </div>
            </div>
        </div>
    </div>
</x-layouts.app>