{% extends "base.html" %}
{% block title %}Dashboard{% endblock %}

{% block content %}
<div class="page-header">
  <h1>Campaign Dashboard</h1>
  <p>hermit-volunteer-2026 — Zoho Mail via {{ env.get('SMTP_USERNAME', '—') }}</p>
</div>

<div class="page-content">

  <!-- Stat tiles -->
  <div class="stats-grid">
    <div class="stat-tile">
      <div class="num">{{ stats.total }}</div>
      <div class="label">Total Contacts</div>
    </div>
    <div class="stat-tile">
      <div class="num">{{ stats.touch_1_sent }}</div>
      <div class="label">Touch 1 Sent</div>
    </div>
    <div class="stat-tile">
      <div class="num">{{ stats.touch_2_sent }}</div>
      <div class="label">Touch 2 Sent</div>
    </div>
    <div class="stat-tile">
      <div class="num">{{ stats.replied }}</div>
      <div class="label">Replied</div>
    </div>
    <div class="stat-tile">
      <div class="num">{{ stats.pending_t1 }}</div>
      <div class="label">Pending T1</div>
    </div>
    <div class="stat-tile">
      <div class="num">{{ stats.pending_t2 }}</div>
      <div class="label">Pending T2</div>
    </div>
  </div>

  <div style="display:grid;grid-template-columns:1fr 1fr;gap:24px;">

    <!-- Progress -->
    <div class="card">
      <div class="card-header">Campaign Progress</div>
      <div class="card-body">
        {% if stats.total > 0 %}
          {% set pct1 = ((stats.touch_1_sent / stats.total) * 100) | round(1) %}
          {% set pct2 = ((stats.touch_2_sent / stats.total) * 100) | round(1) %}
          {% set pct_r = ((stats.replied / stats.total) * 100) | round(1) %}
        {% else %}
          {% set pct1 = 0 %}{% set pct2 = 0 %}{% set pct_r = 0 %}
        {% endif %}

        <p style="font-size:13px;margin-bottom:6px;color:var(--text-muted)">Touch 1 sent <strong style="color:var(--parchment)">{{ stats.touch_1_sent }} / {{ stats.total }}</strong></p>
        <div class="progress-bar-wrap">
          <div class="progress-bar-fill" style="width:{{ pct1 }}%"></div>
        </div>

        <p style="font-size:13px;margin:16px 0 6px;color:var(--text-muted)">Touch 2 sent <strong style="color:var(--parchment)">{{ stats.touch_2_sent }} / {{ stats.touch_1_sent }}</strong></p>
        <div class="progress-bar-wrap">
          <div class="progress-bar-fill" style="width:{{ pct2 }};background:linear-gradient(90deg,#6BA86B,#8FCF8F)"></div>
        </div>

        <p style="font-size:13px;margin:16px 0 6px;color:var(--text-muted)">Replied <strong style="color:var(--parchment)">{{ stats.replied }} / {{ stats.total }}</strong></p>
        <div class="progress-bar-wrap">
          <div class="progress-bar-fill" style="width:{{ pct_r }}%;background:linear-gradient(90deg,#4A8B4A,#7ACF7A)"></div>
        </div>

        <hr class="divider">
        <div style="display:flex;gap:12px;">
          <a href="/send" class="btn btn-gold">Send Emails</a>
          <a href="/contacts" class="btn btn-outline">View Contacts</a>
        </div>
      </div>
    </div>

    <!-- Segments -->
    <div class="card">
      <div class="card-header">Contacts by Segment</div>
      <div class="card-body">
        <div class="seg-grid">
          {% for seg, count in stats.segments.items() | sort(attribute='1', reverse=True) %}
          <div class="seg-pill">
            <span class="seg-name">{{ seg }}</span>
            <span class="seg-count">{{ count }}</span>
          </div>
          {% endfor %}
        </div>
        <hr class="divider">
        <p style="font-size:12px;color:var(--text-muted);font-style:italic;">
          Zoho free limit: ~200/day &nbsp;·&nbsp; Batch size: 80 &nbsp;·&nbsp; Delay: 8s between sends
        </p>
      </div>
    </div>

  </div>

  <!-- Quick tips -->
  <div class="card" style="margin-top:24px;">
    <div class="card-header">Quick Reference</div>
    <div class="card-body">
      <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;font-size:13px;">
        <div>
          <p style="color:var(--gold);font-family:'Cinzel',serif;font-size:11px;letter-spacing:.06em;text-transform:uppercase;margin-bottom:6px;">Sending Order</p>
          <ol style="padding-left:18px;line-height:1.9;color:var(--text-muted);">
            <li>press (national / international)</li>
            <li>heritage (estate / garden)</li>
            <li>history (podcasts / magazines)</li>
            <li>philosophy (ideas publications)</li>
            <li>lifestyle (luxury magazines)</li>
            <li>substack / influencer</li>
          </ol>
        </div>
        <div>
          <p style="color:var(--gold);font-family:'Cinzel',serif;font-size:11px;letter-spacing:.06em;text-transform:uppercase;margin-bottom:6px;">Daily Limits</p>
          <ul style="padding-left:18px;line-height:1.9;color:var(--text-muted);list-style:none;">
            <li>→ Max 200 emails / day (Zoho free)</li>
            <li>→ 80 per batch run is safe</li>
            <li>→ Run twice / day = 160 out</li>
            <li>→ Follow-up after 7 days</li>
          </ul>
        </div>
        <div>
          <p style="color:var(--gold);font-family:'Cinzel',serif;font-size:11px;letter-spacing:.06em;text-transform:uppercase;margin-bottom:6px;">After Replies</p>
          <ul style="padding-left:18px;line-height:1.9;color:var(--text-muted);list-style:none;">
            <li>→ Mark replied in Contacts tab</li>
            <li>→ Stops all follow-ups immediately</li>
            <li>→ Add a note about what they said</li>
          </ul>
        </div>
      </div>
    </div>
  </div>

</div>
{% endblock %}

{% block scripts %}
<script>
  // Auto-refresh stats every 30s
  setInterval(() => {
    fetch('/api/stats').then(r => r.json()).then(s => {
      document.querySelectorAll('.stat-tile .num')[0].textContent = s.total;
      document.querySelectorAll('.stat-tile .num')[1].textContent = s.touch_1_sent;
      document.querySelectorAll('.stat-tile .num')[2].textContent = s.touch_2_sent;
      document.querySelectorAll('.stat-tile .num')[3].textContent = s.replied;
      document.querySelectorAll('.stat-tile .num')[4].textContent = s.pending_t1;
      document.querySelectorAll('.stat-tile .num')[5].textContent = s.pending_t2;
    });
  }, 30000);
</script>
{% endblock %}