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

{% block title %}Import Inventory | Admin{% endblock %}

{% block content %}
<p class="eyebrow-dark">Crawler import</p>
<h1 class="mt-3 text-4xl font-black tracking-normal">Import Inventory</h1>

<form class="mt-8 rounded-lg border border-zinc-200 bg-white p-6 shadow-sm" method="post">
  <input type="hidden" name="action" value="preview">
  <label class="block">
    <span class="form-label">Source crawler SQLite DB path</span>
    <input class="form-input" name="source_db" value="{{ source_db or '' }}" placeholder="F:\path\to\crawler.sqlite3" required>
  </label>
  <div class="mt-4 grid gap-4 md:grid-cols-[1fr_auto]">
    <input class="form-input mt-0" name="source_search" value="{{ source_search or '' }}" placeholder="Filter preview by title, stock, or year">
    <button class="btn-primary" type="submit">Load Listings / Preview</button>
  </div>
</form>

<form class="mt-4" method="post">
  <input type="hidden" name="action" value="repair_all">
  <input type="hidden" name="source_db" value="{{ source_db or '' }}">
  <button class="btn-outline" type="submit">Repair image order / primary images</button>
</form>

{% if preview and preview.rows %}
  <form class="mt-8 rounded-lg border border-zinc-200 bg-white p-6 shadow-sm" method="post" data-import-form>
    <input type="hidden" name="action" value="import">
    <input type="hidden" name="source_db" value="{{ source_db }}">
    <input type="hidden" name="source_search" value="{{ source_search or '' }}">

    <div class="flex flex-col justify-between gap-4 lg:flex-row lg:items-end">
      <div>
        <h2 class="text-2xl font-black">Preview Listings</h2>
        <p class="mt-2 text-sm text-zinc-600">
          <span data-import-visible-count>{{ preview.total }}</span> of {{ preview.source_total }} source listings shown.
          <span class="ml-2 font-bold" data-import-selected-count>Selected 0 of {{ preview.total }} visible listings</span>
        </p>
      </div>
      <div class="flex flex-wrap gap-2">
        <button class="btn-outline py-2" type="button" data-select-mode="all">Select all</button>
        <button class="btn-outline py-2" type="button" data-select-mode="none">Select none</button>
        <button class="btn-outline py-2" type="button" data-select-mode="first5">First 5</button>
        <button class="btn-outline py-2" type="button" data-select-mode="first10">First 10</button>
        <button class="btn-outline py-2" type="button" data-select-mode="missing">Missing only</button>
        <button class="btn-outline py-2" type="button" data-select-mode="notimported">Not imported</button>
      </div>
    </div>

    <div class="mt-5 grid gap-4 md:grid-cols-2 xl:grid-cols-6">
      <label class="rounded-lg border border-zinc-200 p-4 text-sm font-bold"><input type="checkbox" name="copy_images" checked> Copy images</label>
      <label class="rounded-lg border border-zinc-200 p-4 text-sm font-bold"><input type="checkbox" name="overwrite"> Overwrite existing</label>
      <label class="rounded-lg border border-zinc-200 p-4 text-sm font-bold"><input type="checkbox" name="publish" checked> Publish</label>
      <label class="rounded-lg border border-zinc-200 p-4 text-sm font-bold"><input type="checkbox" name="dry_run"> Dry run</label>
      <label class="rounded-lg border border-zinc-200 p-4 text-sm font-bold"><input type="checkbox" name="missing_only"> Import missing only</label>
      <label class="rounded-lg border border-zinc-200 p-4 text-sm font-bold"><input type="checkbox" name="repair_after_import" checked> Repair order after import</label>
      <label class="rounded-lg border border-zinc-200 p-4 text-sm font-bold"><input type="checkbox" name="generate_variants_after_import" checked> Generate thumb + gallery after import</label>
      <label>
        <span class="form-label">Default status</span>
        <select class="form-input" name="default_status">
          {% for status in statuses %}
            <option value="{{ status }}" {% if status == "Available" %}selected{% endif %}>{{ status }}</option>
          {% endfor %}
        </select>
      </label>
      <label class="xl:col-span-2">
        <span class="form-label">Image version on re-import</span>
        <select class="form-input" name="generated_image_mode">
          <option value="source">Use source/default images only</option>
          <option value="source_with_generated">Use source images, replace where AI generated versions exist</option>
        </select>
      </label>
    </div>

    <div class="mt-6 overflow-x-auto">
      <table class="min-w-full divide-y divide-zinc-200">
        <thead class="bg-zinc-100">
          <tr>
            <th class="table-heading">Import</th>
            <th class="table-heading">Stock</th>
            <th class="table-heading">Title</th>
            <th class="table-heading">Year</th>
            <th class="table-heading">Price</th>
            <th class="table-heading">Images</th>
            <th class="table-heading">Imported</th>
            <th class="table-heading">Source</th>
          </tr>
        </thead>
        <tbody class="divide-y divide-zinc-200">
          {% for row in preview.rows %}
            <tr data-preview-row data-imported="{{ '1' if row.already_imported else '0' }}" data-missing="{{ '1' if (not row.already_imported or row.image_count == 0) else '0' }}" data-images="{{ row.image_count }}" data-stock="{{ row.stock_number }}" data-title="{{ row.title }}">
              <td class="table-cell"><input class="import-row-checkbox" type="checkbox" name="selected_stocks" value="{{ row.stock_number }}"></td>
              <td class="table-cell font-bold text-zinc-950">{{ row.stock_number }}</td>
              <td class="table-cell">{{ row.title }}</td>
              <td class="table-cell">{{ row.year }}</td>
              <td class="table-cell">{{ format_price_for_language(row.price, settings.default_language or 'en', settings) }}</td>
              <td class="table-cell">{{ row.image_count }}</td>
              <td class="table-cell">{{ 'Yes' if row.already_imported else 'No' }}</td>
              <td class="table-cell">{% if row.source_url %}<a class="font-bold underline decoration-amber-400 decoration-2 underline-offset-4" href="{{ row.source_url }}" target="_blank" rel="noopener noreferrer">Open</a>{% endif %}</td>
            </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>

    <button class="btn-primary mt-6" type="submit">Import Selected Listings</button>
  </form>
{% elif preview and preview.error %}
  <div class="mt-8 rounded-lg border border-amber-200 bg-amber-50 p-5 text-sm font-bold text-amber-950">{{ preview.error }}</div>
{% endif %}

{% if summary %}
  <section class="mt-8 rounded-lg border border-zinc-200 bg-white p-6 shadow-sm">
    <h2 class="text-2xl font-black">Import Summary</h2>
    <div class="mt-5 grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
      {% for key, label in summary_fields %}
        <div class="rounded-lg bg-zinc-100 p-4"><p class="text-xs font-black uppercase tracking-[0.14em] text-zinc-500">{{ label }}</p><p class="mt-2 text-3xl font-black">{{ summary[key] }}</p></div>
      {% endfor %}
    </div>
    {% if summary.errors %}
      <div class="mt-6 rounded-lg border border-amber-200 bg-amber-50 p-4">
        <p class="font-black text-amber-950">Messages</p>
        <ul class="mt-3 list-disc space-y-1 pl-5 text-sm text-amber-950">
          {% for error in summary.errors %}<li>{{ error }}</li>{% endfor %}
        </ul>
      </div>
    {% endif %}
  </section>
{% endif %}
{% endblock %}