{% extends "base.html" %}
{% block title %}Send Campaign{% endblock %}

{% block content %}
<div class="page-header">
  <h1>Send Campaign</h1>
  <p>Configure and launch your outreach — watch live output below</p>
</div>

<div class="page-content">
  <div style="display:grid;grid-template-columns:320px 1fr;gap:24px;align-items:start;">

    <!-- Controls -->
    <div>
      <div class="card" style="margin-bottom:16px;">
        <div class="card-header">Send Settings</div>
        <div class="card-body">

          <div class="form-group">
            <label class="form-label">Touch (email number)</label>
            <select id="touch" class="form-control">
              <option value="1">Touch 1 — Initial Email</option>
              <option value="2">Touch 2 — Follow-up (7 day gap)</option>
            </select>
          </div>

          <div class="form-group">
            <label class="form-label">Segment</label>
            <select id="segment" class="form-control">
              <option value="">All Segments</option>
              <option value="press">press</option>
              <option value="heritage">heritage</option>
              <option value="history">history</option>
              <option value="philosophy">philosophy</option>
              <option value="lifestyle">lifestyle</option>
              <option value="substack">substack</option>
              <option value="influencer">influencer</option>
              <option value="local">local</option>
              <option value="default">default</option>
            </select>
          </div>

          <div class="form-group">
            <label class="form-label">Batch limit</label>
            <select id="limit" class="form-control">
              <option value="20">20 (test batch)</option>
              <option value="50">50</option>
              <option value="80" selected>80 (recommended)</option>
              <option value="100">100</option>
              <option value="200">200 (max / day)</option>
            </select>
          </div>

          <div style="display:flex;align-items:center;gap:10px;margin-bottom:16px;">
            <input type="checkbox" id="dryRun" style="width:16px;height:16px;cursor:pointer;accent-color:var(--gold);">
            <label for="dryRun" style="font-family:'Cinzel',serif;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);cursor:pointer;">
              Dry Run (simulate only)
            </label>
          </div>

          <button id="sendBtn" class="btn btn-gold" style="width:100%;justify-content:center;" onclick="startSend()">
            <svg style="width:14px;height:14px;" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg>
            Send Now
          </button>
          <button id="stopBtn" class="btn btn-danger" style="width:100%;justify-content:center;margin-top:8px;display:none;" onclick="stopSend()">
            Stop
          </button>
        </div>
      </div>

      <!-- Stats summary -->
      <div class="card">
        <div class="card-header">Current Status</div>
        <div class="card-body" style="font-size:13px;">
          <p style="display:flex;justify-content:space-between;margin-bottom:8px;">
            <span style="color:var(--text-muted)">Touch 1 Sent</span>
            <strong>{{ stats.touch_1_sent }} / {{ stats.total }}</strong>
          </p>
          <p style="display:flex;justify-content:space-between;margin-bottom:8px;">
            <span style="color:var(--text-muted)">Touch 2 Sent</span>
            <strong>{{ stats.touch_2_sent }} / {{ stats.touch_1_sent }}</strong>
          </p>
          <p style="display:flex;justify-content:space-between;margin-bottom:8px;">
            <span style="color:var(--text-muted)">Replied</span>
            <strong style="color:#7ACF7A;">{{ stats.replied }}</strong>
          </p>
          <p style="display:flex;justify-content:space-between;">
            <span style="color:var(--text-muted)">Pending T1</span>
            <strong style="color:var(--gold);">{{ stats.pending_t1 }}</strong>
          </p>
        </div>
      </div>
    </div>

    <!-- Terminal -->
    <div>
      <div class="card">
        <div class="card-header" style="display:flex;justify-content:space-between;align-items:center;">
          <span>Live Output</span>
          <span id="statusBadge" style="font-size:11px;color:var(--text-muted);font-style:italic;">Ready</span>
        </div>
        <div class="card-body" style="padding:0;">
          <div class="terminal" id="terminal">
<span class="t-dim">──────────────────────────────────────────────────────────────
  HermitHire Campaign Engine
  Configure settings on the left and press Send Now
  Output will appear here in real time
──────────────────────────────────────────────────────────────</span>
          </div>
        </div>
      </div>
    </div>

  </div>
</div>
{% endblock %}

{% block scripts %}
<script>
  let _es = null;
  let _running = false;

  function startSend() {
    if (_running) return;

    const touch = document.getElementById('touch').value;
    const segment = document.getElementById('segment').value;
    const limit = document.getElementById('limit').value;
    const dryRun = document.getElementById('dryRun').checked;

    const term = document.getElementById('terminal');
    term.textContent = '';

    const params = new URLSearchParams({touch, limit, dry_run: dryRun});
    if (segment) params.set('segment', segment);

    _running = true;
    document.getElementById('sendBtn').style.display = 'none';
    document.getElementById('stopBtn').style.display = 'flex';
    document.getElementById('statusBadge').textContent = 'Running…';
    document.getElementById('statusBadge').style.color = 'var(--gold)';

    _es = new EventSource('/api/send_stream?' + params.toString());

    _es.onmessage = function(e) {
      const line = e.data;
      const span = document.createElement('span');

      if (line.startsWith('[DONE]')) {
        span.className = 't-gold';
      } else if (line.toLowerCase().includes('error') || line.includes('✗')) {
        span.className = 't-err';
      } else if (line.includes('✓') || line.includes('Sent')) {
        span.style.color = '#7ACF7A';
      } else if (line.startsWith('DRY') || line.startsWith('[dry')) {
        span.className = 't-gold';
      } else if (line.startsWith('─') || line.trim() === '') {
        span.className = 't-dim';
      }

      span.textContent = line + '\n';
      term.appendChild(span);
      term.scrollTop = term.scrollHeight;

      if (line.startsWith('[DONE]')) {
        stopSend();
      }
    };

    _es.onerror = function() {
      addLine('Connection closed.', 't-dim');
      stopSend();
    };
  }

  function addLine(text, cls) {
    const term = document.getElementById('terminal');
    const span = document.createElement('span');
    if (cls) span.className = cls;
    span.textContent = text + '\n';
    term.appendChild(span);
    term.scrollTop = term.scrollHeight;
  }

  function stopSend() {
    if (_es) { _es.close(); _es = null; }
    _running = false;
    document.getElementById('sendBtn').style.display = 'flex';
    document.getElementById('stopBtn').style.display = 'none';
    document.getElementById('statusBadge').textContent = 'Stopped';
    document.getElementById('statusBadge').style.color = 'var(--text-muted)';
  }
</script>
{% endblock %}