@php
    $filters = $eventLogFilters ?? ['category' => '', 'workflow' => 'needs_attention', 'severity' => '', 'action' => ''];
    $focusId = (int) ($eventLogFocusId ?? 0);
    $severityStyles = [
        'info' => 'bg-slate-100 text-slate-700 border-slate-200',
        'warning' => 'bg-amber-50 text-amber-900 border-amber-200',
        'critical' => 'bg-rose-50 text-rose-900 border-rose-200',
    ];
    $workflowStyles = [
        'open' => 'bg-sky-50 text-sky-900 border-sky-200',
        'in_progress' => 'bg-violet-50 text-violet-900 border-violet-200',
        'resolved' => 'bg-emerald-50 text-emerald-900 border-emerald-200',
        'dismissed' => 'bg-slate-100 text-slate-600 border-slate-200',
    ];
    $categoryLabels = [
        'transaction' => 'Transactions',
        'security' => 'Security',
        'account' => 'Accounts',
        'governance' => 'Governance',
        'operations' => 'Operations',
        'access' => 'Access',
    ];
@endphp

<section class="bg-white border border-[#ECECEC] rounded-2xl p-4 md:p-5 scroll-mt-24 space-y-5" x-data data-turbo="false">
    <div>
        <div class="flex flex-wrap items-start justify-between gap-3">
            <div>
                <h2 class="text-lg font-bold text-slate-900">Event log</h2>
                <p class="text-sm text-[#5A5A5A] mt-2 max-w-3xl">
                    Categorized audit trail for transactions, security blocks, account holds, and governance actions.
                    Open a row dialog to <strong>start</strong> or <strong>complete</strong> review tasks, or use redirect buttons to jump to outbound security, working account blocks, or governance holds.
                </p>
            </div>
            @if (($eventLogOpenCount ?? 0) > 0)
                <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">
                    {{ $eventLogOpenCount }} need attention
                </span>
            @endif
        </div>
    </div>

    @if (session('status'))
        <p class="rounded-xl border border-emerald-200 bg-emerald-50 px-3 py-2 text-sm text-emerald-900">{{ session('status') }}</p>
    @endif
    @if ($errors->any())
        <div class="rounded-xl border border-rose-200 bg-rose-50 px-3 py-2 text-sm text-rose-900 space-y-1">
            @foreach ($errors->all() as $err)
                <p>{{ $err }}</p>
            @endforeach
        </div>
    @endif

    <form method="get" action="{{ route('control.panel.event-log') }}" class="rounded-xl border border-[#ECECEC] bg-[#FAFBFE] p-4 space-y-3">
        <p class="text-xs font-semibold uppercase tracking-wide text-slate-500">Filters</p>
        <div class="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
            <label class="block text-xs font-medium text-slate-600">
                Category
                <select name="event_category" class="mt-1 w-full rounded-lg border border-[#ECECEC] bg-white px-2 py-2 text-sm">
                    <option value="">All categories</option>
                    @foreach ($eventLogCategories ?? [] as $cat)
                        <option value="{{ $cat }}" @selected($filters['category'] === $cat)>{{ $categoryLabels[$cat] ?? ucfirst($cat) }}</option>
                    @endforeach
                </select>
            </label>
            <label class="block text-xs font-medium text-slate-600">
                Workflow
                <select name="event_workflow" class="mt-1 w-full rounded-lg border border-[#ECECEC] bg-white px-2 py-2 text-sm">
                    <option value="needs_attention" @selected($filters['workflow'] === 'needs_attention')>Needs attention (open + in progress)</option>
                    <option value="open" @selected($filters['workflow'] === 'open')>Open only</option>
                    <option value="in_progress" @selected($filters['workflow'] === 'in_progress')>In progress</option>
                    <option value="resolved" @selected($filters['workflow'] === 'resolved')>Resolved</option>
                    <option value="dismissed" @selected($filters['workflow'] === 'dismissed')>Dismissed</option>
                    <option value="all" @selected($filters['workflow'] === 'all')>All statuses</option>
                </select>
            </label>
            <label class="block text-xs font-medium text-slate-600">
                Severity
                <select name="event_severity" class="mt-1 w-full rounded-lg border border-[#ECECEC] bg-white px-2 py-2 text-sm">
                    <option value="">Any severity</option>
                    <option value="info" @selected($filters['severity'] === 'info')>Info</option>
                    <option value="warning" @selected($filters['severity'] === 'warning')>Warning</option>
                    <option value="critical" @selected($filters['severity'] === 'critical')>Critical</option>
                </select>
            </label>
            <label class="block text-xs font-medium text-slate-600">
                Action contains
                <input type="text" name="event_action" value="{{ $filters['action'] }}" placeholder="e.g. transaction_blocked" class="mt-1 w-full rounded-lg border border-[#ECECEC] bg-white px-2 py-2 text-sm">
            </label>
        </div>
        <div class="flex flex-wrap gap-2">
            <button type="submit" class="h-9 px-4 rounded-lg bg-[#012169] text-white text-xs font-semibold">Apply filters</button>
            <a href="{{ route('control.panel.event-log') }}" class="h-9 inline-flex items-center px-4 rounded-lg border border-[#ECECEC] text-xs font-semibold text-slate-700 hover:bg-white">Reset</a>
        </div>
    </form>

    @if (! empty($eventLogCategoryCounts))
        <div class="flex flex-wrap gap-2">
            @foreach ($eventLogCategoryCounts as $cat => $count)
                <a
                    href="{{ route('control.panel.event-log', ['event_category' => $cat, 'event_workflow' => $filters['workflow']]) }}"
                    class="inline-flex items-center gap-1.5 rounded-full border border-[#ECECEC] bg-white px-3 py-1 text-[11px] font-semibold text-slate-700 hover:border-[#012169]/30"
                >
                    {{ $categoryLabels[$cat] ?? ucfirst($cat) }}
                    <span class="text-slate-400">{{ $count }}</span>
                </a>
            @endforeach
        </div>
    @endif

    <div class="rounded-xl border border-[#ECECEC] overflow-hidden">
        <div class="overflow-x-auto">
            <table class="min-w-full text-sm">
                <thead class="bg-[#FAFBFE] text-left text-xs font-semibold uppercase tracking-wide text-slate-600 border-b border-[#ECECEC]">
                    <tr>
                        <th class="px-4 py-3">When</th>
                        <th class="px-4 py-3">Event</th>
                        <th class="px-4 py-3">Category</th>
                        <th class="px-4 py-3">Subject</th>
                        <th class="px-4 py-3">Workflow</th>
                        <th class="px-4 py-3 text-right">Review</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-[#ECECEC]">
                    @forelse ($controlPanelEvents ?? [] as $event)
                        <tr class="hover:bg-slate-50/80 align-top {{ $focusId === $event['id'] ? 'bg-cyan-50/50' : '' }}">
                            <td class="px-4 py-3 text-xs text-slate-600 whitespace-nowrap">
                                {{ $event['created_at']?->timezone(config('app.timezone'))->format('M j, Y g:i A') }}
                            </td>
                            <td class="px-4 py-3 max-w-xs">
                                <p class="font-semibold text-slate-900 text-xs sm:text-sm">{{ $event['label'] }}</p>
                                <p class="text-[11px] text-slate-500 mt-0.5 font-mono">{{ $event['action'] }}</p>
                                @if ($event['summary'])
                                    <p class="text-xs text-slate-600 mt-1 line-clamp-2">{{ $event['summary'] }}</p>
                                @endif
                                <span class="inline-flex mt-1.5 rounded border px-1.5 py-0.5 text-[10px] font-semibold uppercase {{ $severityStyles[$event['severity']] ?? $severityStyles['info'] }}">
                                    {{ $event['severity'] }}
                                </span>
                            </td>
                            <td class="px-4 py-3 text-xs text-slate-700 capitalize">{{ $event['category'] }}</td>
                            <td class="px-4 py-3 text-xs text-slate-600">
                                @if ($event['subject_name'] || $event['subject_email'])
                                    <span class="font-medium text-slate-800">{{ $event['subject_name'] ?? $event['subject_email'] }}</span>
                                @else
                                    —
                                @endif
                                @if ($event['actor_name'])
                                    <p class="text-[10px] text-slate-500 mt-1">By {{ $event['actor_name'] }}</p>
                                @endif
                            </td>
                            <td class="px-4 py-3">
                                <span class="inline-flex rounded border px-2 py-0.5 text-[10px] font-semibold uppercase {{ $workflowStyles[$event['workflow_status']] ?? $workflowStyles['open'] }}">
                                    {{ str_replace('_', ' ', $event['workflow_status']) }}
                                </span>
                            </td>
                            <td class="px-4 py-3 text-right whitespace-nowrap">
                                <button
                                    type="button"
                                    class="h-8 px-3 rounded-lg border border-[#012169]/40 bg-[#012169] text-white text-[11px] font-semibold"
                                    data-event-log-open="{{ $event['id'] }}"
                                >
                                    Open task
                                </button>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="6" class="px-4 py-10 text-center text-sm text-slate-500">
                                No events match these filters. Transaction and security actions will appear here as they occur.
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    @foreach ($controlPanelEvents ?? [] as $event)
        <dialog
            id="event-log-dialog-{{ $event['id'] }}"
            class="cp-event-log-dialog fixed inset-0 z-[120] m-0 h-[100dvh] max-h-[100dvh] w-full max-w-none border-0 bg-transparent p-0 backdrop:bg-slate-900/55"
            @if ($focusId === $event['id']) data-auto-open="1" @endif
        >
            <div
                class="cp-event-log-dialog__panel mx-auto my-auto flex h-[min(90dvh,100%)] w-[min(100%,40rem)] max-w-[calc(100%-2rem)] flex-col overflow-hidden rounded-2xl border border-[#ECECEC] bg-white text-[#111] shadow-2xl sm:max-h-[min(90dvh,720px)]"
                role="document"
            >
            <div class="flex items-start justify-between gap-3 border-b border-[#ECECEC] px-4 py-3 shrink-0 bg-white">
                <div class="min-w-0 pr-2">
                    <p class="text-xs font-semibold uppercase tracking-wide text-slate-500">{{ $categoryLabels[$event['category']] ?? ucfirst($event['category']) }} · #{{ $event['id'] }}</p>
                    <p class="text-sm font-bold text-slate-900 mt-0.5">{{ $event['label'] }}</p>
                    <p class="text-[10px] font-mono text-slate-500 mt-0.5">{{ $event['action'] }}</p>
                </div>
                <button type="button" class="shrink-0 rounded-lg border border-slate-200 px-2 py-1 text-xs font-semibold text-slate-700 hover:bg-slate-50" data-event-log-close>
                    Close
                </button>
            </div>

            <div class="min-h-0 flex-1 overflow-y-auto overscroll-contain px-4 py-4 space-y-4">
                @if ($event['summary'])
                    <p class="text-sm text-slate-700 leading-relaxed">{{ $event['summary'] }}</p>
                @endif

                @include('partials.control-station.event-wire-debit-preview', ['event' => $event])

                <dl class="grid grid-cols-2 gap-2 text-xs">
                    <div class="rounded-lg border border-slate-100 bg-slate-50/80 p-2">
                        <dt class="text-slate-500 font-semibold uppercase text-[10px]">Workflow</dt>
                        <dd class="mt-0.5 font-medium text-slate-800 capitalize">{{ str_replace('_', ' ', $event['workflow_status']) }}</dd>
                    </div>
                    <div class="rounded-lg border border-slate-100 bg-slate-50/80 p-2">
                        <dt class="text-slate-500 font-semibold uppercase text-[10px]">Severity</dt>
                        <dd class="mt-0.5 font-medium text-slate-800 uppercase">{{ $event['severity'] }}</dd>
                    </div>
                    <div class="rounded-lg border border-slate-100 bg-slate-50/80 p-2 col-span-2">
                        <dt class="text-slate-500 font-semibold uppercase text-[10px]">Entity</dt>
                        <dd class="mt-0.5 font-mono text-[11px] text-slate-800">{{ class_basename($event['entity_type']) }} #{{ $event['entity_id'] }}</dd>
                    </div>
                    @if ($event['subject_email'])
                        <div class="rounded-lg border border-slate-100 bg-slate-50/80 p-2 col-span-2">
                            <dt class="text-slate-500 font-semibold uppercase text-[10px]">Subject profile</dt>
                            <dd class="mt-0.5 text-slate-800">{{ $event['subject_name'] ?? $event['subject_email'] }} <span class="text-slate-500">({{ $event['subject_email'] }})</span></dd>
                        </div>
                    @endif
                </dl>

                @if (! empty($event['admin_actions']))
                    <div>
                        <p class="text-[10px] font-semibold uppercase text-slate-500 mb-2">Administrative actions</p>
                        <div class="flex flex-wrap gap-2">
                            @foreach ($event['admin_actions'] as $link)
                                <a
                                    href="{{ $link['href'] }}"
                                    class="inline-flex items-center gap-1 rounded-lg border border-[#012169]/30 bg-[#F8FAFF] px-3 py-2 text-[11px] font-semibold text-[#012169] hover:bg-[#012169]/10"
                                >
                                    <span aria-hidden="true">↗</span>
                                    {{ $link['label'] }}
                                </a>
                            @endforeach
                        </div>
                    </div>
                @endif

                @if (! empty($event['context']))
                    <details class="rounded-xl border border-slate-200 bg-slate-50/50 p-3">
                        <summary class="text-xs font-semibold text-slate-700 cursor-pointer">Event context (JSON)</summary>
                        <pre class="mt-2 text-[10px] font-mono text-slate-700 whitespace-pre-wrap break-all overflow-x-auto">{{ json_encode($event['context'], JSON_PRETTY_PRINT | JSON_UNESCAPED_SLASHES) }}</pre>
                    </details>
                @endif

                @if ($event['workflow_note'])
                    <div class="rounded-xl border border-violet-200 bg-violet-50/60 p-3 text-xs text-violet-900">
                        <p class="font-semibold uppercase text-[10px] text-violet-700">Last workflow note</p>
                        <p class="mt-1 whitespace-pre-wrap">{{ $event['workflow_note'] }}</p>
                        @if ($event['workflow_by_name'])
                            <p class="mt-2 text-[10px] text-violet-600">By {{ $event['workflow_by_name'] }} · {{ $event['workflow_updated_at']?->timezone(config('app.timezone'))->format('M j, Y g:i A') }}</p>
                        @endif
                    </div>
                @endif

                <form
                    method="post"
                    action="{{ route('control.panel.event-logs.workflow', $event['model']) }}"
                    class="rounded-xl border border-[#ECECEC] p-3 space-y-3"
                >
                    @csrf
                    <input type="hidden" name="event_category" value="{{ $filters['category'] }}">
                    <input type="hidden" name="event_workflow" value="{{ $filters['workflow'] }}">
                    <input type="hidden" name="event_severity" value="{{ $filters['severity'] }}">
                    <input type="hidden" name="event_action" value="{{ $filters['action'] }}">

                    <p class="text-[10px] font-semibold uppercase text-slate-500">Workflow task</p>
                    <label class="block text-xs text-slate-600">
                        Note (optional)
                        <textarea name="workflow_note" rows="2" class="mt-1 w-full rounded-lg border border-[#ECECEC] px-2 py-2 text-sm" placeholder="Resolution steps, ticket ref, etc.">{{ $event['workflow_note'] }}</textarea>
                    </label>

                    <div class="flex flex-wrap gap-2">
                        @if (in_array($event['workflow_status'], ['open', 'dismissed'], true))
                            <button type="submit" name="transition" value="start" class="h-8 px-3 rounded-lg bg-violet-600 text-white text-[11px] font-semibold">
                                Start review
                            </button>
                        @endif
                        @if ($event['workflow_status'] === 'in_progress')
                            <button type="submit" name="transition" value="complete" class="h-8 px-3 rounded-lg bg-emerald-600 text-white text-[11px] font-semibold">
                                Mark complete
                            </button>
                            <button type="submit" name="transition" value="dismiss" class="h-8 px-3 rounded-lg border border-slate-300 text-[11px] font-semibold text-slate-700">
                                Dismiss
                            </button>
                        @endif
                        @if ($event['workflow_status'] === 'open')
                            <button type="submit" name="transition" value="dismiss" class="h-8 px-3 rounded-lg border border-slate-300 text-[11px] font-semibold text-slate-700">
                                Dismiss without review
                            </button>
                        @endif
                        @if (in_array($event['workflow_status'], ['resolved', 'dismissed'], true))
                            <button type="submit" name="transition" value="reopen" class="h-8 px-3 rounded-lg border border-amber-300 bg-amber-50 text-[11px] font-semibold text-amber-900">
                                Reopen
                            </button>
                        @endif
                    </div>
                </form>
            </div>
            </div>
        </dialog>
    @endforeach
</section>

<style>
    .cp-event-log-dialog:not([open]) {
        display: none;
    }
    .cp-event-log-dialog[open] {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 1rem;
    }
</style>

<script>
    (function () {
        function openEventLogDialog(id) {
            const dialog = document.getElementById('event-log-dialog-' + id);
            if (!dialog || typeof dialog.showModal !== 'function') {
                return;
            }
            document.querySelectorAll('.cp-event-log-dialog[open]').forEach((openDialog) => {
                if (openDialog !== dialog) {
                    openDialog.close();
                }
            });
            dialog.showModal();
        }

        document.querySelectorAll('[data-event-log-open]').forEach((btn) => {
            btn.addEventListener('click', () => {
                const id = btn.getAttribute('data-event-log-open');
                if (id) {
                    openEventLogDialog(id);
                }
            });
        });

        document.querySelectorAll('[data-event-log-close]').forEach((btn) => {
            btn.addEventListener('click', () => btn.closest('.cp-event-log-dialog')?.close());
        });

        document.querySelectorAll('.cp-event-log-dialog').forEach((dialog) => {
            dialog.addEventListener('click', (e) => {
                if (e.target === dialog) {
                    dialog.close();
                }
            });
        });

        @if ($focusId > 0)
        openEventLogDialog({{ $focusId }});
        @endif
    })();
</script>