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

{% block title %}All Leads | Admin{% endblock %}

{% block content %}
<div class="admin-page-head">
  <div>
    <p class="eyebrow-dark">Outreach</p>
    <h1>All Leads</h1>
    <p class="mt-3 text-sm font-bold text-zinc-600">Every loaded lead, newest first. Use this when a customer calls to find who they are and what they asked. Click "View" for their message and your reply.</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">Rows:</span>
      {% for lim in (50, 100, 200) %}
      <a class="rounded-full border px-3 py-1 font-bold {{ 'bg-zinc-900 text-white border-zinc-900' if limit == lim else 'text-zinc-600 border-zinc-300' }}"
         href="{{ url_for('admin_lead_all', limit=lim) }}">{{ lim }}</a>
      {% endfor %}
    </div>
  </div>
</div>

<section class="mt-6 overflow-hidden rounded-lg border border-zinc-200 bg-white shadow-sm">
  <form method="post" action="{{ url_for('admin_lead_export_voice_csv') }}">
    <div class="flex flex-wrap items-center gap-2 border-b border-zinc-200 bg-zinc-50 px-4 py-3">
      <span class="text-sm font-bold text-zinc-700">Voice campaign CSV:</span>
      <button class="btn-primary" type="submit" name="mode" value="selected">Export selected</button>
      <button class="btn-outline" type="submit" name="mode" value="all">Export all (with phone)</button>
      <span class="text-xs text-zinc-500">Select leads below, or export every lead that has a phone + a vehicle. Columns match the famulor.io lead form.</span>
    </div>
  <div class="overflow-x-auto">
    <table class="min-w-full divide-y divide-zinc-200">
      <thead class="bg-zinc-100">
        <tr>
          <th class="table-heading"><input type="checkbox" id="la-select-all" title="Select all"></th>
          <th class="table-heading">Car inquired</th>
          <th class="table-heading">Price</th>
          <th class="table-heading">Name</th>
          <th class="table-heading">Email</th>
          <th class="table-heading">Phone</th>
          <th class="table-heading">Status</th>
          <th class="table-heading">Opened</th>
          <th class="table-heading">Error</th>
          <th class="table-heading">Loaded</th>
          <th class="table-heading"></th>
        </tr>
      </thead>
      <tbody class="divide-y divide-zinc-200">
        {% for item in rows %}
        {% set r = item.row %}
        <tr>
          <td class="table-cell"><input type="checkbox" name="link_ids" value="{{ r.id }}" class="la-check"></td>
          <td class="table-cell font-bold text-zinc-950">{{ item.car }}</td>
          <td class="table-cell">{{ item.price }}</td>
          <td class="table-cell">{{ r.lead_name or '—' }}</td>
          <td class="table-cell text-sm">{{ r.lead_email or '—' }}</td>
          <td class="table-cell font-mono text-sm">{{ r.lead_phone or '—' }}</td>
          <td class="table-cell">
            {% if r.reply_status == 'sent' %}<span class="rounded-full bg-emerald-100 px-2 py-0.5 text-xs font-black text-emerald-800">Sent{% if r.sent_at %} {{ r.sent_at[11:16] }}{% endif %}</span>
            {% elif r.reply_status == 'scheduled' %}<span class="rounded-full bg-sky-100 px-2 py-0.5 text-xs font-black text-sky-800" title="Sends at {{ r.scheduled_at or '?' }}">Scheduled{% if r.scheduled_at %} ~{{ r.scheduled_at[:16] }} UTC{% endif %}</span>
            {% elif r.reply_status == 'sending' %}<span class="rounded-full bg-indigo-100 px-2 py-0.5 text-xs font-black text-indigo-800">Sending…</span>
            {% elif r.reply_status == 'drafted' %}<span class="rounded-full bg-amber-100 px-2 py-0.5 text-xs font-black text-amber-800">Drafted</span>
            {% else %}<span class="rounded-full bg-zinc-100 px-2 py-0.5 text-xs font-black text-zinc-500">No reply</span>{% endif %}
            {% if r.duplicate %}<span class="ml-1 rounded-full bg-red-100 px-2 py-0.5 text-xs font-black text-red-700">Dup</span>{% endif %}
          </td>
          <td class="table-cell">
            {% if r.visited %}<span class="rounded-full bg-emerald-100 px-2 py-0.5 text-xs font-black text-emerald-800">Opened</span>
            {% elif r.reply_status == 'sent' %}<span class="rounded-full bg-amber-100 px-2 py-0.5 text-xs font-black text-amber-800" title="Email sent but the link was not opened">Not opened</span>
            {% else %}<span class="text-xs text-zinc-400">—</span>{% endif %}
          </td>
          <td class="table-cell text-xs {% if r.send_error %}text-red-700 font-bold{% else %}text-zinc-400{% endif %}" title="{{ (r.send_error or '') | e }}">{% if r.send_error %}{{ r.send_error[:80] | e }}{% else %}—{% endif %}</td>
          <td class="table-cell text-xs font-bold text-zinc-500">{{ (r.created_at or '')[:10] }}</td>
          <td class="table-cell">
            <button class="font-bold underline decoration-amber-400 decoration-2 underline-offset-4" type="button"
                    onclick="lcOpenLead({{ r.id }})"
                    data-name="{{ (r.lead_name or '') | e }}"
                    data-email="{{ (r.lead_email or '') | e }}"
                    data-phone="{{ (r.lead_phone or '') | e }}"
                    data-car="{{ item.car | e }}"
                    data-message="{{ (r.lead_message or '') | e }}"
                    data-reply="{{ (r.generated_reply or '') | e }}"
                    data-subject="{{ (r.reply_subject or '') | e }}"
                    data-sent="{{ (r.sent_at or '')[:16] | e }}"
                    data-scheduled="{{ (r.scheduled_at or '')[:16] | e }}"
                    data-error="{{ (r.send_error or '') | e }}">View</button>
          </td>
        </tr>
        {% else %}
        <tr><td class="table-cell text-zinc-500" colspan="11">No leads loaded yet.</td></tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
  </form>
</section>

<!-- details popup -->
<div id="lc-lead-modal" class="fixed inset-0 z-50 hidden items-center justify-center bg-black/40 p-4" onclick="if(event.target===this)lcCloseLead()">
  <div class="w-full max-w-2xl rounded-xl bg-white p-6 shadow-xl">
    <div class="flex items-center justify-between border-b border-zinc-100 pb-3">
      <div>
        <div class="text-lg font-black text-zinc-950" id="lc-ld-name">—</div>
        <div class="text-sm text-zinc-600"><span id="lc-ld-email"></span> · <span id="lc-ld-phone" class="font-mono"></span></div>
      </div>
      <button class="btn-outline" type="button" onclick="lcCloseLead()">Close</button>
    </div>
    <div class="mt-3 text-sm font-bold text-zinc-700" id="lc-ld-car"></div>
    <div class="mt-4">
      <div class="form-label">Their message</div>
      <div class="mt-1 whitespace-pre-wrap rounded-lg bg-zinc-50 p-3 text-sm" id="lc-ld-message"></div>
    </div>
    <div class="mt-3">
      <div class="form-label">Our reply <span id="lc-ld-subject" class="font-normal text-zinc-500"></span></div>
      <div class="mt-1 whitespace-pre-wrap rounded-lg bg-zinc-50 p-3 text-sm" id="lc-ld-reply"></div>
    </div>
    <div class="mt-3 text-xs text-zinc-500" id="lc-ld-sent"></div>
  </div>
</div>

<script>
function lcOpenLead(id){
  const btn = document.querySelector('button[onclick="lcOpenLead(' + id + ')"]');
  if (!btn) return;
  const set = (id, val) => { const el = document.getElementById(id); if (el) el.textContent = val || ''; };
  set('lc-ld-name', btn.dataset.name || 'Lead');
  set('lc-ld-email', btn.dataset.email || '');
  set('lc-ld-phone', btn.dataset.phone || '');
  set('lc-ld-car', btn.dataset.car || '');
  set('lc-ld-message', btn.dataset.message || '(no message)');
  set('lc-ld-reply', btn.dataset.reply || '(no reply yet)');
  set('lc-ld-subject', btn.dataset.subject ? '· ' + btn.dataset.subject : '');
  const sentEl = document.getElementById('lc-ld-sent');
  if (sentEl) {
    let bits = [];
    if (btn.dataset.scheduled) bits.push('Sends at ' + btn.dataset.scheduled + ' UTC');
    if (btn.dataset.sent) bits.push('Email sent ' + btn.dataset.sent);
    if (btn.dataset.error) bits.push('Last error: ' + btn.dataset.error);
    sentEl.textContent = bits.join(' · ');
    sentEl.className = 'mt-3 text-xs ' + (btn.dataset.error ? 'font-bold text-red-700' : 'text-zinc-500');
  }
  const m = document.getElementById('lc-lead-modal');
  m.classList.remove('hidden'); m.classList.add('flex');
}
function lcCloseLead(){
  const m = document.getElementById('lc-lead-modal');
  m.classList.add('hidden'); m.classList.remove('flex');
}
document.addEventListener('keydown', e => { if (e.key === 'Escape') lcCloseLead(); });
// Select-all for the voice CSV export checkboxes.
(function(){
  const sa = document.getElementById('la-select-all');
  if (!sa) return;
  sa.addEventListener('change', () => {
    document.querySelectorAll('.la-check').forEach(cb => { cb.checked = sa.checked; });
  });
})();
</script>
{% endblock %}