{% extends "portal_base.html" %}
{% block title %}{{ campaign.name }} · Campaign{% endblock %}
{% block topbar_title %}{{ campaign.name }}{% endblock %}
{% block portal_content %}
<div class="toolbar">
  <div>
    <span class="badge badge-{{ campaign.status }}" id="campaign-status-badge">{{ campaign.get_status_display }}</span>
    <span class="muted" style="margin-left:8px">{{ campaign.get_channel_display }}</span>
    {% if campaign.scheduled_for %}
    <span class="muted" style="margin-left:8px">Scheduled {{ campaign.scheduled_for|date:"M j, g:i A" }}</span>
    {% endif %}
    <span class="muted" style="margin-left:8px" id="live-hint">Live · updates every 10s</span>
  </div>
  <a class="btn btn-sm btn-ghost" href="{% url 'messaging:campaign_list' %}">← Campaigns</a>
</div>

{% if campaign.channel == "email" or can_send %}
<div class="panel" style="margin-bottom:16px">
  <div class="panel-h"><h2>Send</h2></div>
  <div class="panel-b form-grid">
    {% if campaign.channel == "email" %}
    <form method="post" action="{% url 'messaging:campaign_test_send' campaign.pk %}" class="form-grid cols-2" style="align-items:end">
      {% csrf_token %}
      <div class="field">
        <label for="id_test_email">Test send (your inbox)</label>
        <input id="id_test_email" name="test_email" type="email" required
               placeholder="you@example.com"
               value="{{ request.user.email }}">
        <div class="hint">Sends one [TEST] copy. Does not notify the recipient list.</div>
      </div>
      <div class="field">
        <button class="btn btn-ghost" type="submit">Send test email</button>
      </div>
    </form>
    {% endif %}
    {% if can_send %}
    <form method="post" action="{% url 'messaging:campaign_send' campaign.pk %}"
          onsubmit="return confirm('Send this campaign to all remaining recipients now?');">
      {% csrf_token %}
      <button class="btn btn-primary" type="submit">Send now to recipients</button>
      <p class="hint-block" style="margin-top:8px">
        Enqueues draft / scheduled / failed messages via SMTP2GO (dev ImmediateBackend runs inline).
      </p>
    </form>
    {% endif %}
  </div>
</div>
{% endif %}

<div class="stat-row" id="campaign-stats">
  <div class="stat-card">
    <div class="label">Messages</div>
    <div class="value" data-stat="total">{{ stats.total }}</div>
  </div>
  <div class="stat-card">
    <div class="label">Sent</div>
    <div class="value" data-stat="sent">{{ stats.sent }}</div>
  </div>
  <div class="stat-card">
    <div class="label">Delivered</div>
    <div class="value" data-stat="delivered">{{ stats.delivered }}</div>
  </div>
  <div class="stat-card">
    <div class="label">Opens</div>
    <div class="value" data-stat="opens">{{ stats.opens }}</div>
  </div>
  <div class="stat-card">
    <div class="label">Clicks</div>
    <div class="value" data-stat="clicks">{{ stats.clicks }}</div>
  </div>
  <div class="stat-card">
    <div class="label">Bounced / failed</div>
    <div class="value" data-stat="failed">{{ stats.failed }}</div>
  </div>
  <div class="stat-card">
    <div class="label">Suppressed</div>
    <div class="value" data-stat="suppressed">{{ stats.suppressed }}</div>
  </div>
</div>

<div class="split">
  <div class="panel">
    <div class="panel-h"><h2>Engagement</h2></div>
    <div class="panel-b">
      <p class="hint-block" style="margin-top:0">
        Unique recipients: <strong data-stat="opens">{{ stats.opens }}</strong> opened ·
        <strong data-stat="clicks">{{ stats.clicks }}</strong> clicked
        ({{ stats.open_events }} open events / {{ stats.click_events }} click events from SMTP2GO).
      </p>
      <div class="chart-placeholder" aria-hidden="true">
        <div class="bar" style="height:55%"></div>
        <div class="bar" style="height:70%"></div>
        <div class="bar" style="height:40%"></div>
        <div class="bar" style="height:30%"></div>
        <div class="bar" style="height:20%"></div>
      </div>    </div>
  </div>
  <div class="panel">
    <div class="panel-h"><h2>Recent SMTP2GO events</h2></div>
    <div class="panel-b" style="padding:0">
      <table class="table">
        <thead><tr><th>When</th><th>Event</th><th>Contact</th></tr></thead>
        <tbody id="events-body">
          {% for event in recent_events %}
          <tr>
            <td class="muted">{{ event.created_at|date:"M j, g:i A" }}</td>
            <td><span class="badge">{{ event.event_type }}</span></td>
            <td>{% if event.message %}{{ event.message.contact }}{% else %}—{% endif %}</td>
          </tr>
          {% empty %}
          <tr><td colspan="3" class="empty-state">No webhook events yet. SMTP2GO must POST opens/clicks to <code>/portal/messaging/webhooks/email/</code> (see messaging README). SMTP2GO’s own “Clicked” feed does not fill this table by itself.</td></tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
</div>

<div class="panel">
  <div class="panel-h"><h2>Recipients</h2></div>
  <div class="panel-b" style="padding:0">
    <table class="table">
      <thead>
        <tr><th>Contact</th><th>Status</th><th>Provider id</th><th>Error</th></tr>
      </thead>
      <tbody id="recipients-body">
        {% for message in messages %}
        <tr data-message-id="{{ message.pk }}">
          <td>
            <div>{{ message.contact }}</div>
            {% if message.destination %}
            <div class="muted" style="font-size:12px;margin-top:2px">{{ message.destination }}</div>
            {% endif %}
          </td>
          <td><span class="badge badge-{{ message.status }}">{{ message.get_status_display }}</span></td>
          <td class="muted">{{ message.provider_message_id|default:"—" }}</td>
          <td class="muted">{{ message.error|truncatechars:60|default:"—" }}</td>
        </tr>
        {% empty %}
        <tr><td colspan="4" class="empty-state">No messages on this campaign.</td></tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>
{% endblock %}
{% block extra_js %}
<script>
(function () {
  var url = "{% url 'messaging:campaign_status_json' campaign.pk %}";
  function esc(s) {
    return String(s || "").replace(/[&<>"']/g, function (c) {
      return ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[c];
    });
  }
  function apply(data) {
    var badge = document.getElementById("campaign-status-badge");
    if (badge) {
      badge.textContent = data.status_display;
      badge.className = "badge badge-" + data.status;
    }
    Object.keys(data.stats || {}).forEach(function (key) {
      document.querySelectorAll('[data-stat="' + key + '"]').forEach(function (el) {
        el.textContent = data.stats[key];
      });
    });
    var body = document.getElementById("recipients-body");
    if (body && data.messages) {
      if (!data.messages.length) {
        body.innerHTML = '<tr><td colspan="4" class="empty-state">No messages on this campaign.</td></tr>';
      } else {
        body.innerHTML = data.messages.map(function (m) {
          var dest = m.destination
            ? '<div class="muted" style="font-size:12px;margin-top:2px">' + esc(m.destination) + '</div>'
            : '';
          return "<tr data-message-id=\"" + esc(m.id) + "\">" +
            "<td><div>" + esc(m.contact) + "</div>" + dest + "</td>" +
            "<td><span class=\"badge badge-" + esc(m.status) + "\">" + esc(m.status_display) + "</span></td>" +
            "<td class=\"muted\">" + esc(m.provider_message_id || "—") + "</td>" +
            "<td class=\"muted\">" + esc(m.error || "—") + "</td></tr>";
        }).join("");
      }
    }
    var eventsBody = document.getElementById("events-body");
    if (eventsBody && data.events) {
      if (!data.events.length) {
        eventsBody.innerHTML = '<tr><td colspan="3" class="empty-state">No provider events yet.</td></tr>';
      } else {
        eventsBody.innerHTML = data.events.map(function (e) {
          var when = e.created_at ? new Date(e.created_at).toLocaleString() : "—";
          return "<tr><td class=\"muted\">" + esc(when) + "</td>" +
            "<td><span class=\"badge\">" + esc(e.event_type) + "</span></td>" +
            "<td>" + esc(e.contact) + "</td></tr>";
        }).join("");
      }
    }
  }
  function tick() {
    fetch(url, { headers: { "Accept": "application/json" }, credentials: "same-origin" })
      .then(function (r) { return r.ok ? r.json() : Promise.reject(); })
      .then(apply)
      .catch(function () {});
  }
  setInterval(tick, 10000);
})();
</script>
{% endblock %}