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

{% block title %}Listings | Admin{% endblock %}

{% block content %}
<div class="flex flex-col justify-between gap-4 sm:flex-row sm:items-end">
  <div>
    <p class="eyebrow-dark">Inventory</p>
    <h1 class="mt-3 text-4xl font-black tracking-normal">Listings</h1>
  </div>
  <a class="btn-primary" href="{{ url_for('admin_listing_create') }}">Create Listing</a>
</div>
<p class="mt-4 text-sm font-bold text-zinc-600">Showing {{ shown_count }} of {{ total_count }} listings</p>

<section class="mt-4 rounded-lg border border-zinc-200 bg-white p-5 shadow-sm">
  <h2 class="text-lg font-black">Import from crawler DB</h2>
  <p class="mt-1 text-sm text-zinc-600">Two ways: <b>(A)</b> paste a server path to a <code>.zip</code>, a <code>.sqlite3</code>, or a folder containing both <code>vehicles.sqlite3</code> + <code>images/</code> — use this for big imports (SFTP the files over with WinSCP, which can resume broken transfers, then point the import here). <b>(B)</b> upload a <code>.sqlite3</code> or <code>.zip</code> via the browser (smaller imports). If a server path is given, the file upload is ignored.</p>
  <form class="mt-3 flex flex-wrap items-end gap-3" method="post" action="{{ url_for('admin_listings_import_crawler') }}" enctype="multipart/form-data">
    <label class="flex-1 min-w-[16rem]"><span class="form-label">(A) Server path — .zip / .sqlite3 / folder</span><input class="form-input font-mono text-xs" name="server_path" placeholder="/home/site/canada  or  /home/site/canada.zip  or  /home/site/vehicles.sqlite3"></label>
    <label><span class="form-label">(B) Or upload file</span><input class="form-input" type="file" name="crawler_db" accept=".sqlite3,.sqlite,.db,.zip"></label>
    <label class="admin-check-pill"><input type="checkbox" name="copy_images" value="1" checked> Copy images</label>
    <label class="admin-check-pill"><input type="checkbox" name="missing_only" value="1" checked> Skip VINs already in inventory</label>
    <label class="admin-check-pill"><input type="checkbox" name="publish" value="1"> Publish imported</label>
    <label class="admin-check-pill"><input type="checkbox" name="overwrite" value="1"> Overwrite existing</label>
    <label class="admin-check-pill"><input type="checkbox" name="images_only" value="1"> <b>Repair images only</b></label>
    <button class="btn-primary" type="submit">Start import</button>
  </form>
  <p class="mt-3 text-xs text-zinc-500"><b>Keep "Copy images" checked</b> — unchecked, photos are linked as remote URLs that public galleries cannot display.</p>
  <p class="mt-1 text-xs text-zinc-500"><b>Repair images only</b> fixes photos for existing listings whose images are missing (empty galleries / placeholder cards) by re-copying them from the crawler source. It <b>never changes</b> titles, descriptions, prices, status, publish state, translations, or inspection reports, and it skips archived listings — the other checkboxes don't apply to it. Use this after an import that came in without photos instead of re-importing.</p>
  <div id="crawler-import-status" class="mt-3 hidden rounded-lg p-3 text-sm font-bold"></div>
</section>
<script>
(function(){
  const el = document.getElementById('crawler-import-status');
  if (!el) return;
  const url = "{{ url_for('admin_listings_import_crawler_status') }}";
  function empty(v){ return v===0 || v==null || (Array.isArray(v) && !v.length) || (v && typeof v==='object' && !Array.isArray(v) && !Object.keys(v).length); }
  function fmt(s){
    if (!s) return '';
    return Object.entries(s).filter(([k,v]) => !empty(v) || k==='images_copied').map(([k,v]) => `${k}: ${(v!==null && typeof v==='object') ? JSON.stringify(v) : v}`).join(' · ');
  }
  function warnings(s){
    const out = [];
    if (!s) return out;
    if (s.missing_image_files) {
      const vins = Object.keys(s.missing_image_vins || {});
      out.push(s.missing_image_files + ' image files were NOT FOUND next to the source DB (check the images/ folder on the server).' + (vins.length ? ' Affected VINs: ' + vins.slice(0,10).join(', ') + (vins.length>10?'…':'') : ''));
    }
    if ((s.listings_without_local_images || []).length) {
      const names = s.listings_without_local_images;
      out.push(names.length + ' listing(s) have NO local images: ' + names.slice(0,10).join('; ') + (names.length>10?'…':'') + ' — run "Repair images only" with the complete source images/ folder in place to fix them.');
    }
    if (s.images_linked_remote) {
      out.push(s.images_linked_remote + ' image(s) linked as remote URL only — they will NOT appear in public galleries. Re-run with "Copy images" checked.');
    }
    return out;
  }
  function tick(){
    fetch(url).then(r=>r.json()).then(d=>{
      if (d.finished) {
        el.style.whiteSpace = 'pre-line';
        if (d.error) { el.className='mt-3 rounded-lg p-3 text-sm font-bold bg-red-50 text-red-700'; el.textContent='Import finished with error: '+d.error; }
        else if (d.summary && Object.keys(d.summary).length) {
          const warns = warnings(d.summary);
          const notes = [];
          if (d.summary.thumbnails_job_started) notes.push('Thumbnail generation started in the background.');
          if (warns.length) {
            el.className='mt-3 rounded-lg p-3 text-sm font-bold bg-amber-50 text-amber-800';
            el.textContent = 'Import finished WITH WARNINGS — ' + fmt(d.summary) + '\n\n⚠ ' + warns.join('\n⚠ ');
          } else {
            el.className='mt-3 rounded-lg p-3 text-sm font-bold bg-emerald-50 text-emerald-700';
            el.textContent = 'Import done — ' + fmt(d.summary) + (notes.length ? '\n' + notes.join(' ') : '');
          }
        }
        else { el.className='mt-3 rounded-lg p-3 text-sm font-bold bg-zinc-50 text-zinc-600'; el.textContent='No import running.'; }
        clearInterval(t);
      } else {
        el.className='mt-3 rounded-lg p-3 text-sm font-bold bg-sky-50 text-sky-700'; el.textContent='Importing… (started '+d.started_at+')';
      }
    }).catch(()=>{});
  }
  el.classList.remove('hidden');
  tick();
  const t = setInterval(tick, 4000);
})();
</script>

<form class="mt-8 rounded-lg border border-zinc-200 bg-white p-5 shadow-sm" method="get">
  <div class="grid gap-4 md:grid-cols-2 xl:grid-cols-5">
    <input class="form-input mt-0" name="q" value="{{ filters.q }}" placeholder="Search listings">
    <select class="form-input mt-0" name="category"><option value="">All categories</option>{% for option in filter_options.categories %}<option value="{{ option.category }}" {% if filters.category == option.category %}selected{% endif %}>{{ option.category }}</option>{% endfor %}</select>
    <select class="form-input mt-0" name="make"><option value="">All makes</option>{% for option in filter_options.makes %}<option value="{{ option.make }}" {% if filters.make == option.make %}selected{% endif %}>{{ option.make }}</option>{% endfor %}</select>
    <select class="form-input mt-0" name="model"><option value="">All models</option>{% for option in filter_options.models %}<option value="{{ option.model }}" {% if filters.model == option.model %}selected{% endif %}>{{ option.model }}</option>{% endfor %}</select>
    <select class="form-input mt-0" name="status"><option value="">Any status</option>{% for option in filter_options.statuses %}<option value="{{ option.status }}" {% if filters.status == option.status %}selected{% endif %}>{{ option.status }}</option>{% endfor %}</select>
    <select class="form-input mt-0" name="published"><option value="">Published + drafts</option><option value="1" {% if filters.published == '1' %}selected{% endif %}>Published only</option><option value="0" {% if filters.published == '0' %}selected{% endif %}>Drafts only</option></select>
    <select class="form-input mt-0" name="year"><option value="">All years</option>{% for option in filter_options.years %}<option value="{{ option.year }}" {% if filters.year == option.year %}selected{% endif %}>{{ option.year }}</option>{% endfor %}</select>
    <input class="form-input mt-0" name="price_min" value="{{ filters.price_min }}" placeholder="Min price">
    <input class="form-input mt-0" name="price_max" value="{{ filters.price_max }}" placeholder="Max price">
    <select class="form-input mt-0" name="sort"><option value="newest" {% if filters.sort == 'newest' %}selected{% endif %}>Newest</option><option value="price_low" {% if filters.sort == 'price_low' %}selected{% endif %}>Price low to high</option><option value="price_high" {% if filters.sort == 'price_high' %}selected{% endif %}>Price high to low</option><option value="year_newest" {% if filters.sort == 'year_newest' %}selected{% endif %}>Year newest</option></select>
    <label class="rounded-lg border border-zinc-200 px-3 py-2 text-sm font-bold"><input type="checkbox" name="missing_images" value="1" {% if filters.missing_images %}checked{% endif %}> Missing images</label>
    <label class="rounded-lg border border-zinc-200 px-3 py-2 text-sm font-bold"><input type="checkbox" name="missing_category" value="1" {% if filters.missing_category %}checked{% endif %}> Missing category</label>
    <label class="rounded-lg border border-zinc-200 px-3 py-2 text-sm font-bold"><input type="checkbox" name="missing_description" value="1" {% if filters.missing_description %}checked{% endif %}> Missing description</label>
    <label class="rounded-lg border border-zinc-200 px-3 py-2 text-sm font-bold"><input type="checkbox" name="archived" value="1" {% if filters.archived %}checked{% endif %}> Show archived</label>
    <div class="flex gap-2"><button class="btn-primary" type="submit">Filter</button><a class="btn-outline" href="{{ url_for('admin_listings') }}">Reset</a></div>
  </div>
</form>


<form class="mt-8 rounded-lg border border-emerald-200 bg-emerald-50 p-5 shadow-sm" method="post" action="{{ url_for('trust.admin_listing_trust_bulk') }}" data-trust-bulk-form>
  <div class="flex flex-col justify-between gap-3 lg:flex-row lg:items-end">
    <div><h2 class="text-xl font-black">Bulk Location & Inspection</h2><p class="mt-2 text-sm font-bold text-zinc-600">Choose one action. Only the fields required for that action are shown.</p></div>
    <p class="rounded-lg bg-white px-3 py-2 text-sm font-black text-emerald-900" data-trust-scope-summary>Scope: selected rows</p>
  </div>
  <div class="mt-4 grid gap-4 md:grid-cols-3">
    <label><span class="form-label">Action</span><select class="form-input" name="trust_action" data-trust-action>
      <option value="">Choose action</option><option value="assign_location">Assign saved location</option><option value="randomize_inspection_dates">Set randomized inspection dates</option><option value="mark_verified_today">Mark availability verified today</option><option value="set_verification_date">Set availability verification date</option><option value="clear_verification_date">Clear availability verification date</option><option value="set_visibility">Change public location visibility</option><option value="collection_yes">Collection available</option><option value="collection_no">Collection unavailable</option><option value="inspection_yes">Inspection available</option><option value="inspection_no">Inspection unavailable</option><option value="update_notes">Update location notes</option>
    </select></label>
    <label data-trust-field="assign_location"><span class="form-label">Saved location</span><select class="form-input" name="saved_location_id"><option value="">Choose location</option>{% for loc in trust_saved_locations %}<option value="{{ loc.id }}">{{ loc.internal_name }}</option>{% endfor %}</select></label>
    <label data-trust-field="verification"><span class="form-label">Verification date</span><input class="form-input" type="date" name="verification_date" value="{{ trust_today }}" max="{{ trust_today }}"></label>
    <label data-trust-field="visibility"><span class="form-label">Visibility</span><select class="form-input" name="location_public"><option value="full">Full address</option><option value="city">Postal code / city / country</option><option value="country">Country only</option><option value="custom">Custom text</option><option value="hidden">Hidden</option></select></label>
    <label data-trust-field="inspection"><span class="form-label">Inspection date from</span><input class="form-input" type="date" name="inspection_date_from" max="{{ trust_today }}"></label>
    <label data-trust-field="inspection"><span class="form-label">Inspection date to</span><input class="form-input" type="date" name="inspection_date_to" max="{{ trust_today }}"></label>
    <label data-trust-field="inspection"><span class="form-label">Inspection performed</span><select class="form-input" name="bulk_inspection_status"><option value="visually checked">Visual inspection</option><option value="mechanically inspected">Mechanical inspection</option><option value="third-party inspected">Third-party inspection</option><option value="documentation only">Documentation review only</option></select></label>
    <label data-trust-field="inspection"><span class="form-label">Condition check result</span><select class="form-input" name="bulk_condition_check_status"><option value="auto">Match inspection automatically</option><option value="visually checked">Visually checked</option><option value="mechanically checked">Mechanically checked</option><option value="third-party checked">Third-party checked</option><option value="documentation only">Documentation only</option><option value="pending">Pending</option><option value="not checked">Not checked</option></select></label>
    <label class="md:col-span-2" data-trust-field="notes"><span class="form-label">Location notes</span><input class="form-input" name="location_notes"></label>
  </div>
  <div class="mt-4 grid gap-2 sm:grid-cols-2">
    <label class="rounded-lg border border-emerald-200 bg-white px-3 py-3 text-sm font-bold"><input type="radio" name="scope_mode" value="selected" checked data-trust-scope> Apply to selected rows only</label>
    <label class="rounded-lg border border-emerald-200 bg-white px-3 py-3 text-sm font-bold"><input type="radio" name="scope_mode" value="matching" data-trust-scope> Apply to every listing matching the filters above</label>
    <input type="hidden" name="all_matching" value="0" data-all-matching>
  </div>
  {% for key in ['q','category','make','model','status','published','year'] %}<input type="hidden" name="{{ key }}" value="{{ filters[key] if filters[key] is defined else '' }}">{% endfor %}
  <div data-trust-selected-inputs></div><button class="btn-primary mt-5">Apply Location / Inspection Update</button>
</form>

<form class="mt-8 overflow-hidden rounded-lg border border-zinc-200 bg-white shadow-sm" method="post" action="{{ url_for('admin_listings_bulk') }}" data-confirm-bulk>
  <div class="flex flex-wrap items-end gap-3 border-b border-zinc-200 bg-zinc-50 p-4">
    <p class="w-full text-sm font-bold text-zinc-600" data-listing-selected-count>Selected 0 listings</p>
    <label><span class="form-label">Bulk action</span><select class="form-input" name="bulk_action"><option value="">Choose action</option><option value="unpublish">Unpublish selected</option><option value="publish">Publish selected</option><option value="delete">Archive / hide selected</option><option value="delete_permanent" style="color:#b91c1c;font-weight:700">⚠ Delete PERMANENTLY (frees space — sold cars)</option><option value="restore">Restore selected</option><option value="Available">Mark Available</option><option value="Reserved">Mark Reserved</option><option value="Sold">Mark Sold</option><option value="set_category">Set category</option><option value="set_make">Set make</option><option value="set_carfax_url">Set Carfax URL</option><option value="set_carfax_on">Show Carfax button</option><option value="set_carfax_off">Hide Carfax button</option><option value="repair_images">Repair selected image order</option><option value="rename_images">Regenerate image filenames</option><option value="regen_refs">Fill missing public refs</option><option value="reset_refs">Reset public refs to prefix</option><option value="generate_desc">Generate AI Descriptions</option><option value="generate_desc_missing">Generate AI Descriptions (missing only)</option><option value="generate_inspection">Generate Inspection Reports</option><option value="generate_inspection_missing">Generate Inspection Reports (missing only)</option></select></label>
    <label><span class="form-label">Category</span><input class="form-input" name="bulk_category" placeholder="Category"></label>
    <label><span class="form-label">Make</span><input class="form-input" name="bulk_make" placeholder="Make"></label>
    <label><span class="form-label">Carfax URL</span><input class="form-input" name="bulk_carfax_url" placeholder="https://www.carfax.ca/vehicle/..."><p class="mt-0.5 text-[11px] font-bold text-zinc-500">Leave empty to clear the Carfax URL for selected listings.</p></label>
    <button class="btn-primary" type="submit">Apply</button>
  </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 id="select-all-listings" type="checkbox" data-check-all></th>
          <th class="table-heading">Image</th>
          <th class="table-heading">Stock / Reference</th>
          <th class="table-heading">Title</th>
          <th class="table-heading">Odometer</th>
          <th class="table-heading">Price</th>
          <th class="table-heading">AI Desc</th>
          <th class="table-heading">Insp</th>
          <th class="table-heading">Status</th>
          <th class="table-heading">Published</th>
          <th class="table-heading">Location / Inspection</th>
          <th class="table-heading">Translations</th>
          <th class="table-heading">Action</th>
        </tr>
      </thead>
      <tbody class="divide-y divide-zinc-200">
        {% for listing in listings %}
          <tr data-has-ai-description="{{ 1 if listing.ai_description_status else 0 }}" data-has-inspection="{{ 1 if inspection_statuses.get(listing.id) else 0 }}" data-inspection-approved="{{ 1 if inspection_statuses.get(listing.id) == 'approved' else 0 }}" data-carfax-enabled="{{ 1 if listing.carfax_enabled is sameas undefined or listing.carfax_enabled else 0 }}">
            <td class="table-cell"><input class="listing-row-checkbox" type="checkbox" name="listing_ids" value="{{ listing.id }}"></td>
            <td class="table-cell">{% set thumb = get_listing_primary_image(listing.id) %}{% if thumb %}<img class="h-14 w-20 rounded object-cover" src="{{ thumb|thumb }}" alt="{{ listing.title_en }}" loading="lazy" decoding="async">{% else %}<div class="h-14 w-20 rounded bg-zinc-200"></div>{% endif %}</td>
            <td class="table-cell font-bold text-zinc-950">
              <span class="block">{{ listing.stock_number }}</span>
              <span class="text-xs text-zinc-500">{{ listing.public_stock_number or "No public ref" }}</span>
            </td>
            <td class="table-cell"><strong class="text-zinc-950">{{ listing.title_en }}</strong><p class="text-xs text-zinc-500">{{ listing.slug }}</p></td>
            <td class="table-cell">{% if listing.odometer %}{{ "{:,}".format(listing.odometer) }} km{% else %}N/A{% endif %}</td>
            <td class="table-cell">{{ format_price_for_language(listing.price, settings.default_language or 'en', settings) }}</td>
            <td class="table-cell">
              {% if listing.ai_description_status %}<span class="rounded-full bg-emerald-100 px-2 py-0.5 text-xs font-black text-emerald-800">AI</span>{% else %}<span class="rounded-full bg-zinc-100 px-2 py-0.5 text-xs font-black text-zinc-400">—</span>{% endif %}
            </td>
            <td class="table-cell">
              {% set ist = inspection_statuses.get(listing.id) %}
              {% if ist == 'approved' %}<span class="rounded-full bg-emerald-100 px-2 py-0.5 text-xs font-black text-emerald-800" title="Inspection approved">✓</span>
              {% elif ist == 'pending' %}<span class="rounded-full bg-amber-100 px-2 py-0.5 text-xs font-black text-amber-800" title="Pending shop review">●</span>
              {% elif ist == 'changes_requested' %}<span class="rounded-full bg-amber-100 px-2 py-0.5 text-xs font-black text-amber-800" title="Changes requested">●</span>
              {% elif ist == 'revoked' %}<span class="rounded-full bg-red-100 px-2 py-0.5 text-xs font-black text-red-700" title="Revoked">■</span>
              {% else %}<span class="rounded-full bg-zinc-100 px-2 py-0.5 text-xs font-black text-zinc-400">—</span>{% endif %}
            </td>
            <td class="table-cell">{{ listing.status }}</td>
            <td class="table-cell">{{ 'Yes' if listing.is_published else 'No' }}</td>
            <td class="table-cell min-w-64 text-xs leading-5">
              <p><strong>Location:</strong> {{ public_location_text(listing) or 'Not assigned / hidden' }}</p>
              <p><strong>Inspection:</strong> {{ listing.inspection_status or 'not checked' }}{% if listing.inspection_date %} · {{ format_canadian_date(listing.inspection_date) }}{% endif %}</p>
              <p><strong>Condition:</strong> {{ listing.condition_check_status or 'not checked' }}</p>
              <p><strong>Collection:</strong> {{ 'Yes' if listing.collection_available else 'No' }} · <strong>Delivery:</strong> {{ 'Yes' if listing.delivery_available else 'No' }}</p>
            </td>
            <td class="table-cell">
              <div class="flex max-w-72 flex-wrap gap-1">
                {% for item in listing_translation_summary(listing) %}
                  <span class="rounded-full px-2 py-1 text-[11px] font-black {{ 'bg-emerald-100 text-emerald-800' if item.has_content else 'bg-zinc-200 text-zinc-700' }}" title="{{ item.name }}: {{ item.status }}">
                    {{ item.label }} {{ item.status }}
                  </span>
                {% endfor %}
              </div>
            </td>
            <td class="table-cell">
              <a class="font-bold underline decoration-amber-400 decoration-2 underline-offset-4" href="{{ url_for('admin_listing_edit', id=listing.id) }}">Edit</a>
              {% if listing.is_published %}
                <a class="ml-3 font-bold underline decoration-amber-400 decoration-2 underline-offset-4" href="{{ url_for('listing_detail', lang=settings.default_language or 'en', slug=listing.slug) }}" target="_blank" rel="noopener noreferrer">View</a>
              {% endif %}
              <button type="button" class="ml-3 rounded bg-zinc-100 px-2 py-1 text-xs font-bold text-zinc-700 hover:bg-zinc-200" onclick="genDesc({{ listing.id }}, this)" title="Generate AI Description">AI Desc</button>
            </td>
          </tr>
        {% else %}
          <tr><td class="table-cell" colspan="13">No listings match those filters.</td></tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</form>


<script>
(() => {
  const form = document.querySelector('[data-trust-bulk-form]');
  if (!form) return;
  const action = form.querySelector('[data-trust-action]');
  const allMatching = form.querySelector('[data-all-matching]');
  const scopeSummary = form.querySelector('[data-trust-scope-summary]');
  const groups = Array.from(form.querySelectorAll('[data-trust-field]'));
  const actionGroups = {
    assign_location: ['assign_location'],
    randomize_inspection_dates: ['inspection'],
    set_verification_date: ['verification'],
    set_visibility: ['visibility'],
    update_notes: ['notes']
  };
  const refreshFields = () => {
    const visible = actionGroups[action.value] || [];
    groups.forEach(el => { el.hidden = !visible.includes(el.dataset.trustField); });
  };
  const refreshScope = () => {
    const selected = form.querySelector('[data-trust-scope]:checked')?.value || 'selected';
    allMatching.value = selected === 'matching' ? '1' : '0';
    scopeSummary.textContent = selected === 'matching' ? 'Scope: all listings matching current filters' : 'Scope: selected rows';
  };
  action.addEventListener('change', refreshFields);
  form.querySelectorAll('[data-trust-scope]').forEach(el => el.addEventListener('change', refreshScope));
  form.addEventListener('submit', async (event) => {
    if (action.value === 'generate_desc') {
      event.preventDefault();
      const checked = Array.from(document.querySelectorAll('.listing-row-checkbox:checked'));
      if (!checked.length) { alert('Select at least one listing.'); return; }
      let ok = 0, fail = 0;
      for (const cb of checked) {
        const btn = cb.closest('tr')?.querySelector('button[onclick*="genDesc"]');
        try {
          const resp = await fetch('/stock-room-7f4c2a91/listings/' + cb.value + '/generate-description', {
            method: 'POST',
            headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
          });
          const data = await resp.json();
          if (data.ok) { ok++; }
          else { fail++; }
        } catch(e) { fail++; }
      }
      alert('Generated descriptions: ' + ok + ' OK, ' + fail + ' failed.');
      return;
    }
    const holder = form.querySelector('[data-trust-selected-inputs]');
    holder.innerHTML = '';
    refreshScope();
    if (!action.value) { event.preventDefault(); alert('Choose a bulk action first.'); return; }
    if (allMatching.value !== '1') {
      const checked = Array.from(document.querySelectorAll('.listing-row-checkbox:checked'));
      if (!checked.length) { event.preventDefault(); alert('Select at least one listing, or choose all matching current filters.'); return; }
      checked.forEach(cb => { const input=document.createElement('input'); input.type='hidden'; input.name='listing_ids'; input.value=cb.value; holder.appendChild(input); });
    }
  });
  refreshFields(); refreshScope();
})();

async function genDesc(listingId, btn) {
  const origText = btn.textContent;
  btn.disabled = true;
  btn.textContent = '...';
  try {
    const resp = await fetch('/stock-room-7f4c2a91/listings/' + listingId + '/generate-description', {
      method: 'POST',
      headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
    });
    const data = await resp.json();
    if (data.ok) {
      btn.textContent = 'Done';
      btn.classList.add('bg-emerald-100', 'text-emerald-800');
    } else {
      btn.textContent = 'Error';
      btn.classList.add('bg-red-100', 'text-red-700');
    }
  } catch (e) {
    btn.textContent = 'Error';
    btn.classList.add('bg-red-100', 'text-red-700');
  } finally {
    setTimeout(() => {
      btn.disabled = false;
      btn.textContent = origText;
      btn.classList.remove('bg-emerald-100', 'text-emerald-800', 'bg-red-100', 'text-red-700');
    }, 3000);
  }
}
</script>

<script>
(() => {
  const form = document.querySelector('form[data-confirm-bulk]');
  if (!form) return;
  const action = form.querySelector('select[name="bulk_action"]');
  const statusEl = form.querySelector('[data-listing-selected-count]');
  form.addEventListener('submit', async (event) => {
    const act = action.value;
    if (act === 'delete_permanent') {
      if (!confirm('PERMANENT DELETE — this removes the listing, ALL its data, and the image FILES from disk. It cannot be undone. Use for sold cars to free space. Continue?')) {
        event.preventDefault();
      }
      return;
    }
    const isDesc = act === 'generate_desc' || act === 'generate_desc_missing';
    const isInsp = act === 'generate_inspection' || act === 'generate_inspection_missing';
    if (!isDesc && !isInsp) return;
    event.preventDefault();
    let checked = Array.from(document.querySelectorAll('.listing-row-checkbox:checked'));
    if (!checked.length) { alert('Select at least one listing.'); return; }
    const endpoint = isInsp ? '/generate-inspection' : '/generate-description';
    const missingAttr = isInsp ? 'hasInspection' : 'hasAiDescription';
    const label = isInsp ? 'inspection report' : 'AI description';
    if (act.endsWith('_missing')) {
      const before = checked.length;
      checked = checked.filter(cb => cb.closest('tr')?.dataset?.[missingAttr] !== '1');
      const skipped = before - checked.length;
      if (!checked.length) { alert('All selected listings already have an ' + label + ' (' + skipped + ' skipped).'); return; }
      if (!confirm('Generate ' + label + 's for ' + checked.length + ' listing(s) missing one? ' + skipped + ' already had one and will be skipped. This runs one at a time.')) return;
    } else {
      if (!confirm('Generate ' + label + 's for ' + checked.length + ' listing(s)? This runs one at a time and may take a while.')) return;
    }
    const btn = form.querySelector('button[type="submit"]'); const orig = btn.textContent;
    btn.disabled = true;
    let ok = 0, fail = 0;
    let errors = [];
    let cancelled = false;
    btn.textContent = 'Generating… (click to STOP)';
    btn.style.cursor = 'pointer';
    btn.onclick = () => { cancelled = true; };
    for (let i = 0; i < checked.length; i++) {
      if (cancelled) break;
      const cb = checked[i];
      const title = cb.closest('tr')?.dataset?.title || cb.value;
      if (statusEl) {
        let s = 'Generating ' + (i + 1) + '/' + checked.length + ' (OK ' + ok + ', failed ' + fail + ')';
        if (errors.length) s += ' — last error: ' + errors[errors.length - 1].slice(0, 80);
        statusEl.textContent = s;
      }
      btn.textContent = (i + 1) + '/' + checked.length + ' (STOP)';
      try {
        const resp = await fetch('/stock-room-7f4c2a91/listings/' + cb.value + endpoint, {
          method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
        });
        const data = await resp.json();
        if (data.ok) ok++;
        else { fail++; errors.push(title + ': ' + (data.error || 'unknown error')); }
      } catch (e) { fail++; errors.push(title + ': ' + e.message); }
    }
    btn.disabled = false; btn.textContent = orig;
    btn.style.cursor = '';
    btn.onclick = null;
    if (statusEl) statusEl.textContent = 'Selected ' + checked.length + ' listings';
    let summary = (cancelled ? 'STOPPED after ' + (ok + fail) + '. ' : '') + 'Generated ' + label + 's: ' + ok + ' OK, ' + fail + ' failed.';
    if (errors.length) summary += '\n\nErrors:\n' + errors.slice(0, 20).join('\n') + (errors.length > 20 ? '\n…(' + (errors.length - 20) + ' more)' : '');
    alert(summary);
  });
})();
</script>

{% endblock %}