{% extends "admin/base.html" %}
{% block title %}Inbox | Admin{% endblock %}
{% block content %}
<div class="admin-page-head">
  <div>
    <p class="eyebrow-dark">Outreach</p>
    <h1>Inbox</h1>
    <p class="mt-2 text-sm font-bold text-zinc-600">Pull incoming emails, auto-match to leads, generate follow-up replies. Review before sending (default) or enable auto-send.</p>
    <div class="mt-4 flex gap-2">
      <a class="rounded-full border px-3 py-1 text-sm font-bold 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 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 text-zinc-600 border-zinc-300" href="{{ url_for('admin_lead_all') }}">All Leads</a>
      <a class="rounded-full border px-3 py-1 text-sm font-bold bg-zinc-900 text-white border-zinc-900" href="{{ url_for('admin_inbox') }}">Inbox</a>
    </div>
  </div>
</div>

<section class="admin-panel mt-6">
  <div class="flex flex-wrap items-center justify-between gap-3">
    <h2>Master prompt + settings</h2>
    <div class="flex gap-2">
      <form method="post" action="{{ url_for('admin_inbox_pull') }}">
        <button class="btn-primary" type="submit">Pull inbox now</button>
      </form>
      <form method="post" action="{{ url_for('admin_inbox_test_imap') }}">
        <button class="btn-outline" type="submit">Test IMAP connection</button>
      </form>
    </div>
  </div>
  <div id="pull-progress" class="mt-3 hidden rounded-lg bg-sky-50 p-3 text-sm font-bold text-sky-800"></div>
  <form class="mt-4 grid gap-4" method="post" action="{{ url_for('admin_inbox_save_settings') }}">
    <label><span class="form-label">Inbox master prompt (stored in DB, not in code)</span>
      <textarea class="form-input font-mono text-xs" name="inbox_master_prompt" rows="4">{{ master_prompt }}</textarea>
    </label>
    <div class="flex flex-wrap items-center gap-4">
      <label class="admin-check-pill"><input type="checkbox" name="inbox_auto_send" value="1" {% if auto_send %}checked{% endif %}> Auto-send (after 10 min from receipt)</label>
      <label class="admin-check-pill"><input type="checkbox" name="inbox_autonomous_enabled" value="1" {% if autonomous %}checked{% endif %}> Autonomous mode (poll every</label>
      <input class="form-input w-20" type="number" name="inbox_autonomous_interval" value="{{ interval }}" min="5" max="1440"> min)
    </div>
    <button class="btn-primary" type="submit">Save settings</button>
  </form>
</section>

<section class="admin-panel mt-6">
  <h2>Reply Composer (lead-aware AI reply)</h2>
  <p class="mt-1 text-sm text-zinc-600">Search a lead → their full thread (contact, car, every email sent/received) is dumped into the input. Paste the new incoming message below the line, add notes if needed, Generate, then copy the reply to send manually by mail or text.</p>
  <div class="mt-3 grid gap-3">
    <div class="relative">
      <input id="rc-search" class="form-input" placeholder="Search lead by name, email, or phone…" autocomplete="off">
      <div id="rc-results" class="absolute z-20 mt-1 w-full rounded-lg border border-zinc-200 bg-white shadow-lg max-h-60 overflow-auto hidden"></div>
    </div>
    <div id="rc-selected" class="text-sm font-bold text-zinc-700">No lead selected.</div>
    <input type="hidden" id="rc-lead-id">
    <div>
      <div class="flex items-center justify-between"><span class="form-label">Input (lead thread + new message)</span>
        <button class="text-xs font-bold text-sky-700 underline" type="button" onclick="rcEnlarge('input')">Enlarge</button></div>
      <textarea id="rc-input" class="form-input font-mono text-xs" rows="10" placeholder="Select a lead to load the thread, then paste the new incoming message below the line."></textarea>
    </div>
    <div>
      <div class="flex items-center justify-between"><span class="form-label">Comments / extra instructions (optional)</span>
        <button class="text-xs font-bold text-sky-700 underline" type="button" onclick="rcEnlarge('comments')">Enlarge</button></div>
      <textarea id="rc-comments" class="form-input text-xs" rows="2" placeholder="Anything you want the AI to know or how to phrase it."></textarea>
    </div>
    <div class="flex flex-wrap gap-2">
      <button class="btn-primary" type="button" onclick="rcGenerate()">Generate reply</button>
      <button class="btn-outline" type="button" onclick="rcSave()">Save draft</button>
      <button class="btn-outline" type="button" onclick="rcRebuild()">Rebuild thread</button>
    </div>
    <div>
      <div class="flex items-center justify-between"><span class="form-label">Generated reply</span>
        <div class="flex gap-3">
          <button class="text-xs font-bold text-sky-700 underline" type="button" onclick="rcCopy()">Copy</button>
          <button class="text-xs font-bold text-sky-700 underline" type="button" onclick="rcEnlarge('output')">Enlarge</button>
        </div></div>
      <textarea id="rc-output" class="form-input text-xs" rows="8" placeholder="The AI reply appears here. Edit it before copying to send."></textarea>
    </div>
    <div id="rc-status" class="text-sm font-bold text-zinc-500"></div>
  </div>
</section>

<div id="rc-modal" class="fixed inset-0 z-50 hidden items-center justify-center bg-black/40 p-4" onclick="if(event.target===this)rcCloseModal()">
  <div class="w-full max-w-4xl rounded-xl bg-white p-6 shadow-xl">
    <div class="flex items-center justify-between border-b border-zinc-100 pb-3">
      <h3 id="rc-modal-title" class="font-black">Enlarge</h3>
      <div class="flex gap-2">
        <button class="btn-primary" type="button" onclick="rcModalSave()">Save &amp; close</button>
        <button class="btn-outline" type="button" onclick="rcCloseModal()">Close</button>
      </div>
    </div>
    <textarea id="rc-modal-text" class="form-input mt-3 font-mono text-xs" rows="24"></textarea>
  </div>
</div>

<script>
const RC = {
  search: document.getElementById('rc-search'),
  results: document.getElementById('rc-results'),
  leadId: document.getElementById('rc-lead-id'),
  selected: document.getElementById('rc-selected'),
  input: document.getElementById('rc-input'),
  comments: document.getElementById('rc-comments'),
  output: document.getElementById('rc-output'),
  status: document.getElementById('rc-status'),
  modal: document.getElementById('rc-modal'),
  modalTitle: document.getElementById('rc-modal-title'),
  modalText: document.getElementById('rc-modal-text'),
  thread: '',
  modalField: 'input',
};
let rcTimer = null;
RC.search.addEventListener('input', () => {
  clearTimeout(rcTimer);
  const q = RC.search.value.trim();
  if (q.length < 2) { RC.results.classList.add('hidden'); return; }
  rcTimer = setTimeout(() => rcDoSearch(q), 250);
});
document.addEventListener('click', e => {
  if (e.target !== RC.search && !RC.results.contains(e.target)) RC.results.classList.add('hidden');
});
function rcDoSearch(q){
  fetch(`{{ url_for('admin_inbox_composer_search') }}?q=${encodeURIComponent(q)}`)
    .then(r => r.json()).then(rows => {
      RC.results.innerHTML = '';
      if (!rows.length) { RC.results.classList.add('hidden'); return; }
      rows.forEach(r => {
        const d = document.createElement('div');
        d.className = 'cursor-pointer px-3 py-2 text-sm hover:bg-zinc-100 border-b border-zinc-100 break-words';
        d.textContent = r.label;
        d.onclick = () => rcSelect(r.id, r.label);
        RC.results.appendChild(d);
      });
      RC.results.classList.remove('hidden');
    }).catch(() => {});
}
function rcSelect(id, label){
  RC.leadId.value = id;
  RC.selected.textContent = label;
  RC.search.value = '';
  RC.results.classList.add('hidden');
  RC.status.textContent = 'Loading thread…';
  fetch(`{{ url_for('admin_inbox_composer_load') }}?lead_id=${id}`)
    .then(r => r.json()).then(d => {
      RC.thread = d.thread || '';
      RC.input.value = d.input || '';
      RC.comments.value = d.comments || '';
      RC.output.value = d.output || '';
      RC.status.textContent = '';
    }).catch(e => { RC.status.textContent = 'Load failed: ' + e; });
}
function rcGenerate(){
  if (!RC.leadId.value) { RC.status.textContent = 'Select a lead first.'; return; }
  RC.status.textContent = 'Generating…';
  const fd = new FormData();
  fd.append('lead_id', RC.leadId.value);
  fd.append('input', RC.input.value);
  fd.append('comments', RC.comments.value);
  fetch('{{ url_for("admin_inbox_composer_generate") }}', {method: 'POST', body: fd})
    .then(r => r.json()).then(d => {
      if (d.ok) { RC.output.value = d.output || ''; RC.status.textContent = 'Generated. Review + edit, then Copy to send.'; }
      else { RC.status.textContent = 'Failed: ' + (d.error || 'unknown'); }
    }).catch(e => { RC.status.textContent = 'Request failed: ' + e; });
}
function rcSave(){
  if (!RC.leadId.value) { RC.status.textContent = 'Select a lead first.'; return; }
  RC.status.textContent = 'Saving…';
  const fd = new FormData();
  fd.append('lead_id', RC.leadId.value);
  fd.append('input', RC.input.value);
  fd.append('comments', RC.comments.value);
  fd.append('output', RC.output.value);
  fetch('{{ url_for("admin_inbox_composer_save") }}', {method: 'POST', body: fd})
    .then(r => r.json()).then(d => { RC.status.textContent = d.ok ? 'Draft saved.' : ('Save failed: ' + (d.error || '')); })
    .catch(e => { RC.status.textContent = 'Save failed: ' + e; });
}
function rcRebuild(){
  if (!RC.leadId.value || !RC.thread) { RC.status.textContent = 'No thread to rebuild.'; return; }
  if (!confirm('Replace the input with a fresh lead thread? Your edits to the input will be overwritten (Save first if needed).')) return;
  RC.input.value = RC.thread;
  RC.status.textContent = 'Thread rebuilt.';
}
function rcCopy(){
  const t = RC.output.value.trim();
  if (!t) { RC.status.textContent = 'Nothing to copy.'; return; }
  navigator.clipboard.writeText(t).then(() => { RC.status.textContent = 'Reply copied to clipboard.'; })
    .catch(() => { RC.status.textContent = 'Copy failed — select the text manually.'; });
}
function rcEnlarge(field){
  RC.modalField = field;
  RC.modalTitle.textContent = field === 'input' ? 'Input (thread + message)' : field === 'output' ? 'Generated reply' : 'Comments';
  RC.modalText.value = RC[field].value;
  RC.modal.classList.remove('hidden'); RC.modal.classList.add('flex');
}
function rcModalSave(){
  RC[RC.modalField].value = RC.modalText.value;
  rcCloseModal();
  if (RC.leadId.value) rcSave();
}
function rcCloseModal(){
  RC.modal.classList.add('hidden'); RC.modal.classList.remove('flex');
}
document.addEventListener('keydown', e => { if (e.key === 'Escape') rcCloseModal(); });
</script>

<div class="mt-3 flex items-center justify-between">
  <label class="admin-check-pill"><input type="checkbox" id="ib-select-all" onclick="document.querySelectorAll('.ib-sel').forEach(c=>c.checked=this.checked)"> Select all</label>
  <form id="ib-bulk-form" method="post" action="{{ url_for('admin_inbox_archive') }}" class="flex items-center gap-2">
    <span id="ib-bulk-ids"></span>
    <button class="btn-outline py-1 text-xs" type="submit" onclick="return ibBulkArchive()">Archive selected</button>
  </form>
</div>
<div class="mt-3 grid gap-4 lg:grid-cols-2">
  {% for m in messages %}
  <div class="rounded-xl border {% if m.reply_status == 'sent' %}border-emerald-200{% elif m.reply_status == 'drafted' %}border-amber-200{% else %}border-zinc-200{% endif %} bg-white p-4 shadow-sm" id="msg-{{ m.id }}">
    <div class="flex flex-wrap items-center justify-between gap-2 border-b border-zinc-100 pb-2">
      <div class="flex items-center gap-2">
        <input type="checkbox" class="ib-sel h-4 w-4" name="msg_ids" value="{{ m.id }}">
        <span class="font-black text-zinc-950">{{ m.from_name or m.from_email }}</span>
        <span class="text-xs text-zinc-500">{{ m.from_email }}</span>
      </div>
      <div class="flex items-center gap-2 text-xs">
        {% if m.reply_status == 'sent' %}<span class="rounded-full bg-emerald-100 px-2 py-0.5 font-black text-emerald-800">Sent</span>
        {% elif m.reply_status == 'drafted' %}<span class="rounded-full bg-amber-100 px-2 py-0.5 font-black text-amber-800">Drafted</span>
        {% else %}<span class="rounded-full bg-zinc-100 px-2 py-0.5 font-black text-zinc-500">No reply</span>{% endif %}
        {% if not m.lead_link_id %}<span class="rounded-full bg-red-100 px-2 py-0.5 font-black text-red-700">Unmatched</span>{% endif %}
      </div>
    </div>
    {% if m.car_line %}
    <p class="mt-2 text-xs font-bold text-zinc-600">Matched: {{ m.car_line }}</p>
    {% endif %}
    <p class="mt-1 text-xs text-zinc-500">Subject: {{ m.subject }} · {{ (m.received_at_iso or m.received_at or '')[:19] }}</p>

    <details class="mt-2">
      <summary class="cursor-pointer text-xs font-bold text-zinc-600">Their email</summary>
      <div class="mt-1 flex items-center gap-2">
        <textarea class="form-input font-mono text-xs" rows="3" readonly id="email-{{ m.id }}">{{ m.body_text or '' }}</textarea>
        <button class="btn-outline py-1 text-xs" type="button" onclick="ibEnlarge('email-{{ m.id }}','Their email')">Enlarge</button>
      </div>
    </details>

    {% if m.our_reply %}
    <details class="mt-1">
      <summary class="cursor-pointer text-xs font-bold text-zinc-600">Our previous reply</summary>
      <textarea class="form-input mt-1 font-mono text-xs" rows="2" readonly>{{ m.our_reply }}</textarea>
    </details>
    {% endif %}

    <form class="mt-3 grid gap-2" method="post" action="{{ url_for('admin_inbox_send', msg_id=m.id) }}">
      <div class="flex items-center justify-between">
        <span class="form-label">Generated reply</span>
        <div class="flex gap-2">
          <button class="btn-outline py-1 text-xs" type="button" onclick="ibEnlarge('reply-{{ m.id }}','Generated reply')">Enlarge</button>
        </div>
      </div>
      <textarea class="form-input font-mono text-xs" name="generated_reply" id="reply-{{ m.id }}" rows="4">{{ m.generated_reply or '' }}</textarea>
      <button class="rounded-xl bg-emerald-600 px-4 py-2 text-sm font-black text-white hover:bg-emerald-700" type="submit">Send reply</button>
    </form>

    <form class="mt-2 flex items-end gap-2" method="post" action="{{ url_for('admin_inbox_regenerate', msg_id=m.id) }}">
      <label class="flex-1"><span class="form-label">Extra instructions for AI (optional)</span>
        <input class="form-input text-xs" name="extra_instructions" placeholder="e.g. mention we can deliver to their city"></label>
      <button class="btn-outline py-2 text-xs" type="submit">Regenerate with instructions</button>
    </form>

    <form class="mt-2" method="post" action="{{ url_for('admin_inbox_archive') }}">
      <input type="hidden" name="msg_id" value="{{ m.id }}">
      <button class="text-xs font-bold text-zinc-500 underline" type="submit">Archive</button>
    </form>
  </div>
  {% else %}
  <p class="text-sm text-zinc-500">No emails in inbox. Click "Pull inbox now" to fetch.</p>
  {% endfor %}
</div>

<div id="ib-modal" class="fixed inset-0 z-50 hidden items-center justify-center bg-black/40 p-4" onclick="if(event.target===this)document.getElementById('ib-modal').classList.add('hidden')">
  <div class="w-full max-w-3xl rounded-xl bg-white p-5 shadow-xl">
    <div class="mb-2 flex items-center justify-between"><h3 class="font-black text-zinc-950" id="ib-modal-title">—</h3><button class="btn-outline" type="button" onclick="document.getElementById('ib-modal').classList.add('hidden')">Close</button></div>
    <textarea id="ib-modal-text" class="form-input font-mono text-xs" rows="20" readonly></textarea>
  </div>
</div>

<script>
function ibEnlarge(id, title){
  const ta = document.getElementById(id);
  if(!ta) return;
  document.getElementById('ib-modal-title').textContent = title;
  document.getElementById('ib-modal-text').value = ta.value || '(empty)';
  document.getElementById('ib-modal').classList.remove('hidden');
}
function ibBulkArchive(){
  const ids = Array.from(document.querySelectorAll('.ib-sel:checked')).map(c => c.value);
  if(!ids.length){ alert('Select at least one message first.'); return false; }
  if(!confirm('Archive ' + ids.length + ' selected message(s)?')) return false;
  const box = document.getElementById('ib-bulk-ids');
  box.innerHTML = '';
  ids.forEach(id => { const i = document.createElement('input'); i.type='hidden'; i.name='msg_ids'; i.value=id; box.appendChild(i); });
  return true;
}
// Pull progress polling
const pullStatusUrl = "{{ url_for('admin_inbox_pull_status') }}";
const progressEl = document.getElementById('pull-progress');
let pollTimer = null;
async function checkPull(){
  try {
    const r = await fetch(pullStatusUrl);
    const d = await r.json();
    if(!d || !d.total && d.total !== 0){ return; }
    progressEl.classList.remove('hidden');
    if(d.finished){
      progressEl.textContent = `Done! ${d.new || 0} new · ${d.skipped || 0} already imported · ${d.total} total${d.error ? ' · Error: ' + d.error : ''}`;
      progressEl.className = 'mt-3 rounded-lg bg-emerald-50 p-3 text-sm font-bold text-emerald-800';
      if(d.new > 0){ setTimeout(() => location.reload(), 2000); }
      clearInterval(pollTimer);
    } else {
      progressEl.textContent = `Pulling inbox... ${d.done}/${d.total} processed (${d.new || 0} new, ${d.skipped || 0} skipped)`;
    }
  } catch(e){}
}
{% if pull_job and not pull_job.finished %}
pollTimer = setInterval(checkPull, 3000);
checkPull();
{% elif pull_job and pull_job.finished and pull_job.new %}
progressEl.classList.remove('hidden');
progressEl.textContent = `Last pull: ${pull_job.new || 0} new · ${pull_job.skipped || 0} already imported · ${pull_job.total} total${pull_job.error ? ' · Error: ' + pull_job.error : ''}`;
{% endif %}
</script>
{% endblock %}