<!-- Stats -->
<% if (ticketStats) { %>
<div class="admin-stats" style="margin-bottom:20px">
  <div class="admin-stat-card"><div class="asc-icon" style="background:#fee2e2;color:#ef4444"><i class="bi bi-circle-fill"></i></div><div class="asc-body"><p class="asc-num"><%= ticketStats.open || 0 %></p><p class="asc-label">Open</p></div></div>
  <div class="admin-stat-card"><div class="asc-icon" style="background:#fef3c7;color:#92400e"><i class="bi bi-arrow-repeat"></i></div><div class="asc-body"><p class="asc-num"><%= ticketStats.in_progress || 0 %></p><p class="asc-label">In Progress</p></div></div>
  <div class="admin-stat-card"><div class="asc-icon" style="background:#d1fae5;color:#065f46"><i class="bi bi-check-circle-fill"></i></div><div class="asc-body"><p class="asc-num"><%= ticketStats.resolved || 0 %></p><p class="asc-label">Resolved</p></div></div>
  <div class="admin-stat-card"><div class="asc-icon" style="background:#fee2e2;color:#dc2626"><i class="bi bi-exclamation-triangle-fill"></i></div><div class="asc-body"><p class="asc-num"><%= ticketStats.urgent || 0 %></p><p class="asc-label">Urgent</p></div></div>
</div>
<% } %>

<!-- Filter Bar -->
<div class="admin-filter-bar">
  <div class="admin-filter-tabs">
    <a href="?status=open"          class="aft-tab <%= status==='open' ?'active':'' %>">Open</a>
    <a href="?status=in_progress"   class="aft-tab <%= status==='in_progress'?'active':'' %>">In Progress</a>
    <a href="?status=resolved"      class="aft-tab <%= status==='resolved'?'active':'' %>">Resolved</a>
    <a href="?status=closed"        class="aft-tab <%= status==='closed'?'active':'' %>">Closed</a>
    <a href="?status=all"           class="aft-tab <%= status==='all'?'active':'' %>">All</a>
  </div>
  <select class="admin-select" onchange="window.location.href='?status=<%= status %>&priority='+this.value">
    <option value="">All Priorities</option>
    <option value="urgent"  <%= priority==='urgent'?'selected':'' %>>Urgent</option>
    <option value="high"    <%= priority==='high'?'selected':'' %>>High</option>
    <option value="medium"  <%= priority==='medium'?'selected':'' %>>Medium</option>
    <option value="low"     <%= priority==='low'?'selected':'' %>>Low</option>
  </select>
</div>

<div class="admin-card">
  <table class="admin-table">
    <thead><tr><th>Ticket #</th><th>Subject</th><th>Organization</th><th>Priority</th><th>Status</th><th>Assigned To</th><th>Created</th><th>Actions</th></tr></thead>
    <tbody>
      <% if (tickets && tickets.length) { %>
      <% tickets.forEach(t => { %>
      <tr>
        <td><a href="/admin/support/<%= t.id %>" style="font-family:monospace;font-size:.8rem;color:#1a56db"><%= t.ticket_number %></a></td>
        <td><strong style="font-size:.85rem"><%= t.subject.substring(0,40) %></strong><br><span style="font-size:.72rem;color:#9ca3af"><%= t.category %></span></td>
        <td style="font-size:.8rem"><%= t.org_name || t.first_name + ' ' + t.last_name %></td>
        <td><span class="badge badge-<%= t.priority==='urgent'?'danger':t.priority==='high'?'warning':t.priority==='medium'?'info':'secondary' %>"><%= t.priority %></span></td>
        <td><span class="badge badge-<%= t.status==='open'?'danger':t.status==='in_progress'?'warning':t.status==='resolved'?'success':'secondary' %>"><%= t.status.replace('_',' ') %></span></td>
        <td style="font-size:.78rem"><%= t.assignee_first ? t.assignee_first + ' ' + t.assignee_last : '<span style="color:#9ca3af">Unassigned</span>' %></td>
        <td style="font-size:.75rem;white-space:nowrap"><%= moment(t.created_at).fromNow() %></td>
        <td>
          <div class="action-btns">
            <a href="/admin/support/<%= t.id %>" class="btn btn-xs btn-outline-primary"><i class="bi bi-chat-square-text"></i> Reply</a>
            <select class="admin-select" style="padding:3px 8px;font-size:.72rem;height:28px" onchange="updateTicket(<%= t.id %>,'status',this.value)">
              <option value="">Set Status</option>
              <option value="in_progress">In Progress</option>
              <option value="waiting_on_customer">Waiting</option>
              <option value="resolved">Resolved</option>
              <option value="closed">Closed</option>
            </select>
          </div>
        </td>
      </tr>
      <% }) %>
      <% } else { %>
      <tr><td colspan="8" style="text-align:center;padding:40px;color:#9ca3af">No tickets found.</td></tr>
      <% } %>
    </tbody>
  </table>
</div>

<% const totalPages = Math.ceil(total / limit); %>
<% if (totalPages > 1) { %>
<div class="pagination">
  <% if (page > 1) { %><a href="?status=<%= status %>&priority=<%= priority %>&page=<%= page-1 %>" 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="?status=<%= status %>&priority=<%= priority %>&page=<%= i %>" class="page-btn <%= i===page?'active':'' %>"><%= i %></a><% } %>
  <% if (page < totalPages) { %><a href="?status=<%= status %>&priority=<%= priority %>&page=<%= page+1 %>" class="page-btn"><i class="bi bi-chevron-right"></i></a><% } %>
</div>
<% } %>

<script>
async function updateTicket(id, field, value) {
  if (!value) return;
  const body = {}; body[field] = value;
  await fetch(`/admin/support/${id}`, {method:'PUT',headers:{'Content-Type':'application/json'},body:JSON.stringify(body)});
  location.reload();
}
</script>
