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

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

  <div class="mb-8">
    <h1 class="text-3xl font-bold text-slate-900">Sending Access</h1>
    <p class="text-sm text-slate-500 mt-1">Request a daily send-out slice of a shared server/account/bot. An admin reviews each request and allocates how much of it is yours.</p>
  </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 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 review', approved: 'Active', suspended: 'Suspended', rejected: 'Rejected', revoked: 'Revoked' };
  %>

  <!-- Products: fixed-quota plans an admin packaged on top of a resource -->
  <div class="bg-white rounded-2xl border border-sky-100 shadow-sm overflow-hidden mb-8">
    <div class="p-6 border-b border-sky-100">
      <h3 class="text-lg font-bold text-slate-900">📦 Products</h3>
      <p class="text-xs text-slate-500 mt-0.5">Ready-made plans — request one and an admin confirms it.</p>
    </div>

    <% if (products.length === 0) { %>
      <div class="p-8 text-center text-slate-400 text-sm">No products published yet. Ask an admin to package one, or request a custom amount directly from a resource below.</div>
    <% } else { %>
      <div class="divide-y divide-sky-50">
        <% products.forEach(p => { %>
          <div class="p-5 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
            <div>
              <p class="text-sm font-bold text-slate-900"><%= CHANNEL_ICON[p.channel] %> <%= p.name %></p>
              <p class="text-xs text-slate-500 mt-0.5">
                <%= p.daily_limit %>/day &middot; on <%= p.resource_label %>
                <% if (p.description) { %>&middot; <%= p.description %><% } %>
                <% if (!p.fits_capacity) { %> &middot; <span class="text-red-500 font-medium">not enough capacity left right now</span><% } %>
              </p>
            </div>

            <% if (!p.existing_request || p.existing_request.status === 'rejected' || p.existing_request.status === 'revoked') { %>
              <form action="/requests" method="POST">
                <input type="hidden" name="product_id" value="<%= p.id %>">
                <button type="submit" class="px-4 py-1.5 text-xs font-semibold text-white bg-brand-500 hover:bg-brand-600 rounded-lg shadow-sm transition">Request</button>
              </form>
            <% } else { %>
              <span class="px-2.5 py-1 text-xs font-bold rounded-lg border <%= STATUS_STYLE[p.existing_request.status] %>">
                <%= STATUS_LABEL[p.existing_request.status] %><% if (p.existing_request.status === 'approved' || p.existing_request.status === 'suspended') { %> — <%= p.existing_request.allocated_limit %>/day<% } %>
              </span>
            <% } %>
          </div>
        <% }) %>
      </div>
    <% } %>
  </div>

  <div class="space-y-8">
    <% Object.keys(available).forEach(channel => { %>
      <div class="bg-white rounded-2xl border border-sky-100 shadow-sm overflow-hidden">
        <div class="p-6 border-b border-sky-100">
          <h3 class="text-lg font-bold text-slate-900"><%= CHANNEL_ICON[channel] %> <%= CHANNEL_LABEL[channel] %> — request a custom amount</h3>
          <p class="text-xs text-slate-500 mt-0.5">No product that fits? Ask directly for however many sends/day you need from a published resource.</p>
        </div>

        <% if (available[channel].length === 0) { %>
          <div class="p-8 text-center text-slate-400 text-sm">No shared <%= CHANNEL_LABEL[channel].toLowerCase() %> resources published yet. Ask an admin to add one.</div>
        <% } else { %>
          <div class="divide-y divide-sky-50">
            <% available[channel].forEach(r => { %>
              <div class="p-5 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
                <div>
                  <p class="text-sm font-bold text-slate-900"><%= r.label %></p>
                  <p class="text-xs text-slate-500 mt-0.5">
                    <% if (r.daily_limit == null) { %>
                      No total cap &middot; <%= r.available_to_allocate == null ? 'unlimited' : r.available_to_allocate %> left to allocate
                    <% } else { %>
                      <%= r.daily_limit %>/day total &middot; <%= r.available_to_allocate %> left to allocate
                    <% } %>
                  </p>
                </div>

                <% if (!r.existing_request || r.existing_request.status === 'rejected' || r.existing_request.status === 'revoked') { %>
                  <% if (r.existing_request) { %>
                    <span class="inline-block mb-1 px-2 py-0.5 text-[10px] font-bold uppercase tracking-wide rounded border <%= STATUS_STYLE[r.existing_request.status] %>"><%= STATUS_LABEL[r.existing_request.status] %> previously</span>
                  <% } %>
                  <form action="/requests" method="POST" class="flex items-center gap-2">
                    <input type="hidden" name="channel" value="<%= channel %>">
                    <input type="hidden" name="resource_id" value="<%= r.id %>">
                    <input type="number" name="requested_limit" min="1" required placeholder="e.g. 100" class="w-28 px-2.5 py-1.5 border border-slate-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-brand-500">
                    <span class="text-xs text-slate-400">/day</span>
                    <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">Request</button>
                  </form>
                <% } else { %>
                  <span class="px-2.5 py-1 text-xs font-bold rounded-lg border <%= STATUS_STYLE[r.existing_request.status] %>">
                    <%= STATUS_LABEL[r.existing_request.status] %><% if (r.existing_request.status === 'approved' || r.existing_request.status === 'suspended') { %> — <%= r.existing_request.allocated_limit %>/day<% } %>
                  </span>
                <% } %>
              </div>
            <% }) %>
          </div>
        <% } %>
      </div>
    <% }) %>
  </div>

  <div class="bg-white rounded-2xl border border-sky-100 shadow-sm overflow-hidden mt-8">
    <div class="p-6 border-b border-sky-100">
      <h3 class="text-lg font-bold text-slate-900">My Requests</h3>
      <p class="text-xs text-slate-500 mt-0.5">Every request you've made, across every channel.</p>
    </div>

    <% if (myRequests.length === 0) { %>
      <div class="p-8 text-center text-slate-400 text-sm">You haven't requested access to any shared resource yet.</div>
    <% } else { %>
      <div class="overflow-x-auto">
        <table class="w-full text-sm">
          <thead>
            <tr class="text-left text-xs font-semibold text-slate-500 uppercase tracking-wide border-b border-sky-100">
              <th class="px-6 py-3">Channel</th>
              <th class="px-6 py-3">Resource</th>
              <th class="px-6 py-3">Requested</th>
              <th class="px-6 py-3">Status</th>
              <th class="px-6 py-3">Remaining Today</th>
            </tr>
          </thead>
          <tbody class="divide-y divide-sky-50">
            <% myRequests.forEach(r => { %>
              <tr>
                <td class="px-6 py-3 text-slate-700"><%= CHANNEL_ICON[r.channel] %> <%= CHANNEL_LABEL[r.channel] %></td>
                <td class="px-6 py-3 font-medium text-slate-800"><%= r.resource_label %></td>
                <td class="px-6 py-3 text-slate-600"><%= r.requested_limit %>/day</td>
                <td class="px-6 py-3">
                  <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>
                </td>
                <td class="px-6 py-3 text-slate-600"><%= (r.status === 'approved' || r.status === 'suspended') ? (r.remaining_today + ' / ' + r.allocated_limit) : '—' %></td>
              </tr>
            <% }) %>
          </tbody>
        </table>
      </div>
    <% } %>
  </div>

</main>

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