<%- 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>API Keys</h1>
        <p class="text-muted">Authenticate server-side API calls with secret keys. Never expose secret keys in client-side code.</p>
      </div>
      <a href="/merchant/organization" class="btn btn-secondary btn--sm">← Organization</a>
    </div>

    <% if (newKey) { %>
    <div class="banner banner--info" style="margin-bottom:var(--space-6)">
      <strong>Copy your secret key now — 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"><%= newKey.raw %></div>
      <p class="text-muted" style="margin-top:var(--space-2);font-size:0.85rem">
        Use it as a Bearer token: <code>Authorization: Bearer &lt;key&gt;</code>
      </p>
    </div>
    <% } %>

    <!-- ── Active keys ─────────────────────────────────────────────── -->
    <% if (keys.length) { %>
    <section class="org-section">
      <h2>Active keys</h2>
      <table class="data-table">
        <thead>
          <tr>
            <th>Name</th>
            <th>Preview</th>
            <th>Type</th>
            <th>Environment</th>
            <th>Last used</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          <% for (const key of keys) { %>
          <tr>
            <td><%= key.name %></td>
            <td class="mono" style="font-size:0.82rem"><%= key.keyPreview %></td>
            <td><span class="role-badge"><%= key.type %></span></td>
            <td><span class="status-pill <%= key.environment === 'live' ? '' : 'status-pill--test' %>"><%= key.environment %></span></td>
            <td class="text-muted" style="font-size:0.85rem">
              <%= key.lastUsedAt ? new Date(key.lastUsedAt).toLocaleString() : 'Never' %>
            </td>
            <td>
              <form method="POST" action="/merchant/organization/api-keys/<%= key.id %>/revoke"
                    onsubmit="return confirm('Revoke this key? Any integrations using it will stop working.')">
                <input type="hidden" name="_csrf" value="<%= csrfToken %>">
                <button type="submit" class="btn-link btn-link--warn">Revoke</button>
              </form>
            </td>
          </tr>
          <% } %>
        </tbody>
      </table>
    </section>
    <% } else { %>
    <section class="org-section">
      <p class="text-muted">No API keys yet. Create one below to start integrating.</p>
    </section>
    <% } %>

    <!-- ── Create a new key ────────────────────────────────────────── -->
    <section class="org-section">
      <h2>Create a new key</h2>

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

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

        <div class="field">
          <label for="key-name">Name</label>
          <input type="text" id="key-name" name="name"
                 value="<%= typeof values.name !== 'undefined' ? values.name : '' %>"
                 placeholder="e.g. My App Server" maxlength="120">
        </div>

        <div class="field">
          <label for="key-type">Type</label>
          <select id="key-type" name="type">
            <option value="secret" <%= (values.type === 'secret' || !values.type) ? 'selected' : '' %>>Secret (server-side only)</option>
            <option value="publishable" <%= values.type === 'publishable' ? 'selected' : '' %>>Publishable (client-side safe)</option>
          </select>
        </div>

        <div class="field">
          <label for="key-env">Environment</label>
          <select id="key-env" name="environment">
            <option value="live" <%= (values.environment === 'live' || !values.environment) ? 'selected' : '' %>>Live</option>
            <option value="test" <%= values.environment === 'test' ? 'selected' : '' %>>Test</option>
          </select>
        </div>

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

    <!-- ── SDK quickstart ─────────────────────────────────────────── -->
    <section class="org-section">
      <h2>SDK quickstart</h2>
      <p class="text-muted">Install the SDK and make your first API call:</p>
      <pre class="code-block">npm install beezifipay

const { MerchantClient } = require('beezifipay');
const client = new MerchantClient({ apiKey: 'sk_live_…' });

const checkout = await client.createCheckout({
  payerEmail: 'customer@example.com',
  items: [{ name: 'Product', quantity: 1, unitPrice: 29.99 }],
  idempotencyKey: 'order-123',
});
await client.deliverCheckout(checkout.sessionCode);</pre>
    </section>
  </main>
</div>

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