{% extends "admin/base.html" %}

{% block title %}Follow-up | Admin{% endblock %}

{% block content %}
<div class="admin-page-head">
  <div>
    <p class="eyebrow-dark">Outreach</p>
    <h1>Lead Follow-up</h1>
    <p class="mt-3 text-sm font-bold text-zinc-600">Leads whose email was sent but the link was never clicked. Text them, then mark as texted — the row disappears from this list.</p>
    <div class="mt-4 flex gap-2">
      <a class="rounded-full border px-3 py-1 text-sm font-bold {{ 'bg-zinc-900 text-white border-zinc-900' if request.endpoint in ('admin_lead_campaigns', 'admin_lead_campaign_detail') else 'text-zinc-600 border-zinc-300' }}"
         href="{{ url_for('admin_lead_campaigns') }}">Campaigns</a>
      <a class="rounded-full border px-3 py-1 text-sm font-bold {{ 'bg-zinc-900 text-white border-zinc-900' if request.endpoint == 'admin_lead_followups' else 'text-zinc-600 border-zinc-300' }}"
         href="{{ url_for('admin_lead_followups') }}">Follow-up</a>
      <a class="rounded-full border px-3 py-1 text-sm font-bold {{ 'bg-zinc-900 text-white border-zinc-900' if request.endpoint == 'admin_lead_all' else 'text-zinc-600 border-zinc-300' }}"
         href="{{ url_for('admin_lead_all') }}">All Leads</a>
    </div>
    <div class="mt-3 flex flex-wrap items-center gap-2 text-sm">
      <span class="font-bold text-zinc-600">Email sent at least:</span>
      {% for h in (1, 2, 4, 8, 12, 24, 48, 72) %}
      <a class="rounded-full border px-3 py-1 font-bold {{ 'bg-zinc-900 text-white border-zinc-900' if hours == h else 'text-zinc-600 border-zinc-300' }}"
         href="{{ url_for('admin_lead_followups', hours=h) }}">{{ h }}h ago</a>
      {% endfor %}
      {% if rows %}
      <button class="btn-outline" type="button" onclick="copyAllTexts(this)">Copy all texts ({{ rows | length }})</button>
      {% endif %}
    </div>
  </div>
</div>

<div class="mt-6 grid gap-4 lg:grid-cols-2">
  {% for item in rows %}
  {% set r = item.row %}
  <div class="rounded-xl border border-zinc-200 bg-white p-4 shadow-sm">
    <div class="flex flex-wrap items-center justify-between gap-2 border-b border-zinc-100 pb-2">
      <div>
        <span class="font-black text-zinc-950">{{ r.lead_name or 'Lead' }}</span>
        <span class="ml-2 font-mono text-sm font-bold text-zinc-700">{{ r.lead_phone }}</span>
      </div>
      <div class="flex flex-wrap items-center gap-2 text-xs">
        <span class="rounded-full bg-zinc-100 px-2 py-0.5 font-black text-zinc-500">Email not opened</span>
        {% if r.sms_visited %}<span class="rounded-full bg-emerald-100 px-2 py-0.5 font-black text-emerald-800">SMS link visited</span>{% endif %}
      </div>
    </div>
    <p class="mt-2 text-sm font-bold text-zinc-700">{{ item.car_line }}</p>
    <p class="mt-1 text-xs text-zinc-500">Email sent {{ (r.sent_at or '')[:10] }} · {{ r.lead_email }}</p>
    <div class="mt-3 rounded-lg bg-zinc-50 p-3">
      <div class="flex items-center justify-between">
        <div class="form-label">Text message</div>
        <div class="flex items-center gap-2">
          <button class="btn-outline py-1 text-xs" type="button"
                  onclick="genFuText({{ r.campaign_id }}, {{ r.id }}, this)">{% if r.text_message %}Regenerate text (AI){% else %}Generate text (AI){% endif %}</button>
          <button class="btn-outline py-1 text-xs" type="button" onclick="copyFuText({{ r.id }}, this)">Copy</button>
        </div>
      </div>
      <textarea class="form-input mt-1 font-mono text-xs" readonly data-fu-text id="text-{{ r.id }}" rows="5">{{ r.text_message or '' }}</textarea>
      {% if not r.text_message %}<p class="mt-1 text-xs text-amber-700">No text message yet for this lead — click "Generate text (AI)" (safe: the email reply is not touched), or run "Generate all un-replied" which now fills missing texts too.</p>{% endif %}
    </div>
    <form class="mt-3" method="post" action="{{ url_for('admin_lead_followups', hours=hours) }}">
      <input type="hidden" name="fu_action" value="toggle_texted">
      <input type="hidden" name="link_id" value="{{ r.id }}">
      <input type="hidden" name="hours" value="{{ hours }}">
      <button class="btn-primary" type="submit">Mark texted (hides from this list)</button>
    </form>
  </div>
  {% else %}
  <p class="text-sm text-zinc-500">No leads waiting for follow-up (email sent {{ hours }}h+ ago, link unclicked, has phone, not texted).</p>
  {% endfor %}
</div>

<script>
function lcLegacyCopy(ta, done){
  ta.removeAttribute('readonly');
  ta.focus(); ta.select();
  try { document.execCommand('copy'); } catch (e) { /* text stays selected for manual Ctrl+C */ }
  ta.setAttribute('readonly', '');
  done();
}
function lcCopyText(text, ta, btn, okLabel){
  const done = () => { const o = btn.textContent; btn.textContent = okLabel; setTimeout(() => { btn.textContent = o; }, 1500); };
  if (window.isSecureContext && navigator.clipboard && navigator.clipboard.writeText) {
    navigator.clipboard.writeText(text).then(done).catch(() => { ta.value = text; lcLegacyCopy(ta, done); });
  } else {
    ta.value = text; lcLegacyCopy(ta, done);
  }
}
function copyFuText(linkId, btn){
  const ta = document.getElementById('text-' + linkId);
  lcCopyText(ta.value, ta, btn, 'Copied!');
}
async function genFuText(cid, linkId, btn){
  const ta = document.getElementById('text-' + linkId);
  const orig = btn.textContent;
  btn.disabled = true; btn.textContent = 'Generating...';
  try {
    const resp = await fetch('/stock-room-7f4c2a91/lead-campaigns/' + cid + '/link/' + linkId + '/generate-text', {method: 'POST'});
    const data = await resp.json();
    if (data.ok){ ta.value = data.text_message; btn.textContent = 'Done ✓'; }
    else { alert(data.error || 'Generation failed.'); btn.textContent = orig; }
  } catch (e){ alert('Generation failed.'); btn.textContent = orig; }
  finally { setTimeout(() => { btn.disabled = false; btn.textContent = btn.textContent === 'Done ✓' ? 'Regenerate text (AI)' : orig; }, 2000); }
}
function copyAllTexts(btn){
  const blocks = Array.from(document.querySelectorAll('textarea[data-fu-text]'))
    .map(t => t.value).filter(v => v.trim());
  if (!blocks.length){ alert('No text messages to copy.'); return; }
  const tmp = document.createElement('textarea');
  document.body.appendChild(tmp);
  lcCopyText(blocks.join('\n\n'), tmp, btn, 'Copied ' + blocks.length + '!');
  document.body.removeChild(tmp);
}
</script>
{% endblock %}