{% extends "admin/base.html" %}
{% block title %}Turbo Campaigns | Admin{% endblock %}
{% block content %}
<div class="admin-page-head">
  <div>
    <p class="eyebrow-dark">Outreach</p>
    <h1>Turbo Campaigns</h1>
    <p class="mt-2 text-sm font-bold text-zinc-600">Automated listing rotation: publish → keep live → delete → publish next batch. Select users, vehicles, timeframe, and let it cycle.</p>
  </div>
  <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_turbo_listing') }}">Poster</a>
    <a class="rounded-full border px-3 py-1 text-sm font-bold text-zinc-600 border-zinc-300" 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" href="{{ url_for('admin_turbo_dashboard') }}">Live dashboard</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_turbo_campaigns') }}">Campaigns</a>
  </div>
</div>

<section class="admin-panel mt-6">
  <h2>Create campaign</h2>
  <form class="mt-4 grid gap-4" method="post" action="{{ url_for('admin_turbo_campaign_create') }}">
    <div class="grid gap-4 sm:grid-cols-4">
      <label><span class="form-label">Name</span><input class="form-input" name="name" placeholder="August rotation"></label>
      <label><span class="form-label">Timeframe (hours live)</span><input class="form-input" type="number" name="timeframe_hours" value="3" min="1" max="48" step="0.5"></label>
      <label><span class="form-label">Location mode</span>
        <select class="form-input" name="location_mode"><option value="random" selected>Random (recommended)</option><option value="ai">AI-chosen</option></select></label>
      <label class="admin-check-pill"><input type="checkbox" name="extended_mode" value="1"> Extended (try 4-6 after 7 days)</label>
      <label class="admin-check-pill"><input type="checkbox" name="always_no_vin" value="1"> Always no-VIN (overrules cooldown)</label>
    </div>
    <div>
      <span class="form-label">Select users (session profiles)</span>
      <div class="mt-2 flex flex-wrap gap-3">
        {% for p in profiles %}
        <label class="admin-check-pill"><input type="checkbox" name="profile_ids" value="{{ p.id }}"> {{ p.name }} ({{ p.email or 'no email' }})</label>
        {% else %}<p class="text-sm text-zinc-500">No saved profiles — save one on the Turbo Listing page first.</p>{% endfor %}
      </div>
    </div>
    <div>
      <span class="form-label">Select vehicles (pool)</span>
      <div class="mt-1 flex items-center gap-2">
        <input class="form-input w-24" type="number" id="random-count" placeholder="N" min="1" max="50">
        <button class="btn-outline" type="button" onclick="tlPickRandom()">Pick N random</button>
        <button class="btn-outline" type="button" onclick="document.querySelectorAll('[name=vehicle_ids]').forEach(c=>c.checked=false)">Clear</button>
      </div>
      <div class="mt-2 max-h-48 overflow-y-auto rounded-lg border border-zinc-200 p-3" id="vehicle-list">
        {% for l in listings %}
        <label class="admin-check-pill mr-2"><input type="checkbox" name="vehicle_ids" value="{{ l.id }}"> {{ l.year }} {{ l.make }} {{ l.model }} {{ l.trim or '' }} ({{ l.vin or '' }})</label>
        {% endfor %}
      </div>
    </div>
    <button class="btn-primary" type="submit">Create campaign</button>
  </form>
</section>

<section class="mt-6 overflow-hidden rounded-lg border border-zinc-200 bg-white shadow-sm">
  <table class="min-w-full divide-y divide-zinc-200">
    <thead class="bg-zinc-100"><tr>
      <th class="table-heading">Name</th><th class="table-heading">Status</th><th class="table-heading">Phase</th>
      <th class="table-heading">Batch</th><th class="table-heading">Hours</th><th class="table-heading">Mode</th><th class="table-heading">Actions</th>
    </tr></thead>
    <tbody class="divide-y divide-zinc-200">
      {% for c in campaigns %}
      <tr>
        <td class="table-cell font-bold text-zinc-950">{{ c.name }}</td>
        <td class="table-cell">{{ c.status }}</td>
        <td class="table-cell">{{ c.current_phase }}</td>
        <td class="table-cell">{{ c.current_batch }}</td>
        <td class="table-cell">{{ c.timeframe_hours }}h</td>
        <td class="table-cell">{{ c.location_mode }}{% if c.extended_mode %} +ext{% endif %}</td>
        <td class="table-cell"><a class="font-bold underline decoration-amber-400 decoration-2 underline-offset-4" href="{{ url_for('admin_turbo_campaign_detail', cid=c.id) }}">Open</a></td>
      </tr>
      {% else %}
      <tr><td class="table-cell text-zinc-500" colspan="7">No campaigns yet.</td></tr>
      {% endfor %}
    </tbody>
  </table>
</section>

<section class="admin-panel mt-6">
  <h2>Saved profiles</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">Name</th><th class="table-heading">Email</th>
      <th class="table-heading">Status</th><th class="table-heading">Reason</th><th class="table-heading">Actions</th>
    </tr></thead>
    <tbody class="divide-y divide-zinc-200">
      {% for p in profiles %}
      <tr>
        <td class="table-cell font-bold">{{ p.name }}</td>
        <td class="table-cell text-xs">{{ p.email or '' }}</td>
        <td class="table-cell">{% if p.flagged %}<span class="rounded-full bg-red-100 px-2 py-0.5 text-xs font-black text-red-700">FLAGGED</span>{% else %}<span class="text-xs text-emerald-700">Active</span>{% endif %}</td>
        <td class="table-cell text-xs text-zinc-500">{{ p.flagged_reason or '' }}</td>
        <td class="table-cell flex gap-2">
          {% if p.flagged %}
          <form method="post" action="{{ url_for('admin_turbo_profile_flag', profile_id=p.id) }}">
            <input type="hidden" name="flag_action" value="unflag">
            <button class="text-xs font-bold text-emerald-700 underline" type="submit">Unflag</button>
          </form>
          {% else %}
          <form method="post" action="{{ url_for('admin_turbo_profile_flag', profile_id=p.id) }}">
            <input type="hidden" name="flag_action" value="flag">
            <button class="text-xs font-bold text-red-600 underline" type="submit" onclick="return confirm('Flag and remove from all campaigns?')">Flag</button>
          </form>
          {% endif %}
          <form method="post" action="{{ url_for('admin_turbo_profile_flag', profile_id=p.id) }}">
            <input type="hidden" name="flag_action" value="delete">
            <button class="text-xs font-bold text-red-800 underline" type="submit" onclick="return confirm('PERMANENTLY ERASE this profile? Removes from ALL campaigns + deletes the saved session. Cannot be undone.')">Erase profile (all campaigns)</button>
          </form>
          <form method="post" action="{{ url_for('admin_turbo_profile_refresh_cookies', profile_id=p.id) }}">
            <button class="text-xs font-bold text-sky-700 underline" type="submit">Refresh cookies</button>
          </form>
          <details class="mt-1">
            <summary class="cursor-pointer text-xs font-bold text-sky-700">Paste cookies</summary>
            <form class="mt-1 flex flex-col gap-1" method="post" action="{{ url_for('admin_turbo_profile_paste_cookies', profile_id=p.id) }}">
              <textarea class="form-input text-xs font-mono" name="cookie_text" rows="3" placeholder="Paste from browser DevTools: name=value; name=value; ..."></textarea>
              <button class="btn-outline py-1 text-xs" type="submit">Update cookies</button>
            </form>
          </details>
        </td>
      </tr>
      {% else %}
      <tr><td class="table-cell text-zinc-500" colspan="5">No saved profiles.</td></tr>
      {% endfor %}
    </tbody>
  </table>
</section>
<script>
function tlPickRandom(){
  const n = parseInt(document.getElementById('random-count').value || '0');
  const boxes = [...document.querySelectorAll('[name=vehicle_ids]')];
  boxes.forEach(c => c.checked = false);
  if(n > 0 && n <= boxes.length){
    const idxs = [...Array(boxes.length).keys()].sort(() => Math.random() - 0.5).slice(0, n);
    idxs.forEach(i => boxes[i].checked = true);
  }
}
</script>
{% endblock %}