<%- include('partials/page-start', { pageTitle, activePage }) %>

<% const transactionIsFinal = ['confirmed', 'paid', 'complete', 'completed'].includes(String(payment.status || '').toLowerCase()); %>

<div class="mb-5"><a href="<%= adminUrl('/payments') %>" class="text-sm text-sky-400 hover:text-sky-300">← Back to transactions</a></div>

<section class="grid gap-6 xl:grid-cols-[1fr_360px]">
  <div class="space-y-6">
    <div class="panel">
      <div class="panel-header"><div><h2 class="panel-title">Transaction #<%= payment.order_id || payment.id %></h2><p class="panel-subtitle">Internal ID: <%= payment.id %></p></div><span class="<%= statusBadgeClass(payment.status) %>"><%= payment.status %></span></div>
      <dl class="detail-grid">
        <div><dt>User</dt><dd><%= payment.user_name || 'Unknown' %></dd><small><%= payment.user_email || ('User #' + (payment.user_id || '—')) %></small></div>
        <div><dt>Plan</dt><dd><%= payment.plan_name || 'No plan' %></dd><small><%= payment.billing_cycle || '—' %></small></div>
        <div><dt>Base amount</dt><dd><%= formatMoney(payment.amount_usd || 0) %></dd></div>
        <div><dt>Upgrade credit</dt><dd><%= formatMoney(payment.upgrade_credit || 0) %></dd></div>
        <div><dt>Payable amount</dt><dd><%= formatMoney(payment.payable_amount || payment.amount_usd, payment.currency || 'USD') %></dd></div>
        <div><dt>Gateway</dt><dd><%= payment.gateway || 'OxaPay' %></dd></div>
        <div><dt>Created at</dt><dd><%= formatDate(payment.created_at) %></dd></div>
        <div><dt>Confirmed at</dt><dd><%= formatDate(payment.confirmed_at) %></dd></div>
      </dl>
    </div>

    <div class="panel">
      <h2 class="panel-title">Gateway references</h2>
      <dl class="mt-4 space-y-4 text-sm"><div><dt class="text-slate-500">OxaPay track ID</dt><dd class="mt-1 break-all font-mono text-slate-200"><%= payment.oxapay_track_id || '—' %></dd></div><div><dt class="text-slate-500">Gateway order ID</dt><dd class="mt-1 break-all font-mono text-slate-200"><%= payment.gateway_order_id || '—' %></dd></div></dl>
    </div>

    <div class="panel">
      <h2 class="panel-title">Stored webhook / API payload</h2>
      <% if (!parsedPayload) { %><div class="empty-state">No payload has been stored for this transaction.</div><% } else { %><pre class="admin-code mt-4"><%= typeof parsedPayload === 'string' ? parsedPayload : JSON.stringify(parsedPayload, null, 2) %></pre><% } %>
    </div>
  </div>

  <aside class="space-y-5">
    <div class="panel">
      <h2 class="panel-title">Check OxaPay</h2><p class="panel-subtitle mt-1">Uses the server-side Merchant API key. The key is never sent to the browser.</p>
      <form method="post" action="<%= adminUrl('/payments/' + payment.id + '/check') %>" class="mt-5">
        <input type="hidden" name="_csrf" value="<%= csrfToken %>"><button class="btn btn-primary w-full justify-center" type="submit" <%= payment.oxapay_track_id ? '' : 'disabled' %>>Check current status</button>
      </form>
    </div>

    <div class="panel border-amber-500/20">
      <h2 class="panel-title text-amber-100">Manual confirmation</h2><p class="panel-subtitle mt-1">Use only after independently verifying the transaction. This operation is written to the audit log.</p>
      <form method="post" action="<%= adminUrl('/payments/' + payment.id + '/confirm') %>" class="mt-5" data-confirm="Confirm this transaction manually? This may activate the related subscription.">
        <input type="hidden" name="_csrf" value="<%= csrfToken %>"><button class="btn btn-primary w-full justify-center" type="submit" <%= transactionIsFinal ? 'disabled' : '' %>>Mark as confirmed</button>
      </form>
    </div>

    <div class="panel border-red-500/20">
      <h2 class="panel-title text-red-200">Mark as failed</h2><p class="panel-subtitle mt-1">This keeps the transaction in the audit trail. Confirmed transactions cannot be downgraded.</p>
      <form method="post" action="<%= adminUrl('/payments/' + payment.id + '/fail') %>" class="mt-5" data-confirm="Mark this transaction as failed?">
        <input type="hidden" name="_csrf" value="<%= csrfToken %>"><button class="btn btn-danger w-full justify-center" type="submit" <%= transactionIsFinal ? 'disabled' : '' %>>Mark as failed</button>
      </form>
    </div>
  </aside>
</section>

<%- include('partials/page-end', { activePage }) %>
