<%- include('partials/header') %>
<%- include('partials/nav') %>

<main class="flex-grow max-w-7xl w-full mx-auto px-4 sm:px-6 lg:px-8 py-8">
  <div class="flex flex-col md:flex-row md:items-end md:justify-between gap-4 mb-6">
    <div>
      <h1 class="text-3xl font-bold text-slate-900">Campaigns</h1>
      <p class="text-sm text-slate-500 mt-1">Every campaign you've queued. Click one to see who received it.</p>
    </div>
    <div class="inline-flex rounded-lg border border-slate-300 overflow-hidden text-sm bg-white">
      <% [['', 'All'], ['email', '✉️ Email'], ['sms', '💬 SMS'], ['telegram', '✈️ Telegram']].forEach(function (f, i) { %>
        <a href="/campaigns<%= f[0] ? '?channel=' + f[0] : '' %>" class="px-3 py-1.5 <%= i > 0 ? 'border-l border-slate-300' : '' %> <%= channel === f[0] ? 'bg-brand-500 text-white font-semibold' : 'text-slate-600 hover:bg-slate-50' %>"><%= f[1] %></a>
      <% }); %>
    </div>
  </div>

  <div class="bg-white rounded-2xl border border-slate-200 shadow-sm overflow-hidden">
    <% if (campaigns.length === 0) { %>
      <div class="p-12 text-center text-slate-400">
        <p class="text-4xl mb-2">📊</p>
        <p class="text-sm">No campaigns yet<%= channel ? ' for this channel' : '' %>. Compose one from a channel in the sidebar.</p>
      </div>
    <% } else { %>
      <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-slate-100">
              <th class="py-3 px-4">Channel</th>
              <th class="py-3 px-4">Message</th>
              <th class="py-3 px-4">Status</th>
              <th class="py-3 px-4">Sent</th>
              <th class="py-3 px-4">Pending</th>
              <th class="py-3 px-4">Failed</th>
              <th class="py-3 px-4">Queued</th>
              <th class="py-3 px-4"></th>
            </tr>
          </thead>
          <tbody class="divide-y divide-slate-100 text-sm">
            <% campaigns.forEach(c => { %>
              <tr class="hover:bg-brand-50/30 transition" data-campaign-row="<%= c.id %>">
                <td class="py-3 px-4 font-medium text-slate-800 capitalize"><%= c.channel === 'email' ? '✉️' : c.channel === 'telegram' ? '✈️' : c.channel === 'sms' ? '💬' : '📱' %> <%= c.channel %></td>
                <td class="py-3 px-4 text-slate-600 max-w-xs truncate"><%= c.subject || c.message %></td>
                <td class="py-3 px-4"><span data-status class="px-2 py-0.5 rounded-full text-xs font-medium <%= c.status === 'completed' ? 'bg-emerald-50 text-emerald-700' : c.status === 'sending' ? 'bg-sky-50 text-sky-700' : 'bg-slate-100 text-slate-500' %>"><%= c.status %></span><% if (c.status_note && c.status !== 'completed') { %><div class="text-[11px] text-amber-700 mt-1 max-w-xs leading-snug">⏳ <%= c.status_note %></div><% } %></td>
                <td class="py-3 px-4 text-emerald-600 font-semibold" data-sent><%= c.stats.sent %></td>
                <td class="py-3 px-4 text-slate-500" data-pending><%= c.stats.pending %></td>
                <td class="py-3 px-4 text-red-500" data-failed><%= c.stats.failed %></td>
                <td class="py-3 px-4 text-slate-400 text-xs"><%= c.created_at %></td>
                <td class="py-3 px-4"><a href="/campaigns/<%= c.id %>" class="text-xs font-semibold text-brand-600 hover:text-brand-700">View &rarr;</a></td>
              </tr>
            <% }) %>
          </tbody>
        </table>
      </div>
    <% } %>
  </div>
</main>

<script>
  // Poll only campaigns that are still in-flight; stop once a row completes.
  function livePoll() {
    const rows = document.querySelectorAll('[data-campaign-row]');
    let anyActive = false;

    rows.forEach((row) => {
      const statusEl = row.querySelector('[data-status]');
      const currentStatus = statusEl.textContent.trim();
      if (currentStatus !== 'queued' && currentStatus !== 'sending') return;

      anyActive = true;
      const id = row.getAttribute('data-campaign-row');

      fetch(`/campaigns/${id}/status`)
        .then((r) => r.json())
        .then((data) => {
          if (data.error) return;
          statusEl.textContent = data.status;
          statusEl.className = 'px-2 py-0.5 rounded-full text-xs font-medium ' +
            (data.status === 'completed' ? 'bg-emerald-50 text-emerald-700' :
             data.status === 'sending' ? 'bg-sky-50 text-sky-700' : 'bg-slate-100 text-slate-500');
          row.querySelector('[data-sent]').textContent = data.stats.sent;
          row.querySelector('[data-pending]').textContent = data.stats.pending;
          row.querySelector('[data-failed]').textContent = data.stats.failed;
        })
        .catch(() => {});
    });

    if (anyActive) setTimeout(livePoll, 4000);
  }
  livePoll();
</script>

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