{% extends "base.html" %}
{% block title %}Final Delivery{% endblock %}
{% block page_id %}final-delivery{% endblock %}
{% block page_title %}Final Delivery{% endblock %}
{% block eyebrow %}Delivery{% endblock %}

{% block head %}
<style>
    .fd-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:24px; }
    .fd-stat  { background:#fff; border:1.5px solid #e2e8f0; border-radius:14px; padding:18px 20px; }
    .fd-stat-label { font-size:12px; font-weight:700; color:#64748b; text-transform:uppercase; letter-spacing:.5px; margin-bottom:6px; }
    .fd-stat-val   { font-size:32px; font-weight:800; color:#0f2b3d; line-height:1; }
    .fd-stat-sub   { font-size:12px; color:#94a3b8; margin-top:4px; }

    .fd-cards { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:20px; }
    .fd-card  { background:#fff; border:1.5px solid #e2e8f0; border-radius:16px; overflow:hidden; }
    .fd-card-hdr { padding:16px 20px; display:flex; align-items:center; gap:12px; border-bottom:1px solid #f1f5f9; }
    .fd-card-icon { width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:22px; flex-shrink:0; }
    .fd-card-icon.email { background:#dbeafe; }
    .fd-card-icon.wa    { background:#dcfce7; }
    .fd-card-title { font-size:15px; font-weight:700; color:#0f2b3d; }
    .fd-card-sub   { font-size:12px; color:#64748b; margin-top:2px; }
    .fd-card-body  { padding:18px 20px; }

    /* Template status badges */
    .fd-tpl-status { display:inline-flex; align-items:center; gap:6px; padding:5px 12px;
                     border-radius:20px; font-size:12px; font-weight:700; margin-bottom:14px; }
    .fd-tpl-status.ok      { background:#d1fae5; color:#065f46; }
    .fd-tpl-status.missing { background:#fef3c7; color:#92400e; }

    .fd-trigger-btn { width:100%; padding:13px; border:none; border-radius:12px; font-size:14px; font-weight:700; cursor:pointer; transition:all .2s; display:flex; align-items:center; justify-content:center; gap:8px; }
    .fd-trigger-btn.email { background:linear-gradient(135deg,#2c7da0,#1a5f7a); color:#fff; }
    .fd-trigger-btn.email:hover { background:linear-gradient(135deg,#1a5f7a,#0f3a47); }
    .fd-trigger-btn.wa    { background:linear-gradient(135deg,#16a34a,#15803d); color:#fff; }
    .fd-trigger-btn.wa:hover { background:linear-gradient(135deg,#15803d,#14532d); }
    .fd-trigger-btn:disabled { opacity:.5; cursor:not-allowed; }

    .fd-result { margin-top:14px; padding:14px; border-radius:10px; font-size:13px; border:1px solid #e2e8f0; display:none; line-height:1.7; }
    .fd-result.active  { display:block; }
    .fd-result.running { border-color:#bfdbfe; background:#eff6ff; color:#1d4ed8; }
    .fd-result.success { border-color:#bbf7d0; background:#f0fdf4; color:#166534; }
    .fd-result.error   { border-color:#fecaca; background:#fef2f2; color:#991b1b; }
    .fd-spinner { display:inline-block; width:14px; height:14px; border:2px solid currentColor; border-top-color:transparent; border-radius:50%; animation:spin .7s linear infinite; margin-right:6px; vertical-align:middle; }
    @keyframes spin { to { transform:rotate(360deg); } }

    /* Proceed confirm modal */
    .fd-modal { display:none; position:fixed; inset:0; background:rgba(15,23,42,.7); backdrop-filter:blur(5px); z-index:3000; align-items:center; justify-content:center; padding:20px; }
    .fd-modal.active { display:flex; }
    .fd-modal-box { background:#fff; border-radius:16px; width:100%; max-width:420px; overflow:hidden; box-shadow:0 25px 60px rgba(0,0,0,.3); animation:fdIn .2s ease; }
    @keyframes fdIn { from{opacity:0;transform:scale(.95);}to{opacity:1;transform:scale(1);} }
    .fd-modal-hdr { padding:16px 20px; background:#f59e0b; display:flex; align-items:center; gap:10px; }
    .fd-modal-hdr h3 { color:#fff; margin:0; font-size:15px; font-weight:700; }
    .fd-modal-body { padding:20px; }
    .fd-modal-warn { background:#fef3c7; border:1.5px solid #fcd34d; border-radius:10px; padding:14px; font-size:13px; color:#78350f; line-height:1.7; margin-bottom:16px; }
    .fd-modal-btns { display:flex; gap:10px; }
    .fd-modal-cancel  { flex:1; padding:12px; background:#f1f5f9; color:#334155; border:1.5px solid #cbd5e1; border-radius:10px; font-size:14px; font-weight:600; cursor:pointer; }
    .fd-modal-proceed { flex:1; padding:12px; background:#f59e0b; color:#fff; border:none; border-radius:10px; font-size:14px; font-weight:700; cursor:pointer; }
    .fd-modal-proceed:hover { background:#d97706; }

    /* Summary modal */
    .fd-summary-modal { display:none; position:fixed; inset:0; background:rgba(15,23,42,.75); backdrop-filter:blur(5px); z-index:4000; align-items:center; justify-content:center; padding:20px; }
    .fd-summary-modal.active { display:flex; }
    .fd-summary-box { background:#fff; border-radius:16px; width:100%; max-width:700px; max-height:88vh; overflow:hidden; display:flex; flex-direction:column; box-shadow:0 25px 60px rgba(0,0,0,.3); }
    .fd-summary-hdr { padding:16px 20px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid #e2e8f0; }
    .fd-summary-hdr h3 { margin:0; font-size:16px; font-weight:700; color:#0f2b3d; }
    .fd-summary-hdr button { background:#f1f5f9; border:1.5px solid #cbd5e1; color:#334155; width:32px; height:32px; border-radius:8px; font-size:16px; cursor:pointer; }
    .fd-summary-stats { display:flex; gap:12px; padding:14px 20px; border-bottom:1px solid #f1f5f9; flex-wrap:wrap; }
    .fd-sstat { padding:8px 16px; border-radius:20px; font-size:13px; font-weight:700; }
    .fd-sstat.sent     { background:#d1fae5; color:#065f46; }
    .fd-sstat.failed   { background:#fee2e2; color:#991b1b; }
    .fd-sstat.nophone  { background:#fef3c7; color:#92400e; }
    .fd-sstat.template { background:#dbeafe; color:#1e40af; }
    .fd-summary-table-wrap { overflow-y:auto; flex:1; }
    .fd-summary-table { width:100%; border-collapse:collapse; font-size:13px; }
    .fd-summary-table th { padding:10px 16px; background:#f8fafc; text-align:left; font-size:11px; font-weight:700; color:#475569; text-transform:uppercase; border-bottom:2px solid #e2e8f0; position:sticky; top:0; }
    .fd-summary-table td { padding:10px 16px; border-bottom:1px solid #f8fafc; color:#334155; }
    .fd-summary-table tbody tr:last-child td { border-bottom:none; }
    .fd-summary-table tbody tr:hover td { background:#f8fafc; }
    .status-sent   { color:#16a34a; font-weight:700; }
    .status-failed { color:#dc2626; font-weight:700; }
    .status-warn   { color:#d97706; font-weight:700; }

    /* Last job */
    .fd-last-job { background:#fff; border:1.5px solid #e2e8f0; border-radius:14px; padding:18px 20px; }
    .fd-last-job-title { font-size:14px; font-weight:700; color:#0f2b3d; margin-bottom:12px; display:flex; align-items:center; justify-content:space-between; }
    .fd-view-summary-btn { padding:5px 14px; background:#f1f5f9; border:1.5px solid #cbd5e1; border-radius:8px; font-size:12px; font-weight:700; color:#334155; cursor:pointer; }
    .fd-view-summary-btn:hover { background:#dbeafe; border-color:#93c5fd; color:#1d4ed8; }
    .fd-job-row  { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:6px; }
    .fd-job-badge { padding:3px 10px; border-radius:20px; font-size:12px; font-weight:700; }
    .fd-job-badge.completed { background:#d1fae5; color:#065f46; }
    .fd-job-badge.running   { background:#dbeafe; color:#1d4ed8; }
    .fd-job-badge.failed    { background:#fee2e2; color:#991b1b; }

    @media (max-width:768px) {
        .fd-stats { grid-template-columns:1fr 1fr; }
        .fd-cards { grid-template-columns:1fr; }
    }
    @media (max-width:480px) { .fd-stats { grid-template-columns:1fr; } }

    /* ── Tabs ─────────────────────────────────────────────────────────── */
    .fd-tabs { display:flex; gap:8px; margin-bottom:22px; border-bottom:1.5px solid #e2e8f0; }
    .fd-tab  { padding:11px 4px; margin-bottom:-1.5px; border:none; background:none; cursor:pointer;
               font-size:14px; font-weight:700; color:#64748b; border-bottom:2.5px solid transparent; }
    .fd-tab.active { color:#0f2b3d; border-bottom-color:#2c7da0; }
    .fd-tab .fd-tab-badge { display:inline-block; margin-left:6px; padding:1px 8px; border-radius:20px;
                             background:#f1f5f9; color:#475569; font-size:11px; }
    .fd-tab.active .fd-tab-badge { background:#e0f2fe; color:#0369a1; }
    .fd-tab-pane { display:none; }
    .fd-tab-pane.active { display:block; }

    /* ── Not-Matched tab ──────────────────────────────────────────────── */
    .fd-note { background:#eff6ff; border:1.5px solid #bfdbfe; border-radius:12px; padding:14px 16px;
               font-size:13px; color:#1d4ed8; line-height:1.6; margin-bottom:18px; }
    .fd-um-table-wrap { border:1.5px solid #e2e8f0; border-radius:14px; overflow:hidden; margin-top:18px; }
    .fd-um-table { width:100%; border-collapse:collapse; font-size:13px; }
    .fd-um-table th { padding:10px 16px; background:#f8fafc; text-align:left; font-size:11px; font-weight:700;
                       color:#475569; text-transform:uppercase; border-bottom:1.5px solid #e2e8f0; }
    .fd-um-table td { padding:10px 16px; border-bottom:1px solid #f1f5f9; color:#334155; vertical-align:middle; }
    .fd-um-table tbody tr:last-child td { border-bottom:none; }
    .fd-um-avatar { width:32px; height:32px; border-radius:50%; object-fit:cover; background:#e2e8f0; vertical-align:middle; margin-right:8px; }
    .fd-um-empty  { padding:32px 16px; text-align:center; color:#94a3b8; font-size:13px; }
</style>
{% endblock %}

{% block content %}
<section class="panel-stack">
  <article class="glass-card panel-card">
    <div class="panel-header">
      <div><p class="eyebrow">Delivery</p><h3>Final Delivery</h3></div>
      <span class="pill" id="jobStatusPill">Idle</span>
    </div>

    <div class="panel-body">

      <!-- Tabs -->
      <div class="fd-tabs">
        <button class="fd-tab active" id="tabBtnMatched" onclick="switchTab('matched')">
          ✅ Matched Visitors
        </button>
        <button class="fd-tab" id="tabBtnUnmatched" onclick="switchTab('unmatched')">
          🔍 Not Matched <span class="fd-tab-badge">{{ unmatched_count }}</span>
        </button>
      </div>

      <!-- ══════════════════ MATCHED TAB (existing, unchanged) ══════════════════ -->
      <div id="tabMatched" class="fd-tab-pane active">

      <!-- Stats -->
      <div class="fd-stats">
        <div class="fd-stat">
          <div class="fd-stat-label">📧 Email Ready</div>
          <div class="fd-stat-val">{{ matched_email }}</div>
          <div class="fd-stat-sub">matched users with email</div>
        </div>
        <div class="fd-stat">
          <div class="fd-stat-label">💬 WhatsApp Ready</div>
          <div class="fd-stat-val">{{ matched_wa }}</div>
          <div class="fd-stat-sub">matched users with mobile</div>
        </div>
        <div class="fd-stat">
          <div class="fd-stat-label">✅ Previous Runs</div>
          <div class="fd-stat-val">{{ prev_runs }}</div>
          <div class="fd-stat-sub">completed delivery jobs</div>
        </div>
      </div>

      <!-- Action Cards -->
      <div class="fd-cards">

        <!-- Email -->
        <div class="fd-card">
          <div class="fd-card-hdr">
            <div class="fd-card-icon email">📧</div>
            <div>
              <div class="fd-card-title">Send Emails</div>
              <div class="fd-card-sub">Gallery links to all {{ matched_email }} matched users</div>
            </div>
          </div>
          <div class="fd-card-body">
            {% if email_tpl.has_template %}
            <div class="fd-tpl-status ok">✅ Template ready — "{{ email_tpl.subject[:45] }}..."</div>
            {% else %}
            <div class="fd-tpl-status missing">⚠️ No email template set — will use default</div>
            {% endif %}
            <button class="fd-trigger-btn email" id="emailBtn" onclick="clickEmail()">
              📧 Send Email to All
            </button>
            <div class="fd-result" id="emailResult"></div>
          </div>
        </div>

        <!-- WhatsApp -->
        <div class="fd-card">
          <div class="fd-card-hdr">
            <div class="fd-card-icon wa">💬</div>
            <div>
              <div class="fd-card-title">Send WhatsApp</div>
              <div class="fd-card-sub">Gallery links to all {{ matched_wa }} matched users</div>
            </div>
          </div>
          <div class="fd-card-body">
            {% if wa_tpl.has_template %}
            <div class="fd-tpl-status ok">✅ Template ready — {{ wa_tpl.template_name }}</div>
            {% else %}
            <div class="fd-tpl-status missing">⚠️ No WA template set — will use default ({{ 'event_gallery_link' }})</div>
            {% endif %}
            <button class="fd-trigger-btn wa" id="waBtn" onclick="clickWA()">
              💬 Send WhatsApp to All
            </button>
            <div class="fd-result" id="waResult"></div>
          </div>
        </div>

      </div>

      <!-- Last Job Panel -->
      <div class="fd-last-job">
        <div class="fd-last-job-title">
          Last Delivery Job
          <button class="fd-view-summary-btn" id="viewSummaryBtn"
                  style="display:none;" onclick="showSummary()">
            📋 View Summary
          </button>
        </div>
        <div id="lastJobContent">
          {% if last_job %}
          <div class="fd-job-row">
            <span class="fd-job-badge {{ last_job.status }}">{{ last_job.status | upper }}</span>
            {% if last_job.started_at %}<span style="font-size:12px;color:#64748b;">Started: {{ last_job.started_at[:19] }}</span>{% endif %}
            {% if last_job.completed_at %}<span style="font-size:12px;color:#64748b;">Finished: {{ last_job.completed_at[:19] }}</span>{% endif %}
          </div>
            {% if last_job.result %}{% set r = last_job.result %}
            {% if r.type == 'email' %}
            <p style="font-size:13px;color:#475569;margin:8px 0 0;">
              📧 Sent: <strong>{{ r.emails_sent or 0 }}</strong> · Failed: {{ r.emails_failed or 0 }}
              · Template: <code style="background:#f1f5f9;padding:1px 6px;border-radius:4px;">{{ r.template_used or 'Default' }}</code>
            </p>
            {% elif r.type == 'whatsapp' %}
            <p style="font-size:13px;color:#475569;margin:8px 0 0;">
              💬 Sent: <strong>{{ r.wa_sent or 0 }}</strong> · Failed: {{ r.wa_failed or 0 }} · No phone: {{ r.wa_no_phone or 0 }}
              · Template: <code style="background:#f1f5f9;padding:1px 6px;border-radius:4px;">{{ r.template_used or 'event_gallery_link' }}</code>
            </p>
            {% elif r.type == 'browse_all_email' %}
            <p style="font-size:13px;color:#475569;margin:8px 0 0;">
              📧 Browse-All Email — Sent: <strong>{{ r.emails_sent or 0 }}</strong> · Failed: {{ r.emails_failed or 0 }} · Skipped: {{ r.emails_skipped or 0 }}
            </p>
            {% elif r.type == 'browse_all_whatsapp' %}
            <p style="font-size:13px;color:#475569;margin:8px 0 0;">
              💬 Browse-All WhatsApp — Sent: <strong>{{ r.wa_sent or 0 }}</strong> · Failed: {{ r.wa_failed or 0 }} · No phone: {{ r.wa_no_phone or 0 }}
            </p>
            {% endif %}
          {% endif %}
          {% else %}
          <p style="font-size:13px;color:#94a3b8;margin:0;">No delivery jobs run yet.</p>
          {% endif %}
        </div>
      </div>

      </div>
      <!-- ══════════════════ /MATCHED TAB ══════════════════ -->

      <!-- ══════════════════ NOT-MATCHED TAB (new) ══════════════════ -->
      <div id="tabUnmatched" class="fd-tab-pane">

        <div class="fd-note">
          These visitors registered a face but our AI never matched them to any uploaded photo.
          Sending them the gallery link lets them browse <strong>every</strong> event photo themselves.
          WhatsApp reuses your existing approved template (Meta doesn't allow custom wording without
          separate approval) — email can have fully distinct wording, editable on the
          <a href="{{ url_for('admin.email_templates_page') }}" style="color:#1d4ed8;font-weight:700;">Email Templates</a> page
          under "Browse All Photos - Email".
        </div>

        <div class="fd-stats" style="grid-template-columns:1fr;">
          <div class="fd-stat">
            <div class="fd-stat-label">🔍 Not Matched</div>
            <div class="fd-stat-val">{{ unmatched_count }}</div>
            <div class="fd-stat-sub">visitors with a registered face but 0 photo matches</div>
          </div>
        </div>

        <div class="fd-cards">
          <!-- Browse-All Email -->
          <div class="fd-card">
            <div class="fd-card-hdr">
              <div class="fd-card-icon email">📧</div>
              <div>
                <div class="fd-card-title">Send "Browse All Photos" Email</div>
                <div class="fd-card-sub">Distinct message to all {{ unmatched_count }} not-matched visitors</div>
              </div>
            </div>
            <div class="fd-card-body">
              {% if browse_email_tpl.has_template %}
              <div class="fd-tpl-status ok">✅ Template ready — "{{ browse_email_tpl.subject[:45] }}"</div>
              {% else %}
              <div class="fd-tpl-status missing">⚠️ Template inactive — will use built-in default</div>
              {% endif %}
              <button class="fd-trigger-btn email" id="umEmailBtn" onclick="startBrowseAllEmail()" {% if unmatched_count == 0 %}disabled{% endif %}>
                📧 Send to All Not-Matched
              </button>
              <div class="fd-result" id="umEmailResult"></div>
            </div>
          </div>

          <!-- Browse-All WhatsApp -->
          <div class="fd-card">
            <div class="fd-card-hdr">
              <div class="fd-card-icon wa">💬</div>
              <div>
                <div class="fd-card-title">Send "Browse All Photos" WhatsApp</div>
                <div class="fd-card-sub">Same approved template, sent only to not-matched visitors</div>
              </div>
            </div>
            <div class="fd-card-body">
              <div class="fd-tpl-status ok">ℹ️ Uses your active WhatsApp template (same as matched-visitor send)</div>
              <button class="fd-trigger-btn wa" id="umWaBtn" onclick="startBrowseAllWA()" {% if unmatched_count == 0 %}disabled{% endif %}>
                💬 Send to All Not-Matched
              </button>
              <div class="fd-result" id="umWaResult"></div>
            </div>
          </div>
        </div>

        <!-- Visitor list -->
        <div class="fd-um-table-wrap">
          {% if unmatched_visitors %}
          <table class="fd-um-table">
            <thead>
              <tr><th>Visitor</th><th>Email</th><th>Phone</th><th>Registered</th></tr>
            </thead>
            <tbody>
              {% for v in unmatched_visitors %}
              <tr>
                <td>
                  {% if v.s3_image_url %}<img class="fd-um-avatar" src="{{ v.s3_image_url }}" alt="">{% endif %}
                  {{ v.name or '—' }}
                </td>
                <td>{{ v.email or '—' }}</td>
                <td>{{ v.phone or '—' }}</td>
                <td>{{ v.created_at.strftime('%d %b %Y, %H:%M') if v.created_at else '—' }}</td>
              </tr>
              {% endfor %}
            </tbody>
          </table>
          {% else %}
          <div class="fd-um-empty">🎉 Everyone with a registered face has been matched to at least one photo.</div>
          {% endif %}
        </div>

      </div>
      <!-- ══════════════════ /NOT-MATCHED TAB ══════════════════ -->

    </div>
  </article>
</section>

<!-- Proceed Without Template Modal -->
<div id="proceedModal" class="fd-modal">
  <div class="fd-modal-box">
    <div class="fd-modal-hdr">
      <span style="font-size:20px;">⚠️</span>
      <h3>No Template Configured</h3>
    </div>
    <div class="fd-modal-body">
      <div class="fd-modal-warn" id="proceedModalText"></div>
      <div class="fd-modal-btns">
        <button class="fd-modal-cancel" onclick="closeProceedModal()">Cancel</button>
        <button class="fd-modal-proceed" id="proceedBtn" onclick="proceedSend()">
          Proceed with Default
        </button>
      </div>
    </div>
  </div>
</div>

<!-- Summary Modal -->
<div id="summaryModal" class="fd-summary-modal">
  <div class="fd-summary-box">
    <div class="fd-summary-hdr">
      <h3 id="summaryTitle">Delivery Summary</h3>
      <button onclick="closeSummary()">&times;</button>
    </div>
    <div class="fd-summary-stats" id="summaryStats"></div>
    <div class="fd-summary-table-wrap">
      <table class="fd-summary-table">
        <thead>
          <tr>
            <th>#</th>
            <th>Name</th>
            <th id="summaryContactHeader">Email / Mobile</th>
            <th>Status</th>
          </tr>
        </thead>
        <tbody id="summaryTableBody"></tbody>
      </table>
    </div>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script>
  let _pendingType = null;  // 'email' or 'whatsapp'
  let _lastResult  = null;

  // ── Tabs ────────────────────────────────────────────────────────────
  function switchTab(tab) {
      document.getElementById('tabMatched').classList.toggle('active', tab === 'matched');
      document.getElementById('tabUnmatched').classList.toggle('active', tab === 'unmatched');
      document.getElementById('tabBtnMatched').classList.toggle('active', tab === 'matched');
      document.getElementById('tabBtnUnmatched').classList.toggle('active', tab === 'unmatched');
  }

  // ── Browse-All Email send (not-matched visitors) ───────────────────
  async function startBrowseAllEmail() {
      const btn = document.getElementById('umEmailBtn');
      const res = document.getElementById('umEmailResult');
      btn.disabled = true;
      setResult(res,'running','<span class="fd-spinner"></span> Sending "browse all photos" email...');
      try {
          const r    = await fetch('/admin/api/final-delivery/send-browse-all-emails', {
              method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({})
          });
          const data = await r.json();
          if (data.status === 'started') {
              pollStatus('browse_all_email', btn, res);
          } else {
              setResult(res,'error','❌ ' + (data.message||'Failed to start'));
              btn.disabled = false;
          }
      } catch(e) { setResult(res,'error','❌ Network error'); btn.disabled = false; }
  }

  // ── Browse-All WhatsApp send (not-matched visitors) ─────────────────
  async function startBrowseAllWA() {
      const btn = document.getElementById('umWaBtn');
      const res = document.getElementById('umWaResult');
      btn.disabled = true;
      setResult(res,'running','<span class="fd-spinner"></span> Sending "browse all photos" WhatsApp...');
      try {
          const r    = await fetch('/admin/api/final-delivery/send-browse-all-whatsapp', {
              method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({})
          });
          const data = await r.json();
          if (data.status === 'started') {
              pollStatus('browse_all_whatsapp', btn, res);
          } else {
              setResult(res,'error','❌ ' + (data.message||'Failed to start'));
              btn.disabled = false;
          }
      } catch(e) { setResult(res,'error','❌ Network error'); btn.disabled = false; }
  }

  // ── Button clicks — check template first ──────────────────────────
  function clickEmail() {
      {% if not email_tpl.has_template %}
      _pendingType = 'email';
      document.getElementById('proceedModalText').innerHTML =
          `<strong>No email template is set in the database.</strong><br><br>
           The system will use the <strong>built-in default template</strong> to send emails.<br>
           You can set a custom template in the <em>email_templates</em> table first, or proceed now.`;
      document.getElementById('proceedModal').classList.add('active');
      {% else %}
      startEmail(false);
      {% endif %}
  }

  function clickWA() {
      {% if not wa_tpl.has_template %}
      _pendingType = 'whatsapp';
      document.getElementById('proceedModalText').innerHTML =
          `<strong>No WhatsApp template name is set in the database.</strong><br><br>
           The system will use the default template <strong>event_gallery_link</strong> with token <strong>IMT365MA</strong>.<br>
           You can set a custom template in the <em>email_templates</em> table first, or proceed now.`;
      document.getElementById('proceedModal').classList.add('active');
      {% else %}
      startWA(false);
      {% endif %}
  }

  function closeProceedModal() {
      document.getElementById('proceedModal').classList.remove('active');
      _pendingType = null;
  }

  function proceedSend() {
      closeProceedModal();
      if (_pendingType === 'email')     startEmail(true);
      else if (_pendingType === 'whatsapp') startWA(true);
  }

  // ── Email send ─────────────────────────────────────────────────────
  async function startEmail(force) {
      const btn = document.getElementById('emailBtn');
      const res = document.getElementById('emailResult');
      btn.disabled = true;
      setResult(res,'running','<span class="fd-spinner"></span> Sending emails to all matched users...');
      try {
          const r    = await fetch('/admin/api/final-delivery/send-emails', {
              method:'POST', headers:{'Content-Type':'application/json'},
              body: JSON.stringify({force})
          });
          const data = await r.json();
          if (data.status === 'started') {
              if (data.using_fallback) {
                  setResult(res,'running','<span class="fd-spinner"></span> Sending using built-in template...');
              }
              pollStatus('email', btn, res);
          } else {
              setResult(res,'error','❌ ' + (data.message||'Failed to start'));
              btn.disabled = false;
          }
      } catch(e) { setResult(res,'error','❌ Network error'); btn.disabled = false; }
  }

  // ── WhatsApp send ──────────────────────────────────────────────────
  async function startWA(force) {
      const btn = document.getElementById('waBtn');
      const res = document.getElementById('waResult');
      btn.disabled = true;
      setResult(res,'running','<span class="fd-spinner"></span> Sending WhatsApp to all matched users...');
      try {
          const r    = await fetch('/admin/api/final-delivery/send-whatsapp', {
              method:'POST', headers:{'Content-Type':'application/json'},
              body: JSON.stringify({force})
          });
          const data = await r.json();
          if (data.status === 'started') {
              pollStatus('whatsapp', btn, res);
          } else {
              setResult(res,'error','❌ ' + (data.message||'Failed to start'));
              btn.disabled = false;
          }
      } catch(e) { setResult(res,'error','❌ Network error'); btn.disabled = false; }
  }

  // ── Poll status ────────────────────────────────────────────────────
  function pollStatus(type, btn, resultEl) {
      const iv = setInterval(async () => {
          try {
              const r    = await fetch('/admin/api/final-delivery/status');
              const data = await r.json();

              if (data.status === 'completed') {
                  clearInterval(iv); btn.disabled = false;
                  _lastResult = data;
                  const result = data.result || {};

                  if (type === 'email' || type === 'browse_all_email') {
                      const skippedTxt = result.emails_skipped ? ` · Skipped: ${result.emails_skipped}` : '';
                      setResult(resultEl,'success',
                          `✅ Done! Sent: <strong>${result.emails_sent||0}</strong> · Failed: ${result.emails_failed||0}${skippedTxt}` +
                          `<br>Template: <strong>${result.template_used||'Default'}</strong>`);
                  } else {
                      const skippedTxt = result.wa_skipped ? ` · Skipped: ${result.wa_skipped}` : '';
                      setResult(resultEl,'success',
                          `✅ Done! Sent: <strong>${result.wa_sent||0}</strong> · Failed: ${result.wa_failed||0} · No phone: ${result.wa_no_phone||0}${skippedTxt}` +
                          `<br>Template: <strong>${result.template_used||'event_gallery_link'}</strong>`);
                  }
                  updateJobPanel(data);
                  updatePill('Idle');
                  // Show summary button (only meaningful when the Matched tab's shared panel is visible)
                  document.getElementById('viewSummaryBtn').style.display = 'inline-flex';

              } else if (data.status === 'failed') {
                  clearInterval(iv); btn.disabled = false;
                  setResult(resultEl,'error','❌ Failed: ' + (data.result?.error||'Unknown error'));
                  updatePill('Failed');
              } else if (data.status === 'running') {
                  updatePill('Running...');
              }
          } catch(e) { /* ignore poll errors */ }
      }, 2000);
  }

  // ── Summary modal ──────────────────────────────────────────────────
  function showSummary() {
      if (!_lastResult) return;
      const result = _lastResult.result || {};
      const type   = result.type;
      const summary = result.summary || [];

      const isEmailShaped = (type === 'email' || type === 'browse_all_email');
      const titles = {
          email: '📧 Email Delivery Summary',
          browse_all_email: '📧 Browse-All Email Summary',
          whatsapp: '💬 WhatsApp Delivery Summary',
          browse_all_whatsapp: '💬 Browse-All WhatsApp Summary',
      };
      document.getElementById('summaryTitle').textContent = titles[type] || 'Delivery Summary';

      // Stats row
      let statsHtml = '';
      if (isEmailShaped) {
          statsHtml = `
              <span class="fd-sstat sent">✅ Sent: ${result.emails_sent||0}</span>
              <span class="fd-sstat failed">❌ Failed: ${result.emails_failed||0}</span>
              ${result.emails_skipped ? `<span class="fd-sstat nophone">⏭️ Skipped: ${result.emails_skipped}</span>` : ''}
              <span class="fd-sstat template">Template: ${result.template_used||'Default'}</span>`;
      } else {
          statsHtml = `
              <span class="fd-sstat sent">✅ Sent: ${result.wa_sent||0}</span>
              <span class="fd-sstat failed">❌ Failed: ${result.wa_failed||0}</span>
              <span class="fd-sstat nophone">⚠️ No phone: ${result.wa_no_phone||0}</span>
              ${result.wa_skipped ? `<span class="fd-sstat nophone">⏭️ Skipped: ${result.wa_skipped}</span>` : ''}
              <span class="fd-sstat template">Template: ${result.template_used||'event_gallery_link'}</span>`;
      }
      document.getElementById('summaryStats').innerHTML = statsHtml;
      document.getElementById('summaryContactHeader').textContent =
          isEmailShaped ? 'Email' : 'Mobile';

      // Table rows
      const tbody = document.getElementById('summaryTableBody');
      tbody.innerHTML = summary.map((row, i) => {
          const contact = isEmailShaped ? (row.email||'—') : (row.mobile||'—');
          const status  = row.status || '';
          const cls     = status.startsWith('✅') ? 'status-sent'
                        : status.startsWith('❌') ? 'status-failed'
                        : 'status-warn';
          return `<tr>
              <td style="color:#94a3b8;">${i+1}</td>
              <td style="font-weight:600;">${escHtml(row.name||'—')}</td>
              <td style="font-family:monospace;font-size:12px;">${escHtml(contact)}</td>
              <td class="${cls}">${escHtml(status)}</td>
          </tr>`;
      }).join('');

      document.getElementById('summaryModal').classList.add('active');
  }

  function closeSummary() { document.getElementById('summaryModal').classList.remove('active'); }
  function escHtml(s) { return String(s||'').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;'); }

  // ── Helpers ────────────────────────────────────────────────────────
  function setResult(el, type, html) { el.className='fd-result active '+type; el.innerHTML=html; }
  function updatePill(t) { document.getElementById('jobStatusPill').textContent = t; }

  function updateJobPanel(data) {
      const result = data.result || {};
      const badge  = data.status==='completed'?'completed':data.status==='failed'?'failed':'running';
      let details  = '';
      if (result.type === 'email')
          details = `📧 Sent: <strong>${result.emails_sent||0}</strong> · Failed: ${result.emails_failed||0} · Template: <code style="background:#f1f5f9;padding:1px 6px;border-radius:4px;">${result.template_used||'Default'}</code>`;
      else if (result.type === 'whatsapp')
          details = `💬 Sent: <strong>${result.wa_sent||0}</strong> · Failed: ${result.wa_failed||0} · No phone: ${result.wa_no_phone||0} · Template: <code style="background:#f1f5f9;padding:1px 6px;border-radius:4px;">${result.template_used||'event_gallery_link'}</code>`;
      else if (result.type === 'browse_all_email')
          details = `📧 Browse-All — Sent: <strong>${result.emails_sent||0}</strong> · Failed: ${result.emails_failed||0} · Skipped: ${result.emails_skipped||0}`;
      else if (result.type === 'browse_all_whatsapp')
          details = `💬 Browse-All — Sent: <strong>${result.wa_sent||0}</strong> · Failed: ${result.wa_failed||0} · No phone: ${result.wa_no_phone||0}`;
      document.getElementById('lastJobContent').innerHTML = `
          <div class="fd-job-row">
              <span class="fd-job-badge ${badge}">${data.status.toUpperCase()}</span>
              <span style="font-size:12px;color:#64748b;">${data.completed_at?'Finished: '+data.completed_at.substring(0,19):''}</span>
          </div>
          ${details?`<p style="font-size:13px;color:#475569;margin:8px 0 0;">${details}</p>`:''}`;
      document.getElementById('viewSummaryBtn').style.display = 'inline-flex';
  }

  // Check running on page load
  (async () => {
      try {
          const r    = await fetch('/admin/api/final-delivery/status');
          const data = await r.json();
          if (data.status === 'running') {
              updatePill('Running...');
              document.getElementById('emailBtn').disabled = true;
              document.getElementById('waBtn').disabled    = true;
              document.getElementById('umEmailBtn').disabled = true;
              document.getElementById('umWaBtn').disabled     = true;
              setResult(document.getElementById('emailResult'),'running',
                  '<span class="fd-spinner"></span> A delivery job is running...');
              setResult(document.getElementById('umEmailResult'),'running',
                  '<span class="fd-spinner"></span> A delivery job is running...');
              pollStatus('email', document.getElementById('emailBtn'), document.getElementById('emailResult'));
          } else if (data.status === 'completed' && data.result) {
              _lastResult = data;
              document.getElementById('viewSummaryBtn').style.display = 'inline-flex';
          }
      } catch(e) {}
  })();

  document.addEventListener('keydown', e => {
      if (e.key === 'Escape') { closeProceedModal(); closeSummary(); }
  });
  document.getElementById('proceedModal').addEventListener('click', e => {
      if (e.target === document.getElementById('proceedModal')) closeProceedModal();
  });
  document.getElementById('summaryModal').addEventListener('click', e => {
      if (e.target === document.getElementById('summaryModal')) closeSummary();
  });
</script>
{% endblock %}