<%- include('../shared/_head', { title: title, portalCss: '/platform/merchant/css/portal.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--merchant">Merchant</div>
    </div>
    <nav class="dashboard-nav">
      <a href="/merchant/dashboard" class="nav-link nav-link--active">Dashboard</a>
      <% if (org) { %>
      <a href="/merchant/organization" class="nav-link"><%= org.name %></a>
      <a href="/merchant/checkouts" class="nav-link">Requests</a>
      <a href="/merchant/pos" class="nav-link">POS Charge</a>
      <% } %>
      <span class="nav-divider">·</span>
      <span class="nav-user"><%= merchantUser.fullName %></span>
      <form method="POST" action="/merchant/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 (!merchantUser.emailVerifiedAt) { %>
    <div class="banner banner--warn" role="alert">
      <strong>Verify your email.</strong>
      Your account is pending email verification. Check your inbox for the verification link.
    </div>
    <% } %>

    <div class="dashboard-welcome">
      <h1>Welcome, <%= merchantUser.fullName %></h1>
      <% if (org) { %>
      <p class="text-muted">Managing <strong><%= org.name %></strong> · <%= locationCount %> active location<%= locationCount !== 1 ? 's' : '' %> · <%= memberCount %> team member<%= memberCount !== 1 ? 's' : '' %></p>
      <% } else { %>
      <p class="text-muted">Complete the steps below to start accepting payments.</p>
      <% } %>
    </div>

    <% if (org && checkoutCounts) { %>
    <!-- ── Stats row ─────────────────────────────────────────────────────── -->
    <div class="stat-row">
      <div class="stat-card">
        <div class="stat-value"><%= locationCount %></div>
        <div class="stat-label">Active location<%= locationCount !== 1 ? 's' : '' %></div>
        <a href="/merchant/organization" class="stat-action">Manage →</a>
      </div>
      <div class="stat-card">
        <div class="stat-value"><%= Number(checkoutCounts.delivered) || 0 %></div>
        <div class="stat-label">Awaiting payer</div>
        <a href="/merchant/checkouts" class="stat-action">View →</a>
      </div>
      <div class="stat-card stat-card--success">
        <div class="stat-value"><%= Number(checkoutCounts.settled) || 0 %></div>
        <div class="stat-label">Settled</div>
        <a href="/merchant/checkouts" class="stat-action">View →</a>
      </div>
      <div class="stat-card">
        <div class="stat-value"><%= Number(checkoutCounts.total) || 0 %></div>
        <div class="stat-label">Total requests</div>
        <a href="/merchant/checkouts" class="stat-action">View all →</a>
      </div>
    </div>
    <% } %>

    <div class="setup-checklist">
      <h2>Setup checklist</h2>
      <ul class="checklist">
        <li class="checklist-item checklist-item--<%= merchantUser.emailVerifiedAt ? 'done' : 'todo' %>">
          <span class="checklist-icon"><%= merchantUser.emailVerifiedAt ? '✓' : '○' %></span>
          <div>
            <strong>Verify email</strong>
            <p>Confirm your email address to secure your account.</p>
          </div>
        </li>
        <li class="checklist-item checklist-item--<%= org ? 'done' : 'todo' %>">
          <span class="checklist-icon"><%= org ? '✓' : '○' %></span>
          <div>
            <strong>Create an organization</strong>
            <p>
              <% if (org) { %><a href="/merchant/organization"><%= org.name %></a> — your business entity is set up.
              <% } else { %><a href="/merchant/organization/create">Set up your business →</a><% } %>
            </p>
          </div>
        </li>
        <li class="checklist-item checklist-item--<%= (org && locationCount > 0) ? 'done' : 'todo' %>">
          <span class="checklist-icon"><%= (org && locationCount > 0) ? '✓' : '○' %></span>
          <div>
            <strong>Add a location</strong>
            <p>
              <% if (org && locationCount > 0) { %><%= locationCount %> active location<%= locationCount !== 1 ? 's' : '' %> — <a href="/merchant/organization">manage →</a>
              <% } else if (org) { %><a href="/merchant/organization/location/new">Add your first location →</a>
              <% } else { %>Create an organization first.<% } %>
            </p>
          </div>
        </li>
        <li class="checklist-item checklist-item--<%= (org && checkoutCounts && Number(checkoutCounts.total) > 0) ? 'done' : 'todo' %>">
          <span class="checklist-icon"><%= (org && checkoutCounts && Number(checkoutCounts.total) > 0) ? '✓' : '○' %></span>
          <div>
            <strong>Send a payment request</strong>
            <p>
              <% if (org && checkoutCounts && Number(checkoutCounts.total) > 0) { %>
              <%= Number(checkoutCounts.total) %> request<%= Number(checkoutCounts.total) !== 1 ? 's' : '' %> created — <a href="/merchant/checkouts">view →</a>
              <% } else if (org) { %>
              <a href="/merchant/checkouts/new">Create your first request →</a>
              <% } else { %>
              Complete the steps above first.
              <% } %>
            </p>
          </div>
        </li>
      </ul>
    </div>

    <% if (org) { %>
    <div style="text-align:center;margin-top:var(--space-6)">
      <a href="/merchant/checkouts/new" class="btn btn-primary">New payment request</a>
    </div>
    <% } %>

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

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