{% extends "base.html" %}

{% block title %}Daten-Import{% endblock %}
{% block heading %}Daten-Import (CSV){% endblock %}

{% block content %}

<style>
  .import-card { max-width: 700px; }
  .import-zones { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 900px; }
  .upload-zone {
    border: 1px solid var(--card-border);
    border-radius: 16px;
    background: var(--card-bg);
    -webkit-backdrop-filter: blur(22px) saturate(180%);
    backdrop-filter: blur(22px) saturate(180%);
    padding: 24px;
    text-align: center;
    color: var(--card-text);
    box-shadow: var(--card-shadow);
    transition: background 160ms, border-color 160ms, transform 160ms cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  .upload-zone:hover {
    background: rgba(53, 102, 146, 0.18);
    border-color: rgba(242, 88, 27, 0.40);
    transform: translateY(-2px);
  }
  .upload-zone h3 {
    font-family: 'Cy', 'Inter', sans-serif;
    font-size: 14px; font-weight: 700;
    color: var(--brand-blue-light);
    text-transform: uppercase; letter-spacing: 0.06em;
    margin-bottom: 8px;
  }
  .upload-zone .hint { font-size: 11px; color: var(--card-text-muted); margin: 6px 0 14px; line-height: 1.5; }

  /* === Datei-Auswahl-Button (nativer Input gestylt) === */
  .upload-zone input[type="file"] {
    display: block;
    margin: 0 auto 14px;
    font-size: 12px;
    color: var(--card-text-muted);
    background: transparent;
    border: none;
    padding: 0;
  }
  .upload-zone input[type="file"]::file-selector-button {
    background: rgba(20, 20, 22, 0.55);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    backdrop-filter: blur(14px) saturate(160%);
    color: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    padding: 6px 14px;
    margin-right: 10px;
    font-size: 12px; font-weight: 600;
    cursor: pointer;
    transition: background 140ms, border-color 140ms, color 140ms, transform 120ms;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.20),
                inset 0 1px 0 rgba(255, 255, 255, 0.10);
  }
  .upload-zone input[type="file"]::file-selector-button:hover {
    background: rgba(53, 102, 146, 0.55);
    border-color: rgba(255, 255, 255, 0.30);
    color: white;
  }
  .upload-zone input[type="file"]::file-selector-button:active {
    transform: scale(0.97);
  }
  /* Safari-Variante (älter) */
  .upload-zone input[type="file"]::-webkit-file-upload-button {
    background: rgba(20, 20, 22, 0.55);
    color: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    padding: 6px 14px;
    margin-right: 10px;
    font-size: 12px; font-weight: 600;
    cursor: pointer;
  }

  .ok-pill   {
    background: rgba(16, 185, 129, 0.18);
    color: #a7f3d0;
    border: 1px solid rgba(16, 185, 129, 0.40);
    padding: 2px 10px; border-radius: 9999px;
    font-size: 11px; font-weight: 600;
  }
  .err-pill  {
    background: rgba(239, 68, 68, 0.18);
    color: #fecaca;
    border: 1px solid rgba(239, 68, 68, 0.40);
    padding: 2px 10px; border-radius: 9999px;
    font-size: 11px; font-weight: 600;
  }
</style>

{% if not result %}
<div class="import-zones">

  <form method="post" action="/import/customers" enctype="multipart/form-data" class="upload-zone">
    <h3>Kunden importieren</h3>
    <p class="hint">CSV mit Kopfzeile<br>Spalten: Name, PLZ, Stadt, Land, USt-IdNr, E-Mail …</p>
    <input type="file" name="file" accept=".csv,.txt" required>
    <div class="flex gap-2 justify-center">
      <button class="btn btn-sm btn-secondary" type="submit" name="commit" value="0">Vorschau</button>
      <button class="btn btn-sm btn-primary" type="submit" name="commit" value="1">Direkt importieren</button>
    </div>
  </form>

  <form method="post" action="/import/items" enctype="multipart/form-data" class="upload-zone">
    <h3>Artikel importieren</h3>
    <p class="hint">CSV mit Kopfzeile<br>Spalten: Artikel-Nr, Bezeichnung, Typ, Bestand, Preis, Einheit …</p>
    <input type="file" name="file" accept=".csv,.txt" required>
    <div class="flex gap-2 justify-center">
      <button class="btn btn-sm btn-secondary" type="submit" name="commit" value="0">Vorschau</button>
      <button class="btn btn-sm btn-primary" type="submit" name="commit" value="1">Direkt importieren</button>
    </div>
  </form>

  <form method="post" action="/import/vendors" enctype="multipart/form-data" class="upload-zone">
    <h3>Lieferanten importieren</h3>
    <p class="hint">CSV mit Kopfzeile<br>Spalten: Name, Adresse, PLZ, Stadt, Land, E-Mail, Telefon, Kategorie …</p>
    <input type="file" name="file" accept=".csv,.txt" required>
    <div class="flex gap-2 justify-center">
      <button class="btn btn-sm btn-secondary" type="submit" name="commit" value="0">Vorschau</button>
      <button class="btn btn-sm btn-primary" type="submit" name="commit" value="1">Direkt importieren</button>
    </div>
  </form>
</div>

<div class="card import-card mt-6">
  <div class="card-header"><div>
    <h2>Hinweise zum CSV-Format</h2>
  </div></div>
  <div class="p-5 text-sm space-y-3">
    <p><b>Trennzeichen:</b> automatisch erkannt (<code>;</code>, <code>,</code>, Tab, <code>|</code>).</p>
    <p><b>Encoding:</b> UTF-8 oder Windows-1252 (Excel-Default) — wird automatisch erkannt.</p>
    <p><b>Kunden — bekannte Spaltennamen:</b><br>
      <span class="text-xs nums text-neutral-600">Name · Firma · Code · Kunden-Nr · Adresse · Straße · PLZ · Stadt · Ort · Land · Country_iso · USt-IdNr · VAT_ID · E-Mail · Telefon · Ansprechpartner · Zahlungsziel · Notiz</span>
    </p>
    <p><b>Artikel — bekannte Spaltennamen:</b><br>
      <span class="text-xs nums text-neutral-600">SKU · Artikel-Nr · Ident · Bezeichnung · Beschreibung · Typ (Werkzeug/Messmittel/Spannmittel/Material/...) · Bestand · Mindestbestand · Einzelpreis · Einheit</span>
    </p>
    <p><b>Duplikat-Erkennung:</b><br>
      Kunden: USt-IdNr → E-Mail → Kunden-Code (in dieser Reihenfolge)<br>
      Artikel: Artikel-Nr (eindeutig)
    </p>
    <p class="text-[11px] text-neutral-500 pt-2 border-t" style="border-color: var(--card-border-2);">
      Empfehlung: zuerst „Vorschau" zum Mapping-Check, dann „Direkt importieren".
    </p>
  </div>
</div>
{% endif %}

{% if result %}
<div class="card import-card mt-2">
  <div class="card-header"><div>
    <h2>Import-Ergebnis · {{ kind|capitalize }}</h2>
    {% if filename %}<p class="sub">{{ filename }} {% if result.dry_run %}<span class="badge badge-blue ml-2">Vorschau</span>{% else %}<span class="badge badge-emerald ml-2">Import durchgeführt</span>{% endif %}</p>{% endif %}
  </div></div>

  <div class="p-5 space-y-3 text-sm">
    {% if not result.ok %}
      <div style="background: rgba(239,68,68,0.15); border: 1px solid rgba(239,68,68,0.40); border-radius: 12px; padding: 14px;">
        <p class="font-semibold" style="color:#fca5a5;">Import abgebrochen</p>
        <p class="text-xs" style="color: var(--card-text);">{{ result.error }}</p>
        {% if result.headers %}
        <p class="text-[11px] mt-2" style="color: var(--card-text-muted);">Gefundene Spalten: <code>{{ result.headers|join(' · ') }}</code></p>
        {% endif %}
      </div>
    {% else %}

    <div class="grid grid-cols-4 gap-3 text-center">
      <div>
        <p class="text-[10px] uppercase" style="color: var(--card-text-muted);">Zeilen gesamt</p>
        <p class="text-2xl font-semibold nums" style="color: var(--card-text);">{{ result.total_rows }}</p>
      </div>
      <div>
        <p class="text-[10px] uppercase" style="color: var(--card-text-muted);">Neu</p>
        <p class="text-2xl font-semibold nums" style="color: #6ee7b7;">{{ result.created }}</p>
      </div>
      <div>
        <p class="text-[10px] uppercase" style="color: var(--card-text-muted);">Aktualisiert</p>
        <p class="text-2xl font-semibold nums" style="color: var(--brand-blue-light);">{{ result.updated }}</p>
      </div>
      <div>
        <p class="text-[10px] uppercase" style="color: var(--card-text-muted);">Übersprungen</p>
        <p class="text-2xl font-semibold nums" style="color: {% if result.skipped %}#fcd34d{% else %}var(--card-text-muted){% endif %};">{{ result.skipped }}</p>
      </div>
    </div>

    <div class="pt-3 border-t" style="border-color: var(--card-border-2);">
      <p class="text-[10px] uppercase tracking-wider text-neutral-500 font-semibold mb-2">Spalten-Mapping</p>
      <div class="flex flex-wrap gap-1 text-[11px]">
        {% for canonical, idx in result.matched.items() %}
          <span class="ok-pill"><code>{{ result.headers[idx] }}</code> → {{ canonical }}</span>
        {% endfor %}
        {% for h in result.headers %}
          {% if h not in (result.matched.keys() | map('string') | list) %}
            {% set h_idx = loop.index0 %}
            {% if h_idx not in result.matched.values() %}
              <span class="err-pill"><code>{{ h }}</code> → ignoriert</span>
            {% endif %}
          {% endif %}
        {% endfor %}
      </div>
    </div>

    {% if result.dry_run and result.preview %}
    <div class="pt-3 border-t" style="border-color: var(--card-border-2);">
      <p class="text-[10px] uppercase tracking-wider text-neutral-500 font-semibold mb-2">Vorschau (erste 20)</p>
      <table class="data-table">
        <thead><tr><th>Zeile</th>
          {% if kind == 'customers' %}
            <th>Name</th><th>Land</th><th>USt-IdNr</th><th>Stadt</th>
          {% elif kind == 'vendors' %}
            <th>Name</th><th>Stadt</th><th>E-Mail</th><th>Kategorien</th>
          {% else %}
            <th>Artikel-Nr</th><th>Bezeichnung</th><th>Typ</th>
          {% endif %}
          <th>Aktion</th>
        </tr></thead>
        <tbody>
        {% for p in result.preview %}
          <tr>
            <td class="nums text-neutral-500">{{ p.row }}</td>
            {% if kind == 'customers' %}
              <td>{{ p.name }}</td>
              <td class="nums text-xs">{{ p.country_iso }}</td>
              <td class="nums text-xs">{{ p.vat_id or '—' }}</td>
              <td class="text-xs">{{ p.city or '—' }}</td>
            {% elif kind == 'vendors' %}
              <td>{{ p.name }}</td>
              <td class="text-xs">{{ p.city or '—' }}</td>
              <td class="text-xs">{{ p.email or '—' }}</td>
              <td class="text-xs">{{ p.vendor_types or '—' }}</td>
            {% else %}
              <td class="nums">{{ p.ident }}</td>
              <td class="text-xs">{{ p.description }}</td>
              <td class="text-xs">{{ p.item_type }}</td>
            {% endif %}
            <td>
              {% if p.action == 'create' %}<span class="badge badge-emerald">neu</span>
              {% else %}<span class="badge badge-blue">aktualisieren</span>{% endif %}
            </td>
          </tr>
        {% endfor %}
        </tbody>
      </table>
    </div>
    {% endif %}

    {% if result.errors %}
    <div class="pt-3 border-t" style="border-color: var(--card-border-2);">
      <p class="text-[10px] uppercase tracking-wider font-semibold text-amber-700 mb-2">{{ result.errors|length }} Warnungen / Fehler</p>
      <div class="text-[11px] font-mono text-red-700 space-y-1" style="max-height:200px; overflow:auto;">
        {% for e in result.errors %}
          <p>{{ e }}</p>
        {% endfor %}
      </div>
    </div>
    {% endif %}

    {% endif %}
  </div>

  <div class="px-5 py-4 border-t flex items-center justify-between" style="border-color: var(--card-border-2);">
    <a class="btn btn-secondary" href="/import">← Zurück</a>
    {% if result.ok and result.dry_run and result.created + result.updated > 0 %}
    <form method="post" action="/import/{{ kind }}" enctype="multipart/form-data" class="inline">
      <p class="text-[11px] text-neutral-500 inline mr-2">Vorschau-Datei nochmal anhängen + bestätigen:</p>
      <input type="file" name="file" accept=".csv,.txt" required class="text-xs">
      <button class="btn btn-primary" type="submit" name="commit" value="1">Jetzt importieren</button>
    </form>
    {% else %}
    <a class="btn btn-primary" href="{% if kind == 'customers' %}/customers{% else %}/items{% endif %}">→ Zur Liste</a>
    {% endif %}
  </div>
</div>
{% endif %}
{% endblock %}