{{-- resources/views/ui/security/audit/show.blade.php --}}

@php
    use Illuminate\Support\Str;

    $lvl = (string) ($log->level ?? '');
    $pill = match ($lvl) {
        'kritisch' => 'bg-red-50 text-red-700 border-red-200',
        'warn' => 'bg-amber-50 text-amber-700 border-amber-200',
        'info' => 'bg-emerald-50 text-emerald-700 border-emerald-200',
        default => 'bg-neutral-100 text-rk-slate border-rk',
    };

    // Pretty Meta (für <pre>)
    $metaString = is_array($meta)
        ? json_encode($meta, JSON_UNESCAPED_UNICODE | JSON_PRETTY_PRINT)
        : (is_string($meta)
            ? $meta
            : '');

    $ua = (string) ($log->user_agent ?? '');

    // Copy payloads
    $metaToCopy = $metaString;

    $allToCopy = json_encode(
        [
            'id' => $log->id,
            'created_at' => optional($log->created_at)->toDateTimeString(),
            'level' => $log->level,
            'action' => $log->action,
            'actor' => [
                'id' => $log->actor_user_id,
                'email' => $log->actor?->email,
                'name' => $log->actor?->name,
            ],
            'station' => [
                'id' => $log->station_id,
                'name' => $log->station?->name,
            ],
            'ip_address' => $log->ip_address ?? null,
            'user_agent' => $log->user_agent ?? null,
            'subject_type' => $log->subject_type ?? null,
            'subject_id' => $log->subject_id ?? null,
            'meta' => $log->meta,
        ],
        JSON_UNESCAPED_UNICODE | JSON_PRETTY_PRINT,
    );

    $rpill = fn($level) => match ((string) $level) {
        'kritisch' => 'bg-red-50 text-red-700 border-red-200',
        'warn' => 'bg-amber-50 text-amber-700 border-amber-200',
        'info' => 'bg-emerald-50 text-emerald-700 border-emerald-200',
        default => 'bg-neutral-100 text-rk-slate border-rk',
    };
@endphp

<x-layouts.app title="Audit Detail" 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>
                <div class="text-xl font-semibold">Audit Detail</div>
                <div class="mt-1 text-sm text-rk-slate">
                    Eintrag #{{ $log->id }} · {{ optional($log->created_at)->format('d.m.Y H:i:s') }}
                </div>
            </div>

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

                <button type="button" id="copyJsonBtn" class="btn-rk-soft">
                    Meta kopieren
                </button>

                <button type="button" id="copyAllBtn" class="btn-rk-soft-red">
                    Alles kopieren
                </button>
            </div>
        </div>

        {{-- Summary cards --}}
        <div class="grid grid-cols-1 xl:grid-cols-3 gap-4">
            <div class="rounded-3xl bg-white border border-rk p-6 shadow-sm">
                <div class="text-xs text-rk-slate/80 uppercase tracking-wider">Level</div>
                <div class="mt-3">
                    <span
                        class="inline-flex items-center rounded-full px-3 py-1 text-sm font-semibold border {{ $pill }}">
                        {{ $lvl !== '' ? $lvl : '—' }}
                    </span>
                </div>
                <div class="mt-4 text-xs text-rk-slate">
                    Action: <span class="font-semibold text-rk-charcoal">{{ $log->action ?? '—' }}</span>
                </div>
            </div>

            <div class="rounded-3xl bg-white border border-rk p-6 shadow-sm">
                <div class="text-xs text-rk-slate/80 uppercase tracking-wider">Actor</div>
                <div class="mt-2 text-sm font-semibold">{{ $log->actor?->name ?? '—' }}</div>
                <div class="mt-1 text-xs text-rk-slate">
                    {{ $log->actor?->email ?? ($log->actor_user_id ? 'user#' . $log->actor_user_id : '—') }}
                </div>
                <div class="mt-4 text-xs text-rk-slate">
                    Ortstelle: <span class="font-semibold text-rk-charcoal">{{ $log->station?->name ?? '—' }}</span>
                </div>
            </div>

            <div class="rounded-3xl bg-white border border-rk p-6 shadow-sm">
                <div class="text-xs text-rk-slate/80 uppercase tracking-wider">Request</div>
                <div class="mt-2 text-sm">
                    <div class="text-rk-slate">IP</div>
                    <div class="font-semibold">{{ $log->ip_address ?? '—' }}</div>
                </div>

                <div class="mt-4 text-sm">
                    <div class="text-rk-slate">User-Agent</div>
                    <div class="mt-1 text-xs text-rk-slate break-words">
                        {{ $ua !== '' ? $ua : '—' }}
                    </div>
                </div>
            </div>
        </div>

        {{-- Subject + Meta --}}
        <div class="grid grid-cols-1 xl:grid-cols-3 gap-4">
            <div class="xl:col-span-1 rounded-3xl bg-white border border-rk p-6 shadow-sm">
                <div class="text-sm font-semibold">Subject</div>
                <div class="mt-1 text-xs text-rk-slate">Zielobjekt der Aktion.</div>

                <div class="mt-4 rounded-2xl border border-rk bg-neutral-50 p-4">
                    <div class="text-xs text-rk-slate">Type</div>
                    <div class="mt-1 font-semibold text-sm text-rk-charcoal">
                        {{ $log->subject_type ? class_basename($log->subject_type) : '—' }}
                    </div>

                    <div class="mt-4 text-xs text-rk-slate">ID</div>
                    <div class="mt-1 font-semibold text-sm text-rk-charcoal">
                        {{ $log->subject_id ?? '—' }}
                    </div>

                    <div class="mt-4 text-xs text-rk-slate">Raw</div>
                    <div class="mt-1 text-xs text-rk-slate break-words">
                        {{ $log->subject_type ?? '—' }}
                    </div>
                </div>
            </div>

            <div class="xl:col-span-2 rounded-3xl bg-white border border-rk p-6 shadow-sm">
                <div class="flex items-start justify-between gap-3">
                    <div>
                        <div class="text-sm font-semibold">Meta</div>
                        <div class="mt-1 text-xs text-rk-slate">JSON / Zusatzinformationen.</div>
                    </div>

                    <button type="button" id="toggleMetaBtn" class="btn-rk-soft">
                        Ansicht wechseln
                    </button>
                </div>

                <div class="mt-4">
                    <pre id="metaPretty"
                        class="rounded-2xl border border-rk bg-neutral-50 p-4 text-xs text-rk-slate whitespace-pre-wrap break-words overflow-auto max-h-[420px]">{{ $metaString !== '' ? $metaString : '—' }}</pre>

                    <div id="metaRaw"
                        class="hidden rounded-2xl border border-rk bg-neutral-50 p-4 text-xs text-rk-slate break-words overflow-auto max-h-[420px]">
                        {{ is_string($log->meta) ? $log->meta : (is_array($log->meta) ? json_encode($log->meta, JSON_UNESCAPED_UNICODE) : '—') }}
                    </div>
                </div>
            </div>
        </div>

        {{-- Related --}}
        <div class="rounded-3xl bg-white border border-rk shadow-sm overflow-hidden">
            <div class="px-5 py-4 flex items-center justify-between gap-3">
                <div>
                    <div class="text-sm font-semibold">Ähnliche Einträge</div>
                    <div class="text-xs text-rk-slate">Gleicher User / IP / Action (max. 12).</div>
                </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-neutral-50">
                        <tr class="border-t border-b border-rk">
                            <th class="py-3 px-5 text-left">Zeitpunkt</th>
                            <th class="py-3 px-5 text-left">Level</th>
                            <th class="py-3 px-5 text-left">Action</th>
                            <th class="py-3 px-5 text-left">Actor</th>
                            <th class="py-3 px-5 text-left">IP</th>
                            <th class="py-3 px-5 text-right">Aktion</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-[color:var(--rk-border)]">
                        @forelse($related as $r)
                            <tr class="hover:bg-neutral-50">
                                <td class="py-4 px-5 text-rk-slate whitespace-nowrap">
                                    {{ optional($r->created_at)->format('d.m.Y H:i') }}
                                </td>
                                <td class="py-4 px-5">
                                    <span
                                        class="inline-flex items-center rounded-full px-3 py-1 text-xs font-semibold border {{ $rpill($r->level) }}">
                                        {{ $r->level ?? '—' }}
                                    </span>
                                </td>
                                <td class="py-4 px-5 font-semibold">{{ $r->action }}</td>
                                <td class="py-4 px-5 text-rk-slate">
                                    {{ $r->actor?->email ?? ($r->actor_user_id ? 'user#' . $r->actor_user_id : '—') }}
                                </td>
                                <td class="py-4 px-5 text-rk-slate whitespace-nowrap">{{ $r->ip_address ?? '—' }}</td>
                                <td class="py-4 px-5 text-right">
                                    <a href="{{ route('security.audit.show', $r) }}"
                                        class="text-rk-red font-semibold hover:underline">
                                        Öffnen
                                    </a>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="6" class="py-10 px-5 text-center text-rk-slate">
                                    Keine ähnlichen Einträge gefunden.
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

        <script>
            (function() {
                const metaPretty = document.getElementById('metaPretty');
                const metaRaw = document.getElementById('metaRaw');

                const toggleMetaBtn = document.getElementById('toggleMetaBtn');
                const copyJsonBtn = document.getElementById('copyJsonBtn');
                const copyAllBtn = document.getElementById('copyAllBtn');

                const metaToCopy = @json($metaToCopy);
                const allToCopy = @json($allToCopy);

                function flash(btn, text) {
                    const old = btn.textContent;
                    btn.textContent = text;
                    btn.disabled = true;
                    setTimeout(() => {
                        btn.textContent = old;
                        btn.disabled = false;
                    }, 1200);
                }

                async function copy(text, btn) {
                    const t = (typeof text === 'string') ? text : JSON.stringify(text);
                    try {
                        await navigator.clipboard.writeText(t);
                        flash(btn, 'Kopiert');
                    } catch (e) {
                        // Fallback
                        const ta = document.createElement('textarea');
                        ta.value = t;
                        document.body.appendChild(ta);
                        ta.select();
                        document.execCommand('copy');
                        document.body.removeChild(ta);
                        flash(btn, 'Kopiert');
                    }
                }

                toggleMetaBtn?.addEventListener('click', () => {
                    const rawVisible = !metaRaw.classList.contains('hidden');
                    if (rawVisible) {
                        metaRaw.classList.add('hidden');
                        metaPretty.classList.remove('hidden');
                    } else {
                        metaPretty.classList.add('hidden');
                        metaRaw.classList.remove('hidden');
                    }
                });

                copyJsonBtn?.addEventListener('click', () => copy(metaToCopy || '', copyJsonBtn));
                copyAllBtn?.addEventListener('click', () => copy(allToCopy || '', copyAllBtn));
            })();
        </script>
    </div>
</x-layouts.app>