<%- include('partials/header') %>
<%- include('partials/nav') %>

<main class="flex-grow max-w-7xl w-full mx-auto px-4 sm:px-6 lg:px-8 py-8">

  <!-- Page Header -->
  <div class="flex flex-col md:flex-row md:items-center md:justify-between mb-8 pb-6 border-b border-sky-100">
    <div>
      <h1 class="text-3xl font-bold text-slate-900">Admin Panel</h1>
      <p class="text-sm text-slate-500 mt-1">Manage users and per-user channel access.</p>
    </div>
    <div class="mt-4 md:mt-0">
      <a href="/dashboard" class="inline-flex items-center px-4 py-2 text-sm font-semibold text-slate-700 bg-white border border-slate-200 hover:bg-slate-50 rounded-xl shadow-sm transition">
        ← Back to Dashboard
      </a>
    </div>
  </div>

  <% if (error) { %>
    <div class="mb-6 px-4 py-3 rounded-lg text-sm border bg-red-50 border-red-200 text-red-600"><%= error %></div>
  <% } %>
  <% if (message) { %>
    <div class="mb-6 px-4 py-3 rounded-lg text-sm border bg-emerald-50 border-emerald-200 text-emerald-700">
      <%= message %>
    </div>
  <% } %>

  <div class="max-w-5xl space-y-8">

    <!-- Resource Requests + Products summary -->
    <div class="grid sm:grid-cols-2 gap-4">
      <div class="bg-white rounded-2xl border border-sky-100 shadow-sm p-6 flex items-center justify-between gap-4">
        <div>
          <h3 class="text-lg font-bold text-slate-900 mb-1">Resource Requests</h3>
          <p class="text-xs text-slate-500">
            <% if (pendingRequestCount > 0) { %>
              <span class="font-semibold text-amber-600"><%= pendingRequestCount %> pending</span> request<%= pendingRequestCount === 1 ? '' : 's' %> waiting.
            <% } else { %>
              No pending requests right now.
            <% } %>
          </p>
        </div>
        <a href="/admin/requests" class="flex-shrink-0 inline-flex items-center px-4 py-2 text-sm font-semibold text-white bg-brand-500 hover:bg-brand-600 rounded-xl shadow-sm transition">
          Review
        </a>
      </div>

      <div class="bg-white rounded-2xl border border-sky-100 shadow-sm p-6 flex items-center justify-between gap-4">
        <div>
          <h3 class="text-lg font-bold text-slate-900 mb-1">Products</h3>
          <p class="text-xs text-slate-500">Package a shared server/account/bot into a fixed daily-limit plan users can request.</p>
        </div>
        <a href="/admin/products" class="flex-shrink-0 inline-flex items-center px-4 py-2 text-sm font-semibold text-white bg-grape hover:bg-grape/90 rounded-xl shadow-sm transition">
          Manage
        </a>
      </div>
    </div>

    <!-- User Management -->
    <div class="bg-white rounded-2xl border border-sky-100 shadow-sm p-6">
      <h3 class="text-lg font-bold text-slate-900 mb-1">Users</h3>
      <p class="text-xs text-slate-500 mb-6">Toggle which channels a user can send through, or suspend their account outright. A suspended user is signed out immediately and can't log back in.</p>

      <!-- Search + filters -->
      <form action="/admin" method="GET" class="flex flex-wrap items-end gap-3 mb-6 p-4 rounded-xl border border-sky-100 bg-slate-50/60">
        <div class="flex-1 min-w-[180px]">
          <label class="block text-xs font-medium text-slate-600 mb-1">Search email</label>
          <input type="text" name="q" value="<%= filters.q %>" placeholder="e.g. mario@" class="block w-full px-3 py-2 border border-slate-300 rounded-lg shadow-sm text-sm focus:outline-none focus:ring-2 focus:ring-brand-500 focus:border-brand-500">
        </div>
        <div>
          <label class="block text-xs font-medium text-slate-600 mb-1">Role</label>
          <select name="role" class="px-3 py-2 border border-slate-300 rounded-lg shadow-sm text-sm focus:outline-none focus:ring-2 focus:ring-brand-500">
            <option value="all" <%= filters.role === 'all' ? 'selected' : '' %>>All</option>
            <option value="user" <%= filters.role === 'user' ? 'selected' : '' %>>User</option>
            <option value="admin" <%= filters.role === 'admin' ? 'selected' : '' %>>Admin</option>
          </select>
        </div>
        <div>
          <label class="block text-xs font-medium text-slate-600 mb-1">Status</label>
          <select name="status" class="px-3 py-2 border border-slate-300 rounded-lg shadow-sm text-sm focus:outline-none focus:ring-2 focus:ring-brand-500">
            <option value="all" <%= filters.status === 'all' ? 'selected' : '' %>>All</option>
            <option value="active" <%= filters.status === 'active' ? 'selected' : '' %>>Active</option>
            <option value="suspended" <%= filters.status === 'suspended' ? 'selected' : '' %>>Suspended</option>
          </select>
        </div>
        <button type="submit" class="px-4 py-2 text-sm font-semibold text-white bg-brand-500 hover:bg-brand-600 rounded-lg shadow-sm transition">Filter</button>
        <% if (filters.q || filters.role !== 'all' || filters.status !== 'all') { %>
          <a href="/admin" class="px-4 py-2 text-sm font-medium text-slate-500 hover:text-slate-700">Clear</a>
        <% } %>
      </form>

      <p class="text-xs text-slate-400 mb-3"><%= pagination.totalCount %> user<%= pagination.totalCount === 1 ? '' : 's' %> matched.</p>

      <div class="space-y-4">
        <% if (users.length === 0) { %>
          <div class="p-8 text-center text-slate-400 text-sm">No users match these filters.</div>
        <% } %>
        <% users.forEach(u => { %>
          <div class="p-4 rounded-xl border <%= u.suspended ? 'border-red-200 bg-red-50/40' : 'border-sky-100 bg-slate-50/60' %>">
            <div class="flex flex-wrap items-center justify-between gap-3 mb-3">
              <div>
                <p class="text-sm font-semibold text-slate-800 flex items-center gap-2">
                  <%= u.email %>
                  <% if (u.suspended) { %><span class="px-1.5 py-0.5 text-[10px] font-bold uppercase tracking-wide bg-red-100 text-red-600 rounded">Suspended</span><% } %>
                </p>
                <span class="text-xs font-medium <%= u.role === 'admin' ? 'text-brand-600' : 'text-slate-400' %>"><%= u.role %></span>
              </div>

              <form action="/admin/users/<%= u.id %>/<%= u.suspended ? 'unsuspend' : 'suspend' %>" method="POST" onsubmit="<%= u.suspended ? '' : `return confirm('Suspend ${u.email}? They will be signed out immediately and unable to log back in.');` %>">
                <input type="hidden" name="qs" value="<%= qs %>">
                <% if (u.id === user.id) { %>
                  <span class="text-xs text-slate-400">(you)</span>
                <% } else { %>
                  <button type="submit" class="px-3 py-1.5 text-xs font-semibold rounded-lg shadow-sm transition <%= u.suspended ? 'text-white bg-emerald-500 hover:bg-emerald-600' : 'text-white bg-red-500 hover:bg-red-600' %>">
                    <%= u.suspended ? 'Unsuspend' : 'Suspend' %>
                  </button>
                <% } %>
              </form>
            </div>

            <form action="/admin/user-access" method="POST">
              <input type="hidden" name="userId" value="<%= u.id %>">
              <input type="hidden" name="qs" value="<%= qs %>">
              <div class="grid grid-cols-2 sm:grid-cols-5 gap-2 items-center">
                <label class="flex items-center gap-2 text-xs font-medium text-slate-600 bg-white px-2 py-1.5 rounded-lg border border-slate-200">
                  <input type="checkbox" name="sms" <%= u.sms_access ? 'checked' : '' %> class="rounded text-brand-500 focus:ring-brand-500"> SMS
                </label>
                <label class="flex items-center gap-2 text-xs font-medium text-slate-600 bg-white px-2 py-1.5 rounded-lg border border-slate-200">
                  <input type="checkbox" name="email" <%= u.email_access ? 'checked' : '' %> class="rounded text-brand-500 focus:ring-brand-500"> Email
                </label>
                <label class="flex items-center gap-2 text-xs font-medium text-slate-600 bg-white px-2 py-1.5 rounded-lg border border-slate-200">
                  <input type="checkbox" name="whatsapp" <%= u.whatsapp_access ? 'checked' : '' %> class="rounded text-brand-500 focus:ring-brand-500"> WA
                </label>
                <label class="flex items-center gap-2 text-xs font-medium text-slate-600 bg-white px-2 py-1.5 rounded-lg border border-slate-200">
                  <input type="checkbox" name="telegram" <%= u.telegram_access ? 'checked' : '' %> class="rounded text-brand-500 focus:ring-brand-500"> Tg
                </label>
                <button type="submit" class="px-3 py-1.5 text-xs font-semibold text-white bg-brand-500 hover:bg-brand-600 rounded-lg shadow-sm transition">
                  Save
                </button>
              </div>
            </form>
          </div>
        <% }) %>
      </div>

      <% if (pagination.totalPages > 1) { %>
        <div class="flex items-center justify-between mt-6 pt-4 border-t border-sky-100">
          <p class="text-xs text-slate-400">Page <%= pagination.page %> of <%= pagination.totalPages %></p>
          <div class="flex gap-2">
            <%
              const pageQs = (p) => {
                const parts = new URLSearchParams();
                if (filters.q) parts.set('q', filters.q);
                if (filters.role !== 'all') parts.set('role', filters.role);
                if (filters.status !== 'all') parts.set('status', filters.status);
                parts.set('page', String(p));
                return parts.toString();
              };
            %>
            <% if (pagination.page > 1) { %>
              <a href="/admin?<%= pageQs(pagination.page - 1) %>" class="px-3 py-1.5 text-xs font-semibold text-slate-700 bg-white border border-slate-200 hover:bg-slate-50 rounded-lg shadow-sm transition">← Prev</a>
            <% } %>
            <% if (pagination.page < pagination.totalPages) { %>
              <a href="/admin?<%= pageQs(pagination.page + 1) %>" class="px-3 py-1.5 text-xs font-semibold text-slate-700 bg-white border border-slate-200 hover:bg-slate-50 rounded-lg shadow-sm transition">Next →</a>
            <% } %>
          </div>
        </div>
      <% } %>
    </div>

  </div>
</main>

<%- include('partials/footer') %>
