@extends('layouts.app')

@section('content')
    @php
        $classify = function ($action) {
            if (str_contains($action, 'deleted') || str_contains($action, 'failed') || str_contains($action, 'rejected') || str_contains($action, 'password')) {
                return ['label' => 'Security', 'dot' => 'bg-red-700', 'badge' => 'bg-red-50 text-red-700', 'icon' => 'warning'];
            }

            if (str_contains($action, 'created') || str_contains($action, 'approved') || str_contains($action, 'updated') || str_contains($action, 'restored')) {
                return ['label' => 'Success', 'dot' => 'bg-[var(--construct-primary)]', 'badge' => 'bg-emerald-50 text-emerald-700', 'icon' => 'check_circle'];
            }

            if (str_contains($action, 'export') || str_contains($action, 'download')) {
                return ['label' => 'Export', 'dot' => 'bg-[var(--construct-secondary)]', 'badge' => 'bg-blue-50 text-blue-700', 'icon' => 'download'];
            }

            return ['label' => 'System', 'dot' => 'bg-[var(--construct-border)]', 'badge' => 'bg-[var(--construct-surface-low)] text-[var(--construct-muted)]', 'icon' => 'settings'];
        };

        $entityName = function ($auditLog) {
            if (! $auditLog->auditable_type) {
                return 'System';
            }

            return class_basename($auditLog->auditable_type).($auditLog->auditable_id ? ' #'.$auditLog->auditable_id : '');
        };

        $initials = fn ($name) => collect(explode(' ', $name ?: 'System'))->filter()->map(fn ($part) => substr($part, 0, 1))->take(2)->implode('');
        $selectedClass = $selectedAuditLog ? $classify($selectedAuditLog->action) : null;
    @endphp

    <div class="mb-6 border-b border-[var(--construct-border)] pb-5">
        <div class="flex flex-col gap-4 xl:flex-row xl:items-end xl:justify-between">
            <div>
                <h1 class="text-3xl font-bold">System Audit Logs</h1>
                <p class="mt-2 text-sm text-[var(--construct-muted)]">Trace user actions, document activity, exports, security events, and system operations.</p>
            </div>
            <a href="{{ route('exports.document-audit', request()->query()) }}" class="inline-flex items-center gap-2 rounded border border-[var(--construct-border)] bg-white px-4 py-2.5 text-sm font-bold text-[var(--construct-text)]">
                <span class="material-symbols-outlined text-[18px]">download</span>
                Export Audit
            </a>
        </div>
    </div>

    <div class="grid gap-5 2xl:grid-cols-[minmax(0,1fr)_380px]">
        <div class="min-w-0 space-y-5">
            <div class="grid gap-4 md:grid-cols-3">
                <section class="rounded border border-[var(--construct-border)] bg-white p-4">
                    <div class="flex items-start justify-between">
                        <span class="text-sm font-bold text-[var(--construct-muted)]">Total Events (24h)</span>
                        <span class="material-symbols-outlined text-[var(--construct-primary)]">monitoring</span>
                    </div>
                    <div class="mt-4 flex items-end gap-2">
                        <span class="text-4xl font-extrabold">{{ number_format($auditMetrics['total_24h']) }}</span>
                        <span class="mb-1 text-xs font-bold text-[var(--construct-primary)]">live</span>
                    </div>
                </section>

                <section class="relative overflow-hidden rounded border border-red-200 bg-white p-4">
                    <div class="absolute inset-0 bg-red-50 opacity-60"></div>
                    <div class="relative flex items-start justify-between">
                        <span class="text-sm font-bold text-[var(--construct-muted)]">Security Alerts</span>
                        <span class="material-symbols-outlined text-red-700">warning</span>
                    </div>
                    <div class="relative mt-4 flex items-end gap-2">
                        <span class="text-4xl font-extrabold">{{ number_format($auditMetrics['security_alerts']) }}</span>
                        <span class="mb-1 rounded bg-red-100 px-2 py-1 text-xs font-bold text-red-700">Priority</span>
                    </div>
                </section>

                <section class="rounded border border-[var(--construct-border)] bg-white p-4">
                    <div class="flex items-start justify-between">
                        <span class="text-sm font-bold text-[var(--construct-muted)]">Most Active User</span>
                        <span class="material-symbols-outlined text-[var(--construct-secondary)]">person_play</span>
                    </div>
                    <div class="mt-4 flex items-center gap-3">
                        <span class="flex h-11 w-11 items-center justify-center rounded-full bg-[var(--construct-primary)] text-sm font-bold text-white">
                            {{ $initials($auditMetrics['most_active_user']?->user?->name ?? 'System') }}
                        </span>
                        <span>
                            <span class="block text-lg font-bold">{{ $auditMetrics['most_active_user']?->user?->name ?? 'System' }}</span>
                            <span class="block text-xs text-[var(--construct-muted)]">{{ number_format($auditMetrics['most_active_user']?->events_count ?? 0) }} events</span>
                        </span>
                    </div>
                </section>
            </div>

            <form method="GET" action="{{ route('audit-logs.index') }}" class="rounded border border-[var(--construct-border)] bg-white p-3">
                <div class="grid gap-3 sm:grid-cols-2 xl:grid-cols-[minmax(220px,320px)_145px_135px_135px_auto_auto] xl:justify-start">
                    <label class="relative block">
                        <span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-[20px] text-[var(--construct-muted)]">search</span>
                        <input name="q" value="{{ request('q') }}" placeholder="Search audit logs..." class="w-full rounded border border-[var(--construct-border)] bg-[var(--construct-surface-low)] py-2 pl-10 pr-3 text-sm">
                    </label>
                    <select name="scope" class="rounded border border-[var(--construct-border)] bg-white px-3 py-2 text-sm">
                        <option value="">All activity</option>
                        <option value="documents" @selected(request('scope') === 'documents')>Documents</option>
                        <option value="security" @selected(request('scope') === 'security')>Security</option>
                        <option value="exports" @selected(request('scope') === 'exports')>Exports</option>
                    </select>
                    <input name="date_from" type="date" value="{{ request('date_from') }}" class="rounded border border-[var(--construct-border)] bg-white px-3 py-2 text-sm">
                    <input name="date_to" type="date" value="{{ request('date_to') }}" class="rounded border border-[var(--construct-border)] bg-white px-3 py-2 text-sm">
                    <button class="inline-flex items-center justify-center gap-2 rounded bg-[var(--construct-primary)] px-4 py-2 text-sm font-bold text-white">
                        <span class="material-symbols-outlined text-[16px]">filter_list</span>
                        Filter
                    </button>
                    <a href="{{ route('audit-logs.index') }}" class="inline-flex items-center justify-center rounded border border-[var(--construct-border)] bg-white px-4 py-2 text-sm font-bold text-[var(--construct-text)]">Reset</a>
                </div>
            </form>

            <section class="overflow-hidden rounded border border-[var(--construct-border)] bg-white">
                <div class="overflow-x-auto">
                    <table class="min-w-[960px] w-full border-collapse text-left text-sm">
                        <thead class="border-b border-[var(--construct-border)] bg-[var(--construct-surface-low)] text-xs font-bold uppercase tracking-wide text-[var(--construct-muted)]">
                            <tr>
                                <th class="px-4 py-3">Timestamp</th>
                                <th class="px-4 py-3">User</th>
                                <th class="px-4 py-3">Action</th>
                                <th class="px-4 py-3">Entity</th>
                                <th class="px-4 py-3">Location / IP</th>
                                <th class="px-4 py-3 text-right">Details</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-[var(--construct-border-soft)]">
                            @forelse ($auditLogs as $auditLog)
                                @php($style = $classify($auditLog->action))
                                <tr class="group hover:bg-[var(--construct-surface-low)] {{ $selectedAuditLog?->id === $auditLog->id ? 'bg-[var(--construct-surface-low)]' : '' }}">
                                    <td class="px-4 py-4 align-top text-[var(--construct-muted)]">
                                        <div>{{ $auditLog->created_at->format('M j, H:i:s') }}</div>
                                        <div class="mt-1 text-[11px]">UTC{{ $auditLog->created_at->format('P') }}</div>
                                    </td>
                                    <td class="px-4 py-4 align-top">
                                        <div class="flex items-center gap-2">
                                            <span class="flex h-7 w-7 items-center justify-center rounded bg-slate-700 text-xs font-bold text-white">{{ $initials($auditLog->user?->name ?? 'System') }}</span>
                                            <span class="max-w-40 truncate font-semibold">{{ $auditLog->user?->name ?: 'System Service' }}</span>
                                        </div>
                                    </td>
                                    <td class="px-4 py-4 align-top">
                                        <div class="flex items-center gap-2">
                                            <span class="h-2.5 w-2.5 shrink-0 rounded-full {{ $style['dot'] }}"></span>
                                            <span class="font-bold">{{ str($auditLog->action)->replace(['.', '_'], ' ')->title() }}</span>
                                        </div>
                                        <p class="mt-1 max-w-md text-xs leading-5 text-[var(--construct-muted)]">{{ $auditLog->description }}</p>
                                    </td>
                                    <td class="px-4 py-4 align-top font-mono text-xs">{{ $entityName($auditLog) }}</td>
                                    <td class="px-4 py-4 align-top font-mono text-xs text-[var(--construct-muted)]">{{ $auditLog->ip_address ?: 'Not captured' }}</td>
                                    <td class="px-4 py-4 text-right align-top">
                                        <a href="{{ route('audit-logs.index', array_merge(request()->query(), ['selected' => $auditLog->id])) }}" class="inline-flex h-9 w-9 items-center justify-center rounded border border-[var(--construct-border)] bg-white text-[var(--construct-muted)]">
                                            <span class="material-symbols-outlined text-[18px]">chevron_right</span>
                                        </a>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="6" class="px-4 py-8 text-sm text-[var(--construct-muted)]">No audit entries found.</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>

                <div class="border-t border-[var(--construct-border)] bg-[var(--construct-surface-low)] px-4 py-3">
                    {{ $auditLogs->links() }}
                </div>
            </section>
        </div>

        <aside class="rounded border border-[var(--construct-border)] bg-white">
            @if ($selectedAuditLog)
                <div class="flex items-center justify-between border-b border-[var(--construct-border)] px-5 py-4">
                    <h2 class="text-xl font-bold">Event Details</h2>
                    <span class="material-symbols-outlined text-[var(--construct-muted)]">close</span>
                </div>

                <div class="space-y-6 p-5">
                    <div>
                        <span class="inline-flex items-center gap-2 rounded border border-[var(--construct-border)] px-2 py-1 text-xs font-bold uppercase tracking-wide {{ $selectedClass['badge'] }}">
                            <span class="h-2 w-2 rounded-full {{ $selectedClass['dot'] }}"></span>
                            {{ $selectedClass['label'] }}
                        </span>
                        <h2 class="mt-4 text-2xl font-bold">{{ str($selectedAuditLog->action)->replace(['.', '_'], ' ')->title() }}</h2>
                        <div class="mt-2 text-sm text-[var(--construct-muted)]">{{ $selectedAuditLog->created_at->format('M j, Y - H:i:s T') }}</div>
                        <div class="mt-1 text-sm text-[var(--construct-muted)]">Event ID: EVT-{{ str_pad((string) $selectedAuditLog->id, 6, '0', STR_PAD_LEFT) }}</div>
                    </div>

                    <section class="rounded border border-[var(--construct-border)] bg-[var(--construct-bg)] p-4">
                        <div class="mb-3 text-xs font-bold uppercase tracking-wide text-[var(--construct-muted)]">Actor</div>
                        <div class="flex items-center gap-3">
                            <span class="flex h-10 w-10 items-center justify-center rounded bg-[var(--construct-primary)] text-sm font-bold text-white">{{ $initials($selectedAuditLog->user?->name ?? 'System') }}</span>
                            <span>
                                <span class="block font-bold">{{ $selectedAuditLog->user?->name ?: 'System Service' }}</span>
                                <span class="block text-sm text-[var(--construct-muted)]">{{ $selectedAuditLog->user?->email ?: 'Automated process' }}</span>
                            </span>
                        </div>
                    </section>

                    <section>
                        <div class="mb-3 text-xs font-bold uppercase tracking-wide text-[var(--construct-muted)]">Target Entity</div>
                        <div class="flex items-start gap-2">
                            <span class="material-symbols-outlined text-[var(--construct-secondary)]">{{ $selectedClass['icon'] }}</span>
                            <div>
                                <div class="font-bold">{{ $entityName($selectedAuditLog) }}</div>
                                <div class="mt-1 text-sm text-[var(--construct-muted)]">{{ $selectedAuditLog->description }}</div>
                            </div>
                        </div>
                    </section>

                    <section>
                        <div class="mb-3 text-xs font-bold uppercase tracking-wide text-[var(--construct-muted)]">Payload Details</div>
                        <pre class="max-h-64 overflow-auto rounded border border-[var(--construct-border)] bg-[var(--construct-bg)] p-3 text-xs leading-5 text-[var(--construct-text)]">{{ $selectedAuditLog->metadata ? json_encode($selectedAuditLog->metadata, JSON_PRETTY_PRINT) : "No structured payload captured." }}</pre>
                    </section>

                    <section>
                        <div class="mb-3 text-xs font-bold uppercase tracking-wide text-[var(--construct-muted)]">Network Context</div>
                        <div class="grid gap-3 sm:grid-cols-2 2xl:grid-cols-1">
                            <div class="rounded border border-[var(--construct-border)] bg-[var(--construct-bg)] p-3">
                                <div class="text-[11px] font-bold uppercase tracking-wide text-[var(--construct-muted)]">IP Address</div>
                                <div class="mt-1 font-mono text-sm">{{ $selectedAuditLog->ip_address ?: 'Not captured' }}</div>
                            </div>
                            <div class="rounded border border-[var(--construct-border)] bg-[var(--construct-bg)] p-3">
                                <div class="text-[11px] font-bold uppercase tracking-wide text-[var(--construct-muted)]">Location</div>
                                <div class="mt-1 text-sm">Internal / Unknown</div>
                            </div>
                        </div>
                        <div class="mt-3 rounded border border-[var(--construct-border)] bg-[var(--construct-bg)] p-3 text-xs text-[var(--construct-muted)]">
                            <span class="material-symbols-outlined mr-1 text-[16px]">devices</span>
                            {{ $selectedAuditLog->user_agent ?: 'No user agent captured.' }}
                        </div>
                    </section>
                </div>
            @else
                <div class="p-5 text-sm text-[var(--construct-muted)]">Select an audit event to inspect details.</div>
            @endif
        </aside>
    </div>
@endsection