<%- include('../shared/_head', { title: title, portalCss: '/platform/payer/css/portal.css', bodyClass: 'payer-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--payer">Payer</div>
    </div>
    <nav class="dashboard-nav">
      <a href="/payer/dashboard" class="nav-link nav-link--active">My account</a>
      <a href="/payer/methods" class="nav-link">Payment methods</a>
      <a href="/payer/dashboard/scan" class="nav-link">Scan to Pay</a>
      <a href="/payer/requests" class="nav-link">
        Requests<% if (pendingCount > 0) { %> <span class="nav-badge"><%= pendingCount %></span><% } %>
      </a>
      <span class="nav-divider">·</span>
      <span class="nav-user"><%= payerAccount.fullName %></span>
      <form method="POST" action="/payer/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') %>

    <% if (!payerAccount.emailVerifiedAt) { %>
    <div class="banner banner--warn" role="alert">
      <strong>Verify your email.</strong>
      Check your inbox for a verification link to activate your account.
    </div>
    <% } %>

    <% if (payerAccount.emailVerifiedAt && !payerAccount.phoneVerifiedAt && smsEnabled) { %>
    <div class="banner banner--info" role="alert">
      <strong>Add phone verification</strong> for extra account security.
      <a href="/payer/verify-phone" style="margin-left:var(--space-3)">Verify phone →</a>
    </div>
    <% } %>

    <% if (pendingCount > 0) { %>
    <div class="banner banner--pending" role="alert">
      <strong>You have <%= pendingCount %> payment request<%= pendingCount !== 1 ? 's' : '' %> waiting for your response.</strong>
      <a href="/payer/requests" style="margin-left:var(--space-3)">Review now →</a>
    </div>
    <% } %>

    <div class="dashboard-welcome" style="display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--space-3)">
      <div>
        <h1>Hi, <%= payerAccount.fullName %></h1>
        <p class="text-muted">Manage your payment methods and review incoming requests.</p>
      </div>
      <a href="/payer/dashboard/scan" class="btn btn-primary" style="font-size:1rem;padding:12px 24px;white-space:nowrap">
        Scan to Pay
      </a>
    </div>

    <div class="payer-sections">
      <section class="payer-section">
        <div class="section-header">
          <h2>Payment requests</h2>
          <a href="/payer/requests" class="btn btn-secondary btn--sm">View all<% if (pendingCount > 0) { %> (<%= pendingCount %> pending)<% } %> →</a>
        </div>
        <% if (pendingCount > 0) { %>
        <p class="text-muted">You have <strong><%= pendingCount %></strong> pending request<%= pendingCount !== 1 ? 's' : '' %> from merchants awaiting your approval.</p>
        <% } else { %>
        <p class="text-muted">Incoming payment requests from merchants will appear here for your review and approval.</p>
        <% } %>
      </section>

      <section class="payer-section">
        <div class="section-header">
          <h2>Payment methods</h2>
          <a href="/payer/methods" class="btn btn-secondary btn--sm">Manage →</a>
        </div>
        <% if (methodCount > 0) { %>
        <p class="text-muted">You have <strong><%= methodCount %></strong> saved payment method<%= methodCount !== 1 ? 's' : '' %>. Merchants will never see your raw card details.</p>
        <% } else { %>
        <p class="text-muted">
          <a href="/payer/methods">Add a card →</a> to securely vault it. Your raw card data is never shared with merchants.
        </p>
        <% } %>
      </section>

      <section class="payer-section">
        <div class="section-header">
          <h2>Transaction history</h2>
          <a href="/payer/requests" class="btn btn-secondary btn--sm">View all →</a>
        </div>
        <p class="text-muted">A full record of approved, declined, and refunded payments.</p>
      </section>

      <% if (smsEnabled && !payerAccount.phoneVerifiedAt) { %>
      <section class="payer-section">
        <div class="section-header">
          <h2>Phone verification</h2>
          <a href="/payer/verify-phone" class="btn btn-secondary btn--sm">Verify →</a>
        </div>
        <p class="text-muted">Add a verified phone number for extra account security.</p>
      </section>
      <% } %>
    </div>

    <div class="demo-callout">
      <p>Want to see the full payment flow? <a href="/demo">Open the demo →</a></p>
    </div>
  </main>
</div>

<%- include('../shared/_foot', { portalJs: '/platform/payer/js/dashboard.js' }) %>
