<!-- Filters -->
<form class="admin-filter-bar" method="GET">
  <div class="search-input-wrap"><i class="bi bi-search"></i><input type="text" name="search" value="<%= search %>" placeholder="Search members..."></div>
  <select name="status" onchange="this.form.submit()" class="admin-select">
    <option value="">All Statuses</option>
    <option value="active" <%= status === 'active' ? 'selected' : '' %>>Active</option>
    <option value="pending" <%= status === 'pending' ? 'selected' : '' %>>Pending</option>
    <option value="expired" <%= status === 'expired' ? 'selected' : '' %>>Expired</option>
    <option value="suspended" <%= status === 'suspended' ? 'selected' : '' %>>Suspended</option>
    <option value="cancelled" <%= status === 'cancelled' ? 'selected' : '' %>>Cancelled</option>
  </select>
  <button type="submit" class="btn btn-primary btn-sm"><i class="bi bi-search"></i></button>
</form>

<div class="admin-meta"><p><strong><%= total %></strong> members found</p></div>

<div class="admin-card">
  <table class="admin-table">
    <thead><tr><th>Organization</th><th>Contact</th><th>Email</th><th>Membership</th><th>Expires</th><th>Actions</th></tr></thead>
    <tbody>
      <% if (members && members.length) { %>
      <% members.forEach(m => { %>
      <tr>
        <td><strong><%= m.org_name || '—' %></strong></td>
        <td><%= m.first_name %> <%= m.last_name %></td>
        <td><a href="mailto:<%= m.email %>"><%= m.email %></a></td>
        <td><span class="badge badge-<%= m.membership_status === 'active' ? 'success' : m.membership_status === 'pending' ? 'warning' : 'danger' %>"><%= m.membership_status || 'none' %></span></td>
        <td><%= m.end_date ? moment(m.end_date).format('MMM D, YYYY') : '—' %></td>
        <td>
          <div class="action-btns">
            <% if (m.membership_status !== 'active') { %><button class="btn btn-xs btn-success approve-member" data-id="<%= m.id %>" title="Approve/Activate"><i class="bi bi-check-circle-fill"></i></button><% } %>
            <% if (m.is_active) { %><button class="btn btn-xs btn-warning suspend-member" data-id="<%= m.id %>" title="Suspend"><i class="bi bi-pause-circle-fill"></i></button>
            <% } else { %><button class="btn btn-xs btn-primary activate-member" data-id="<%= m.id %>" title="Activate"><i class="bi bi-play-circle-fill"></i></button><% } %>
          </div>
        </td>
      </tr>
      <% }) %>
      <% } else { %>
      <tr><td colspan="6" style="text-align:center;padding:32px;color:#9ca3af">No members 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 %>&search=<%= search %>&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 %>&search=<%= search %>&status=<%= status %>" class="page-btn <%= i === page ? 'active' : '' %>"><%= i %></a><% } %>
  <% if (page < totalPages) { %><a href="?page=<%= page+1 %>&search=<%= search %>&status=<%= status %>" class="page-btn"><i class="bi bi-chevron-right"></i></a><% } %>
</div>
<% } %>

<script>
document.querySelectorAll('.approve-member').forEach(btn => { btn.addEventListener('click', async () => { const res = await fetch(`/admin/members/${btn.dataset.id}/approve`, {method:'POST',headers:{'Content-Type':'application/json'}}); if((await res.json()).success) location.reload(); }); });
document.querySelectorAll('.suspend-member').forEach(btn => { btn.addEventListener('click', async () => { const reason = prompt('Suspension reason (optional):'); const res = await fetch(`/admin/members/${btn.dataset.id}/suspend`, {method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({reason})}); if((await res.json()).success) location.reload(); }); });
document.querySelectorAll('.activate-member').forEach(btn => { btn.addEventListener('click', async () => { const res = await fetch(`/admin/members/${btn.dataset.id}/activate`, {method:'POST',headers:{'Content-Type':'application/json'}}); if((await res.json()).success) location.reload(); }); });
</script>
