<%- include('partials/header', { title: 'Campaign', heading: campaign.name, active: '/campaigns' }) %>

<div class="bg-white rounded-2xl shadow p-5 mb-6">
  <div class="flex flex-wrap gap-6 items-center">
    <div><p class="text-xs text-slate-500">Status</p><p id="c_status" class="font-semibold"><%= campaign.status %></p></div>
    <div><p class="text-xs text-slate-500">Total</p><p id="c_total" class="font-semibold"><%= campaign.total %></p></div>
    <div><p class="text-xs text-slate-500">Sent</p><p id="c_sent" class="font-semibold text-emerald-600"><%= campaign.sent %></p></div>
    <div><p class="text-xs text-slate-500">Failed</p><p id="c_failed" class="font-semibold text-rose-600"><%= campaign.failed %></p></div>
  </div>
  <div class="mt-4 h-2 bg-slate-100 rounded-full overflow-hidden">
    <div id="c_bar" class="h-full bg-emerald-500" style="width: <%= campaign.total ? Math.round(campaign.sent / campaign.total * 100) : 0 %>%"></div>
  </div>
</div>

<div class="bg-white rounded-2xl shadow p-5">
  <h2 class="font-semibold mb-3">Recipients</h2>
  <table class="w-full text-sm">
    <thead class="text-left text-slate-500 border-b"><tr><th class="py-2">Phone</th><th>Name</th><th>Status</th></tr></thead>
    <tbody>
      <% messages.forEach((m) => { %>
        <tr class="border-b last:border-0">
          <td class="py-2"><%= m.to_phone %></td>
          <td><%= m.to_name || '—' %></td>
          <td><span class="text-xs px-2 py-1 rounded-full bg-slate-100"><%= m.status %></span></td>
        </tr>
      <% }); %>
    </tbody>
  </table>
</div>

<script>
  const socket = io();
  socket.emit('subscribe:campaign', <%= campaign.id %>);
  socket.on('campaign:progress', (p) => {
    if (p.id !== <%= campaign.id %>) return;
    document.getElementById('c_status').textContent = p.status;
    document.getElementById('c_sent').textContent = p.sent;
    document.getElementById('c_failed').textContent = p.failed;
    document.getElementById('c_total').textContent = p.total;
    const pct = p.total ? Math.round(p.sent / p.total * 100) : 0;
    document.getElementById('c_bar').style.width = pct + '%';
  });
</script>

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