<%- 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 nav-link--active">Dashboard</a>
      <a href="/admin/merchants" class="nav-link">Merchants</a>
      <a href="/admin/payers" class="nav-link">Payers</a>
      <a href="/admin/checkouts" class="nav-link">Checkouts</a>
      <a href="/admin/audit" class="nav-link">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">
    <%- include('../shared/_flash') %>

    <div class="page-header">
      <h1>Platform overview</h1>
    </div>

    <div class="stat-row" style="margin-bottom:var(--space-8)">
      <div class="stat-card">
        <div class="stat-value"><%= stats.merchantUsers %></div>
        <div class="stat-label">Merchant users</div>
      </div>
      <div class="stat-card">
        <div class="stat-value"><%= stats.payerAccounts %></div>
        <div class="stat-label">Payer accounts</div>
      </div>
      <div class="stat-card">
        <div class="stat-value"><%= stats.orgs %></div>
        <div class="stat-label">Organizations</div>
      </div>
      <div class="stat-card">
        <div class="stat-value"><%= stats.checkouts %></div>
        <div class="stat-label">Total requests</div>
      </div>
      <div class="stat-card">
        <div class="stat-value"><%= stats.settled %></div>
        <div class="stat-label">Settled</div>
      </div>
      <div class="stat-card">
        <div class="stat-value">$<%= Number(stats.totalVolume || 0).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 }) %></div>
        <div class="stat-label">Total volume</div>
      </div>
    </div>

    <section class="org-section">
      <h2>Recent activity</h2>
      <% if (recentLogs.length) { %>
      <table class="data-table">
        <thead>
          <tr>
            <th>Event</th>
            <th>Actor</th>
            <th>Target</th>
            <th>When</th>
          </tr>
        </thead>
        <tbody>
          <% for (const log of recentLogs) { %>
          <tr>
            <td class="mono" style="font-size:0.78rem"><%= log.eventType %></td>
            <td><%= log.actorType %><% if (log.actorId) { %> #<%= log.actorId %><% } %></td>
            <td><% if (log.targetType) { %><%= log.targetType %> #<%= log.targetId %><% } else { %>—<% } %></td>
            <td class="text-muted" style="font-size:0.8rem"><%= new Date(log.createdAt).toLocaleString() %></td>
          </tr>
          <% } %>
        </tbody>
      </table>
      <a href="/admin/audit" class="btn-link" style="margin-top:var(--space-4);display:inline-block">View full audit log →</a>
      <a href="/admin/notifications" class="btn-link" style="margin-top:var(--space-2);display:inline-block;margin-left:var(--space-4)">Notification queue →</a>
      <% } else { %>
      <p class="text-muted">No audit events yet.</p>
      <% } %>
    </section>
  </main>
</div>

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