<%- include('../shared/_head', { title: title, portalCss: '/platform/shared/css/base.css', bodyClass: 'merchant-portal dashboard-page' }) %>

<div class="dashboard-shell">
  <header class="dashboard-header">
    <div class="dashboard-brand">
      <span class="brand-name">BeezifiPay</span>
      <div class="portal-badge portal-badge--admin">Admin</div>
    </div>
    <nav class="dashboard-nav">
      <a href="/admin" class="nav-link">Dashboard</a>
      <a href="/admin/merchants" class="nav-link">Merchants</a>
      <a href="/admin/payers" class="nav-link">Payers</a>
      <a href="/admin/notifications" class="nav-link">Notifications</a>
      <a href="/admin/checkouts" class="nav-link">Checkouts</a>
      <a href="/admin/audit" class="nav-link nav-link--active">Audit log</a>
      <span class="nav-divider">·</span>
      <form method="POST" action="/admin/logout" style="display:inline">
        <input type="hidden" name="_csrf" value="<%= csrfToken %>">
        <button type="submit" class="btn-link">Sign out</button>
      </form>
    </nav>
  </header>

  <main class="dashboard-main">
    <div class="page-header">
      <div>
        <h1>Audit log</h1>
        <p class="text-muted">Page <%= page %> · 50 events per page</p>
      </div>
      <div style="display:flex;gap:var(--space-3)">
        <% if (page > 1) { %>
        <a href="/admin/audit?page=<%= page - 1 %>" class="btn btn-secondary btn--sm">← Newer</a>
        <% } %>
        <a href="/admin/audit?page=<%= page + 1 %>" class="btn btn-secondary btn--sm">Older →</a>
      </div>
    </div>

    <% if (logs.length) { %>
    <table class="data-table">
      <thead>
        <tr>
          <th>ID</th>
          <th>Event</th>
          <th>Actor</th>
          <th>Target</th>
          <th>IP</th>
          <th>When</th>
        </tr>
      </thead>
      <tbody>
        <% for (const log of logs) { %>
        <tr>
          <td class="mono text-muted" style="font-size:0.75rem"><%= log.id %></td>
          <td class="mono" style="font-size:0.78rem"><%= log.eventType %></td>
          <td>
            <%= log.actorType %>
            <% if (log.actorId) { %><span class="mono text-muted"> #<%= log.actorId %></span><% } %>
            <% if (log.actorEmail) { %><br><span class="text-muted" style="font-size:0.8rem"><%= log.actorEmail %></span><% } %>
          </td>
          <td>
            <% if (log.targetType) { %>
            <%= log.targetType %>
            <span class="mono text-muted">#<%= log.targetId %></span>
            <% } else { %>—<% } %>
          </td>
          <td class="mono text-muted" style="font-size:0.75rem"><%= log.ipAddress || '—' %></td>
          <td class="text-muted" style="font-size:0.8rem"><%= new Date(log.createdAt).toLocaleString() %></td>
        </tr>
        <% } %>
      </tbody>
    </table>
    <% } else { %>
    <div class="empty-state"><p>No more audit events.</p></div>
    <% } %>

    <div style="margin-top:var(--space-6);display:flex;gap:var(--space-3)">
      <% if (page > 1) { %>
      <a href="/admin/audit?page=<%= page - 1 %>" class="btn btn-secondary btn--sm">← Newer</a>
      <% } %>
      <% if (logs.length === 50) { %>
      <a href="/admin/audit?page=<%= page + 1 %>" class="btn btn-secondary btn--sm">Older →</a>
      <% } %>
    </div>
  </main>
</div>

<%- include('../shared/_foot') %>
