<%- 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/checkouts" class="nav-link">Checkouts</a>
      <a href="/admin/notifications" class="nav-link nav-link--active">Notifications</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">
    <div class="page-header">
      <div>
        <h1>Notification queue</h1>
        <p class="text-muted">Page <%= page %> · 50 per page · processor runs every 60 seconds</p>
      </div>
      <div style="display:flex;gap:var(--space-3)">
        <% if (page > 1) { %>
        <a href="/admin/notifications?page=<%= page - 1 %>" class="btn btn-secondary btn--sm">← Newer</a>
        <% } %>
        <a href="/admin/notifications?page=<%= page + 1 %>" class="btn btn-secondary btn--sm">Older →</a>
      </div>
    </div>

    <% if (notifications.length) { %>
    <table class="data-table">
      <thead>
        <tr>
          <th>ID</th>
          <th>Recipient</th>
          <th>Channel</th>
          <th>Template</th>
          <th>Status</th>
          <th>Retries</th>
          <th>Sent</th>
          <th>Created</th>
        </tr>
      </thead>
      <tbody>
        <% for (const n of notifications) { %>
        <tr>
          <td class="mono text-muted" style="font-size:0.75rem"><%= n.id %></td>
          <td><%= n.recipientType %> <span class="mono text-muted">#<%= n.recipientId %></span></td>
          <td><span class="role-badge"><%= n.channel %></span></td>
          <td class="mono" style="font-size:0.8rem"><%= n.templateName %></td>
          <td><span class="status-pill status-pill--<%= n.status === 'sent' ? 'success' : n.status === 'failed' ? 'failed' : '' %>"><%= n.status %></span></td>
          <td class="text-muted"><%= n.retryCount %></td>
          <td class="text-muted" style="font-size:0.8rem"><%= n.sentAt ? new Date(n.sentAt).toLocaleString() : '—' %></td>
          <td class="text-muted" style="font-size:0.8rem"><%= new Date(n.createdAt).toLocaleString() %></td>
        </tr>
        <% } %>
      </tbody>
    </table>
    <% } else { %>
    <div class="empty-state"><p>No notifications yet.</p></div>
    <% } %>

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

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