<!-- Financial Summary -->
<div class="admin-stats">
  <div class="admin-stat-card"><div class="asc-icon" style="background:#f0fdf4;color:#10b981"><i class="bi bi-cash-stack"></i></div><div class="asc-body"><p class="asc-num">$<%= parseFloat(summary?.total_revenue || 0).toLocaleString() %></p><p class="asc-label">Total Revenue</p></div></div>
  <div class="admin-stat-card"><div class="asc-icon" style="background:#eff6ff;color:#1a56db"><i class="bi bi-check-circle-fill"></i></div><div class="asc-body"><p class="asc-num"><%= summary?.completed || 0 %></p><p class="asc-label">Completed Transactions</p></div></div>
  <div class="admin-stat-card"><div class="asc-icon" style="background:#fff7ed;color:#f59e0b"><i class="bi bi-clock-fill"></i></div><div class="asc-body"><p class="asc-num"><%= summary?.pending || 0 %></p><p class="asc-label">Pending</p></div></div>
  <div class="admin-stat-card"><div class="asc-icon" style="background:#fef2f2;color:#ef4444"><i class="bi bi-arrow-counterclockwise"></i></div><div class="asc-body"><p class="asc-num"><%= summary?.refunded || 0 %></p><p class="asc-label">Refunds</p></div></div>
</div>

<!-- Filter -->
<form class="admin-filter-bar" method="GET">
  <select name="status" onchange="this.form.submit()" class="admin-select">
    <option value="">All Statuses</option>
    <option value="completed" <%= status === 'completed' ? 'selected' : '' %>>Completed</option>
    <option value="pending" <%= status === 'pending' ? 'selected' : '' %>>Pending</option>
    <option value="failed" <%= status === 'failed' ? 'selected' : '' %>>Failed</option>
    <option value="refunded" <%= status === 'refunded' ? 'selected' : '' %>>Refunded</option>
  </select>
</form>

<div class="admin-card">
  <table class="admin-table">
    <thead><tr><th>Organization</th><th>Member</th><th>Type</th><th>Amount</th><th>Status</th><th>Date</th></tr></thead>
    <tbody>
      <% if (transactions && transactions.length) { %>
      <% transactions.forEach(t => { %>
      <tr>
        <td><%= t.org_name || '—' %></td>
        <td><%= t.first_name %> <%= t.last_name %></td>
        <td><span class="badge badge-secondary"><%= t.transaction_type %></span></td>
        <td><strong>$<%= parseFloat(t.amount).toFixed(2) %></strong></td>
        <td><span class="badge badge-<%= t.status === 'completed' ? 'success' : t.status === 'pending' ? 'warning' : 'danger' %>"><%= t.status %></span></td>
        <td><%= moment(t.created_at).format('MMM D, YYYY h:mm A') %></td>
      </tr>
      <% }) %>
      <% } else { %>
      <tr><td colspan="6" style="text-align:center;padding:32px;color:#9ca3af">No transactions found.</td></tr>
      <% } %>
    </tbody>
  </table>
</div>

<!-- Pagination -->
<% const totalPages = Math.ceil(total / limit); %>
<% if (totalPages > 1) { %>
<div class="pagination">
  <% if (page > 1) { %><a href="?page=<%= page-1 %>&status=<%= status %>" class="page-btn"><i class="bi bi-chevron-left"></i></a><% } %>
  <% for(let i=Math.max(1,page-2); i<=Math.min(totalPages,page+2); i++) { %><a href="?page=<%= i %>&status=<%= status %>" class="page-btn <%= i === page ? 'active' : '' %>"><%= i %></a><% } %>
  <% if (page < totalPages) { %><a href="?page=<%= page+1 %>&status=<%= status %>" class="page-btn"><i class="bi bi-chevron-right"></i></a><% } %>
</div>
<% } %>
