<%- include('../../../partials/adminTopbar', {
  pageTitle: 'Newsletter Campaigns',
  pageSubtitle: pagination.total + ' campaign' + (pagination.total === 1 ? '' : 's') + ' sent',
  topbarActions: `
    <a href="/admin/newsletter" class="btn-ghost text-xs">Subscribers</a>
    <a href="/admin/newsletter?compose=1" class="btn-teal text-xs">Send Campaign</a>
  `
}) %>

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

  <%- include('../../../partials/adminNewsletterNav', { newsletterNav: 'campaigns' }) %>

  <div class="card" style="padding:0;overflow:hidden">
    <div class="overflow-x-auto">
      <table class="w-full">
        <thead>
          <tr>
            <th>Subject</th>
            <th class="hidden sm:table-cell">Status</th>
            <th>Recipients</th>
            <th class="hidden md:table-cell">Delivered</th>
            <th class="hidden lg:table-cell">Sent by</th>
            <th class="hidden lg:table-cell">Date</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          <% if (!campaigns.length) { %>
          <tr>
            <td colspan="7" class="text-center py-12" style="color:rgba(255,255,255,.35)">
              <p class="text-sm mb-2">No campaigns yet.</p>
              <a href="/admin/newsletter" class="text-xs font-medium text-purple-400 hover:text-purple-300">Go to Subscribers to send your first campaign →</a>
            </td>
          </tr>
          <% } %>
          <% campaigns.forEach(function(c) { %>
          <tr>
            <td>
              <p class="text-sm font-semibold text-white truncate max-w-[220px] sm:max-w-xs"><%= c.subject %></p>
              <p class="text-[10px] mt-0.5 sm:hidden" style="color:rgba(255,255,255,.35)"><%= c.sentAtLabel %></p>
            </td>
            <td class="hidden sm:table-cell">
              <span class="badge <%= c.statusBadge %>"><%= c.statusLabel %></span>
            </td>
            <td class="text-sm text-white"><%= c.recipientCount %></td>
            <td class="hidden md:table-cell">
              <span class="text-sm text-white"><%= c.sentCount %></span>
              <% if (c.failedCount > 0) { %>
              <span class="text-[10px] ml-1" style="color:#f87171">· <%= c.failedCount %> failed</span>
              <% } %>
              <span class="text-[10px] block mt-0.5" style="color:rgba(255,255,255,.35)"><%= c.successRate %>% success</span>
            </td>
            <td class="hidden lg:table-cell text-xs" style="color:rgba(255,255,255,.5)"><%= c.sentByName || '—' %></td>
            <td class="hidden lg:table-cell text-xs" style="color:rgba(255,255,255,.4)"><%= c.sentAtLabel %></td>
            <td class="text-right">
              <a href="/admin/newsletter/campaigns/<%= c._id %>" class="btn-sm btn-edit">View</a>
            </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 %>" 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 %>" 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>
