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

{% block title %}{{ 'Edit' if listing else 'Create' }} Listing | Admin{% endblock %}

{% block content %}
<div class="admin-page-head">
  <div>
    <p class="eyebrow-dark">Inventory</p>
    <h1>{{ 'Edit Listing' if listing else 'Create Listing' }}</h1>
    {% if listing %}
      <p class="mt-2 text-sm font-bold text-zinc-500">{{ listing.public_stock_number or listing.stock_number }} / {{ listing.title_en }}</p>
    {% endif %}
  </div>
  <div class="flex flex-wrap gap-2">
    <a class="btn-outline" href="{{ url_for('admin_listings') }}">Back to Listings</a>
    {% if listing and listing.is_published %}
      <a class="btn-primary" href="{{ url_for('listing_detail', lang=settings.default_language or 'en', slug=listing.slug) }}" target="_blank" rel="noopener noreferrer">View Listing</a>
    {% endif %}
  </div>
</div>

<form class="admin-edit-grid mt-8" method="post">
  <section class="admin-panel">
    <h2>English Content</h2>
    <label class="mt-5 block"><span class="form-label">Title</span><input class="form-input" name="title_en" value="{{ listing.title_en if listing else '' }}" required></label>
    <label class="mt-4 block"><span class="form-label">Short description</span><textarea class="form-input min-h-28" name="short_description_en">{{ listing.short_description_en if listing else '' }}</textarea></label>
    <label class="mt-4 block"><span class="form-label">HTML description</span><textarea class="form-input min-h-64 font-mono text-sm" name="description_html_en" id="desc-textarea">{{ listing.description_html_en if listing else '' }}</textarea></label>
    {% if listing %}
    <button type="button" id="btn-generate-desc" class="btn-secondary mt-2" onclick="generateDescription({{ listing.id }})">Generate AI Description</button>
    <span id="desc-status" class="ml-3 text-sm font-bold text-zinc-500 hidden"></span>
    {% endif %}
    <div class="mt-4 grid gap-4 md:grid-cols-2">
      <label><span class="form-label">SEO title</span><input class="form-input" name="seo_title_en" value="{{ listing.seo_title_en if listing else '' }}"></label>
      <label><span class="form-label">Meta description</span><textarea class="form-input min-h-24" name="meta_description_en">{{ listing.meta_description_en if listing else '' }}</textarea></label>
    </div>
  </section>

  <aside class="admin-panel">
    <h2>Listing Basics</h2>
    <div class="mt-5 grid gap-4 sm:grid-cols-2">
      <label><span class="form-label">Stock number</span><input class="form-input" name="stock_number" value="{{ listing.stock_number if listing else '' }}"></label>
      <label><span class="form-label">Public reference</span><input class="form-input" name="public_stock_number" value="{{ listing.public_stock_number if listing else '' }}"></label>
      <label class="sm:col-span-2"><span class="form-label">Slug</span><input class="form-input" name="slug" value="{{ listing.slug if listing else '' }}"></label>
      <label><span class="form-label">Year</span><input class="form-input" name="year" value="{{ listing.year if listing else '' }}"></label>
      <label><span class="form-label">Make</span><input class="form-input" name="make" value="{{ listing.make if listing else '' }}"></label>
      <label><span class="form-label">Model</span><input class="form-input" name="model" value="{{ listing.model if listing else '' }}"></label>
      <label><span class="form-label">Category</span><input class="form-input" name="category" value="{{ listing.category if listing else '' }}"></label>
      <label><span class="form-label">Status</span><select class="form-input" name="status">{% for status in statuses %}<option value="{{ status }}" {% if listing and listing.status == status %}selected{% endif %}>{{ status }}</option>{% endfor %}</select></label>
      <label><span class="form-label">Price</span><input class="form-input" name="price" value="{{ listing.price if listing else '' }}"></label>
      <label><span class="form-label">Odometer (km)</span><input class="form-input" name="odometer" value="{{ listing.odometer if listing else '' }}" placeholder="e.g. 51055"></label>
      <label><span class="form-label">Price label</span><input class="form-input" name="price_label" value="{{ listing.price_label if listing else '' }}"></label>
      <p class="text-xs font-bold text-zinc-500 sm:col-span-2">Stored/base price currency: {{ settings.base_currency or "EUR" }}</p>
      <label class="sm:col-span-2"><span class="form-label">Featured image path</span><input class="form-input" name="featured_image" value="{{ listing.featured_image if listing else '' }}"></label>
      <label class="sm:col-span-2"><span class="form-label">Source URL</span><input class="form-input" name="source_url" value="{{ listing.source_url if listing else '' }}"></label>
      <label class="sm:col-span-2"><span class="form-label">Folder path</span><input class="form-input" name="folder_path" value="{{ listing.folder_path if listing else '' }}"></label>
      <label class="sm:col-span-2"><span class="form-label">Carfax report URL</span><input class="form-input" name="carfax_url" value="{{ listing.carfax_url if listing else '' }}" placeholder="https://www.carfax.ca/vehicle/..."><p class="mt-1 text-xs font-bold text-zinc-500">Link to the Carfax report for this vehicle. Leave empty to hide the Carfax button on the listing page.</p></label>
      <label class="admin-check-pill sm:col-span-2 mt-2"><input type="checkbox" name="carfax_enabled" value="1" {% if not listing or listing.carfax_enabled is none or listing.carfax_enabled %}checked{% endif %}><span>Show Carfax button on this listing</span></label>
      <label class="sm:col-span-2 mt-2"><span class="form-label">Carfax accident notes (for inspection report)</span><textarea class="form-input" name="carfax_accident_notes" rows="2" placeholder="e.g. No accidents per Carfax  ·  or  1 accident, 2022, minor rear-end, $2,300">{{ listing.carfax_accident_notes if listing else '' }}</textarea><p class="mt-1 text-xs font-bold text-zinc-500">What Carfax shows for this VIN. The AI inspection report uses this (plus an auto-scan of the saved Carfax file) so the Exterior &amp; Interior section reflects real accident history instead of claiming "no accidents".</p></label>
    </div>
    <div class="mt-5 flex flex-wrap gap-6 text-sm font-bold">
      <label><input type="checkbox" name="is_featured" {% if listing and listing.is_featured %}checked{% endif %}> Featured</label>
      <label><input type="checkbox" name="is_published" {% if not listing or listing.is_published %}checked{% endif %}> Published</label>
    </div>
    <button class="btn-primary mt-6 w-full" type="submit">Save Listing</button>
  </aside>
</form>

{% if listing %}
<section class="admin-panel mt-8">
  <div class="admin-section-head"><div><p class="eyebrow-dark">Trust & Inventory</p><h2>Location and Verification</h2></div><span class="admin-count-pill">Last checked: {{ listing.last_listing_verified_date or 'Not verified' }}</span></div>
  <form class="mt-5" method="post" action="{{ url_for('trust.admin_listing_trust', listing_id=listing.id) }}">
    <div class="grid gap-4 md:grid-cols-3">
      <label><span class="form-label">Saved location</span><select class="form-input" name="saved_location_id"><option value="">Custom / none</option>{% for loc in trust_locations %}<option value="{{ loc.id }}" {% if listing.saved_location_id == loc.id %}selected{% endif %}>{{ loc.internal_name }}</option>{% endfor %}</select></label>
      <label><span class="form-label">Location name</span><input class="form-input" name="location_name" value="{{ listing.location_name or '' }}"></label>
      <label><span class="form-label">Address line</span><input class="form-input" name="location_address_line" value="{{ listing.location_address_line or '' }}"></label>
      <label><span class="form-label">Postal code</span><input class="form-input" name="location_postcode" value="{{ listing.location_postcode or '' }}"></label>
      <label><span class="form-label">City / area</span><input class="form-input" name="location_city" value="{{ listing.location_city or '' }}"></label>
      <label><span class="form-label">Region</span><input class="form-input" name="location_region" value="{{ listing.location_region or '' }}"></label>
      <label><span class="form-label">Country</span><input class="form-input" name="location_country" value="{{ listing.location_country or '' }}"></label>
      <label><span class="form-label">Country code</span><input class="form-input" name="location_country_code" value="{{ listing.location_country_code or '' }}"></label>
      <label><span class="form-label">Location type</span><select class="form-input" name="location_type">{% for item in trust_location_types %}<option {% if listing.location_type == item %}selected{% endif %}>{{ item }}</option>{% endfor %}</select></label>
      <label><span class="form-label">Public location visibility</span><select class="form-input" name="location_public">{% for item in trust_visibility_modes %}<option {% if listing.location_public == item %}selected{% endif %}>{{ item }}</option>{% endfor %}</select></label>
      <label class="md:col-span-2"><span class="form-label">Custom public location text</span><input class="form-input" name="location_public_text" value="{{ listing.location_public_text or '' }}"></label>
      <label><span class="form-label">Location checked date</span><input class="form-input" type="date" name="location_updated_at" value="{{ listing.location_updated_at or '' }}"></label>
      <label><span class="form-label">Listing verified date</span><input class="form-input" type="date" name="last_listing_verified_date" value="{{ listing.last_listing_verified_date or '' }}" max="{{ trust_today }}"></label>
      <label><span class="form-label">Physical verification date</span><input class="form-input" type="date" name="last_physically_verified_date" value="{{ listing.last_physically_verified_date or '' }}" max="{{ trust_today }}"></label>
      <label><span class="form-label">Serial-number status</span><select class="form-input" name="serial_number_status">{% for item in trust_serial_statuses %}<option {% if listing.serial_number_status == item %}selected{% endif %}>{{ item }}</option>{% endfor %}</select></label>
      <label><span class="form-label">Inspection status</span><select class="form-input" name="inspection_status">{% for item in trust_inspection_statuses %}<option {% if listing.inspection_status == item %}selected{% endif %}>{{ item }}</option>{% endfor %}</select></label>
      <label><span class="form-label">Inspection performed date</span><input class="form-input" type="date" name="inspection_date" value="{{ listing.inspection_date or '' }}" max="{{ trust_today }}"><span class="mt-1 block text-xs text-zinc-500">Date the visual/mechanical/third-party inspection was actually performed.</span></label>
      <label><span class="form-label">Condition check result</span><select class="form-input" name="condition_check_status">{% for item in trust_condition_statuses %}<option {% if listing.condition_check_status == item %}selected{% endif %}>{{ item }}</option>{% endfor %}</select><span class="mt-1 block text-xs text-zinc-500">Inspection status records who/what inspection was performed. Condition check records the resulting assessment scope.</span></label>
      <label class="md:col-span-3"><span class="form-label">HST note (optional)</span><input class="form-input" name="vat_note" value="{{ listing.vat_note or '' }}"></label>
      <label class="md:col-span-3"><span class="form-label">Public verification note</span><textarea class="form-input" name="verification_notes_public">{{ listing.verification_notes_public or '' }}</textarea></label>
      <label class="md:col-span-3"><span class="form-label">Internal verification/location notes</span><textarea class="form-input" name="verification_notes_internal">{{ listing.verification_notes_internal or listing.location_notes or '' }}</textarea><input type="hidden" name="location_notes" value="{{ listing.location_notes or '' }}"></label>
    </div>
    <div class="mt-4 flex flex-wrap gap-5 text-sm font-bold"><label><input type="checkbox" name="collection_available" {% if listing.collection_available %}checked{% endif %}> Collection available</label><label><input type="checkbox" name="inspection_available" {% if listing.inspection_available %}checked{% endif %}> Inspection available</label><label><input type="checkbox" name="delivery_available" {% if listing.delivery_available is none or listing.delivery_available %}checked{% endif %}> Delivery available</label></div>
    <button class="btn-primary mt-5">Save Location & Verification</button>
  </form>
</section>

  <section class="admin-workbench mt-8">
    <div class="admin-workbench-head">
      <div>
        <p class="eyebrow-dark">Workbench</p>
        <h2>AI and Gallery Tools</h2>
      </div>
      <p class="text-sm font-bold text-zinc-500">Keep the main content above clean; manage generated text, previews, and gallery rows here.</p>
    </div>

    <div class="admin-tool-grid">
      <article class="admin-tool-card">
        <div class="admin-tool-card-head">
          <div>
            <h3>AI Listing Content</h3>
            <p>Generate text from stored listing facts only. Prices are excluded.</p>
          </div>
          <span class="admin-status-pill {{ 'is-good' if ai_status.enabled and ai_status.active_configured else 'is-warning' }}">
            {% if not ai_status.enabled %}Disabled{% elif not ai_status.active_configured %}Key missing{% else %}{{ ai_status.provider|title }} ready{% endif %}
          </span>
        </div>
        <form class="admin-compact-form" method="post" action="{{ url_for('admin_listing_generate_ai', id=listing.id) }}">
          <label>
            <span class="form-label">Mode</span>
            <select class="form-input" name="ai_content_mode">
              <option value="full">Generate / regenerate description</option>
              <option value="missing">Generate missing fields only</option>
            </select>
          </label>
          <label class="admin-inline-check">
            <input type="checkbox" name="allow_ai_overwrite">
            <span>Allow overwrite make/model/body_style</span>
          </label>
          <div class="admin-compact-actions">
            <button class="btn-primary" type="submit" {% if not ai_status.enabled or not ai_status.active_configured %}disabled{% endif %}>Run AI Content</button>
            <a class="btn-outline" href="{{ url_for('admin_ai') }}">AI Dashboard</a>
          </div>
        </form>
      </article>

      <article class="admin-tool-card">
        <div class="admin-tool-card-head">
          <div>
            <h3>AI Sign / Logo Edit</h3>
            <p>Select image rows below, add notes, then generate previews.</p>
          </div>
          <span class="admin-status-pill {{ 'is-good' if openai_key.configured else 'is-warning' }}">
            {{ "OpenAI key ready" if openai_key.configured else "OpenAI key missing" }}
          </span>
        </div>
        <form id="ai-edit-form" class="admin-compact-form" method="post">
          <input type="hidden" name="ai_action" value="generate">
          <div data-selected-image-inputs data-selected-image-name="ai_image_ids"></div>
          <label>
            <span class="form-label">Optional edit notes</span>
            <textarea class="form-input" name="ai_instruction" placeholder="Example: sign is too flat, logo needs better perspective, keep the original panel color."></textarea>
          </label>
          <div class="admin-compact-actions">
            <button class="btn-primary" type="submit">Generate AI Edit</button>
            <span class="admin-selection-note" data-gallery-selected-count>Selected 0 images</span>
          </div>
        </form>
      </article>
    </div>
  </section>

  {% if listing %}
  <section class="admin-panel mt-6" id="inspection-report">
    <div class="admin-section-head">
      <div>
        <p class="eyebrow-dark">Mechanical Inspection</p>
        <h2>Inspection Report</h2>
      </div>
      <p class="text-sm font-bold text-zinc-500">AI-generates a powertrain-specific inspection report from this listing's specs; the shop reviews, approves &amp; stamps (or revokes) via the shop portal.</p>
    </div>

    <div class="mt-4 flex flex-wrap items-center gap-3">
      {% if inspection_report %}
        {% set ist = inspection_report.status %}
        {% if ist == 'approved' %}<span class="admin-status-pill is-good">Approved</span>
        {% elif ist == 'pending' %}<span class="admin-status-pill is-warning">Pending shop review</span>
        {% elif ist == 'changes_requested' %}<span class="admin-status-pill is-warning">Changes requested</span>
        {% elif ist == 'revoked' %}<span class="inline-flex items-center rounded-full bg-red-100 px-2.5 py-0.5 text-xs font-black text-red-700">Revoked</span>{% endif %}
        <span class="rounded-full bg-zinc-100 px-2 py-0.5 text-xs font-black uppercase text-zinc-700">{{ inspection_report.powertrain_type }}</span>
      {% else %}
        <span class="admin-status-pill">No report yet</span>
      {% endif %}
      <button type="button" class="btn-primary" onclick="genInspection({{ listing.id }}, this)" data-approved="{{ 1 if inspection_report and inspection_report.status == 'approved' else 0 }}" {% if not ai_status.enabled or not ai_status.active_configured %}disabled{% endif %}>{{ 'Regenerate' if inspection_report else 'Generate inspection report' }}</button>
    </div>

    {% if inspection_report %}
      <div class="mt-4 grid gap-3 sm:grid-cols-2">
        <div class="rounded-lg border border-zinc-200 p-3 text-sm">
          <div class="font-black text-zinc-950">Public link</div>
          <input class="form-input mt-1 {% if inspection_report.status != 'approved' %}opacity-60{% endif %}" readonly value="{{ request.host_url }}{{ url_for('inspection_report', token=inspection_report.report_token).lstrip('/') }}">
          <p class="mt-1 text-xs text-zinc-500">{% if inspection_report.status == 'approved' %}Live on the listing page (Inspection button).{% else %}Visible to customers once the shop approves.{% endif %}</p>
        </div>
        <div class="rounded-lg border border-zinc-200 p-3 text-sm">
          <div class="font-black text-zinc-950">Shop review link</div>
          <input class="form-input mt-1" readonly value="{{ request.host_url }}shop-portal/{{ settings.shop_portal_token }}">
          <p class="mt-1 text-xs text-zinc-500">Send this portal URL to the shop (one link for all reports).</p>
        </div>
      </div>

      <form class="mt-4" method="post" action="{{ url_for('admin_save_inspection', id=listing.id) }}">
        {% set data = inspection_data %}
        {% include "partials/inspection_section_editor.html" %}
        <div class="mt-4">
          <button class="btn-primary" type="submit">Save inspection edits</button>
        </div>
      </form>
    {% endif %}
  </section>
  <script>
  async function genInspection(listingId, btn) {
    const orig = btn.textContent;
    if (btn.dataset.approved === '1' && !confirm('Regenerating will reset shop approval to pending. Continue?')) return;
    btn.disabled = true; btn.textContent = 'Generating...';
    try {
      const resp = await fetch('/stock-room-7f4c2a91/listings/' + listingId + '/generate-inspection', { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded' } });
      const data = await resp.json();
      if (data.ok) { location.reload(); }
      else { alert(data.error || 'Generation failed.'); btn.disabled = false; btn.textContent = orig; }
    } catch (e) { alert('Generation failed.'); btn.disabled = false; btn.textContent = orig; }
  }
  </script>
  {% endif %}

  {% if pending_ai_edits %}
    <section class="admin-panel mt-6">
      <div class="admin-section-head">
        <div>
          <h2>AI Edit Previews</h2>
          <p>Review generated outputs before replacing originals or adding angles to the gallery.</p>
        </div>
        <span class="admin-count-pill">{{ pending_ai_edits|length }} pending</span>
      </div>
      <div class="admin-preview-list mt-5">
        {% for edit in pending_ai_edits %}
          <article class="admin-preview-row">
            <button class="admin-preview-thumb" type="button" data-zoom-src="{{ edit.result_path }}" data-zoom-alt="AI edit preview">
              <img src="{{ edit.result_path|thumb }}" alt="AI edit preview" loading="lazy" decoding="async">
            </button>
            <div class="admin-preview-body">
              <div class="admin-row-titleline">
                <h3>Preview #{{ edit.id }}</h3>
                <span class="admin-status-pill {{ 'is-info' if edit.edit_kind == 'angle' else 'is-muted' }}">{{ "Additional angle" if edit.edit_kind == 'angle' else "Replacement edit" }}</span>
              </div>
              <p class="admin-meta-line">Image order {{ edit.sort_order or "unknown" }} | Source image ID {{ edit.source_image_id }} | Created {{ (edit.created_at or "")|replace("T", " ") }}</p>
              {% if edit.prompt %}<p class="admin-request-line">Request: {{ edit.prompt }}</p>{% endif %}
              <details class="admin-row-details">
                <summary>Edit again</summary>
                <form class="admin-edit-again-form" method="post">
                  <input type="hidden" name="ai_action" value="edit_again">
                  <input type="hidden" name="edit_id" value="{{ edit.id }}">
                  <textarea class="form-input" name="ai_correction" placeholder="Optional correction for the next generated preview."></textarea>
                  <button class="btn-outline" type="submit">Generate Revised Preview</button>
                </form>
              </details>
            </div>
            <div class="admin-preview-actions">
              <form method="post">
                <input type="hidden" name="ai_action" value="accept">
                <input type="hidden" name="edit_id" value="{{ edit.id }}">
                <button class="btn-primary" type="submit">{{ "Add to Gallery" if edit.edit_kind == 'angle' else "Replace Original" }}</button>
              </form>
              <form method="post">
                <input type="hidden" name="ai_action" value="keep">
                <input type="hidden" name="edit_id" value="{{ edit.id }}">
                <button class="btn-outline" type="submit">Keep Original</button>
              </form>
              <form method="post">
                <input type="hidden" name="ai_action" value="cancel">
                <input type="hidden" name="edit_id" value="{{ edit.id }}">
                <button class="btn-outline" type="submit">Cancel</button>
              </form>
            </div>
          </article>
        {% endfor %}
      </div>
    </section>
  {% endif %}

  <section class="admin-panel mt-6">
    <div class="admin-section-head">
      <div>
        <h2>Gallery Images</h2>
        <p>Use rows for daily work: drag to reorder, tick rows for AI edits or deletion, and open advanced controls only when needed.</p>
      </div>
      <span class="admin-count-pill">{{ images|length }} images</span>
    </div>

    <div class="admin-gallery-toolbar mt-5">
      <form class="admin-upload-box" method="post" enctype="multipart/form-data" data-upload-dropzone-form>
        <input type="hidden" name="image_action" value="upload_images">
        <label class="admin-drop-upload" data-upload-dropzone>
          <input class="admin-drop-input" type="file" name="gallery_images" accept="image/*" multiple data-upload-input>
          <span class="admin-drop-title">Drop gallery images here</span>
          <span class="admin-drop-copy">or click to choose files from your computer</span>
          <span class="admin-drop-summary" data-upload-summary>No files selected</span>
        </label>
        <button class="btn-outline" type="submit">Upload</button>
      </form>
      <form class="admin-toolbar-form" method="post" data-image-order-form>
        <input type="hidden" name="image_action" value="reorder">
        <input type="hidden" name="ordered_image_ids" data-image-order-input>
        <button class="btn-primary" type="submit">Save Order</button>
        <button class="btn-outline" type="button" data-apply-image-order>Apply Number Order</button>
        <p>Use order boxes, quick move buttons, or drag compact cards.</p>
      </form>
      <form id="gallery-bulk-delete-form" class="admin-toolbar-form" method="post" data-gallery-bulk-delete onsubmit="return confirm('Delete selected image rows?');">
        <input type="hidden" name="image_action" value="bulk_delete_images">
        <div data-selected-image-inputs data-selected-image-name="selected_gallery_image_ids"></div>
        <button class="btn-outline" type="submit">Delete Selected</button>
        <p data-gallery-selected-count>Selected 0 images</p>
      </form>
      <form class="admin-toolbar-form" method="post">
        <input type="hidden" name="repair_images" value="1">
        <button class="btn-outline" type="submit">Repair Order</button>
        <p>Sort existing DB rows by original filename numbers and rebuild primary/order.</p>
      </form>
      <form class="admin-toolbar-form" method="post">
        <input type="hidden" name="image_action" value="sync_folder_images">
        <button class="btn-outline" type="submit">Sync Folder + Repair</button>
        <p>Add missing files from this listing folder, then sort them by filename.</p>
      </form>
      <form class="admin-toolbar-form" method="post">
        <input type="hidden" name="image_action" value="generate_variants">
        <button class="btn-outline" type="submit">Generate Thumb + Gallery</button>
        <p>Create missing fast-loading WebP files for this listing.</p>
      </form>
      <form class="admin-toolbar-form" method="post">
        <input type="hidden" name="image_action" value="regenerate_variants">
        <button class="btn-outline" type="submit">Regenerate Thumb + Gallery</button>
        <p>Rebuild optimized files after replacing originals or large PNGs.</p>
      </form>
      <div class="admin-toolbar-form">
        <a class="btn-outline" href="{{ url_for('admin_listing_download_gallery', id=listing.id) }}">Download Gallery ZIP</a>
        <p>Full-size current gallery images plus description.</p>
      </div>
    </div>

    <div class="admin-image-list mt-5" data-sortable-images>
      {% for image in images %}
        {% set image_src = get_image_display_path(image) %}
        {% set original_src = get_original_image_display_path(image) %}
        <article class="admin-image-row" draggable="true" data-image-id="{{ image.id }}">
          <div class="admin-row-topbar">
            <label class="admin-row-select"><input type="checkbox" value="{{ image.id }}" data-gallery-select> Select</label>
            <span class="admin-row-drag" title="Drag to reorder">Drag</span>
          </div>
          <button class="admin-row-thumb" type="button" {% if image_src %}data-zoom-src="{{ original_src or image_src }}" data-zoom-alt="{{ image.alt_text or listing.title_en }}"{% endif %}>
            {% if image_src %}
              <img src="{{ image_src|thumb }}" alt="{{ image.alt_text or listing.title_en }}" loading="lazy" decoding="async">
            {% else %}
              <span>No image</span>
            {% endif %}
          </button>
          <div class="admin-image-row-main">
            <div class="admin-row-titleline">
              <label class="admin-order-control">
                <span>Order</span>
                <input type="number" min="1" value="{{ image.sort_order or loop.index }}" data-order-number aria-label="Image order">
              </label>
              <span class="admin-status-pill {{ 'is-good' if image.is_primary else 'is-muted' }}">{{ 'Primary' if image.is_primary else 'Secondary' }}</span>
              <span class="admin-status-pill {{ 'is-good' if image.is_public else 'is-muted' }}">{{ "Public" if image.is_public else "Hidden" }}</span>
              {% if image.generated_local_path %}
                <span class="admin-status-pill is-info">{{ "Using AI" if image.use_generated_image else "AI saved" }}</span>
              {% endif %}
              {% if image.is_ai_generated %}
                <span class="admin-status-pill is-info">AI angle</span>
              {% endif %}
            </div>
            <p class="admin-meta-line">{{ image.alt_text or listing.title_en }}</p>
            <div class="admin-row-actions">
              <form method="post">
                <input type="hidden" name="image_id" value="{{ image.id }}">
                <input type="hidden" name="image_action" value="set_primary">
                <button class="btn-mini" type="submit">Primary</button>
              </form>
              <form method="post">
                <input type="hidden" name="image_id" value="{{ image.id }}">
                <input type="hidden" name="image_action" value="toggle_public">
                <button class="btn-mini" type="submit">{{ "Hide" if image.is_public else "Show" }}</button>
              </form>
              {% if image.generated_local_path %}
                <form method="post">
                  <input type="hidden" name="image_id" value="{{ image.id }}">
                  <input type="hidden" name="image_action" value="use_generated">
                  <button class="btn-mini" type="submit">Use AI</button>
                </form>
                <form method="post">
                  <input type="hidden" name="image_id" value="{{ image.id }}">
                  <input type="hidden" name="image_action" value="use_original">
                  <button class="btn-mini" type="submit">Use Original</button>
                </form>
              {% endif %}
              <form method="post" onsubmit="return confirm('Delete this image row?');">
                <input type="hidden" name="image_id" value="{{ image.id }}">
                <input type="hidden" name="image_action" value="delete_image">
                <button class="btn-mini" type="submit">Delete Row</button>
              </form>
            </div>
            <details class="admin-row-details">
              <summary>Details (move, AI angles, paths)</summary>
              <div class="admin-row-actions admin-reorder-actions">
                <button class="btn-mini" type="button" data-move-first>First</button>
                <button class="btn-mini" type="button" data-move-up>Up</button>
                <button class="btn-mini" type="button" data-move-down>Down</button>
                <button class="btn-mini" type="button" data-move-last>Last</button>
              </div>
              <div class="angle-tool" data-angle-batch data-angle-url="{{ url_for('admin_listing_generate_angle', id=listing.id) }}" data-image-id="{{ image.id }}" data-angle-limit="3">
                <div class="flex items-center justify-between gap-3">
                  <p class="form-label">Generate angles from this image</p>
                  <span class="angle-count" data-angle-count>0 selected</span>
                </div>
                <p class="mt-2 text-xs font-bold text-zinc-500">Choose up to 3 angles. You can start another image while this one runs.</p>
                <div class="angle-choice-grid mt-3">
                  {% for angle in angle_choices %}
                    <label class="angle-choice-chip">
                      <input type="checkbox" value="{{ angle.value }}" data-angle-choice data-angle-label="{{ angle.label }}">
                      <span>{{ angle.label }}</span>
                    </label>
                  {% endfor %}
                </div>
                <button class="btn-outline mt-3 w-full py-2" type="button" data-angle-batch-run>Generate Selected for This Image</button>
                <p class="mt-2 text-xs font-bold text-zinc-500" data-angle-batch-status>Ready. No angles run until you select them here.</p>
              </div>
              <details class="admin-row-details">
                <summary>Paths</summary>
                <p><strong>Original local:</strong> {{ image.local_path }}</p>
                <p><strong>Displayed:</strong> {{ image_src }}</p>
                <p><strong>Generated:</strong> {{ image.generated_local_path or "None" }}</p>
                <p><strong>Remote:</strong> {{ image.image_url }}</p>
                <p><strong>OpenAI file:</strong> {{ image.openai_file_id or "Not cached" }}</p>
              </details>
            </details>
          </div>
        </article>
      {% else %}
        <p class="text-sm text-zinc-600">No images are attached to this listing yet.</p>
      {% endfor %}
    </div>
  </section>
{% endif %}

<script>
async function generateDescription(listingId) {
  const btn = document.getElementById('btn-generate-desc');
  const status = document.getElementById('desc-status');
  const textarea = document.getElementById('desc-textarea');
  const origText = btn.textContent;
  btn.disabled = true;
  btn.textContent = 'Generating...';
  status.classList.add('hidden');
  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 && data.html) {
      textarea.value = data.html;
      status.textContent = 'Done! Score: ' + (data.score || 'N/A') + ', attempts: ' + (data.attempts || 'N/A');
      status.classList.remove('hidden');
    } else {
      status.textContent = 'Error: ' + (data.error || 'Unknown');
      status.classList.remove('hidden');
    }
  } catch (e) {
    status.textContent = 'Network error: ' + e.message;
    status.classList.remove('hidden');
  } finally {
    btn.disabled = false;
    btn.textContent = origText;
  }
}
</script>
{% endblock %}