<%- 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">Dashboard</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') %>

    <div class="page-header">
      <div>
        <h1 class="mono"><%= checkout.sessionCode %></h1>
        <p class="text-muted"><%= org.name %><% if (checkout.locationName) { %> · <%= checkout.locationName %><% } %></p>
      </div>
      <span class="status-pill-lg status-pill--<%= checkout.status %>"><%= checkout.status.replace(/_/g, ' ') %></span>
    </div>

    <div class="detail-grid">
      <!-- ── Left: invoice ────────────────────────────────────────── -->
      <section class="org-section detail-card">
        <h2>Invoice</h2>

        <div class="detail-kv">
          <span>Payer</span>
          <span><strong><%= checkout.payerName %></strong><br><span class="text-muted"><%= checkout.payerEmail %></span></span>
        </div>

        <% if (checkout.locationName) { %>
        <div class="detail-kv">
          <span>Location</span>
          <span><%= checkout.locationName %> <span class="mono text-muted">(<%= checkout.locationCode %>)</span></span>
        </div>
        <% } %>

        <% if (checkout.merchantNotes) { %>
        <div class="detail-kv">
          <span>Notes</span>
          <span class="text-muted"><%= checkout.merchantNotes %></span>
        </div>
        <% } %>

        <div class="invoice-items">
          <% for (const item of items) { %>
          <div class="invoice-item">
            <span><%= item.itemName %> <span class="text-muted">× <%= item.quantity %></span></span>
            <strong>$<%= Number(item.lineTotal).toFixed(2) %></strong>
          </div>
          <% } %>
        </div>

        <div class="invoice-totals">
          <div class="inline-kv"><span>Subtotal</span><strong>$<%= Number(checkout.subtotal).toFixed(2) %></strong></div>
          <div class="inline-kv"><span>Tax</span><strong>$<%= Number(checkout.tax).toFixed(2) %></strong></div>
          <div class="inline-kv total-row"><span>Total</span><strong>$<%= Number(checkout.total).toFixed(2) %></strong></div>
        </div>

        <% if (checkout.status === 'settled' && checkout.processorTransactionId) { %>
        <div class="settle-badge">
          Settled · <span class="mono"><%= checkout.processorTransactionId %></span>
        </div>
        <% } %>
        <% if (checkout.status === 'refunded') { %>
        <div class="settle-badge settle-badge--refunded">Refunded</div>
        <% } %>

        <% if (checkout.declineReason) { %>
        <div class="banner banner--error" style="margin-top:var(--space-4)">
          Declined: <%= checkout.declineReason %>
        </div>
        <% } %>
      </section>

      <!-- ── Right: actions + metadata ───────────────────────────── -->
      <div class="detail-sidebar">

        <% if (checkout.status === 'draft') { %>
        <section class="org-section">
          <h2>Actions</h2>
          <p class="text-muted" style="margin-bottom:var(--space-4)">Send this request to the payer. They will receive an email and have 24 hours to approve or decline.</p>
          <form method="POST" action="/merchant/checkouts/<%= checkout.id %>/deliver">
            <input type="hidden" name="_csrf" value="<%= csrfToken %>">
            <button type="submit" class="btn btn-primary btn--full">Send to payer</button>
          </form>
          <form method="POST" action="/merchant/checkouts/<%= checkout.id %>/cancel" style="margin-top:var(--space-3)">
            <input type="hidden" name="_csrf" value="<%= csrfToken %>">
            <button type="submit" class="btn-link btn-link--warn"
                    onclick="return confirm('Cancel this payment request?')">Cancel request</button>
          </form>
        </section>
        <% } else if (checkout.status === 'delivered') { %>
        <section class="org-section">
          <h2>Awaiting payer</h2>
          <p class="text-muted">Request sent to <%= checkout.payerEmail %>.</p>
          <% if (checkout.expiresAt) { %>
          <p class="text-muted">Expires: <strong><%= new Date(checkout.expiresAt).toLocaleString() %></strong></p>
          <% } %>
          <form method="POST" action="/merchant/checkouts/<%= checkout.id %>/cancel" style="margin-top:var(--space-4)">
            <input type="hidden" name="_csrf" value="<%= csrfToken %>">
            <button type="submit" class="btn-link btn-link--warn"
                    onclick="return confirm('Cancel this payment request?')">Cancel request</button>
          </form>
        </section>
        <% } %>

        <section class="org-section">
          <h2>Details</h2>
          <div class="detail-kv"><span>Created by</span><span><%= checkout.createdByName %></span></div>
          <div class="detail-kv"><span>Created</span><span><%= new Date(checkout.createdAt).toLocaleString() %></span></div>
          <% if (checkout.approvedAt) { %>
          <div class="detail-kv"><span>Approved</span><span><%= new Date(checkout.approvedAt).toLocaleString() %></span></div>
          <% } %>
          <% if (checkout.settledAt) { %>
          <div class="detail-kv"><span>Settled</span><span><%= new Date(checkout.settledAt).toLocaleString() %></span></div>
          <% } %>
          <% if (checkout.methodLabel) { %>
          <div class="detail-kv"><span>Paid with</span><span><%= checkout.methodLabel %> · <%= checkout.methodNetwork %> <%= checkout.methodMasked %></span></div>
          <% } %>
        </section>

        <% if (checkout.status === 'settled') { %>
        <section class="org-section">
          <h2>Refund</h2>
          <p class="text-muted">Issue a full refund for this payment.</p>
          <form method="POST" action="/merchant/checkouts/<%= checkout.id %>/refund"
                onsubmit="return confirm('Issue this refund? This cannot be undone.')">
            <input type="hidden" name="_csrf" value="<%= csrfToken %>">
            <div class="field">
              <label for="refund-amount">Amount <span class="required">*</span></label>
              <input type="number" id="refund-amount" name="refundAmount"
                     value="<%= Number(checkout.total).toFixed(2) %>"
                     min="0.01" max="<%= Number(checkout.total).toFixed(2) %>"
                     step="0.01" required>
              <span class="field-hint">Max: $<%= Number(checkout.total).toFixed(2) %> · Partial refunds allowed</span>
            </div>
            <div class="field">
              <label for="refund-reason">Reason</label>
              <select id="refund-reason" name="reason">
                <option value="requested_by_customer">Requested by customer</option>
                <option value="duplicate">Duplicate charge</option>
                <option value="fraudulent">Fraudulent</option>
                <option value="other">Other</option>
              </select>
            </div>
            <div class="field">
              <label for="refund-notes">Notes <span class="text-muted">(optional)</span></label>
              <input type="text" id="refund-notes" name="notes" maxlength="255" placeholder="Internal note">
            </div>
            <button type="submit" class="btn btn-primary btn--full" style="margin-top:var(--space-3)">
              Issue refund
            </button>
          </form>
        </section>
        <% } %>

        <% if (refunds && refunds.length) { %>
        <section class="org-section">
          <h2>Refunds</h2>
          <% for (const r of refunds) { %>
          <div class="attempt-row">
            <div class="inline-kv">
              <span>$<%= Number(r.amount).toFixed(2) %></span>
              <span class="status-pill status-pill--<%= r.status %>"><%= r.status %></span>
            </div>
            <div class="text-muted" style="font-size:0.8rem"><%= r.reason.replace(/_/g, ' ') %><% if (r.initiatedByName) { %> · <%= r.initiatedByName %><% } %></div>
            <% if (r.processorRefundId) { %><div class="mono text-muted" style="font-size:0.75rem"><%= r.processorRefundId %></div><% } %>
          </div>
          <% } %>
        </section>
        <% } %>

        <% if (attempts.length) { %>
        <section class="org-section">
          <h2>Payment attempts</h2>
          <% for (const att of attempts) { %>
          <div class="attempt-row">
            <div class="inline-kv">
              <span class="mono" style="font-size:0.78rem"><%= att.processor %></span>
              <span class="status-pill status-pill--<%= att.status %>"><%= att.status %></span>
            </div>
            <% if (att.chargeId) { %><div class="mono text-muted" style="font-size:0.75rem"><%= att.chargeId %></div><% } %>
            <% if (att.failureMessage) { %><div class="text-muted" style="font-size:0.8rem"><%= att.failureMessage %></div><% } %>
          </div>
          <% } %>
        </section>
        <% } %>
      </div>
    </div>
  </main>
</div>

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