<%- 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">

  <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">Resource Requests</h1>
      <p class="text-sm text-slate-500 mt-1">Review requests for shared email servers, SMS accounts, and Telegram bots, and allocate a daily slice to each.</p>
    </div>
    <div class="mt-4 md:mt-0">
      <a href="/admin" 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 Admin
      </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>
  <% } %>

  <%
    const CHANNEL_ICON = { email: '✉️', sms: '💬', telegram: '✈️' };
    const CHANNEL_LABEL = { email: 'Email', sms: 'SMS', telegram: 'Telegram' };
    const STATUS_STYLE = {
      pending: 'bg-amber-50 border-amber-200 text-amber-700',
      approved: 'bg-emerald-50 border-emerald-200 text-emerald-700',
      suspended: 'bg-orange-50 border-orange-200 text-orange-700',
      rejected: 'bg-red-50 border-red-200 text-red-600',
      revoked: 'bg-slate-100 border-slate-200 text-slate-500',
    };
    const STATUS_LABEL = { pending: 'Pending', approved: 'Approved', suspended: 'Suspended', rejected: 'Rejected', revoked: 'Revoked' };
  %>

  <div class="bg-white rounded-2xl border border-sky-100 shadow-sm overflow-hidden">
    <% if (requests.length === 0) { %>
      <div class="p-12 text-center text-slate-400">
        <p class="text-4xl mb-2">📭</p>
        <p class="text-sm">No requests yet. They'll show up here as soon as a user asks for access to a shared resource.</p>
      </div>
    <% } else { %>
      <div class="divide-y divide-sky-50">
        <% requests.forEach(r => { %>
          <div class="p-5">
            <div class="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-3">
              <div>
                <p class="text-sm font-bold text-slate-900 flex items-center gap-2 flex-wrap">
                  <%= CHANNEL_ICON[r.channel] %> <%= r.resource_label %>
                  <span class="px-2 py-0.5 text-[10px] font-bold uppercase tracking-wide rounded border <%= STATUS_STYLE[r.status] %>"><%= STATUS_LABEL[r.status] %></span>
                </p>
                <p class="text-xs text-slate-500 mt-1">
                  <span class="font-medium text-slate-700"><%= r.user_email %></span> requested <%= r.requested_limit %>/day on <%= CHANNEL_LABEL[r.channel] %>
                  <% if (r.product_name) { %>
                    via product "<%= r.product_name %>"
                  <% } %>
                  <% if (r.resource_daily_limit != null) { %>
                    &middot; resource cap <%= r.resource_daily_limit %>/day, <%= r.remaining_to_allocate %> left unallocated
                  <% } else { %>
                    &middot; resource has no total cap
                  <% } %>
                </p>
                <% if (r.status === 'approved' || r.status === 'suspended') { %>
                  <p class="text-xs <%= r.status === 'approved' ? 'text-emerald-700' : 'text-orange-700' %> mt-1 font-medium"><%= r.sent_today %> / <%= r.allocated_limit %> used today</p>
                <% } %>
              </div>

              <div class="flex-shrink-0">
                <% if (r.status === 'pending') { %>
                  <% const suggested = r.remaining_to_allocate == null ? r.requested_limit : Math.min(r.requested_limit, r.remaining_to_allocate); %>
                  <form action="/admin/requests/<%= r.id %>/approve" method="POST" class="flex items-center gap-2">
                    <input type="number" name="allocated_limit" min="1" value="<%= suggested %>" class="w-24 px-2.5 py-1.5 border border-slate-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-brand-500">
                    <button type="submit" class="px-3 py-1.5 text-xs font-semibold text-white bg-emerald-500 hover:bg-emerald-600 rounded-lg shadow-sm transition">Approve</button>
                  </form>
                  <form action="/admin/requests/<%= r.id %>/reject" method="POST" class="mt-2 text-right">
                    <button type="submit" class="text-xs font-medium text-red-500 hover:text-red-600">Reject</button>
                  </form>
                <% } else if (r.status === 'approved') { %>
                  <div class="flex gap-2">
                    <form action="/admin/requests/<%= r.id %>/suspend" method="POST">
                      <button type="submit" class="px-3 py-1.5 text-xs font-semibold text-white bg-orange-500 hover:bg-orange-600 rounded-lg shadow-sm transition">Suspend</button>
                    </form>
                    <form action="/admin/requests/<%= r.id %>/revoke" method="POST" onsubmit="return confirm('Revoke this allocation? The user will lose access to this resource immediately, and will need to request it again.');">
                      <button type="submit" class="px-3 py-1.5 text-xs font-semibold text-white bg-red-500 hover:bg-red-600 rounded-lg shadow-sm transition">Revoke</button>
                    </form>
                  </div>
                <% } else if (r.status === 'suspended') { %>
                  <div class="flex gap-2">
                    <form action="/admin/requests/<%= r.id %>/reactivate" method="POST">
                      <button type="submit" class="px-3 py-1.5 text-xs font-semibold text-white bg-emerald-500 hover:bg-emerald-600 rounded-lg shadow-sm transition">Reactivate</button>
                    </form>
                    <form action="/admin/requests/<%= r.id %>/revoke" method="POST" onsubmit="return confirm('Revoke this allocation? The user will lose their reserved slice entirely, and will need to request it again.');">
                      <button type="submit" class="px-3 py-1.5 text-xs font-semibold text-white bg-red-500 hover:bg-red-600 rounded-lg shadow-sm transition">Revoke</button>
                    </form>
                  </div>
                <% } %>
              </div>
            </div>
          </div>
        <% }) %>
      </div>
    <% } %>
  </div>

</main>

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