{% extends "madga/studio/base.html" %}
{% load i18n humanize madga_studio_tags %}

{% block breadcrumbs %}<span class="crumb is-current">{% trans "Broadcasts" %}</span>{% endblock %}

{% block content %}
<div class="madga-page">
  <div class="madga-page-header">
    <div class="madga-page-title-block">
      <h1 class="madga-page-title">{% trans "Broadcasts" %}</h1>
      <p class="madga-page-subtitle">
        {% blocktrans count n=subscriber_count %}{{ n }} active subscriber.{% plural %}{{ n }} active subscribers.{% endblocktrans %}
        {% if publishers %}
          {% blocktrans count n=publishers|length %}{{ n }} publisher configured.{% plural %}{{ n }} publishers configured.{% endblocktrans %}
        {% endif %}
      </p>
    </div>
    <div class="madga-page-actions">
      <a href="{% url 'madga_studio:subscriber_list' %}" class="madga-btn madga-btn--sm madga-btn--ghost">{% studio_icon "users" size=12 stroke=2 %} {% trans "Subscribers" %}</a>
      {% if publishers %}
        <button type="button" class="madga-btn madga-btn--sm madga-btn--primary" data-madga-drawer-open="new-broadcast">{% studio_icon "send" size=12 stroke=2 %} {% trans "New broadcast" %}</button>
      {% endif %}
    </div>
  </div>

  {% if not publishers %}
    <div class="madga-card" style="padding:18px; margin-bottom:18px; border-left:3px solid var(--accent);">
      <strong>{% trans "No publishers configured." %}</strong>
      <p class="madga-field-help" style="margin-top:6px;">{% blocktrans %}Set <code>DEFAULT_FROM_EMAIL</code> for the built-in email publisher, or register custom publishers (LinkedIn, Twitter, …) from your host project via <code>@register_publisher</code>.{% endblocktrans %}</p>
    </div>
  {% endif %}

  <div class="madga-card" style="padding:0;">
    <table class="madga-table">
      <thead>
        <tr>
          <th>{% trans "Subject" %}</th>
          <th>{% trans "Publisher" %}</th>
          <th>{% trans "Targets" %}</th>
          <th>{% trans "Status" %}</th>
          <th>{% trans "When" %}</th>
          <th class="col-actions"></th>
        </tr>
      </thead>
      <tbody>
        {% for job in jobs %}
        <tr>
          <td>
            <div class="madga-post-cell">
              <div class="madga-post-title-stack">
                <div class="madga-post-title">{{ job.subject|truncatechars:60 }}</div>
                {% if job.related_url %}<a class="madga-post-slug" href="{{ job.related_url }}" target="_blank" rel="noopener">{{ job.related_url }}</a>{% endif %}
              </div>
            </div>
          </td>
          <td>{{ job.publisher_key }}</td>
          <td style="font-variant-numeric:tabular-nums;">
            <strong>{{ job.sent_count }}</strong>
            {% if job.failed_count %}<span style="color:#dc2626;"> + {{ job.failed_count }} {% trans "failed" %}</span>{% endif %}
            <span style="color:var(--fg-3);">/ {{ job.targets_count }}</span>
          </td>
          <td>{% studio_badge job.status job.get_status_display %}</td>
          <td style="color:var(--fg-2); font-size:12px;">
            {% if job.finished_at %}{{ job.finished_at|naturaltime }}{% elif job.scheduled_at %}{% blocktrans with when=job.scheduled_at|naturaltime %}scheduled {{ when }}{% endblocktrans %}{% else %}{{ job.created_at|naturaltime }}{% endif %}
          </td>
          <td class="col-actions">
            <div style="display:flex; gap:4px; justify-content:flex-end;">
              {% if job.status == 'failed' or job.status == 'partial' %}
                <form method="post" action="{% url 'madga_studio:broadcast_retry' pk=job.pk %}" style="margin:0;">{% csrf_token %}
                  <button type="submit" class="madga-btn madga-btn--ghost madga-btn--sm" title="{% trans 'Retry' %}">{% studio_icon "refresh-cw" size=12 stroke=2 %} {% trans "Retry" %}</button>
                </form>
              {% endif %}
              {% if job.status == 'pending' %}
                <form method="post" action="{% url 'madga_studio:broadcast_cancel' pk=job.pk %}" style="margin:0;">{% csrf_token %}
                  <button type="submit" class="madga-btn madga-btn--ghost madga-btn--sm madga-btn--danger" data-madga-confirm="{% trans 'Cancel this pending broadcast?' %}" title="{% trans 'Cancel' %}">{% studio_icon "x" size=12 stroke=2 %}</button>
                </form>
              {% endif %}
            </div>
          </td>
        </tr>
        {% empty %}
        <tr><td colspan="6">{% studio_empty title=_("No broadcasts yet") message=_("When you publish a post and pick \"Broadcast\", it'll show up here.") %}</td></tr>
        {% endfor %}
      </tbody>
    </table>
  </div>

  {% if page_obj.paginator.num_pages > 1 %}
    {% include "madga/studio/components/pagination.html" with page_obj=page_obj %}
  {% endif %}
</div>

{% if publishers %}
  {# Standalone broadcast — not tied to a post. #}
  <div class="madga-drawer" data-madga-drawer="new-broadcast" hidden>
    <div class="madga-drawer-backdrop" data-madga-drawer-close></div>
    <aside class="madga-drawer-panel">
      <header class="madga-drawer-head">
        <div>
          <h2 style="margin:0; font-size:16px; font-weight:600;">{% trans "New broadcast" %}</h2>
          <p style="margin:4px 0 0; color:var(--fg-2); font-size:12.5px;">{% trans "Send a standalone announcement to your audience — not tied to a post." %}</p>
        </div>
        <button type="button" class="madga-icon-btn" data-madga-drawer-close aria-label="{% trans 'Close' %}">{% studio_icon "x" size=16 stroke=2 %}</button>
      </header>
      <form method="post" action="{% url 'madga_studio:broadcast_create' %}" class="madga-drawer-body">
        {% csrf_token %}
        <div class="madga-field">
          <label class="madga-field-label">{% trans "Subject" %}</label>
          <input class="madga-input" type="text" name="subject" required placeholder="{% trans 'e.g. New feature released' %}">
        </div>
        <div class="madga-field">
          <label class="madga-field-label">{% trans "Message" %}</label>
          <textarea class="madga-textarea" name="body_html" rows="8" placeholder="{% trans 'You can use basic HTML here.' %}"></textarea>
          <span class="madga-field-help">{% trans "Plain text fallback is generated automatically." %}</span>
        </div>
        <div class="madga-field">
          <label class="madga-field-label">{% trans "Publishers" %}</label>
          <div style="display:flex; flex-direction:column; gap:8px;">
            {% for p in publishers %}
              <label style="display:flex; align-items:flex-start; gap:10px; padding:10px 12px; border:1px solid var(--border); border-radius:8px; cursor:pointer;">
                <input type="checkbox" name="publisher_keys" value="{{ p.key }}" {% if forloop.first %}checked{% endif %} style="margin-top:3px;">
                <div style="flex:1; min-width:0;">
                  <div style="font-weight:500; color:var(--fg-0); font-size:13px;">
                    {% if p.icon %}{% studio_icon p.icon size=12 stroke=2 %} {% endif %}{{ p.label }}
                  </div>
                  {% if p.description %}<div style="color:var(--fg-2); font-size:11.5px; margin-top:2px;">{{ p.description }}</div>{% endif %}
                </div>
              </label>
            {% endfor %}
          </div>
        </div>
        <div class="madga-field">
          <label class="madga-field-label">{% trans "Schedule (optional)" %}</label>
          <input class="madga-input" type="datetime-local" name="scheduled_at">
          <span class="madga-field-help">{% trans "Leave empty to send immediately." %}</span>
        </div>
        <div style="display:flex; gap:8px;">
          <button type="submit" class="madga-btn madga-btn--primary" style="flex:1;">{% studio_icon "send" size=12 stroke=2 %} {% trans "Send broadcast" %}</button>
          <button type="button" class="madga-btn" data-madga-drawer-close>{% trans "Cancel" %}</button>
        </div>
      </form>
    </aside>
  </div>

  <style>
    .madga-drawer { position: fixed; inset: 0; z-index: 80; }
    .madga-drawer[hidden] { display: none; }
    .madga-drawer-backdrop { position:absolute; inset:0; background: rgba(0,0,0,.32); }
    .madga-drawer-panel { position:absolute; top:0; right:0; bottom:0; width: min(420px, 100vw); background: var(--bg-1); border-left:1px solid var(--border); box-shadow: var(--shadow-lg); display:flex; flex-direction:column; overflow-y:auto; }
    .madga-drawer-head { padding:18px 22px; display:flex; align-items:flex-start; gap:12px; border-bottom:1px solid var(--border); }
    .madga-drawer-body { padding:18px 22px; display:flex; flex-direction:column; gap:14px; }
  </style>
  <script>
  (function () {
    document.addEventListener('click', function (e) {
      const o = e.target.closest('[data-madga-drawer-open]');
      if (o) { const n = o.dataset.madgaDrawerOpen; const el = document.querySelector('[data-madga-drawer="' + n + '"]'); if (el) el.hidden = false; return; }
      const c = e.target.closest('[data-madga-drawer-close]');
      if (c) { const el = c.closest('[data-madga-drawer]'); if (el) el.hidden = true; }
    });
    document.addEventListener('keydown', e => { if (e.key === 'Escape') document.querySelectorAll('[data-madga-drawer]').forEach(el => el.hidden = true); });
  })();
  </script>
{% endif %}
{% endblock %}