<%- 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/organization" class="nav-link nav-link--active">Organization</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>Webhooks</h1>
        <p class="text-muted">Receive real-time event notifications at your HTTP endpoints.</p>
      </div>
      <a href="/merchant/organization" class="btn btn-secondary btn--sm">← Organization</a>
    </div>

    <% if (newSecret) { %>
    <div class="banner banner--info" style="margin-bottom:var(--space-6)">
      <strong>Save your webhook secret — it will not be shown again.</strong>
      <div class="mono" style="margin-top:var(--space-2);font-size:0.9rem;word-break:break-all;user-select:all"><%= newSecret %></div>
      <p class="text-muted" style="margin-top:var(--space-2);font-size:0.85rem">
        Verify incoming requests by checking the <code>X-BeezifiPay-Signature</code> header:
        <code>sha256=HMAC-SHA256(secret, requestBody)</code>
      </p>
    </div>
    <% } %>

    <!-- ── Registered endpoints ──────────────────────────────────── -->
    <% if (webhooks.length) { %>
    <section class="org-section">
      <h2>Registered endpoints</h2>
      <table class="data-table">
        <thead>
          <tr>
            <th>URL</th>
            <th>Events</th>
            <th>Status</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          <% for (const wh of webhooks) { %>
          <tr class="<%= wh.isActive ? '' : 'row--inactive' %>">
            <td class="mono" style="font-size:0.82rem;word-break:break-all"><%= wh.url %></td>
            <td>
              <% if (wh.events.includes('*')) { %>
              <span class="role-badge">all events</span>
              <% } else { %>
              <% for (const ev of wh.events) { %>
              <span class="mono text-muted" style="font-size:0.78rem;display:block"><%= ev %></span>
              <% } %>
              <% } %>
            </td>
            <td><span class="status-pill <%= wh.isActive ? '' : 'status-pill--inactive' %>"><%= wh.isActive ? 'active' : 'disabled' %></span></td>
            <td style="white-space:nowrap">
              <form method="POST" action="/merchant/organization/webhooks/<%= wh.id %>/toggle" style="display:inline">
                <input type="hidden" name="_csrf" value="<%= csrfToken %>">
                <button type="submit" class="btn-link"><%= wh.isActive ? 'Disable' : 'Enable' %></button>
              </form>
              <form method="POST" action="/merchant/organization/webhooks/<%= wh.id %>/delete" style="display:inline"
                    onsubmit="return confirm('Remove this webhook endpoint?')">
                <input type="hidden" name="_csrf" value="<%= csrfToken %>">
                <button type="submit" class="btn-link btn-link--warn" style="margin-left:var(--space-3)">Remove</button>
              </form>
            </td>
          </tr>
          <% } %>
        </tbody>
      </table>
    </section>
    <% } %>

    <!-- ── Add endpoint ────────────────────────────────────────────── -->
    <section class="org-section">
      <h2>Add endpoint</h2>

      <%- include('../shared/_errors', { errors }) %>

      <form method="POST" action="/merchant/organization/webhooks/add" class="auth-form">
        <input type="hidden" name="_csrf" value="<%= csrfToken %>">

        <div class="field">
          <label for="wh-url">Endpoint URL <span class="required">*</span></label>
          <input type="url" id="wh-url" name="url"
                 value="<%= typeof values.url !== 'undefined' ? values.url : '' %>"
                 placeholder="https://your-server.com/webhooks/beezifipay" required>
        </div>

        <div class="field">
          <label>Events to send <span class="required">*</span></label>
          <div class="checkbox-group">
            <% for (const ev of availableEvents) { %>
            <label class="checkbox-label">
              <input type="checkbox" name="events" value="<%= ev %>"
                     <%= (values.events && [].concat(values.events).includes(ev)) ? 'checked' : '' %>>
              <span class="mono" style="font-size:0.88rem"><%= ev %></span>
            </label>
            <% } %>
            <label class="checkbox-label">
              <input type="checkbox" name="events" value="*"
                     <%= (values.events && [].concat(values.events).includes('*')) ? 'checked' : '' %>>
              <span>All events</span>
            </label>
          </div>
        </div>

        <div class="form-actions">
          <button type="submit" class="btn btn-primary">Add endpoint</button>
        </div>
      </form>
    </section>

    <!-- ── Signature verification guide ───────────────────────────── -->
    <section class="org-section">
      <h2>Verifying signatures</h2>
      <p class="text-muted">Each delivery includes an <code>X-BeezifiPay-Signature</code> header. Verify it with:</p>
      <pre class="code-block">const crypto = require('crypto');
const sig = req.headers['x-beezifipay-signature'];
const expected = 'sha256=' + crypto
  .createHmac('sha256', WEBHOOK_SECRET)
  .update(req.rawBody)
  .digest('hex');
if (sig !== expected) return res.status(400).end();</pre>
    </section>
  </main>
</div>

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