@extends('backend.layouts.app')

@section('title', \App\Http\Helpers\MenuHelper::getPageTitle())

@section('content')
    @include('backend.module._index-reset-button')

    <div x-data="{ pageName: @js(\App\Http\Helpers\MenuHelper::getPageTitle()) }" class="mb-6">
        <div class="mb-6 flex flex-wrap items-center justify-between gap-3">
            <h2 class="text-xl font-semibold text-gray-800 dark:text-white/90" x-text="pageName"></h2>
            <nav>
                <ol class="flex items-center gap-1.5">
                    <li>
                        <a class="text-sm text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300"
                            href="{{ route('admin.home') }}">Home</a>
                    </li>
                    <li class="flex items-center gap-1.5 text-sm text-gray-800 dark:text-white/90">
                        <svg class="stroke-current" width="17" height="16" viewBox="0 0 17 16" fill="none" aria-hidden="true">
                            <path d="M6.0765 12.667L10.2432 8.50033L6.0765 4.33366" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
                        </svg>
                        <span x-text="pageName"></span>
                    </li>
                </ol>
            </nav>
        </div>
    </div>

    <div class="space-y-5 sm:space-y-6">
        <div class="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
            <div class="px-5 py-4 sm:px-6 sm:py-5">
                <div class="mb-6 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
                    <div>
                        <div class="flex flex-wrap items-center gap-2">
                            <h3 class="text-lg font-semibold text-gray-800 dark:text-white/90">All Audit Records</h3>
                            <span class="inline-flex items-center gap-1.5 rounded-full px-2 py-0.5 text-xs font-semibold {{ $auditEnabled ? 'bg-emerald-50 text-emerald-700 dark:bg-emerald-500/10 dark:text-emerald-300' : 'bg-gray-100 text-gray-500 dark:bg-gray-800 dark:text-gray-400' }}">
                                <span class="h-1.5 w-1.5 rounded-full {{ $auditEnabled ? 'bg-emerald-500' : 'bg-gray-400' }}"></span>
                                {{ $auditEnabled ? 'Active' : 'Inactive' }}
                            </span>
                        </div>
                        <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">{{ number_format($activities->total()) }} records &middot; Automatically record important changes and authentication activity.</p>
                    </div>
                    <form action="{{ route('audit-trail.toggle') }}" method="POST" class="shrink-0">
                        @csrf
                        <button type="submit" role="switch" aria-checked="{{ $auditEnabled ? 'true' : 'false' }}"
                            aria-label="{{ $auditEnabled ? 'Deactivate audit trail logging' : 'Activate audit trail logging' }}"
                            class="inline-flex w-full items-center justify-between gap-3 rounded-full border py-1.5 pr-1.5 pl-4 transition sm:w-auto {{ $auditEnabled ? 'border-emerald-200 bg-emerald-50 hover:bg-emerald-100 dark:border-emerald-500/30 dark:bg-emerald-500/10 dark:hover:bg-emerald-500/15' : 'border-gray-200 bg-gray-50 hover:bg-gray-100 dark:border-gray-700 dark:bg-gray-800 dark:hover:bg-gray-700' }}">
                            <span class="text-xs font-semibold uppercase tracking-wide {{ $auditEnabled ? 'text-emerald-700 dark:text-emerald-300' : 'text-gray-500 dark:text-gray-400' }}">{{ $auditEnabled ? 'Active' : 'Inactive' }}</span>
                            <span class="relative inline-flex h-6 w-11 shrink-0 rounded-full transition {{ $auditEnabled ? 'bg-emerald-500' : 'bg-gray-300 dark:bg-gray-600' }}">
                                <span class="absolute top-0.5 left-0.5 h-5 w-5 rounded-full bg-white shadow transition {{ $auditEnabled ? 'translate-x-5' : '' }}"></span>
                            </span>
                        </button>
                    </form>
                </div>

                @unless ($auditEnabled)
                    <div class="mb-4 flex items-start gap-3 rounded-xl border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-800 dark:border-amber-500/30 dark:bg-amber-500/10 dark:text-amber-200">
                        <svg class="mt-0.5 h-5 w-5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v4m0 4h.01M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z" />
                        </svg>
                        <div>
                            <p class="font-medium">Audit logging is inactive</p>
                            <p class="mt-0.5 text-amber-700 dark:text-amber-300">New changes and login activity are not being recorded. Existing records remain available below.</p>
                        </div>
                    </div>
                @endunless

                <div class="rounded-xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.02]">
                    <div class="p-4 sm:p-5">
                        <form method="GET" action="{{ route('audit-trail.index') }}" id="audit-search-form" class="mb-4 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
                            <div class="flex flex-col gap-3 sm:flex-row sm:items-center">
                                <select name="event" onchange="this.form.submit()"
                                    class="h-10 rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm text-gray-800 focus:border-brand-300 focus:outline-none focus:ring-3 focus:ring-brand-500/10 dark:border-gray-700 dark:bg-gray-900 dark:text-white/90">
                                    <option value="">All Actions</option>
                                    @foreach (['created' => 'Created', 'updated' => 'Updated', 'deleted' => 'Deleted', 'login' => 'Login', 'login_failed' => 'Failed Login', 'logout' => 'Logout'] as $value => $label)
                                        <option value="{{ $value }}" @selected(($filters['event'] ?? '') === $value)>{{ $label }}</option>
                                    @endforeach
                                </select>
                                <select name="module" onchange="this.form.submit()"
                                    class="h-10 rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm text-gray-800 focus:border-brand-300 focus:outline-none focus:ring-3 focus:ring-brand-500/10 dark:border-gray-700 dark:bg-gray-900 dark:text-white/90">
                                    <option value="">All Modules</option>
                                    @foreach ($modules as $module)
                                        <option value="{{ $module }}" @selected(($filters['module'] ?? '') === $module)>{{ $module }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <input type="search" name="search" value="{{ $filters['search'] ?? '' }}" placeholder="Search..."
                                oninput="debounceAuditSearch(this)"
                                class="h-10 w-full rounded-lg border border-gray-300 bg-transparent px-4 py-2 text-sm text-gray-800 placeholder:text-gray-400 focus:border-brand-300 focus:outline-none focus:ring-3 focus:ring-brand-500/10 dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 sm:max-w-xs">
                        </form>
                        <script>
                            let auditSearchTimer;
                            function debounceAuditSearch(el) {
                                clearTimeout(auditSearchTimer);
                                auditSearchTimer = setTimeout(() => el.form.submit(), 1500);
                            }
                        </script>

                        <div class="max-w-full overflow-x-auto">
                            <div class="min-w-[950px]">
                                <table class="w-full">
                                    <thead>
                                        <tr class="border-b border-gray-100 dark:border-gray-800">
                                            @foreach (['#', 'Date & Time', 'Performed By', 'Action', 'Module', 'Affected Record', 'Changes'] as $heading)
                                                <th class="px-4 py-3 text-center">
                                                    <span class="text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">{{ $heading }}</span>
                                                </th>
                                            @endforeach
                                        </tr>
                                    </thead>
                                    <tbody class="divide-y divide-gray-100 dark:divide-gray-800">
                                        @forelse ($activities as $activity)
                                            @php
                                                $eventClass = match ($activity->event) {
                                                    'created', 'login' => 'bg-success-50 text-success-600 dark:bg-success-500/15 dark:text-success-400',
                                                    'updated' => 'bg-warning-50 text-warning-600 dark:bg-warning-500/15 dark:text-orange-400',
                                                    'deleted', 'login_failed' => 'bg-error-50 text-error-600 dark:bg-error-500/15 dark:text-error-400',
                                                    default => 'bg-blue-light-50 text-blue-light-600 dark:bg-blue-light-500/15 dark:text-blue-light-400',
                                                };
                                            @endphp
                                            <tr class="transition-colors hover:bg-gray-50 dark:hover:bg-gray-800/50">
                                                <td class="px-4 py-4 text-center">
                                                    <span class="text-sm font-medium text-gray-800 dark:text-white/90">{{ ($activities->currentPage() - 1) * $activities->perPage() + $loop->iteration }}</span>
                                                </td>
                                                <td class="px-4 py-4 text-center">
                                                    <span class="block whitespace-nowrap text-sm text-gray-700 dark:text-gray-300">{{ $activity->created_at?->format('h:i A') ?? '-' }}</span>
                                                    <span class="mt-1 block whitespace-nowrap text-xs text-gray-500 dark:text-gray-400">{{ $activity->created_at?->format('d-m-Y') ?? '-' }}</span>
                                                </td>
                                                <td class="px-4 py-4 text-center">
                                                    <span class="block text-sm font-medium text-gray-800 dark:text-white/90">{{ ($activity->actor_display_name ?? $activity->actor_name) ?: 'System' }}</span>
                                                </td>
                                                <td class="px-4 py-4 text-center">
                                                    <span class="inline-flex items-center justify-center rounded-full px-2.5 py-0.5 text-sm font-medium {{ $eventClass }}">{{ str_replace('_', ' ', ucfirst($activity->event)) }}</span>
                                                </td>
                                                <td class="px-4 py-4 text-center text-sm text-gray-700 dark:text-gray-300">{{ $activity->module }}</td>
                                                <td class="px-4 py-4 text-center">
                                                    @if ($activity->subject_label)
                                                        @if ($activity->subject_type === 'BackendUser')
                                                            <span class="block text-xs text-gray-500 dark:text-gray-400">Username</span>
                                                        @endif
                                                        <span class="block text-sm font-medium text-gray-700 dark:text-gray-300">{{ $activity->subject_label }}</span>
                                                        @if ($activity->subject_id)
                                                            <span class="mt-1 block text-xs text-gray-500 dark:text-gray-400">Record ID: {{ $activity->subject_id }}</span>
                                                        @endif
                                                    @else
                                                        <span class="text-sm text-gray-400">Not applicable</span>
                                                    @endif
                                                </td>
                                                <td class="px-4 py-4 text-center">
                                                    @if ((is_array($activity->changes) && count($activity->changes)) || $activity->ip_address || $activity->user_agent)
                                                        <button type="button"
                                                            class="inline-flex h-9 w-9 items-center justify-center rounded-lg text-brand-600 hover:bg-gray-100 dark:text-brand-400 dark:hover:bg-gray-800"
                                                            aria-label="View audit details"
                                                            aria-haspopup="dialog"
                                                            aria-controls="audit-changes-{{ $activity->id }}"
                                                            onclick="document.getElementById('audit-changes-{{ $activity->id }}').showModal()">
                                                            <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8" aria-hidden="true">
                                                                <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12s3.5-6.75 9.75-6.75S21.75 12 21.75 12 18.25 18.75 12 18.75 2.25 12 2.25 12Z" />
                                                                <circle cx="12" cy="12" r="3" />
                                                            </svg>
                                                        </button>
                                                    @else
                                                        <span class="text-gray-400">-</span>
                                                    @endif
                                                </td>
                                            </tr>
                                        @empty
                                            <tr>
                                                <td colspan="7" class="px-5 py-12 text-center text-sm text-gray-500 dark:text-gray-400">No audit records found.</td>
                                            </tr>
                                        @endforelse
                                    </tbody>
                                </table>
                            </div>
                        </div>

                        <div class="mt-6 border-t border-gray-100 pt-5 dark:border-gray-800">
                            {{ $activities->links('vendor.pagination.custom') }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @foreach ($activities as $activity)
        @if ((is_array($activity->changes) && count($activity->changes)) || $activity->ip_address || $activity->user_agent)
            <dialog id="audit-changes-{{ $activity->id }}"
                onclick="if (event.target === this) this.close()"
                class="fixed inset-0 m-auto max-h-[85vh] w-[calc(100%-2rem)] max-w-2xl rounded-2xl border border-gray-200 bg-white p-0 text-gray-800 shadow-xl backdrop:bg-gray-900/50 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100">
                <div class="flex items-center justify-between border-b border-gray-200 px-5 py-4 dark:border-gray-700">
                    <div>
                        <h2 class="text-base font-semibold">Changes</h2>
                        <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">{{ $activity->subject_label ?: $activity->module }}</p>
                    </div>
                    <form method="dialog">
                        <button type="submit" aria-label="Close changes"
                            class="inline-flex h-9 w-9 items-center justify-center rounded-lg text-gray-500 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-800">
                            <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" aria-hidden="true">
                                <path stroke-linecap="round" stroke-linejoin="round" d="m6 6 12 12M18 6 6 18" />
                            </svg>
                        </button>
                    </form>
                </div>
                <div class="max-h-[70vh] space-y-5 overflow-y-auto p-4 sm:p-5">
                    @if (is_array($activity->changes) && count($activity->changes))
                        <section>
                            <h3 class="mb-3 text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">Changed fields</h3>
                            <div class="overflow-hidden rounded-xl border border-gray-200 dark:border-gray-700">
                                <div class="overflow-x-auto">
                                    <table class="w-full min-w-[480px] text-left">
                                        <thead class="bg-gray-50 dark:bg-gray-800/70">
                                            <tr>
                                                @foreach (['Field', 'Before', 'After'] as $heading)
                                                    <th class="px-4 py-3 text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">{{ $heading }}</th>
                                                @endforeach
                                            </tr>
                                        </thead>
                                        <tbody class="divide-y divide-gray-100 dark:divide-gray-800">
                                            @foreach ($activity->changes as $field => $change)
                                                <tr class="align-top">
                                                    <th scope="row" class="px-4 py-3 text-sm font-medium text-gray-800 dark:text-gray-200">{{ \Illuminate\Support\Str::headline($field) }}</th>
                                                    <td class="max-w-xs break-words px-4 py-3 text-sm text-gray-600 dark:text-gray-300">{{ is_array($change['old'] ?? null) ? json_encode($change['old'], JSON_UNESCAPED_UNICODE) : ($change['old'] ?? '—') }}</td>
                                                    <td class="max-w-xs break-words px-4 py-3 text-sm text-gray-600 dark:text-gray-300">{{ is_array($change['new'] ?? null) ? json_encode($change['new'], JSON_UNESCAPED_UNICODE) : ($change['new'] ?? '—') }}</td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </section>
                    @endif

                    <section class="border-t border-gray-100 pt-4 dark:border-gray-800">
                        <h3 class="mb-3 text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">Request information</h3>
                        <div class="overflow-hidden rounded-xl border border-gray-200 dark:border-gray-700">
                            <table class="w-full text-left">
                                <thead class="bg-gray-50 dark:bg-gray-800/70">
                                    <tr>
                                        <th class="w-36 px-4 py-3 text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">Field</th>
                                        <th class="px-4 py-3 text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">Value</th>
                                    </tr>
                                </thead>
                                <tbody class="divide-y divide-gray-100 dark:divide-gray-800">
                                    <tr>
                                        <th scope="row" class="px-4 py-3 text-sm font-medium text-gray-800 dark:text-gray-200">IP address</th>
                                        <td class="break-all px-4 py-3 text-sm text-gray-600 dark:text-gray-300">{{ $activity->ip_address ?: 'Not recorded' }}</td>
                                    </tr>
                                    <tr>
                                        <th scope="row" class="px-4 py-3 text-sm font-medium text-gray-800 dark:text-gray-200">User agent</th>
                                        <td class="break-all px-4 py-3 text-sm text-gray-600 dark:text-gray-300">{{ $activity->user_agent ?: 'Not recorded' }}</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </section>
                </div>
            </dialog>
        @endif
    @endforeach
@endsection