<div class="page-actions" style="margin-bottom:20px">
  <button class="btn btn-primary" onclick="document.getElementById('newCampModal').style.display='flex'"><i class="bi bi-plus-circle-fill"></i> New Campaign</button>
</div>

<div class="admin-card">
  <table class="admin-table">
    <thead><tr><th>Campaign</th><th>Audience</th><th>Status</th><th>Recipients</th><th>Sent</th><th>Opens</th><th>Scheduled/Sent At</th><th>Actions</th></tr></thead>
    <tbody>
      <% if (campaigns && campaigns.length) { %>
      <% campaigns.forEach(c => { %>
      <tr>
        <td>
          <strong><%= c.name %></strong><br>
          <span style="font-size:.75rem;color:#9ca3af"><%= c.subject.substring(0,50) %></span>
        </td>
        <td><span class="badge badge-secondary" style="font-size:.68rem"><%= c.target_audience.replace(/_/g,' ') %></span></td>
        <td><span class="badge badge-<%= c.status==='sent'?'success':c.status==='sending'?'warning':c.status==='scheduled'?'info':'secondary' %>"><%= c.status %></span></td>
        <td><%= c.recipient_count || 0 %></td>
        <td><%= c.sent_count || 0 %></td>
        <td><%= c.open_count || 0 %> <% if(c.sent_count > 0) { %><span style="font-size:.7rem;color:#9ca3af">(<%= Math.round(100*c.open_count/(c.sent_count||1)) %>%)</span><% } %></td>
        <td style="font-size:.75rem"><%= c.sent_at ? moment(c.sent_at).format('MMM D, YYYY') : c.scheduled_at ? moment(c.scheduled_at).format('MMM D, YYYY') : '—' %></td>
        <td>
          <% if (['draft','scheduled'].includes(c.status)) { %>
          <button class="btn btn-xs btn-success send-campaign" data-id="<%= c.id %>" data-name="<%= c.name %>"><i class="bi bi-send-fill"></i> Send Now</button>
          <% } %>
        </td>
      </tr>
      <% }) %>
      <% } else { %>
      <tr><td colspan="8" style="text-align:center;padding:40px;color:#9ca3af">No campaigns yet.</td></tr>
      <% } %>
    </tbody>
  </table>
</div>

<!-- New Campaign Modal -->
<div class="modal" id="newCampModal" style="display:none">
  <div class="modal-backdrop" onclick="document.getElementById('newCampModal').style.display='none'"></div>
  <div class="modal-content" style="max-width:680px">
    <div class="modal-header"><h3>New Email Campaign</h3><button onclick="document.getElementById('newCampModal').style.display='none'" class="modal-close"><i class="bi bi-x-lg"></i></button></div>
    <div class="modal-body">
      <div class="form-group"><label>Campaign Name *</label><input type="text" id="campName" placeholder="e.g., August Newsletter"></div>
      <div class="form-group"><label>Email Subject *</label><input type="text" id="campSubject" placeholder="Subject line that recipients will see..."></div>
      <div class="form-group"><label>Target Audience *</label>
        <select id="campAudience">
          <option value="all_members">All Members (active + trial)</option>
          <option value="active_members">Active Members (paid only)</option>
          <option value="trial_members">Trial Members</option>
          <option value="expired_members">Expired Members (re-engage)</option>
          <option value="pending_members">Pending Members</option>
          <option value="newsletter">Newsletter Subscribers</option>
        </select>
      </div>
      <div class="form-group"><label>Email Content *</label>
        <textarea id="campContent" rows="12" placeholder="Write your email content here. Use {{first_name}} for personalization..."></textarea>
        <small class="form-help">Available variables: {{first_name}}, {{last_name}}, {{org_name}}</small>
      </div>
      <div class="form-group"><label>Schedule For (optional)</label><input type="datetime-local" id="campSchedule"><small class="form-help">Leave blank to save as draft.</small></div>
      <div class="modal-actions">
        <button class="btn btn-primary" onclick="saveCampaign()"><i class="bi bi-floppy-fill"></i> Save Campaign</button>
        <button class="btn btn-ghost" onclick="document.getElementById('newCampModal').style.display='none'">Cancel</button>
      </div>
    </div>
  </div>
</div>

<script>
async function saveCampaign() {
  const body = {
    name: document.getElementById('campName').value,
    subject: document.getElementById('campSubject').value,
    content: document.getElementById('campContent').value,
    target_audience: document.getElementById('campAudience').value,
    scheduled_at: document.getElementById('campSchedule').value || null
  };
  const res = await fetch('/admin/campaigns', {method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(body)});
  if((await res.json()).success) { document.getElementById('newCampModal').style.display='none'; location.reload(); }
}
document.querySelectorAll('.send-campaign').forEach(btn => {
  btn.addEventListener('click', async () => {
    if (!confirm(`Send campaign "${btn.dataset.name}" now? This will email all recipients.`)) return;
    btn.disabled = true; btn.innerHTML = '<i class="bi bi-hourglass-split"></i> Sending...';
    const res  = await fetch(`/admin/campaigns/${btn.dataset.id}/send`, {method:'POST',headers:{'Content-Type':'application/json'}});
    const data = await res.json();
    if (data.success) { alert(`Campaign sent to ${data.sent} of ${data.total} recipients.`); location.reload(); }
    else { btn.disabled = false; btn.innerHTML = '<i class="bi bi-send-fill"></i> Send Now'; alert('Failed to send.'); }
  });
});
</script>
