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

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

{% block content %}
<p class="eyebrow-dark">Customization</p>
<h1 class="mt-3 text-4xl font-black tracking-normal">Site Settings</h1>

<form class="mt-8 grid gap-6 xl:grid-cols-[1fr_0.8fr]" method="post" enctype="multipart/form-data">
  <div class="rounded-lg border border-zinc-200 bg-white p-6 shadow-sm">
    <h2 class="text-xl font-black">Brand and Contact</h2>
    <div class="mt-5 grid gap-4 md:grid-cols-2">
      <label><span class="form-label">Company name</span><input class="form-input" name="company_name" value="{{ settings.company_name or '' }}"></label>
      <label><span class="form-label">Default language</span><select class="form-input" name="default_language">{% for language in languages %}<option value="{{ language.code }}" {% if settings.default_language == language.code %}selected{% endif %}>{{ language.name }}</option>{% endfor %}</select></label>
      <label><span class="form-label">Phone</span><input class="form-input" name="phone" value="{{ settings.phone or '' }}"></label>
      <label><span class="form-label">Phone 2 (optional)</span><input class="form-input" name="phone2" value="{{ settings.phone2 or '' }}" placeholder="Second number shown alongside the first"></label>
      <label><span class="form-label">WhatsApp</span><input class="form-input" name="whatsapp" value="{{ settings.whatsapp or '' }}"></label>
      <label><span class="form-label">Email</span><input class="form-input" name="email" value="{{ settings.email or '' }}"></label>
      <div class="sm:col-span-2">
        <span class="form-label">Address</span>
        <div class="mt-1 grid gap-3 sm:grid-cols-2">
          <label class="sm:col-span-2"><span class="sr-only">Street</span><input class="form-input" name="address_street" value="{{ settings.address_street or '' }}" placeholder="Street address"></label>
          <label><span class="sr-only">City</span><input class="form-input" name="address_city" value="{{ settings.address_city or '' }}" placeholder="City"></label>
          <label><span class="sr-only">Province</span><input class="form-input" name="address_province" value="{{ settings.address_province or '' }}" placeholder="Province"></label>
          <label class="sm:col-span-2"><span class="sr-only">Postal code</span><input class="form-input" name="address_postal" value="{{ settings.address_postal or '' }}" placeholder="Postal code"></label>
        </div>
      </div>
    </div>
    <label class="mt-4 block"><span class="form-label">Footer text</span><textarea class="form-input min-h-24" name="footer_text">{{ settings.footer_text or '' }}</textarea></label>
  </div>

  <div class="rounded-lg border border-zinc-200 bg-white p-6 shadow-sm xl:col-span-2">
    <h2 class="text-xl font-black">Automatic Visitor Language</h2>
    <p class="mt-2 text-sm text-zinc-600">Redirect first-time visitors entering through non-language URLs using country headers supplied by Cloudflare/CDN, then browser language, with English as the final fallback.</p>
    <div class="mt-5 grid gap-4 md:grid-cols-3">
      <label class="admin-check-pill">
        <input type="checkbox" name="auto_language_detection" {% if settings.auto_language_detection is none or settings.auto_language_detection %}checked{% endif %}> Enable automatic language detection
      </label>
      <label class="admin-check-pill">
        <input type="checkbox" name="browser_language_fallback" {% if settings.browser_language_fallback is none or settings.browser_language_fallback %}checked{% endif %}> Use browser language when country is unknown
      </label>
      <label class="admin-check-pill">
        <input type="checkbox" name="remember_language_choice" {% if settings.remember_language_choice is none or settings.remember_language_choice %}checked{% endif %}> Remember visitor language choice
      </label>
    </div>
    <p class="mt-3 text-xs text-zinc-500">Explicit language URLs always win. Search bots stay on English. Unsupported or inactive languages fall back to English.</p>
  </div>

  <div class="rounded-lg border border-zinc-200 bg-white p-6 shadow-sm">
    <h2 class="text-xl font-black">Media and Social</h2>
    <label class="mt-5 block"><span class="form-label">Logo upload</span><input class="form-input" type="file" name="logo" accept="image/*"></label>
    {% if settings.logo_path %}<p class="mt-2 text-xs text-zinc-500">{{ settings.logo_path }}</p>{% endif %}
    <div class="mt-4 grid gap-4 md:grid-cols-2">
      <label>
        <span class="form-label">Logo max height (px)</span>
        <input class="form-input" type="number" min="24" max="140" step="1" name="logo_max_height" value="{{ settings.logo_max_height or 44 }}">
        <span class="mt-1 block text-xs text-zinc-500">Recommended: 44–72px for header logos.</span>
      </label>
      <label>
        <span class="form-label">Logo max width (px)</span>
        <input class="form-input" type="number" min="80" max="420" step="1" name="logo_max_width" value="{{ settings.logo_max_width or 180 }}">
        <span class="mt-1 block text-xs text-zinc-500">Keeps the logo from stretching across the header.</span>
      </label>
    </div>
    <label class="mt-4 block"><span class="form-label">Favicon upload</span><input class="form-input" type="file" name="favicon" accept="image/*"></label>
    {% if settings.favicon_path %}<p class="mt-2 text-xs text-zinc-500">{{ settings.favicon_path }}</p>{% endif %}
    <label class="mt-4 block"><span class="form-label">Facebook URL</span><input class="form-input" name="facebook_url" value="{{ settings.facebook_url or '' }}"></label>
    <label class="mt-4 block"><span class="form-label">Instagram URL</span><input class="form-input" name="instagram_url" value="{{ settings.instagram_url or '' }}"></label>
    <label class="mt-4 block"><span class="form-label">YouTube URL</span><input class="form-input" name="youtube_url" value="{{ settings.youtube_url or '' }}"></label>
  </div>

  <div class="rounded-lg border border-zinc-200 bg-white p-6 shadow-sm xl:col-span-2">
    <h2 class="text-xl font-black">Public CTA Buttons</h2>
    <div class="mt-5 grid gap-4 md:grid-cols-5">
      <label class="admin-check-pill">
        <input type="checkbox" name="enable_call_button" {% if settings.enable_call_button %}checked{% endif %}> Enable Call
      </label>
      <label class="admin-check-pill">
        <input type="checkbox" name="enable_whatsapp_button" {% if settings.enable_whatsapp_button %}checked{% endif %}> Enable WhatsApp
      </label>
      <label class="admin-check-pill">
        <input type="checkbox" name="enable_email_button" {% if settings.enable_email_button %}checked{% endif %}> Enable Email
      </label>
      <label class="admin-check-pill">
        <input type="checkbox" name="enable_sticky_contact_form" {% if settings.enable_sticky_contact_form %}checked{% endif %}> Sticky Contact Form
      </label>
      <label class="admin-check-pill">
        <input type="checkbox" name="carfax_button_enabled" {% if settings.carfax_button_enabled is none or settings.carfax_button_enabled %}checked{% endif %}> Show Carfax on Listings
      </label>
      <label class="admin-check-pill">
        <input type="checkbox" name="inspection_button_enabled" {% if settings.inspection_button_enabled is none or settings.inspection_button_enabled %}checked{% endif %}> Show Inspection button on Listings
      </label>
      <label class="admin-check-pill">
        <input type="checkbox" name="savings_banner_enabled" {% if settings.savings_banner_enabled is none or settings.savings_banner_enabled %}checked{% endif %}> Show Savings vs MSRP banner
      </label>
    </div>
  </div>

  <div id="shop-inspection" class="rounded-lg border border-zinc-200 bg-white p-6 shadow-sm xl:col-span-2">
    <div class="flex flex-col justify-between gap-3 md:flex-row md:items-start">
      <div>
        <h2 class="text-xl font-black">Mechanical Shop &amp; Inspection</h2>
        <p class="mt-2 text-sm text-zinc-600">The shop profile shown on every inspection report. The shop portal URL is sent to your mechanic so they can review, approve &amp; stamp (or revoke) each report.</p>
      </div>
    </div>
    <div class="mt-5 grid gap-4 md:grid-cols-2">
      <label><span class="form-label">Shop name</span><input class="form-input" name="shop_name" value="{{ settings.shop_name or '' }}"></label>
      <label><span class="form-label">Phone</span><input class="form-input" name="shop_phone" value="{{ settings.shop_phone or '' }}"></label>
      <label><span class="form-label">Email</span><input class="form-input" name="shop_email" value="{{ settings.shop_email or '' }}"></label>
      <label><span class="form-label">Licence #</span><input class="form-input" name="shop_license" value="{{ settings.shop_license or '' }}"></label>
      <label class="md:col-span-2"><span class="form-label">Address</span><input class="form-input" name="shop_address" value="{{ settings.shop_address or '' }}"></label>
      <label class="md:col-span-2"><span class="form-label">Shop logo</span><input class="form-input" type="file" name="shop_logo" accept="image/*">{% if settings.shop_logo_path %}<p class="mt-1 text-xs text-zinc-500">Current: <a href="{{ settings.shop_logo_path }}" target="_blank">{{ settings.shop_logo_path }}</a></p>{% endif %}</label>
    </div>
    <div class="mt-5 rounded-lg bg-zinc-50 p-4">
      <div class="form-label">Shop portal URL</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 one URL to the shop. It lists every inspection report for review/approval.</p>
      <button class="btn-outline mt-3" type="button" onclick="regenShopToken(this)">Regenerate portal token</button>
    </div>
  </div>
  <script>
  async function regenShopToken(btn) {
    if (!confirm('Regenerating invalidates the old portal URL. The shop will need the new one. Continue?')) return;
    btn.disabled = true;
    try {
      const resp = await fetch('{{ url_for("admin_regenerate_shop_token") }}', { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded' } });
      if (resp.ok) location.reload(); else { alert('Failed to regenerate token.'); btn.disabled = false; }
    } catch (e) { alert('Failed to regenerate token.'); btn.disabled = false; }
  }
  </script>

  <div class="rounded-lg border border-zinc-200 bg-white p-6 shadow-sm xl:col-span-2">
    <div class="flex flex-col justify-between gap-3 md:flex-row md:items-start">
      <div>
        <h2 class="text-xl font-black">Mail Sender (SMTP)</h2>
        <p class="mt-2 text-sm text-zinc-600">Send listing enquiries, contact forms, and chatbot lead alerts through your own SMTP account instead of the hosting server.</p>
      </div>
      <span class="admin-status-badge {{ 'ok' if smtp_status.enabled and smtp_status.host else 'warn' }}">
        {{ 'SMTP enabled' if smtp_status.enabled and smtp_status.host else 'SMTP not active' }}
      </span>
    </div>

    <div class="mt-5 grid gap-4 md:grid-cols-3">
      <label class="admin-check-pill">
        <input type="checkbox" name="smtp_enabled" {% if settings.smtp_enabled %}checked{% endif %}> Enable SMTP sending
      </label>
      <label class="admin-check-pill">
        <input type="checkbox" name="smtp_authentication" {% if settings.smtp_authentication is none or settings.smtp_authentication %}checked{% endif %}> Authentication
      </label>
      <div class="rounded-lg border border-zinc-200 p-4 text-sm text-zinc-600">
        <p><strong>Password:</strong> {{ 'configured' if smtp_status.password_configured else 'not saved' }}</p>
        <p class="mt-1"><strong>Storage:</strong> {{ smtp_status.secret_source }}</p>
      </div>
    </div>

    <div class="mt-5 grid gap-4 md:grid-cols-3">
      <label>
        <span class="form-label">SMTP Host</span>
        <input class="form-input" name="smtp_host" value="{{ settings.smtp_host or '' }}" placeholder="smtp.your-provider.com">
      </label>
      <label>
        <span class="form-label">Encryption</span>
        <select class="form-input" name="smtp_encryption">
          <option value="none" {% if settings.smtp_encryption == 'none' %}selected{% endif %}>None</option>
          <option value="ssl" {% if settings.smtp_encryption == 'ssl' %}selected{% endif %}>SSL</option>
          <option value="tls" {% if not settings.smtp_encryption or settings.smtp_encryption == 'tls' %}selected{% endif %}>TLS</option>
        </select>
        <span class="mt-1 block text-xs text-zinc-500">TLS is recommended for most providers.</span>
      </label>
      <label>
        <span class="form-label">SMTP Port</span>
        <input class="form-input" type="number" min="1" max="65535" name="smtp_port" value="{{ settings.smtp_port or 587 }}" placeholder="587">
      </label>
      <label>
        <span class="form-label">SMTP Username</span>
        <input class="form-input" name="smtp_username" value="{{ settings.smtp_username or '' }}" autocomplete="username">
      </label>
      <label>
        <span class="form-label">SMTP Password</span>
        <input class="form-input" type="password" name="smtp_password" placeholder="{% if smtp_status.password_configured %}Configured — paste new password to replace{% else %}Paste password to save encrypted{% endif %}" autocomplete="new-password">
      </label>
      <label class="admin-check-pill">
        <input type="checkbox" name="clear_smtp_password"> Clear saved SMTP password
      </label>
    </div>

    <div class="mt-5 grid gap-4 md:grid-cols-3">
      <label>
        <span class="form-label">From Email</span>
        <input class="form-input" name="smtp_from_email" value="{{ settings.smtp_from_email or '' }}" placeholder="sales@cleanagrisales.com">
        <span class="mt-1 block text-xs text-zinc-500">Usually the same mailbox/account as the SMTP username.</span>
      </label>
      <label>
        <span class="form-label">From Name</span>
        <input class="form-input" name="smtp_from_name" value="{{ settings.smtp_from_name or '' }}" placeholder="Canada Auto Sales">
      </label>
      <label>
        <span class="form-label">Send enquiries to</span>
        <input class="form-input" name="smtp_recipient_email" value="{{ settings.smtp_recipient_email or '' }}" placeholder="sales@cleanagrisales.com">
      </label>
    </div>

    <div class="mt-5 rounded-lg border border-zinc-200 bg-zinc-50 p-4">
      <div class="grid gap-4 md:grid-cols-[1fr_auto] md:items-end">
        <label>
          <span class="form-label">Test recipient</span>
          <input class="form-input" name="smtp_test_recipient" value="{{ settings.smtp_recipient_email or settings.email or '' }}" placeholder="Where should the test email go?">
        </label>
        <button class="btn-outline" type="submit" name="settings_action" value="test_smtp_email">Save & Send Test Email</button>
      </div>
      <p class="mt-3 text-sm text-zinc-600">The customer email will be used as Reply-To, not From, to avoid SPF/DMARC issues.</p>
      {% if not smtp_status.encryption_ready %}
        <p class="mt-2 text-sm font-bold text-amber-800">Secret encryption is not ready, so SMTP/API passwords cannot be saved yet.</p>
      {% endif %}
    </div>
  </div>

  <div class="rounded-lg border border-zinc-200 bg-white p-6 shadow-sm xl:col-span-2">
    <h2 class="text-xl font-black">Mail Inbox (IMAP)</h2>
    <p class="mt-2 text-sm text-zinc-600">Read incoming emails for the Inbox auto-replier. Usually the same account as SMTP.</p>
    <div class="mt-5 grid gap-4 md:grid-cols-2">
      <label>
        <span class="form-label">IMAP Host</span>
        <input class="form-input" name="imap_host" value="{{ settings.imap_host or '' }}" placeholder="imap.gmail.com">
      </label>
      <label>
        <span class="form-label">IMAP Port</span>
        <input class="form-input" type="number" name="imap_port" value="{{ settings.imap_port or 993 }}" placeholder="993">
      </label>
      <label>
        <span class="form-label">IMAP Encryption</span>
        <select class="form-input" name="imap_encryption">
          {% for enc in ["ssl", "tls", "none"] %}
          <option value="{{ enc }}" {% if (settings.imap_encryption or 'ssl') == enc %}selected{% endif %}>{{ enc | upper }}</option>
          {% endfor %}
        </select>
      </label>
      <label>
        <span class="form-label">IMAP Username</span>
        <input class="form-input" name="imap_username" value="{{ settings.imap_username or settings.smtp_username or '' }}" placeholder="Usually same as SMTP username">
      </label>
      <label>
        <span class="form-label">IMAP Password</span>
        <input class="form-input" type="password" name="imap_password" placeholder="{% if settings.imap_password_encrypted %}Configured{% else %}Usually same as SMTP password{% endif %}">
      </label>
      <label class="admin-check-pill">
        <input type="checkbox" name="clear_imap_password"> Clear saved IMAP password
      </label>
    </div>
  </div>


  <div class="rounded-lg border border-zinc-200 bg-white p-6 shadow-sm xl:col-span-2">
    <h2 class="text-xl font-black">Currency Display</h2>
    <div class="mt-5 grid gap-4 md:grid-cols-2">
      <label>
        <span class="form-label">Default/base currency</span>
        <select class="form-input" name="base_currency">
          {% for code in ["CAD", "USD"] %}
            <option value="{{ code }}" {% if settings.base_currency == code %}selected{% endif %}>{{ code }}</option>
          {% endfor %}
        </select>
      </label>
      <label class="admin-check-pill">
        <input type="checkbox" name="enable_currency_conversion" {% if settings.enable_currency_conversion %}checked{% endif %}> Enable language currency conversion
      </label>
    </div>
  </div>

  <div class="rounded-lg border border-zinc-200 bg-white p-6 shadow-sm xl:col-span-2">
    <h2 class="text-xl font-black">Public Stock References</h2>
    <div class="mt-5 grid gap-4 md:grid-cols-2">
      <label>
        <span class="form-label">Public reference prefix</span>
        <input class="form-input" name="public_stock_prefix" value="{{ settings.public_stock_prefix or 'CAS' }}">
      </label>
      <label class="admin-check-pill">
        <input type="checkbox" name="show_internal_stock_publicly" {% if settings.show_internal_stock_publicly %}checked{% endif %}> Show internal crawler stock publicly
      </label>
    </div>
    <p class="mt-3 text-sm text-zinc-600">When internal stock is hidden, customers see references like CAS-1001 while the crawler stock stays private in admin.</p>
  </div>

  <div class="rounded-lg border border-zinc-200 bg-white p-6 shadow-sm xl:col-span-2">
    <h2 class="text-xl font-black">Image SEO Filenames</h2>
    <p class="mt-3 text-sm text-zinc-600">Regenerate local listing image filenames using the current company name, listing title, public reference, and image order. Database paths are updated after files are renamed.</p>
    <div class="mt-5 flex flex-wrap gap-3">
      <button class="btn-outline" type="submit" name="settings_action" value="regenerate_image_names" onclick="return confirm('Rename local listing image files and update database paths?');">Regenerate All Image Filenames</button>
      <button class="btn-outline" type="submit" name="settings_action" value="archive_unused_listing_files" onclick="return confirm('Move unused duplicate listing image files into static/uploads/listings/_unused?');">Archive Unused Listing Files</button>
      <button class="btn-outline" type="submit" name="settings_action" value="migrate_ai_edit_folders" onclick="return confirm('Move AI edit files into stock-number folders and update database paths?');">Move AI Edits to Stock Folders</button>
      <button class="btn-outline" type="submit" name="settings_action" value="sanitize_public_content" onclick="return confirm('Remove internal stock references from public titles, descriptions, slugs, and image filenames?');">Clean Public Stock References</button>
    </div>
  </div>

  <div class="rounded-lg border border-zinc-200 bg-white p-6 shadow-sm xl:col-span-2">
    <h2 class="text-xl font-black">Image Performance Files</h2>
    <p class="mt-3 text-sm text-zinc-600">Create optimized WebP files for faster listing galleries: small <strong>_thumb.webp</strong> files for cards/admin and larger <strong>_gallery.webp</strong> files for public zoom/lightbox. Originals stay untouched for admin download/export.</p>
    <div class="mt-5 flex flex-wrap gap-3">
      <button class="btn-outline" type="submit" name="settings_action" value="generate_missing_image_variants">Start Background Generation</button>
      <button class="btn-outline" type="submit" name="settings_action" value="regenerate_all_image_variants" onclick="return confirm('Rebuild all thumb/gallery files in the background from current originals?');">Start Background Regeneration</button>
    </div>
    <p class="mt-3 text-xs text-zinc-500">One click starts a background job so the browser request returns immediately instead of timing out. Use generation for missing files, or regeneration if you replaced originals and want every thumb/gallery rebuilt.</p>
    {% if image_variant_job %}
      <div class="mt-5 rounded-2xl border border-zinc-200 bg-zinc-50 p-4 text-sm text-zinc-700">
        <div class="flex flex-wrap items-center gap-3">
          <strong>Status:</strong>
          <span class="rounded-full px-3 py-1 text-xs font-black {{ 'bg-emerald-100 text-emerald-800' if image_variant_job.status == 'completed' else 'bg-amber-100 text-amber-900' if image_variant_job.status == 'running' else 'bg-zinc-200 text-zinc-800' }}">{{ image_variant_job.status|default('unknown')|upper }}</span>
          {% if image_variant_job.processed_images is defined and image_variant_job.total_images is defined %}
            <span>{{ image_variant_job.processed_images }} / {{ image_variant_job.total_images }} originals processed</span>
          {% endif %}
          {% if image_variant_job.created_variants is defined %}
            <span>{{ image_variant_job.created_variants }} optimized files written</span>
          {% endif %}
        </div>
        {% if image_variant_job.current_image %}
          <p class="mt-2"><strong>Current:</strong> {{ image_variant_job.current_image }}</p>
        {% endif %}
        {% if image_variant_job.finished_at %}
          <p class="mt-2 text-xs text-zinc-500">Finished: {{ image_variant_job.finished_at }}</p>
        {% elif image_variant_job.started_at %}
          <p class="mt-2 text-xs text-zinc-500">Started: {{ image_variant_job.started_at }}</p>
        {% endif %}
        {% if image_variant_log %}
          <details class="mt-3">
            <summary class="cursor-pointer font-bold">Recent background log</summary>
            <pre class="mt-2 max-h-64 overflow-auto rounded-xl bg-zinc-900 p-3 text-xs text-zinc-100">{{ image_variant_log|join('
') }}</pre>
          </details>
        {% endif %}
      </div>
    {% endif %}
  </div>

  <div class="rounded-lg border border-zinc-200 bg-white p-6 shadow-sm xl:col-span-2">
    <div class="flex flex-col justify-between gap-3 md:flex-row md:items-start">
      <div>
        <h2 class="text-xl font-black">AI Content Generation</h2>
        <p class="mt-2 text-sm text-zinc-600">Fireworks is the default provider for listing descriptions. AI generation runs only from admin actions after import.</p>
      </div>
      <span class="admin-status-badge {{ 'ok' if ai_status.active_configured else 'warn' }}">
        {{ "Active provider configured" if ai_status.active_configured else "API key missing for active provider" }}
      </span>
    </div>
    <div class="mt-5 grid gap-4 md:grid-cols-2">
      <label class="admin-check-pill">
        <input type="checkbox" name="ai_generation_enabled" {% if settings.ai_generation_enabled %}checked{% endif %}> Enable AI listing generation
      </label>
      <label>
        <span class="form-label">AI provider</span>
        <select class="form-input" name="ai_provider">
          <option value="fireworks" {% if settings.ai_provider == 'fireworks' %}selected{% endif %}>Fireworks</option>
          <option value="openai" {% if settings.ai_provider == 'openai' %}selected{% endif %}>OpenAI</option>
          <option value="zai" {% if settings.ai_provider == 'zai' %}selected{% endif %}>Z.ai</option>
        </select>
      </label>
      <label>
        <span class="form-label">Fireworks API key</span>
        <input class="form-input" type="password" name="fireworks_api_key" placeholder="{% if ai_status.fireworks_configured %}Configured{% else %}Paste key to save encrypted{% endif %}">
      </label>
      <label>
        <span class="form-label">Fireworks model</span>
        <select class="form-input" name="fireworks_model">
          {% for label, model_id in fireworks_models %}
            <option value="{{ model_id }}" {% if settings.fireworks_model == model_id %}selected{% endif %}>{{ label }}</option>
          {% endfor %}
        </select>
      </label>
      <label>
        <span class="form-label">Custom Fireworks model ID</span>
        <input class="form-input" name="fireworks_custom_model" value="{{ settings.fireworks_custom_model or '' }}" placeholder="Optional override">
      </label>
      <label>
        <span class="form-label">Fireworks image review model</span>
        <select class="form-input" name="fireworks_image_review_model">
          {% for label, model_id in fireworks_image_review_models %}
            <option value="{{ model_id }}" {% if settings.fireworks_image_review_model == model_id %}selected{% endif %}>{{ label }}</option>
          {% endfor %}
        </select>
      </label>
      <label>
        <span class="form-label">OpenAI content model</span>
        <input class="form-input" name="openai_model" list="openai-content-model-options" value="{{ settings.openai_model or 'gpt-5.2' }}">
        <datalist id="openai-content-model-options">
          {% for model in ["gpt-5.5", "gpt-5.4", "gpt-5.3", "gpt-5.2", "gpt-5", "gpt-4.1"] %}
            <option value="{{ model }}"></option>
          {% endfor %}
        </datalist>
      </label>
      <label class="admin-check-pill">
        <input type="checkbox" name="clear_fireworks_api_key"> Clear saved Fireworks key
      </label>
      <label>
        <span class="form-label">Z.ai API key (Anthropic endpoint)</span>
        <input class="form-input" type="password" name="zai_api_key" placeholder="{% if ai_status.zai_configured %}Configured{% else %}Paste key to save encrypted{% endif %}">
      </label>
      <label>
        <span class="form-label">Z.ai model</span>
        <input class="form-input" name="zai_model" value="{{ settings.zai_model or 'glm-5.2' }}" placeholder="glm-5.2">
      </label>
      <label class="admin-check-pill">
        <input type="checkbox" name="clear_zai_api_key"> Clear saved Z.ai key
      </label>
      <div class="rounded-lg border border-zinc-200 p-4 text-sm text-zinc-600 md:col-span-2">
        <p class="font-bold text-zinc-800">Per-feature provider routing</p>
        <p class="mt-1">Leave a feature on "Use global default" to follow the AI provider above. Image generation always uses OpenAI.</p>
        <div class="mt-3 grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
          {% set features = [("chatbot", "Chatbot"), ("lead_reply", "Lead replies"), ("descriptions", "Vehicle descriptions"), ("pages", "Page content"), ("inspection", "Inspection reports")] %}
          {% for key, label in features %}
          <label>
            <span class="form-label">{{ label }}</span>
            <select class="form-input" name="ai_provider_{{ key }}">
              <option value="" {% if not settings['ai_provider_' ~ key] %}selected{% endif %}>Use global default</option>
              <option value="fireworks" {% if settings['ai_provider_' ~ key] == 'fireworks' %}selected{% endif %}>Fireworks</option>
              <option value="openai" {% if settings['ai_provider_' ~ key] == 'openai' %}selected{% endif %}>OpenAI</option>
              <option value="zai" {% if settings['ai_provider_' ~ key] == 'zai' %}selected{% endif %}>Z.ai</option>
            </select>
          </label>
          {% endfor %}
        </div>
      </div>
      <div class="rounded-lg border border-zinc-200 p-4 text-sm text-zinc-600">
        <p><strong>Active provider:</strong> {{ ai_status.provider|title }}</p>
        <p class="mt-1"><strong>Fireworks key:</strong> {{ "configured" if ai_status.fireworks_configured else "missing" }}</p>
        <p class="mt-1"><strong>OpenAI key:</strong> {{ "configured" if ai_status.openai_configured else "missing" }}</p>
        <p class="mt-1"><strong>Z.ai key:</strong> {{ "configured" if ai_status.zai_configured else "missing" }}</p>
        <p class="mt-1"><strong>Selected model:</strong> {{ ai_status.fireworks_model if ai_status.provider == 'fireworks' else (ai_status.openai_model if ai_status.provider == 'openai' else ai_status.zai_model) }}</p>
      </div>
    </div>
  </div>

  <div class="rounded-lg border border-zinc-200 bg-white p-6 shadow-sm xl:col-span-2">
    <h2 class="text-xl font-black">OpenAI Image Editing</h2>
    <div class="mt-5 grid gap-4 md:grid-cols-2">
      <label>
        <span class="form-label">OpenAI API key</span>
        <input class="form-input" type="password" name="openai_api_key" placeholder="{% if openai_key.configured %}Configured: {{ openai_key.masked }}{% else %}Paste key to save encrypted{% endif %}">
      </label>
      <label>
        <span class="form-label">Responses model</span>
        <input class="form-input" name="openai_image_model" list="openai-model-options" value="{{ settings.openai_image_model or 'gpt-5.2' }}">
        <datalist id="openai-model-options">
          {% for model in ["gpt-5.5", "gpt-5.4", "gpt-5.3", "gpt-5.2", "gpt-5", "gpt-4.1"] %}
            <option value="{{ model }}"></option>
          {% endfor %}
        </datalist>
      </label>
      <label class="admin-check-pill">
        <input type="checkbox" name="clear_openai_api_key"> Clear saved API key
      </label>
      <div class="rounded-lg border border-zinc-200 p-4 text-sm text-zinc-600">
        <p><strong>Status:</strong> {{ "API key saved" if openai_key.configured else "No API key saved" }}</p>
        <p class="mt-1"><strong>Python package:</strong> {{ "openai installed" if openai_key.package_available else "openai missing in Flask environment" }}</p>
        <p class="mt-1"><strong>Encryption:</strong> {{ openai_key.secret_source }}</p>
        <p class="mt-1"><strong>Logo file cache:</strong> {{ settings.openai_logo_file_id or "Will upload after first edit" }}</p>
        {% if not openai_key.encryption_ready %}
          <p class="mt-2 font-bold text-amber-800">{{ openai_key.message }}</p>
        {% else %}
          <p class="mt-2 text-xs text-zinc-500">Local development uses instance/openai_settings_secret.key if OPENAI_SETTINGS_SECRET is not set.</p>
        {% endif %}
      </div>
    </div>
    <label class="mt-5 block">
      <span class="form-label">Image edit instructions prompt</span>
      <textarea class="form-input min-h-80 font-mono text-sm" name="openai_image_edit_prompt">{{ settings.openai_image_edit_prompt or '' }}</textarea>
    </label>
    <label class="mt-5 block">
      <span class="form-label">Additional angle generation prompt</span>
      <textarea class="form-input min-h-80 font-mono text-sm" name="openai_angle_generation_prompt">{{ settings.openai_angle_generation_prompt or '' }}</textarea>
    </label>
  </div>

  <div class="rounded-lg border border-zinc-200 bg-white p-6 shadow-sm xl:col-span-2">
    <h2 class="text-xl font-black">Free Delivery Promo Banner</h2>
    <p class="mt-2 text-sm text-zinc-600">A slim promo strip offering free Canada-wide delivery. Use <code class="rounded bg-zinc-100 px-1 text-xs">{month}</code> in the message — it auto-fills with the current month at render time.</p>
    <div class="mt-5 grid gap-4 md:grid-cols-3">
      <label class="admin-check-pill">
        <input type="checkbox" name="free_delivery_promo_enabled" {% if settings.free_delivery_promo_enabled %}checked{% endif %}> Enable free-delivery promo
      </label>
      <label>
        <span class="form-label">Promo message</span>
        <input class="form-input" name="free_delivery_promo_text" value="{{ settings.free_delivery_promo_text or 'Free Canada-wide delivery this {month}' }}">
        <span class="mt-1 block text-xs text-zinc-500">The placeholder <code class="rounded bg-zinc-100 px-0.5">{month}</code> will be replaced with the current month name.</span>
      </label>
      <label>
        <span class="form-label">Placement</span>
        <select class="form-input" name="free_delivery_promo_placement">
          <option value="top" {% if settings.free_delivery_promo_placement == 'top' %}selected{% endif %}>Top banner only</option>
          <option value="listing" {% if settings.free_delivery_promo_placement == 'listing' %}selected{% endif %}>Listing page only</option>
          <option value="both" {% if not settings.free_delivery_promo_placement or settings.free_delivery_promo_placement == 'both' %}selected{% endif %}>Both</option>
        </select>
      </label>
    </div>

    <div class="mt-4 grid gap-4 md:grid-cols-3">
      <label>
        <span class="form-label">Auto-hide delay (top banner)</span>
        <select class="form-input" name="free_delivery_promo_duration">
          {% set promo_duration_current = settings.free_delivery_promo_duration if settings.free_delivery_promo_duration is not none else 6 %}
          <option value="3" {% if promo_duration_current == 3 %}selected{% endif %}>3 seconds</option>
          <option value="5" {% if promo_duration_current == 5 %}selected{% endif %}>5 seconds</option>
          <option value="6" {% if promo_duration_current == 6 %}selected{% endif %}>6 seconds (default)</option>
          <option value="8" {% if promo_duration_current == 8 %}selected{% endif %}>8 seconds</option>
          <option value="10" {% if promo_duration_current == 10 %}selected{% endif %}>10 seconds</option>
          <option value="15" {% if promo_duration_current == 15 %}selected{% endif %}>15 seconds</option>
          <option value="30" {% if promo_duration_current == 30 %}selected{% endif %}>30 seconds</option>
          <option value="0" {% if promo_duration_current == 0 %}selected{% endif %}>Keep until closed</option>
        </select>
        <span class="mt-1 block text-xs text-zinc-500">How long the top banner stays visible before it slides away. Visitors still see it once per browser session. "Keep until closed" never auto-hides it.</span>
      </label>
      <label>
        <span class="form-label">Color theme (both banners)</span>
        <select class="form-input" id="promo-theme-select" name="free_delivery_promo_theme">
          {% set promo_theme_current = settings.free_delivery_promo_theme or 'amber' %}
          <option value="amber" {% if promo_theme_current == 'amber' %}selected{% endif %}>Signature Amber (current)</option>
          <option value="red" {% if promo_theme_current == 'red' %}selected{% endif %}>Rally Red</option>
          <option value="midnight" {% if promo_theme_current == 'midnight' %}selected{% endif %}>Midnight Drive</option>
          <option value="emerald" {% if promo_theme_current == 'emerald' %}selected{% endif %}>Emerald Trust</option>
          <option value="ocean" {% if promo_theme_current == 'ocean' %}selected{% endif %}>Ocean Blue</option>
          <option value="carbon" {% if promo_theme_current == 'carbon' %}selected{% endif %}>Carbon &amp; Gold</option>
          <option value="white" {% if promo_theme_current == 'white' %}selected{% endif %}>Clean White</option>
        </select>
        <span class="mt-1 block text-xs text-zinc-500">Applied to the top banner and the listing-page banner. Preview updates live below.</span>
      </label>
      <label>
        <span class="form-label">Promo end date (optional)</span>
        <input class="form-input" type="date" name="free_delivery_promo_end_date" value="{{ settings.free_delivery_promo_end_date or '' }}">
        <span class="mt-1 block text-xs text-zinc-500">Only used by the "Urgency countdown" animation below — shows an "Ends in N days" pill. Format YYYY-MM-DD. Leave empty to ignore.</span>
      </label>
    </div>

    <div class="mt-4">
      <span class="form-label">Banner animations</span>
      <div class="mt-2 flex flex-wrap gap-3">
        <label class="admin-check-pill"><input type="checkbox" name="free_delivery_promo_anim_entrance" {% if settings.free_delivery_promo_anim_entrance is none or settings.free_delivery_promo_anim_entrance %}checked{% endif %}> Slide-down entrance</label>
        <label class="admin-check-pill"><input type="checkbox" name="free_delivery_promo_anim_shimmer" {% if settings.free_delivery_promo_anim_shimmer is none or settings.free_delivery_promo_anim_shimmer %}checked{% endif %}> Gradient shimmer</label>
        <label class="admin-check-pill"><input type="checkbox" name="free_delivery_promo_anim_pulse" {% if settings.free_delivery_promo_anim_pulse is none or settings.free_delivery_promo_anim_pulse %}checked{% endif %}> Pulsing badge</label>
        <label class="admin-check-pill"><input type="checkbox" name="free_delivery_promo_anim_slide_text" {% if settings.free_delivery_promo_anim_slide_text %}checked{% endif %}> Slide-in message text</label>
        <label class="admin-check-pill"><input type="checkbox" name="free_delivery_promo_anim_countdown" {% if settings.free_delivery_promo_anim_countdown %}checked{% endif %}> Urgency countdown</label>
      </div>
      <span class="mt-2 block text-xs text-zinc-500">The first three are the recommended set. Slide-in message text staggers the message in after the banner appears; Urgency countdown needs the end date above.</span>
    </div>

    <div class="mt-5">
      <span class="form-label">Live preview</span>
      <div id="promo-theme-preview" class="promo-theme-swatch promo-theme-{{ promo_theme_current }} mt-2 rounded-lg px-4 py-2.5 text-center text-sm font-bold">
        <span class="promo-banner-text flex items-center justify-center gap-1.5">
          <svg class="h-4 w-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
          Free Canada-wide delivery this month
        </span>
      </div>
    </div>
    <script>
      (function () {
        const select = document.getElementById("promo-theme-select");
        const preview = document.getElementById("promo-theme-preview");
        if (!select || !preview) return;
        select.addEventListener("change", () => {
          preview.className = "promo-theme-swatch promo-theme-" + select.value + " mt-2 rounded-lg px-4 py-2.5 text-center text-sm font-bold";
        });
      })();
    </script>
  </div>

  <div class="rounded-lg border border-zinc-200 bg-white p-6 shadow-sm xl:col-span-2">
    <h2 class="text-xl font-black">Homepage Hero</h2>
    <label class="mt-5 block"><span class="form-label">Hero title</span><input class="form-input" name="homepage_hero_title" value="{{ settings.homepage_hero_title or '' }}"></label>
    <label class="mt-4 block"><span class="form-label">Hero subtitle</span><textarea class="form-input min-h-24" name="homepage_hero_subtitle">{{ settings.homepage_hero_subtitle or '' }}</textarea></label>
  </div>

  <div class="rounded-lg border border-zinc-200 bg-white p-6 shadow-sm">
    <h2 class="text-xl font-black">Popular Makes</h2>
    <p class="mt-2 text-sm text-zinc-600">The homepage "Browse by Make" section shows the top makes by vehicle count in your published inventory. Brand logos are auto-detected from <code class="rounded bg-zinc-100 px-1 text-xs">static/uploads/cards/make_&lt;Make&gt;.png</code>.</p>
    <label class="mt-5 block">
      <span class="form-label">Popular makes to display</span>
      <input class="form-input" type="number" min="1" max="12" step="1" name="popular_makes_count" value="{{ settings.popular_makes_count or 8 }}">
      <span class="mt-1 block text-xs text-zinc-500">How many top makes to show (1–12). Default: 8.</span>
    </label>
    <button class="btn-primary mt-6" type="submit">Save Settings</button>
  </div>

  <div class="rounded-lg border border-zinc-200 bg-white p-6 shadow-sm">
    <h2 class="text-xl font-black">Featured Carousel</h2>
    <p class="mt-2 text-sm text-zinc-600">The homepage hero section shows a carousel of featured vehicles. Control how many compact cards appear.</p>
    <label class="mt-5 block">
      <span class="form-label">Featured carousel count</span>
      <input class="form-input" type="number" name="featured_carousel_count" min="2" max="24" value="{{ settings.featured_carousel_count or 8 }}">
      <span class="mt-1 block text-xs text-zinc-500">How many featured vehicles to show in the hero carousel (2–24). Default: 8.</span>
    </label>
  </div>
</form>
{% endblock %}