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

  <a href="/campaigns" class="text-sm font-medium text-slate-500 hover:text-brand-600">&larr; All campaigns</a>

  <div class="flex flex-col md:flex-row md:items-center md:justify-between mt-3 mb-6 pb-6 border-b border-sky-100">
    <div>
      <h1 class="text-2xl font-bold text-slate-900">
        <%= campaign.channel === 'email' ? '✉️' : campaign.channel === 'telegram' ? '✈️' : campaign.channel === 'sms' ? '💬' : '📱' %>
        Campaign #<%= campaign.id %>
      </h1>
      <p class="text-sm text-slate-500 mt-1 max-w-xl truncate"><%= campaign.subject || campaign.message %></p>
    </div>
    <span data-campaign-status class="mt-3 md:mt-0 inline-block px-3 py-1 rounded-full text-xs font-semibold <%= campaign.status === 'completed' ? 'bg-emerald-50 text-emerald-700' : campaign.status === 'sending' ? 'bg-sky-50 text-sky-700' : 'bg-slate-100 text-slate-500' %>">
      <%= campaign.status %>
    </span>
  </div>

  <% if (campaign.status_note && campaign.status !== 'completed') { %>
    <div class="mb-6 px-4 py-3 rounded-lg text-sm border bg-amber-50 border-amber-200 text-amber-800">
      <strong>Waiting:</strong> <%= campaign.status_note %>
    </div>
  <% } %>

  <!-- Summary -->
  <div class="grid grid-cols-3 gap-4 mb-8">
    <div class="bg-white p-4 rounded-xl border border-sky-100 text-center">
      <p data-stat-sent class="text-2xl font-bold text-emerald-600"><%= stats.sent || 0 %></p>
      <p class="text-xs font-medium text-slate-500 mt-0.5">Sent</p>
    </div>
    <div class="bg-white p-4 rounded-xl border border-sky-100 text-center">
      <p data-stat-pending class="text-2xl font-bold text-slate-500"><%= stats.pending || 0 %></p>
      <p class="text-xs font-medium text-slate-500 mt-0.5">Pending</p>
    </div>
    <div class="bg-white p-4 rounded-xl border border-sky-100 text-center">
      <p data-stat-failed class="text-2xl font-bold text-red-500"><%= stats.failed || 0 %></p>
      <p class="text-xs font-medium text-slate-500 mt-0.5">Failed</p>
    </div>
  </div>

  <!-- Recipients -->
  <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">Recipients</h3>
      <p class="text-xs text-slate-500 mt-0.5">Failed and pending recipients are shown first.</p>
    </div>

    <div class="overflow-x-auto">
      <table class="w-full text-left border-collapse">
        <thead>
          <tr class="bg-slate-50 text-xs font-semibold text-slate-500 border-b border-sky-100">
            <th class="py-3 px-4">Recipient</th>
            <th class="py-3 px-4">Status</th>
            <th class="py-3 px-4">Sent via</th>
            <th class="py-3 px-4">Sent at</th>
            <th class="py-3 px-4">Error</th>
          </tr>
        </thead>
        <tbody data-recipients-body class="divide-y divide-sky-50 text-sm">
          <% recipients.forEach(r => { %>
            <tr data-recipient-row="<%= r.id %>">
              <td class="py-3 px-4 text-slate-800">
                <%= r.address || '(deleted contact)' %>
                <% if (r.contact_name) { %><span class="text-slate-400"> — <%= r.contact_name %></span><% } %>
              </td>
              <td class="py-3 px-4">
                <span data-status class="px-2 py-0.5 rounded-full text-xs font-medium <%= r.status === 'sent' ? 'bg-emerald-50 text-emerald-700' : r.status === 'failed' ? 'bg-red-50 text-red-600' : 'bg-slate-100 text-slate-500' %>">
                  <%= r.status %>
                </span>
              </td>
              <td class="py-3 px-4 text-slate-500" data-sender><%= r.sender_label || '—' %></td>
              <td class="py-3 px-4 text-slate-400 text-xs" data-sent-at><%= r.sent_at || '—' %></td>
              <td class="py-3 px-4 text-red-500 text-xs max-w-xs truncate" data-error><%= r.error_message || '' %></td>
            </tr>
          <% }) %>
        </tbody>
      </table>
    </div>
  </div>
</main>

<script>
  const campaignId = <%= campaign.id %>;

  function statusBadgeClass(status) {
    if (status === 'sent' || status === 'completed') return 'bg-emerald-50 text-emerald-700';
    if (status === 'failed') return 'bg-red-50 text-red-600';
    if (status === 'sending') return 'bg-sky-50 text-sky-700';
    return 'bg-slate-100 text-slate-500';
  }

  function poll() {
    fetch(`/campaigns/${campaignId}/recipients`)
      .then((r) => r.json())
      .then((data) => {
        if (data.error) return;

        const campaignStatusEl = document.querySelector('[data-campaign-status]');
        campaignStatusEl.textContent = data.status;
        campaignStatusEl.className = 'mt-3 md:mt-0 inline-block px-3 py-1 rounded-full text-xs font-semibold ' + statusBadgeClass(data.status);

        document.querySelector('[data-stat-sent]').textContent = data.stats.sent || 0;
        document.querySelector('[data-stat-pending]').textContent = data.stats.pending || 0;
        document.querySelector('[data-stat-failed]').textContent = data.stats.failed || 0;

        data.recipients.forEach((r) => {
          const row = document.querySelector(`[data-recipient-row="${r.id}"]`);
          if (!row) return;
          const statusEl = row.querySelector('[data-status]');
          statusEl.textContent = r.status;
          statusEl.className = 'px-2 py-0.5 rounded-full text-xs font-medium ' + statusBadgeClass(r.status);
          row.querySelector('[data-sender]').textContent = r.sender_label || '—';
          row.querySelector('[data-sent-at]').textContent = r.sent_at || '—';
          row.querySelector('[data-error]').textContent = r.error_message || '';
        });

        if (data.status === 'queued' || data.status === 'sending') {
          setTimeout(poll, 4000);
        }
      })
      .catch(() => {});
  }

  if (document.querySelector('[data-campaign-status]').textContent.trim() === 'queued' ||
      document.querySelector('[data-campaign-status]').textContent.trim() === 'sending') {
    setTimeout(poll, 4000);
  }
</script>

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