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

<% const num = (value) => Number(value || 0); %>
<% const analytics = result.analytics || {}; %>
<% const stats = analytics.stats || {}; %>
<% const revenueRows = analytics.revenueTrend || []; %>
<% const orderRows = analytics.orderTrend || []; %>
<% const pct = (part, total) => total > 0 ? Math.round((num(part) / num(total)) * 100) : 0; %>
<% const maxRevenue = Math.max(1, ...revenueRows.map((row) => num(row.total))); %>
<% const revenue30 = revenueRows.reduce((sum, row) => sum + num(row.total), 0); %>
<% const orders30 = orderRows.reduce((sum, row) => sum + num(row.total), 0); %>
<% const gatewayOptions = analytics.gatewayBreakdown || []; %>
<% const planOptions = analytics.planBreakdown || []; %>
<% const activeFilterCount = ['q','status','gateway','plan','date_from','date_to'].filter((key) => filters[key]).length; %>

<section class="management-hero management-hero-transactions">
  <div>
    <span class="dashboard-eyebrow">Financial operations</span>
    <h2>Transactions</h2>
    <p>Review money movement, resolve pending orders and inspect gateway records from one focused workspace.</p>
  </div>
  <nav class="management-quick-links" aria-label="Transaction shortcuts">
    <a href="<%= adminUrl('/payments') %>" class="<%= !filters.status ? 'is-active' : '' %>"><span>All</span><strong><%= num(stats.total_orders).toLocaleString() %></strong></a>
    <a href="<%= adminUrl('/payments?status=pending&sort=needs_review') %>" class="<%= filters.status === 'pending' ? 'is-active' : '' %>"><span>Review</span><strong><%= num(stats.review_orders).toLocaleString() %></strong></a>
    <a href="<%= adminUrl('/payments?status=confirmed') %>" class="<%= filters.status === 'confirmed' ? 'is-active' : '' %>"><span>Confirmed</span><strong><%= num(stats.confirmed_orders).toLocaleString() %></strong></a>
    <a href="<%= adminUrl('/payments?status=failed') %>" class="<%= filters.status === 'failed' ? 'is-active' : '' %>"><span>Failed</span><strong><%= num(stats.failed_orders).toLocaleString() %></strong></a>
  </nav>
</section>

<section class="management-kpi-grid" aria-label="Transaction metrics">
  <article data-tone="emerald"><span>Confirmed revenue</span><strong><%= formatMoney(stats.confirmed_revenue || 0) %></strong><small><%= num(stats.confirmed_orders).toLocaleString() %> successful transactions</small></article>
  <article data-tone="sky"><span>30-day revenue</span><strong><%= formatMoney(stats.revenue_30d || 0) %></strong><small><%= num(stats.orders_30d).toLocaleString() %> transactions created</small></article>
  <article data-tone="<%= num(stats.review_orders) ? 'amber' : 'slate' %>"><span>Needs review</span><strong><%= formatMoney(stats.review_amount || 0) %></strong><small><%= num(stats.review_orders).toLocaleString() %> pending or submitted</small></article>
  <article data-tone="violet"><span>Confirmation rate</span><strong><%= num(stats.confirm_rate).toLocaleString() %>%</strong><small><%= formatMoney(stats.avg_confirmed_order || 0) %> average value</small></article>
</section>

<section class="management-insight-grid">
  <article class="panel management-trend-panel">
    <div class="panel-header">
      <div><span class="dashboard-eyebrow">Last 30 days</span><h2 class="panel-title">Revenue activity</h2><p class="panel-subtitle">Daily confirmed revenue with created transaction activity.</p></div>
      <div class="management-trend-summary"><strong><%= formatMoney(revenue30) %></strong><small><%= orders30.toLocaleString() %> created</small></div>
    </div>
    <% if (!revenue30 && !orders30) { %>
      <div class="empty-state">No transaction activity was recorded in this period.</div>
    <% } else { %>
      <div class="management-bars" role="img" aria-label="Thirty-day confirmed revenue trend">
        <% revenueRows.forEach((row, index) => { %>
          <span style="height:<%= Math.max(4, Math.round((num(row.total) / maxRevenue) * 100)) %>%" title="<%= row.label %>: <%= formatMoney(row.total) %>"><i></i><% if (index % 7 === 0 || index === revenueRows.length - 1) { %><small><%= String(row.label).slice(5).replace('-', '/') %></small><% } %></span>
        <% }) %>
      </div>
    <% } %>
  </article>

  <aside class="panel management-queue">
    <div class="panel-header"><div><span class="dashboard-eyebrow">Action queue</span><h2 class="panel-title">Financial review</h2><p class="panel-subtitle">Transactions that may need intervention.</p></div></div>
    <a href="<%= adminUrl('/payments?status=pending&sort=needs_review') %>"><span><i data-tone="warning"></i><strong>Pending review</strong><small>Pending and submitted orders</small></span><span><strong><%= num(stats.review_orders).toLocaleString() %></strong><small><%= formatMoney(stats.review_amount || 0) %></small></span></a>
    <a href="<%= adminUrl('/payments?status=failed') %>"><span><i data-tone="danger"></i><strong>Unsuccessful</strong><small>Failed, rejected or expired</small></span><span><strong><%= num(stats.failed_orders).toLocaleString() %></strong><small><%= formatMoney(stats.failed_amount || 0) %></small></span></a>
    <a href="<%= adminUrl('/payments?status=confirmed') %>"><span><i data-tone="success"></i><strong>Confirmed</strong><small>Completed transaction records</small></span><span><strong><%= num(stats.confirmed_orders).toLocaleString() %></strong><small><%= pct(stats.confirmed_orders, stats.total_orders) %>% of total</small></span></a>
  </aside>
</section>

<% if ((analytics.statusBreakdown || []).length || planOptions.length || gatewayOptions.length) { %>
  <details class="management-breakdown">
    <summary><span><strong>Transaction analytics</strong><small>Status, plan and gateway distribution</small></span><span class="badge badge-muted">Expand</span></summary>
    <div class="management-breakdown-grid">
      <div>
        <h3>Status pipeline</h3>
        <% (analytics.statusBreakdown || []).forEach((row) => { %><a href="<%= adminUrl('/payments?status=' + encodeURIComponent(String(row.label || '').toLowerCase())) %>"><span class="<%= statusBadgeClass(row.label) %>"><%= row.label %></span><strong><%= num(row.total).toLocaleString() %></strong></a><% }) %>
      </div>
      <div>
        <h3>Revenue by plan</h3>
        <% planOptions.forEach((row) => { %><a href="<%= adminUrl('/payments?plan=' + encodeURIComponent(String(row.label || '').toLowerCase())) %>"><span><%= row.label %></span><strong><%= formatMoney(row.revenue || 0) %></strong></a><% }) %>
      </div>
      <div>
        <h3>Gateway mix</h3>
        <% gatewayOptions.forEach((row) => { %><a href="<%= adminUrl('/payments?gateway=' + encodeURIComponent(String(row.label || '').toLowerCase())) %>"><span><%= row.label %></span><strong><%= num(row.total).toLocaleString() %></strong></a><% }) %>
      </div>
    </div>
  </details>
<% } %>

<section class="panel management-list-panel">
  <div class="panel-header">
    <div><span class="dashboard-eyebrow">Transaction ledger</span><h2 class="panel-title">All transactions</h2><p class="panel-subtitle"><%= result.total %> matching record(s)</p></div>
    <% if (activeFilterCount) { %><span class="badge badge-info"><%= activeFilterCount %> active filter(s)</span><% } %>
  </div>

  <form method="get" action="<%= adminUrl('/payments') %>" class="management-filters">
    <label class="field management-search"><span>Search transactions</span><input class="input" type="search" name="q" value="<%= filters.q || '' %>" placeholder="Transaction ID, gateway track, user ID or email"></label>
    <label class="field"><span>Status</span><select class="input" name="status"><option value="">All statuses</option><% ['pending','submitted','confirmed','paid','failed','rejected','expired','cancelled'].forEach((status) => { %><option value="<%= status %>" <%= filters.status === status ? 'selected' : '' %>><%= status %></option><% }) %></select></label>
    <label class="field"><span>Gateway</span><select class="input" name="gateway"><option value="">All gateways</option><% gatewayOptions.forEach((row) => { const value = String(row.label || '').toLowerCase(); %><option value="<%= value %>" <%= String(filters.gateway || '').toLowerCase() === value ? 'selected' : '' %>><%= row.label %> (<%= num(row.total).toLocaleString() %>)</option><% }) %></select></label>
    <label class="field"><span>Plan</span><select class="input" name="plan"><option value="">All plans</option><% planOptions.forEach((row) => { const value = String(row.label || '').toLowerCase(); %><option value="<%= value %>" <%= String(filters.plan || '').toLowerCase() === value ? 'selected' : '' %>><%= row.label %></option><% }) %></select></label>
    <label class="field"><span>Sort</span><select class="input" name="sort"><option value="newest" <%= !filters.sort || filters.sort === 'newest' ? 'selected' : '' %>>Newest first</option><option value="oldest" <%= filters.sort === 'oldest' ? 'selected' : '' %>>Oldest first</option><option value="amount_high" <%= filters.sort === 'amount_high' ? 'selected' : '' %>>Highest amount</option><option value="amount_low" <%= filters.sort === 'amount_low' ? 'selected' : '' %>>Lowest amount</option><option value="needs_review" <%= filters.sort === 'needs_review' ? 'selected' : '' %>>Needs review first</option></select></label>
    <label class="field"><span>From</span><input class="input" type="date" name="date_from" value="<%= filters.date_from || '' %>"></label>
    <label class="field"><span>To</span><input class="input" type="date" name="date_to" value="<%= filters.date_to || '' %>"></label>
    <div class="management-filter-actions"><button class="btn btn-primary" type="submit">Apply filters</button><a class="btn btn-secondary" href="<%= adminUrl('/payments') %>">Reset</a></div>
  </form>

  <% if (!result.items.length) { %>
    <div class="empty-state">No transactions match these filters.</div>
  <% } else { %>
    <div class="management-table-wrap">
      <table class="management-table">
        <thead><tr><th>Transaction</th><th>User</th><th>Plan</th><th>Amount</th><th>Gateway</th><th>Status</th><th>Created</th><th></th></tr></thead>
        <tbody>
          <% result.items.forEach((transaction) => { %>
            <tr>
              <td data-label="Transaction"><a class="management-primary-link" href="<%= adminUrl('/payments/' + transaction.id) %>">#<%= transaction.order_id || transaction.id %></a><small>Internal ID <%= transaction.id %></small></td>
              <td data-label="User"><% if (transaction.user_id) { %><a class="management-user-link" href="<%= adminUrl('/users/' + transaction.user_id) %>"><strong><%= transaction.user_name || transaction.user_email || ('User #' + transaction.user_id) %></strong><small><%= transaction.user_email || ('User ID ' + transaction.user_id) %></small></a><% } else { %><strong>Unknown user</strong><small>No user ID</small><% } %></td>
              <td data-label="Plan"><strong><%= transaction.plan_name || 'Unknown' %></strong><small><%= transaction.billing_cycle || (transaction.duration_months ? `${transaction.duration_months} months` : '—') %></small></td>
              <td data-label="Amount"><strong><%= formatMoney(transaction.payable_amount || transaction.amount_usd, transaction.currency || 'USD') %></strong><small>Base <%= formatMoney(transaction.amount_usd || 0) %></small></td>
              <td data-label="Gateway"><strong><%= transaction.gateway || 'Unknown' %></strong><small class="management-mono"><%= transaction.oxapay_track_id || transaction.gateway_order_id || 'No track ID' %></small></td>
              <td data-label="Status"><span class="<%= statusBadgeClass(transaction.status) %>"><%= transaction.status %></span></td>
              <td data-label="Created"><strong><%= formatDate(transaction.created_at, false) %></strong><small><%= formatDate(transaction.created_at) %></small></td>
              <td data-label="Action"><a class="btn btn-secondary" href="<%= adminUrl('/payments/' + transaction.id) %>">Inspect</a></td>
            </tr>
          <% }) %>
        </tbody>
      </table>
    </div>
    <%- include('partials/pagination', { result }) %>
  <% } %>
</section>

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