<% const fmtDate = (d) => d ? new Date(d).toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', hour: '2-digit', minute: '2-digit' }) : ''; %>
<% const typeBadge = { contact: 'badge-blue', demo: 'badge-red', support: 'badge-teal', other: 'badge-gray' }; %>
<% const currentType = query.type || 'all'; %>

<%- include('../../partials/adminTopbar', {
  pageTitle: 'Form Submissions',
  pageSubtitle: stats.total + ' total · ' + stats.unread + ' unread',
  topbarActions: `
    <a href="/admin/forms/export.csv?type=${encodeURIComponent(currentType)}&search=${encodeURIComponent(query.search || '')}" class="btn-ghost text-xs">Export CSV</a>
    <form method="post" action="/admin/forms/mark-all-read" class="inline"><button type="submit" class="btn-ghost text-xs">Mark all read</button></form>
  `
}) %>

<main class="admin-main flex-1 overflow-y-auto overflow-x-hidden" id="forms-page">
  <% if (typeof flash !== 'undefined' && flash) { %>
  <div class="admin-flash admin-flash-success mb-4"><%= flash %></div>
  <% } %>

  <div class="admin-stat-grid" style="margin-bottom:1.25rem">
    <div class="card flex items-center gap-3" style="padding:12px 16px"><span class="text-xl font-bold text-white"><%= stats.total %></span><span class="text-xs" style="color:rgba(255,255,255,.4)">Total</span></div>
    <div class="card flex items-center gap-3" style="padding:12px 16px"><span class="text-xl font-bold" style="color:#f87171"><%= stats.unread %></span><span class="text-xs" style="color:rgba(255,255,255,.4)">Unread</span></div>
    <div class="card flex items-center gap-3" style="padding:12px 16px"><span class="text-xl font-bold text-blue-400"><%= stats.read %></span><span class="text-xs" style="color:rgba(255,255,255,.4)">Read</span></div>
    <div class="card flex items-center gap-3" style="padding:12px 16px"><span class="text-xl font-bold" style="color:rgba(255,255,255,.35)"><%= stats.archived %></span><span class="text-xs" style="color:rgba(255,255,255,.4)">Archived</span></div>
  </div>

  <div class="card mb-5" style="padding:0;overflow:hidden">
    <form method="get" action="/admin/forms" class="flex items-center justify-between border-b px-2 flex-wrap" style="border-color:rgba(255,255,255,.07)">
      <div class="flex flex-wrap">
        <a href="?type=all" class="filter-tab<%= currentType === 'all' ? ' active' : '' %>">All <span class="ml-1 text-[10px] px-1.5 py-0.5 rounded" style="background:rgba(255,255,255,.08)"><%= typeCounts.all %></span></a>
        <a href="?type=contact" class="filter-tab<%= currentType === 'contact' ? ' active' : '' %>">Contact <span class="ml-1 text-[10px] px-1.5 py-0.5 rounded" style="background:rgba(255,255,255,.08)"><%= typeCounts.contact %></span></a>
        <a href="?type=demo" class="filter-tab<%= currentType === 'demo' ? ' active' : '' %>">Demo <span class="ml-1 text-[10px] px-1.5 py-0.5 rounded" style="background:rgba(239,68,68,.15);color:#f87171"><%= typeCounts.demo %></span></a>
        <a href="?type=support" class="filter-tab<%= currentType === 'support' ? ' active' : '' %>">Support <span class="ml-1 text-[10px] px-1.5 py-0.5 rounded" style="background:rgba(255,255,255,.08)"><%= typeCounts.support %></span></a>
      </div>
      <div class="relative px-3 py-2">
        <input type="hidden" name="type" value="<%= currentType %>"/>
        <input type="search" name="search" value="<%= query.search || '' %>" placeholder="Search…" class="pl-3 pr-3 py-1.5 rounded-lg text-xs" style="background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);color:rgba(255,255,255,.8);width:180px;outline:none"/>
      </div>
    </form>

    <div class="overflow-x-auto">
      <table class="w-full">
        <thead>
          <tr>
            <th>Sender</th>
            <th class="hidden sm:table-cell">Type</th>
            <th class="hidden md:table-cell">Subject</th>
            <th>Status</th>
            <th class="hidden lg:table-cell">Received</th>
            <th>Actions</th>
          </tr>
        </thead>
        <tbody>
          <% if (!submissions.length) { %>
          <tr><td colspan="6" class="text-center py-10" style="color:rgba(255,255,255,.3)">No submissions.</td></tr>
          <% } %>
          <% submissions.forEach(function(s) {
            const initials = (s.name || '?').split(' ').map(function(n){ return n[0]; }).join('').slice(0,2).toUpperCase();
            const tb = typeBadge[s.formType] || 'badge-gray';
          %>
          <tr class="<%= !s.isRead ? 'font-semibold' : '' %>" data-id="<%= s._id %>">
            <td>
              <div class="flex items-center gap-2">
                <% if (!s.isRead) { %><span class="w-1.5 h-1.5 rounded-full bg-red-400 flex-shrink-0"></span><% } %>
                <div class="w-8 h-8 rounded-full flex items-center justify-center text-[10px] font-bold text-white flex-shrink-0" style="background:linear-gradient(135deg,#8065f8,#4490d3)"><%= initials %></div>
                <div>
                  <p class="text-sm text-white"><%= s.name %></p>
                  <p class="text-[10px]" style="color:rgba(255,255,255,.35)"><%= s.email %></p>
                </div>
              </div>
            </td>
            <td class="hidden sm:table-cell"><span class="badge <%= tb %>"><%= typeLabels[s.formType] || s.formType %></span></td>
            <td class="hidden md:table-cell" style="color:rgba(255,255,255,.55);max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap"><%= s.subject || '—' %></td>
            <td>
              <% if (s.archived) { %><span class="badge badge-gray">Archived</span>
              <% } else if (s.isRead) { %><span class="badge badge-green">Read</span>
              <% } else { %><span class="badge badge-red">Unread</span><% } %>
            </td>
            <td class="hidden lg:table-cell text-xs" style="color:rgba(255,255,255,.4)"><%= fmtDate(s.createdAt) %></td>
            <td>
              <button type="button" class="btn-sm btn-edit view-msg" data-id="<%= s._id %>">View</button>
            </td>
          </tr>
          <% }); %>
        </tbody>
      </table>
    </div>

    <% if (pagination.totalPages > 1) { %>
    <div class="flex items-center justify-between px-4 py-3 border-t" style="border-color:rgba(255,255,255,.06)">
      <p class="text-xs" style="color:rgba(255,255,255,.35)">Page <%= pagination.page %> of <%= pagination.totalPages %></p>
      <div class="flex gap-1">
        <% if (pagination.page > 1) { %><a href="?page=<%= pagination.page - 1 %>&type=<%= currentType %>" class="w-7 h-7 rounded-lg text-xs flex items-center justify-center hover:bg-white/10" style="color:rgba(255,255,255,.5)">‹</a><% } %>
        <% if (pagination.page < pagination.totalPages) { %><a href="?page=<%= pagination.page + 1 %>&type=<%= currentType %>" class="w-7 h-7 rounded-lg text-xs flex items-center justify-center hover:bg-white/10" style="color:rgba(255,255,255,.5)">›</a><% } %>
      </div>
    </div>
    <% } %>
  </div>
</main>

<div class="modal-overlay" id="msg-modal">
  <div class="modal-box">
    <div class="flex items-start justify-between mb-5">
      <div class="flex items-center gap-3">
        <div id="modal-avatar" class="w-10 h-10 rounded-full flex items-center justify-center text-sm font-bold text-white" style="background:linear-gradient(135deg,#8065f8,#4490d3)">?</div>
        <div>
          <p id="modal-name" class="text-sm font-bold text-white"></p>
          <p id="modal-email" class="text-xs mt-0.5" style="color:rgba(255,255,255,.4)"></p>
        </div>
      </div>
      <button type="button" id="modal-close" class="p-1.5 rounded-lg hover:bg-white/10">✕</button>
    </div>
    <p id="modal-type" class="badge badge-purple mb-3"></p>
    <p id="modal-subject" class="text-sm font-semibold text-white mb-2"></p>
    <p id="modal-message" class="text-sm leading-relaxed whitespace-pre-wrap" style="color:rgba(255,255,255,.65)"></p>
    <div class="flex gap-2 mt-6">
      <form id="modal-read-form" method="post" class="inline"><button type="submit" class="btn-ghost text-xs">Toggle read</button></form>
      <form id="modal-archive-form" method="post" class="inline"><button type="submit" class="btn-ghost text-xs">Archive</button></form>
    </div>
  </div>
</div>
