<h1>Payment Gateways</h1>

<% if (forbidden) { %>
  <div class="alert alert-danger">Your role does not have permission to view payment configuration.</div>
<% } else { %>

<% if (error) { %><div class="alert alert-danger"><%= error %></div><% } %>

<div class="card">
  <h2 style="font-size:15px;margin-top:0">Gateway Credentials</h2>
  <p style="color:var(--muted);font-size:12px">Write-only — credentials are never displayed once saved. Rotate by re-submitting.</p>
  <table>
    <thead><tr><th>Provider</th><th>Environment</th><th>Status</th><th>Updated</th><th></th></tr></thead>
    <tbody>
      <% for (const c of credentials) { %>
      <tr>
        <td><%= c.provider %></td>
        <td><span class="badge <%= c.environment === 'live' ? 'badge-danger' : 'badge-warn' %>"><%= c.environment %></span></td>
        <td><span class="badge <%= c.is_active ? 'badge-ok' : 'badge-danger' %>"><%= c.is_active ? 'Active' : 'Inactive' %></span></td>
        <td><%= c.updated_by %>, <%= new Date(c.updated_at).toLocaleDateString() %></td>
        <td><% if (c.is_active) { %><form method="post" action="/payments/gateway-credentials/<%= c.id %>/deactivate"><button class="link-btn" type="submit">Deactivate</button></form><% } %></td>
      </tr>
      <% } %>
      <% if (!credentials.length) { %><tr><td colspan="5" style="color:var(--muted)">No gateways configured.</td></tr><% } %>
    </tbody>
  </table>

  <form method="post" action="/payments/gateway-credentials" style="margin-top:16px;max-width:420px">
    <label>Provider</label>
    <select name="provider">
      <option value="paystack">Paystack</option>
      <option value="mtn_momo">MTN Mobile Money</option>
      <option value="vodafone_cash">Vodafone Cash</option>
      <option value="stripe">Stripe</option>
    </select>
    <label>Environment</label>
    <select name="environment"><option value="test">Test</option><option value="live">Live</option></select>
    <label>Secret Key</label>
    <input type="password" name="secretKey" placeholder="sk_...">
    <label>Public Key (optional)</label>
    <input type="text" name="publicKey">
    <button class="btn" type="submit" style="width:100%;margin-top:16px">Save Credentials</button>
  </form>
</div>

<div class="card" style="max-width:520px">
  <h2 style="font-size:15px;margin-top:0">Routing Rules</h2>
  <table>
    <thead><tr><th>Currency</th><th>Jurisdiction</th><th>Provider</th><th>Priority</th><th></th></tr></thead>
    <tbody>
      <% for (const r of rules) { %>
      <tr>
        <td><%= r.currency %></td><td><%= r.jurisdiction || 'Any' %></td><td><%= r.provider %></td><td><%= r.priority %></td>
        <td><form method="post" action="/payments/routing-rules/<%= r.id %>/delete"><button class="link-btn" type="submit">Remove</button></form></td>
      </tr>
      <% } %>
      <% if (!rules.length) { %><tr><td colspan="5" style="color:var(--muted)">No routing rules yet.</td></tr><% } %>
    </tbody>
  </table>
  <form method="post" action="/payments/routing-rules" style="display:flex;gap:6px;margin-top:12px;flex-wrap:wrap">
    <input type="text" name="currency" placeholder="GHS" style="width:60px" maxlength="3" required>
    <input type="text" name="jurisdiction" placeholder="Jurisdiction (opt.)" style="flex:1">
    <input type="text" name="provider" placeholder="paystack" style="flex:1" required>
    <input type="number" name="priority" placeholder="1" style="width:60px">
    <button class="btn" type="submit">Add</button>
  </form>
</div>

<div class="card" style="max-width:520px">
  <h2 style="font-size:15px;margin-top:0">Tax / Currency Config</h2>
  <table>
    <thead><tr><th>Jurisdiction</th><th>Currency</th><th>Tax</th><th>Rate</th></tr></thead>
    <tbody>
      <% for (const t of taxConfig) { %>
      <tr><td><%= t.jurisdiction %></td><td><%= t.currency %></td><td><%= t.tax_label %></td><td><%= t.tax_rate_percent %>%</td></tr>
      <% } %>
      <% if (!taxConfig.length) { %><tr><td colspan="4" style="color:var(--muted)">No tax configuration yet.</td></tr><% } %>
    </tbody>
  </table>
  <form method="post" action="/payments/tax-config" style="display:flex;gap:6px;margin-top:12px;flex-wrap:wrap">
    <input type="text" name="jurisdiction" placeholder="GHA" style="width:80px" required>
    <input type="text" name="currency" placeholder="GHS" style="width:60px" maxlength="3" required>
    <input type="text" name="taxLabel" placeholder="VAT" style="width:80px">
    <input type="number" step="0.01" name="taxRatePercent" placeholder="12.5" style="width:80px">
    <button class="btn" type="submit">Save</button>
  </form>
</div>

<div class="card">
  <h2 style="font-size:15px;margin-top:0">Webhook Delivery Log</h2>
  <p style="color:var(--muted);font-size:12px">Monitoring only — populated once a real gateway integration writes to it. Empty is expected today.</p>
  <table>
    <thead><tr><th>Provider</th><th>Event</th><th>Status</th><th>Received</th></tr></thead>
    <tbody>
      <% for (const w of webhooks) { %>
      <tr><td><%= w.provider %></td><td><%= w.event_type %></td><td><span class="badge <%= w.status === 'processed' ? 'badge-ok' : 'badge-warn' %>"><%= w.status %></span></td><td><%= new Date(w.received_at).toLocaleString() %></td></tr>
      <% } %>
      <% if (!webhooks.length) { %><tr><td colspan="4" style="color:var(--muted)">No webhook deliveries recorded.</td></tr><% } %>
    </tbody>
  </table>
</div>

<% } %>
