<% const c = campaign; %>

<%- include('../../../partials/adminTopbar', {
  pageTitle: 'Campaign Details',
  pageSubtitle: c.sentAtLabel,
  topbarActions: `
    <a href="/admin/newsletter/campaigns" class="btn-ghost text-xs">All Campaigns</a>
    <a href="/admin/newsletter?compose=1" class="btn-teal text-xs">Send New</a>
  `
}) %>

<main class="admin-main flex-1 overflow-y-auto overflow-x-hidden">
  <%- include('../../../partials/adminNewsletterNav', { newsletterNav: 'campaigns' }) %>

  <div class="admin-stat-grid" style="margin-bottom:1.25rem">
    <div class="card flex items-center gap-3" style="padding:12px 16px">
      <span class="badge <%= c.statusBadge %>"><%= c.statusLabel %></span>
      <span class="text-xs" style="color:rgba(255,255,255,.4)">Status</span>
    </div>
    <div class="card flex items-center gap-3" style="padding:12px 16px">
      <span class="text-xl font-bold text-white"><%= c.recipientCount %></span>
      <span class="text-xs" style="color:rgba(255,255,255,.4)">Recipients</span>
    </div>
    <div class="card flex items-center gap-3" style="padding:12px 16px">
      <span class="text-xl font-bold text-teal-400"><%= c.sentCount %></span>
      <span class="text-xs" style="color:rgba(255,255,255,.4)">Delivered</span>
    </div>
    <div class="card flex items-center gap-3" style="padding:12px 16px">
      <span class="text-xl font-bold" style="color:<%= c.failedCount ? '#f87171' : 'rgba(255,255,255,.35)' %>"><%= c.failedCount %></span>
      <span class="text-xs" style="color:rgba(255,255,255,.4)">Failed</span>
    </div>
  </div>

  <div class="grid grid-cols-1 lg:grid-cols-3 gap-4 mb-5">
    <div class="card lg:col-span-2">
      <p class="text-xs font-semibold uppercase tracking-wider mb-2" style="color:rgba(255,255,255,.35)">Subject</p>
      <h2 class="text-lg font-bold text-white mb-5"><%= c.subject %></h2>
      <p class="text-xs font-semibold uppercase tracking-wider mb-2" style="color:rgba(255,255,255,.35)">Message</p>
      <div class="rounded-xl p-4 text-sm leading-relaxed" style="background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);color:rgba(255,255,255,.75);white-space:pre-line"><%= c.body %></div>
    </div>

    <div class="card space-y-4">
      <div>
        <p class="text-xs font-semibold uppercase tracking-wider mb-3" style="color:rgba(255,255,255,.35)">Summary</p>
        <dl class="space-y-3 text-xs">
          <div class="flex justify-between gap-4">
            <dt style="color:rgba(255,255,255,.4)">Success rate</dt>
            <dd class="font-semibold text-white"><%= c.successRate %>%</dd>
          </div>
          <div class="flex justify-between gap-4">
            <dt style="color:rgba(255,255,255,.4)">Sent by</dt>
            <dd class="font-semibold text-white text-right"><%= c.sentByName || '—' %><% if (c.sentByEmail) { %><br/><span style="color:rgba(255,255,255,.4);font-weight:400"><%= c.sentByEmail %></span><% } %></dd>
          </div>
          <div class="flex justify-between gap-4">
            <dt style="color:rgba(255,255,255,.4)">Completed</dt>
            <dd class="font-semibold text-white"><%= c.sentAtLabel %></dd>
          </div>
        </dl>
      </div>
    </div>
  </div>

  <% if (failedDeliveries.length) { %>
  <div class="card mb-5" style="padding:0;overflow:hidden">
    <div class="px-4 py-3 border-b" style="border-color:rgba(255,255,255,.07)">
      <p class="text-sm font-semibold text-white">Failed deliveries <span class="badge badge-red ml-1"><%= failedDeliveries.length %></span></p>
    </div>
    <div class="overflow-x-auto max-h-64 overflow-y-auto">
      <table class="w-full">
        <thead>
          <tr><th>Email</th><th>Error</th></tr>
        </thead>
        <tbody>
          <% failedDeliveries.forEach(function(d) { %>
          <tr>
            <td class="text-sm text-white"><%= d.email %></td>
            <td class="text-xs" style="color:#f87171"><%= d.error || 'Unknown error' %></td>
          </tr>
          <% }); %>
        </tbody>
      </table>
    </div>
  </div>
  <% } %>

  <div class="card" style="padding:0;overflow:hidden">
    <div class="px-4 py-3 border-b flex items-center justify-between" style="border-color:rgba(255,255,255,.07)">
      <p class="text-sm font-semibold text-white">Delivered <span class="badge badge-green ml-1"><%= sentDeliveries.length %></span></p>
    </div>
    <div class="overflow-x-auto max-h-80 overflow-y-auto">
      <table class="w-full">
        <thead>
          <tr><th>Email</th><th>Status</th></tr>
        </thead>
        <tbody>
          <% if (!sentDeliveries.length) { %>
          <tr><td colspan="2" class="text-center py-8 text-xs" style="color:rgba(255,255,255,.35)">No successful deliveries recorded.</td></tr>
          <% } %>
          <% sentDeliveries.forEach(function(d) { %>
          <tr>
            <td class="text-sm text-white"><%= d.email %></td>
            <td><span class="badge badge-green">Sent</span></td>
          </tr>
          <% }); %>
        </tbody>
      </table>
    </div>
  </div>
</main>
