@extends('layouts.admin')
@section('title', 'Audit activity')
@section('content')
@php
  $categoryTones = [
    'create' => 'success',
    'update' => 'info',
    'delete' => 'danger',
    'http' => 'muted',
    'auth' => 'warning',
    'export' => 'info',
    'activity' => 'muted',
  ];
@endphp
<x-admin.page
    title="Activity & audit center"
    subtitle="Append-only record of staff mutations, domain events, request context, and before/after payloads."
>
    <x-slot:actions>
        <a href="{{ route('admin.audit.export', request()->query()) }}" class="admin-btn">
            <i data-lucide="download" class="h-3.5 w-3.5"></i> Export CSV
        </a>
    </x-slot:actions>

    <div class="order-ops-stat-rail mb-5">
        <div class="order-ops-stat">
            <span class="order-ops-stat-label">Total events</span>
            <span class="order-ops-stat-value">{{ number_format($stats['total']) }}</span>
        </div>
        <div class="order-ops-stat">
            <span class="order-ops-stat-label">Today</span>
            <span class="order-ops-stat-value">{{ number_format($stats['today']) }}</span>
        </div>
        <div class="order-ops-stat">
            <span class="order-ops-stat-label">Matching filters</span>
            <span class="order-ops-stat-value">{{ number_format($stats['filtered']) }}</span>
        </div>
        <div class="order-ops-stat">
            <span class="order-ops-stat-label">Unique actors</span>
            <span class="order-ops-stat-value">{{ number_format($stats['actors']) }}</span>
        </div>
    </div>

    <form method="get" action="{{ route('admin.audit.index') }}" class="mb-5 rounded-2xl border border-[var(--color-admin-border)] bg-white p-4 shadow-[var(--admin-shadow)] sm:p-5">
        <div class="mb-3 flex flex-wrap items-center justify-between gap-2">
            <h2 class="text-sm font-semibold">Controls and filters</h2>
            <div class="flex flex-wrap gap-2">
                <button class="admin-btn admin-btn-primary" type="submit">Apply filters</button>
                <a href="{{ route('admin.audit.index') }}" class="admin-btn">Reset</a>
            </div>
        </div>
        <div class="grid gap-3 md:grid-cols-2 xl:grid-cols-4">
            <label class="block text-sm xl:col-span-2">
                <span class="admin-label">Search</span>
                <input class="admin-input" name="q" value="{{ $filters['q'] }}" placeholder="Action, path, IP, summary…">
            </label>
            <label class="block text-sm">
                <span class="admin-label">Per page</span>
                <select class="admin-input" name="per_page">
                    @foreach($perPageOptions as $option)
                        <option value="{{ $option }}" @selected((int) $filters['per_page'] === (int) $option)>{{ $option }} / page</option>
                    @endforeach
                </select>
            </label>
            <label class="block text-sm">
                <span class="admin-label">Staff user</span>
                <select class="admin-input" name="actor_id">
                    <option value="">All users</option>
                    @foreach($actors as $actor)
                        <option value="{{ $actor->id }}" @selected((int) $filters['actor_id'] === (int) $actor->id)>
                            {{ $actor->name }} ({{ $actor->email }})
                        </option>
                    @endforeach
                </select>
            </label>
            <label class="block text-sm">
                <span class="admin-label">Module</span>
                <select class="admin-input" name="module">
                    <option value="">All modules</option>
                    @foreach($modules as $module)
                        <option value="{{ $module }}" @selected($filters['module'] === $module)>{{ $module }}</option>
                    @endforeach
                    @foreach(['identity','settings','orders','catalogue','crm','accounting','content','media','social','http','auth','online-store'] as $fallback)
                        @if(!in_array($fallback, $modules, true))
                            <option value="{{ $fallback }}" @selected($filters['module'] === $fallback)>{{ $fallback }}</option>
                        @endif
                    @endforeach
                </select>
            </label>
            <label class="block text-sm">
                <span class="admin-label">Category</span>
                <select class="admin-input" name="category">
                    <option value="">All categories</option>
                    @foreach(['create','update','delete','http','auth','export','activity','read'] as $category)
                        <option value="{{ $category }}" @selected($filters['category'] === $category)>{{ $category }}</option>
                    @endforeach
                    @foreach($categories as $category)
                        @if(!in_array($category, ['create','update','delete','http','auth','export','activity','read'], true))
                            <option value="{{ $category }}" @selected($filters['category'] === $category)>{{ $category }}</option>
                        @endif
                    @endforeach
                </select>
            </label>
            <label class="block text-sm">
                <span class="admin-label">HTTP method</span>
                <select class="admin-input" name="method">
                    <option value="">Any</option>
                    @foreach($methods as $method)
                        <option value="{{ $method }}" @selected($filters['method'] === $method)>{{ $method }}</option>
                    @endforeach
                </select>
            </label>
            <label class="block text-sm">
                <span class="admin-label">Action contains</span>
                <input class="admin-input" name="action" value="{{ $filters['action'] }}" placeholder="roles.updated">
            </label>
            <label class="block text-sm">
                <span class="admin-label">IP contains</span>
                <input class="admin-input" name="ip" value="{{ $filters['ip'] }}" placeholder="203.0.113.">
            </label>
            <label class="block text-sm">
                <span class="admin-label">Subject type</span>
                <input class="admin-input" name="auditable_type" value="{{ $filters['auditable_type'] }}" placeholder="Role, Order, User…">
            </label>
            <label class="block text-sm">
                <span class="admin-label">From</span>
                <input class="admin-input" type="date" name="from" value="{{ $filters['from'] }}">
            </label>
            <label class="block text-sm">
                <span class="admin-label">To</span>
                <input class="admin-input" type="date" name="to" value="{{ $filters['to'] }}">
            </label>
        </div>
    </form>

    <section class="overflow-hidden rounded-2xl border border-[var(--color-admin-border)] bg-white shadow-[var(--admin-shadow)]">
        <div class="overflow-x-auto">
            <table class="min-w-full text-left text-sm">
                <thead class="border-b border-[var(--color-admin-border)] bg-[#fafbfb] text-xs uppercase tracking-wide text-[#6d7175]">
                    <tr>
                        <th class="px-4 py-3 font-medium">When</th>
                        <th class="px-4 py-3 font-medium">Actor</th>
                        <th class="px-4 py-3 font-medium">Module</th>
                        <th class="px-4 py-3 font-medium">Category</th>
                        <th class="px-4 py-3 font-medium">Action / summary</th>
                        <th class="px-4 py-3 font-medium">Request</th>
                        <th class="px-4 py-3 font-medium">IP</th>
                        <th class="px-4 py-3 font-medium"></th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($events as $event)
                        <tr class="border-t border-[var(--color-admin-border)]/70 align-top hover:bg-[#fbfbfc]">
                            <td class="px-4 py-3 whitespace-nowrap">
                                <div class="font-medium">{{ $event->created_at?->format('Y-m-d H:i:s') }}</div>
                                <div class="text-[11px] text-[#8c9196]">#{{ $event->id }}</div>
                            </td>
                            <td class="px-4 py-3">
                                <div class="font-medium">{{ $event->actor?->name ?? 'System' }}</div>
                                <div class="text-xs text-[#6d7175]">{{ $event->actor?->email ?? '—' }}</div>
                            </td>
                            <td class="px-4 py-3">
                                <span class="rounded-md bg-[#f6f6f7] px-2 py-0.5 font-mono text-[11px]">{{ $event->resolvedModule() }}</span>
                            </td>
                            <td class="px-4 py-3">
                                <x-admin.badge :tone="$categoryTones[$event->resolvedCategory()] ?? 'muted'">{{ $event->resolvedCategory() }}</x-admin.badge>
                            </td>
                            <td class="px-4 py-3 min-w-[16rem]">
                                <div class="font-mono text-xs text-[#202223]">{{ $event->action }}</div>
                                <div class="mt-0.5 text-xs text-[#6d7175]">{{ $event->summary ?: '—' }}</div>
                            </td>
                            <td class="px-4 py-3">
                                @if($event->method || $event->path)
                                    <div class="font-mono text-[11px]"><span class="font-semibold">{{ $event->method }}</span> {{ $event->path }}</div>
                                    @if($event->status_code)
                                        <div class="text-[11px] text-[#8c9196]">HTTP {{ $event->status_code }}</div>
                                    @endif
                                @else
                                    <span class="text-xs text-[#8c9196]">—</span>
                                @endif
                            </td>
                            <td class="px-4 py-3 font-mono text-xs">{{ $event->ip ?: '—' }}</td>
                            <td class="px-4 py-3 text-right">
                                <button
                                    type="button"
                                    class="admin-btn"
                                    data-audit-view
                                    data-audit-url="{{ route('admin.audit.show', $event) }}"
                                >View</button>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="8" class="px-4 py-10 text-center text-sm text-[#6d7175]">No audit events match these filters.</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        <div class="border-t border-[var(--color-admin-border)] px-4 py-3">{{ $events->links() }}</div>
    </section>
</x-admin.page>

<div id="audit-detail-modal" class="admin-audit-modal" hidden aria-hidden="true">
    <div class="admin-audit-modal-backdrop" data-audit-close></div>
    <div class="admin-audit-modal-panel" role="dialog" aria-modal="true" aria-labelledby="audit-detail-title">
        <div class="admin-audit-modal-head">
            <div>
                <h2 id="audit-detail-title" class="text-base font-semibold text-[#202223]">Activity detail</h2>
                <p class="text-xs text-[#6d7175]" data-audit-subtitle>Loading…</p>
            </div>
            <button type="button" class="admin-btn" data-audit-close aria-label="Close">
                <i data-lucide="x" class="h-4 w-4"></i>
            </button>
        </div>
        <div class="admin-audit-modal-body" data-audit-body>
            <div class="text-sm text-[#6d7175]">Loading activity…</div>
        </div>
    </div>
</div>

@push('scripts')
<script>
(() => {
  const modal = document.getElementById('audit-detail-modal');
  if (!modal) return;
  const body = modal.querySelector('[data-audit-body]');
  const subtitle = modal.querySelector('[data-audit-subtitle]');
  const esc = (value) => String(value ?? '').replace(/[&<>"']/g, (c) => ({
    '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;'
  }[c]));
  const pretty = (value) => {
    if (value === null || value === undefined || value === '') return '<span class="text-[#8c9196]">—</span>';
    if (typeof value === 'string') return `<pre class="admin-audit-json">${esc(value)}</pre>`;
    try { return `<pre class="admin-audit-json">${esc(JSON.stringify(value, null, 2))}</pre>`; }
    catch (e) { return `<pre class="admin-audit-json">${esc(String(value))}</pre>`; }
  };
  const open = () => {
    modal.hidden = false;
    modal.setAttribute('aria-hidden', 'false');
    document.body.classList.add('overflow-hidden');
    if (window.lucide) window.lucide.createIcons();
  };
  const close = () => {
    modal.hidden = true;
    modal.setAttribute('aria-hidden', 'true');
    document.body.classList.remove('overflow-hidden');
  };
  modal.querySelectorAll('[data-audit-close]').forEach((el) => el.addEventListener('click', close));
  document.addEventListener('keydown', (e) => {
    if (e.key === 'Escape' && !modal.hidden) close();
  });

  document.querySelectorAll('[data-audit-view]').forEach((btn) => {
    btn.addEventListener('click', async () => {
      open();
      subtitle.textContent = 'Loading…';
      body.innerHTML = '<div class="text-sm text-[#6d7175]">Loading activity…</div>';
      try {
        const res = await fetch(btn.dataset.auditUrl, {
          headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' },
        });
        if (!res.ok) throw new Error('Could not load activity detail.');
        const json = await res.json();
        const e = json.event || {};
        subtitle.textContent = `#${e.id || ''} · ${e.created_at_human || e.created_at || ''}`;
        const actor = e.actor
          ? `${esc(e.actor.name)} &lt;${esc(e.actor.email)}&gt; (#${esc(e.actor.id)})`
          : 'System / unauthenticated';
        const auditable = e.auditable?.type
          ? `${esc(e.auditable.basename || e.auditable.type)} #${esc(e.auditable.id)}${e.auditable.label ? ' · ' + esc(e.auditable.label) : ''}`
          : '—';
        const diffRows = Object.entries(e.diff || {}).map(([key, row]) => `
          <tr>
            <td class="align-top px-3 py-2 font-mono text-xs">${esc(key)}</td>
            <td class="align-top px-3 py-2">${pretty(row.before)}</td>
            <td class="align-top px-3 py-2">${pretty(row.after)}</td>
          </tr>
        `).join('') || `<tr><td colspan="3" class="px-3 py-4 text-sm text-[#6d7175]">No field-level diff for this event.</td></tr>`;

        body.innerHTML = `
          <div class="grid gap-3 sm:grid-cols-2">
            <div class="admin-audit-kv"><span>Action</span><strong class="font-mono">${esc(e.action)}</strong></div>
            <div class="admin-audit-kv"><span>Summary</span><strong>${esc(e.summary || '—')}</strong></div>
            <div class="admin-audit-kv"><span>Module</span><strong>${esc(e.module)}</strong></div>
            <div class="admin-audit-kv"><span>Category</span><strong>${esc(e.category)}</strong></div>
            <div class="admin-audit-kv"><span>Actor</span><strong>${actor}</strong></div>
            <div class="admin-audit-kv"><span>Subject</span><strong>${auditable}</strong></div>
            <div class="admin-audit-kv"><span>When</span><strong>${esc(e.created_at_human || e.created_at || '—')}</strong></div>
            <div class="admin-audit-kv"><span>IP</span><strong class="font-mono">${esc(e.ip || '—')}</strong></div>
            <div class="admin-audit-kv"><span>Method / path</span><strong class="font-mono">${esc((e.method || '') + ' ' + (e.path || '')) || '—'}</strong></div>
            <div class="admin-audit-kv"><span>Route</span><strong class="font-mono">${esc(e.route_name || '—')}</strong></div>
            <div class="admin-audit-kv"><span>Status</span><strong>${esc(e.status_code || '—')}</strong></div>
            <div class="admin-audit-kv"><span>User agent</span><strong class="text-xs">${esc(e.user_agent || '—')}</strong></div>
          </div>

          <h3 class="mt-5 text-sm font-semibold">Changed fields</h3>
          <div class="mt-2 overflow-x-auto rounded-xl border border-[var(--color-admin-border)]">
            <table class="min-w-full text-left text-sm">
              <thead class="bg-[#fafbfb] text-xs uppercase tracking-wide text-[#6d7175]">
                <tr><th class="px-3 py-2">Field</th><th class="px-3 py-2">Before</th><th class="px-3 py-2">After</th></tr>
              </thead>
              <tbody>${diffRows}</tbody>
            </table>
          </div>

          <div class="mt-5 grid gap-4 lg:grid-cols-3">
            <div>
              <h3 class="text-sm font-semibold">Before</h3>
              <div class="mt-2">${pretty(e.before)}</div>
            </div>
            <div>
              <h3 class="text-sm font-semibold">After</h3>
              <div class="mt-2">${pretty(e.after)}</div>
            </div>
            <div>
              <h3 class="text-sm font-semibold">Meta / context</h3>
              <div class="mt-2">${pretty(e.meta)}</div>
            </div>
          </div>
        `;
      } catch (err) {
        subtitle.textContent = 'Error';
        body.innerHTML = `<div class="rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-800">${esc(err.message || 'Failed to load')}</div>`;
      }
    });
  });
})();
</script>
@endpush
@endsection