<%- 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 nav-link--active">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">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>Payer accounts</h1>
      <p class="text-muted"><%= payers.length %> total</p>
    </div>

    <% if (payers.length) { %>
    <table class="data-table">
      <thead>
        <tr>
          <th>Name</th>
          <th>Email</th>
          <th>Phone</th>
          <th>Verified</th>
          <th>Status</th>
          <th>Joined</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        <% for (const p of payers) { %>
        <tr class="<%= p.isActive ? '' : 'row--inactive' %>">
          <td><strong><%= p.fullName %></strong></td>
          <td><%= p.email %></td>
          <td><%= p.phone || '<span class="text-muted">—</span>' %></td>
          <td>
            <% if (p.emailVerifiedAt) { %><span class="status-pill status-pill--success" style="margin-right:2px">email</span><% } %>
            <% if (p.phoneVerifiedAt) { %><span class="status-pill status-pill--success">phone</span><% } %>
            <% if (!p.emailVerifiedAt && !p.phoneVerifiedAt) { %><span class="text-muted">none</span><% } %>
          </td>
          <td><span class="status-pill <%= p.isActive ? '' : 'status-pill--inactive' %>"><%= p.isActive ? 'active' : 'inactive' %></span></td>
          <td class="text-muted" style="font-size:0.8rem"><%= new Date(p.createdAt).toLocaleDateString() %></td>
          <td>
            <% if (p.isActive) { %>
            <form method="POST" action="/admin/payers/<%= p.id %>/deactivate" style="display:inline"
                  onsubmit="return confirm('Deactivate this payer account?')">
              <input type="hidden" name="_csrf" value="<%= csrfToken %>">
              <button type="submit" class="btn-link btn-link--warn">Deactivate</button>
            </form>
            <% } else { %>
            <form method="POST" action="/admin/payers/<%= p.id %>/reactivate" style="display:inline">
              <input type="hidden" name="_csrf" value="<%= csrfToken %>">
              <button type="submit" class="btn-link">Reactivate</button>
            </form>
            <% } %>
          </td>
        </tr>
        <% } %>
      </tbody>
    </table>
    <% } else { %>
    <div class="empty-state"><p>No payer accounts yet.</p></div>
    <% } %>
  </main>
</div>

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