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

{% block title %}Post Tracking | Turbo Listing{% endblock %}

{% block content %}
<div class="admin-page-head">
  <div>
    <p class="eyebrow-dark">Turbo Listing</p>
    <h1>Post Tracking</h1>
    <p class="mt-3 text-sm font-bold text-zinc-600">Every AutoTrader post — campaign, manual single-send, and external listings found via "View current listings" — with full response info and live status.</p>
    <div class="mt-4 flex flex-wrap gap-2">
      <a class="rounded-full border px-3 py-1 text-sm font-bold text-zinc-600 border-zinc-300 hover:border-zinc-900 hover:text-zinc-900" href="{{ url_for('admin_turbo_listing') }}">Poster</a>
      <a class="rounded-full border px-3 py-1 text-sm font-bold text-white bg-zinc-900 border-zinc-900" href="{{ url_for('admin_turbo_tracking') }}">Tracking</a>
      <a class="rounded-full border px-3 py-1 text-sm font-bold text-zinc-600 border-zinc-300 hover:border-zinc-900 hover:text-zinc-900" href="{{ url_for('admin_turbo_dashboard') }}">Live dashboard</a>
      <a class="rounded-full border px-3 py-1 text-sm font-bold text-zinc-600 border-zinc-300 hover:border-zinc-900 hover:text-zinc-900" href="{{ url_for('admin_turbo_campaigns') }}">Campaigns</a>
    </div>
  </div>
</div>

<div class="mt-6 grid gap-4 md:grid-cols-5">
  <div class="admin-panel p-4"><p class="text-xs font-black uppercase tracking-wide text-zinc-500">Live</p><p class="mt-1 text-2xl font-black text-emerald-700">{{ stats.get('live', 0) }}</p></div>
  <div class="admin-panel p-4"><p class="text-xs font-black uppercase tracking-wide text-zinc-500">Removed</p><p class="mt-1 text-2xl font-black text-zinc-400">{{ stats.get('removed', 0) }}</p></div>
  <div class="admin-panel p-4"><p class="text-xs font-black uppercase tracking-wide text-zinc-500">Inactive</p><p class="mt-1 text-2xl font-black text-amber-700">{{ stats.get('inactive', 0) }}</p></div>
  <div class="admin-panel p-4"><p class="text-xs font-black uppercase tracking-wide text-zinc-500">Unchecked</p><p class="mt-1 text-2xl font-black text-zinc-500">{{ stats.get('unchecked', 0) }}</p></div>
  <div class="admin-panel p-4"><p class="text-xs font-black uppercase tracking-wide text-zinc-500">Errors</p><p class="mt-1 text-2xl font-black text-red-700">{{ stats.get('error', 0) }}</p></div>
</div>

<div class="mt-4 admin-panel">
  <div class="flex flex-wrap items-end gap-3">
    <form method="get" class="flex flex-wrap items-end gap-2">
      <label class="min-w-[12rem] flex-1"><span class="form-label">Search</span>
        <input class="form-input" name="q" value="{{ filters.q }}" placeholder="car, VIN, account, AT listing id…"></label>
      <label><span class="form-label">Source</span>
        <select class="form-input" name="source">
          <option value="">All</option>
          <option value="campaign" {% if filters.source == 'campaign' %}selected{% endif %}>Campaign</option>
          <option value="manual" {% if filters.source == 'manual' %}selected{% endif %}>Manual</option>
          <option value="external" {% if filters.source == 'external' %}selected{% endif %}>External</option>
        </select></label>
      <label><span class="form-label">Live</span>
        <select class="form-input" name="live">
          <option value="">All</option>
          {% for s in ('live', 'removed', 'inactive', 'unchecked', 'error') %}
          <option value="{{ s }}" {% if filters.live == s %}selected{% endif %}>{{ s }}</option>
          {% endfor %}
        </select></label>
      <label><span class="form-label">Account</span>
        <select class="form-input" name="profile_id">
          <option value="">All</option>
          {% for p in profiles %}
          <option value="{{ p.id }}" {% if filters.profile_id == p.id|string %}selected{% endif %}>{{ p.email or p.name }}</option>
          {% endfor %}
        </select></label>
      <label><span class="form-label">Campaign</span>
        <select class="form-input" name="campaign_id">
          <option value="">All</option>
          {% for c in campaigns %}
          <option value="{{ c.id }}" {% if filters.campaign_id == c.id|string %}selected{% endif %}>{{ c.name }}</option>
          {% endfor %}
        </select></label>
      <button class="btn-primary" type="submit">Filter</button>
    </form>
    <a class="btn-outline" href="{{ url_for('admin_turbo_tracking_csv', **{'q': filters.q, 'source': filters.source, 'live': filters.live, 'profile_id': filters.profile_id, 'campaign_id': filters.campaign_id}) }}">Download CSV</a>
    <form method="post" action="{{ url_for('admin_turbo_check_live_batch') }}" class="flex items-end gap-2">
      <label><span class="form-label">Check account</span>
        <select class="form-input" name="profile_id" id="check-account-select">
          <option value="all">All accounts</option>
          {% for p in profiles %}
          <option value="{{ p.id }}">{{ p.email or p.name }}</option>
          {% endfor %}
        </select></label>
      <button class="btn-primary" type="submit" id="tl-batch-btn"
              onclick="return confirm('Run live checks for the selected account(s)? Retrieves first (one request per account), page-checks the rest.')">Check live</button>
    </form>
  </div>
  <div id="tl-live-progress" class="mt-3 hidden rounded-lg p-3 text-sm font-bold"></div>
</div>

{% if unassigned %}
<div class="mt-6 admin-panel">
  <h2 class="text-lg font-black">Unassigned external listings <span class="text-zinc-400">({{ unassigned|length }})</span></h2>
  <p class="mt-1 text-xs text-zinc-500">Found on your accounts via "View current listings" but not matched to a car by the Title→stock# map. Assign them so leads and the dashboard can link up.</p>
  <div class="mt-3 grid gap-3">
    {% for u in unassigned %}
    <div class="flex flex-wrap items-center gap-2 rounded-lg border border-amber-200 bg-amber-50 p-3">
      <div class="min-w-[14rem] flex-1">
        <p class="font-bold text-zinc-900">{{ u.external_title or 'Unknown car' }} <span class="text-zinc-500">{{ u.external_price or '' }}</span></p>
        <p class="text-xs text-zinc-500">{{ u.account_email or '' }} · found {{ (u.posted_at or '')[:16] }} · <a class="text-sky-700 underline" target="_blank" rel="noopener" href="{{ at_listing_url(u.autotrader_listing_id) }}">view on AutoTrader</a></p>
      </div>
      <form method="post" action="{{ url_for('admin_turbo_post_assign', post_id=u.id) }}" class="flex items-center gap-2">
        <input class="form-input w-72 text-xs" name="vehicle_search" list="tl-vehicles" placeholder="Type VIN / make / model to assign…" required autocomplete="off">
        <datalist id="tl-vehicles">
          {% for l in listings %}
          <option value="{{ l.year }} {{ l.make }} {{ l.model }} {{ l.trim or '' }} — {{ l.vin }} — {{ l.public_stock_number or '' }}">
          {% endfor %}
        </datalist>
        <button class="btn-outline py-1 text-xs" type="submit">Assign</button>
      </form>
    </div>
    {% endfor %}
  </div>
</div>
{% endif %}

<div class="mt-6 admin-panel overflow-x-auto">
  <h2 class="text-lg font-black">Posts <span class="text-zinc-400">(latest {{ rows|length }})</span></h2>
  <table class="mt-3 min-w-full divide-y divide-zinc-200 text-sm">
    <thead class="bg-zinc-100"><tr>
      <th class="table-heading">#</th><th class="table-heading">Source</th><th class="table-heading">Vehicle</th>
      <th class="table-heading">Account</th><th class="table-heading">Prov/City</th><th class="table-heading">VIN</th>
      <th class="table-heading">Price</th><th class="table-heading">AT Listing</th><th class="table-heading">Posted</th>
      <th class="table-heading">Post</th><th class="table-heading">Live</th><th class="table-heading text-right">Actions</th>
    </tr></thead>
    <tbody class="divide-y divide-zinc-200">
      {% for p in rows %}
      <tr id="post-{{ p.id }}">
        <td class="table-cell text-xs text-zinc-400">{{ p.id }}</td>
        <td class="table-cell"><span class="rounded bg-zinc-100 px-1.5 text-[10px] font-black uppercase text-zinc-500">{{ p.source or 'campaign' }}</span></td>
        <td class="table-cell">
          {% if p.listing_id %}
            <a class="font-bold text-zinc-900 hover:underline" href="{{ url_for('admin_listing_edit', id=p.listing_id) }}">{{ p.year or '' }} {{ p.make or '' }} {{ p.model or '' }} {{ p.trim or '' }}</a>
          {% else %}
            <span class="font-bold text-amber-700">{{ p.external_title or 'Unassigned' }}</span> <span class="text-xs text-zinc-500">{{ p.external_price or '' }}</span>
          {% endif %}
        </td>
        <td class="table-cell text-xs">{{ p.account_email or p.profile_id or '' }}</td>
        <td class="table-cell text-xs">{{ p.province or '' }}{% if p.city %} · {{ p.city }}{% endif %}</td>
        <td class="table-cell text-xs font-mono">{{ p.vin or '' }}</td>
        <td class="table-cell text-xs">{{ p.price_used or '' }}</td>
        <td class="table-cell text-xs">
          {% if p.autotrader_listing_id %}
            <a class="font-mono text-sky-700 underline" target="_blank" rel="noopener" href="{{ at_listing_url(p.autotrader_listing_id) }}">{{ p.autotrader_listing_id[:18] }}…</a>
          {% else %}—{% endif %}
        </td>
        <td class="table-cell text-xs">{{ (p.posted_at or '')[:16] }}</td>
        <td class="table-cell text-xs font-bold {{ 'text-emerald-700' if p.post_status == 'success' else 'text-red-700' }}" title="{{ p.error or '' }}">{{ p.post_status }}</td>
        <td class="table-cell">
          <span class="tl-live-badge text-xs font-bold
            {% if p.live_status == 'live' %}text-emerald-700
            {% elif p.live_status == 'removed' %}text-zinc-400
            {% elif p.live_status == 'inactive' %}text-amber-700
            {% elif p.live_status == 'error' %}text-red-700
            {% else %}text-zinc-500{% endif %}"
            data-post="{{ p.id }}" title="{{ p.live_error or '' }}{% if p.live_checked_at %} · checked {{ p.live_checked_at[:16] }} via {{ p.live_check_method }}{% endif %}">
            {{ p.live_status or 'unchecked' }}</span>
        </td>
        <td class="table-cell">
          <div class="flex flex-wrap justify-end gap-1.5">
            {% if p.autotrader_listing_id %}
            <button class="rounded-lg bg-zinc-900 px-2.5 py-1 text-xs font-black text-white hover:bg-zinc-700 tl-check-btn" type="button"
                    data-post="{{ p.id }}" onclick="tlCheckLive({{ p.id }}, this)">Check live</button>
            <button class="rounded-lg border border-zinc-300 px-2.5 py-1 text-xs font-black text-zinc-600 hover:border-zinc-900 hover:text-zinc-900" type="button"
                    onclick="tlVerify({{ p.id }}, '{{ at_listing_url(p.autotrader_listing_id) }}', this)">Open &amp; verify</button>
            {% endif %}
          </div>
        </td>
      </tr>
      {% else %}
      <tr><td class="table-cell text-zinc-500" colspan="12">No posts match these filters.</td></tr>
      {% endfor %}
    </tbody>
  </table>
</div>

<script>
function tlSetBadge(postId, status, extra) {
  const b = document.querySelector('.tl-live-badge[data-post="' + postId + '"]');
  if (!b) return;
  b.textContent = status;
  b.className = 'tl-live-badge text-xs font-bold ' + (
    status === 'live' ? 'text-emerald-700' :
    status === 'removed' ? 'text-zinc-400' :
    status === 'inactive' ? 'text-amber-700' :
    status === 'error' ? 'text-red-700' : 'text-zinc-500');
  if (extra) b.title = extra;
}
async function tlCheckLive(postId, btn) {
  const old = btn.textContent;
  btn.disabled = true; btn.textContent = 'Checking…';
  try {
    const fd = new FormData();
    const r = await fetch("{{ url_for('admin_turbo_post_check_live', post_id=0) }}".replace('/0', '/' + postId), {method: 'POST', body: fd});
    const d = await r.json();
    tlSetBadge(postId, d.live_status || 'error', d.error || '');
    if (d.live_status === 'error' && d.error) alert('Check failed: ' + d.error);
  } catch (e) { alert('Request failed: ' + e); }
  btn.disabled = false; btn.textContent = old;
}
function tlVerify(postId, url, btn) {
  // Open the offer page in the browser (solves any captcha by hand). Browsers
  // don't let us read a cross-origin page, so you confirm with one click.
  window.open(url, '_blank', 'noopener');
  const cell = btn.parentElement;
  cell.innerHTML =
    '<span class="text-xs font-bold text-zinc-500">Opened — is it live?</span>' +
    '<button class="rounded-lg bg-emerald-600 px-2.5 py-1 text-xs font-black text-white hover:bg-emerald-700" onclick="tlMark(' + postId + ', 1, this)">Live</button>' +
    '<button class="rounded-lg border border-red-200 px-2.5 py-1 text-xs font-black text-red-600 hover:bg-red-50" onclick="tlMark(' + postId + ', 0, this)">Gone</button>';
}
async function tlMark(postId, live, btn) {
  try {
    const fd = new FormData(); fd.append('live', live);
    const r = await fetch("{{ url_for('admin_turbo_post_mark_live', post_id=0) }}".replace('/0', '/' + postId), {method: 'POST', body: fd});
    const d = await r.json();
    tlSetBadge(postId, d.live_status || 'unchecked');
  } catch (e) { alert('Request failed: ' + e); }
  btn.closest('td').innerHTML = '<span class="text-xs text-zinc-400">marked manually</span>';
}
/* batch live-check progress polling */
(function(){
  const el = document.getElementById('tl-live-progress');
  if (!el) return;
  const url = "{{ url_for('admin_turbo_check_live_status') }}";
  function tick(){
    fetch(url).then(r=>r.json()).then(d=>{
      if (!d || d.finished) return;
      el.classList.remove('hidden');
      el.className = 'mt-3 rounded-lg p-3 text-sm font-bold bg-sky-50 text-sky-700';
      el.textContent = `Live check (${d.label}): ${d.profiles_done}/${d.profiles_total} accounts · ` +
        `${d.checked} checked · ${d.live} live · ${d.removed} removed · ${d.inactive} inactive · ${d.errors} errors`;
      setTimeout(tick, 3000);
    }).catch(()=>{});
  }
  tick();
})();
</script>
{% endblock %}