{% extends "admin/base_site.html" %}
{% load i18n %}

{% block title %}{{ title }} | {{ site_title|default:"Django site admin" }}{% endblock %}

{% block extrastyle %}{{ block.super }}
<style>
  .karni-import { max-width: 64rem; }
  .karni-import table { border-collapse: collapse; width: 100%; font-size: 0.9rem; }
  .karni-import th, .karni-import td { border-bottom: 1px solid var(--color-base-200); padding: 0.45rem 0.5rem; text-align: left; vertical-align: top; }
  html.dark .karni-import th, html.dark .karni-import td { border-color: var(--color-base-800); }
  .karni-import select, .karni-import input[type=file] { min-height: 44px; font-size: 16px; border: 1px solid var(--color-base-300); border-radius: 6px; padding: 0.3rem 0.5rem; background: transparent; color: inherit; min-width: 12rem; }
  .karni-button { display: inline-block; min-height: 44px; line-height: 44px; padding: 0 1.25rem; border-radius: 6px; background: var(--color-primary-600); color: #fff; font-weight: 600; border: 0; cursor: pointer; }
  .karni-button-secondary { background: transparent; color: var(--color-primary-600); border: 1px solid var(--color-base-300); }
  .karni-toolbar { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; margin: 1rem 0; }
  .karni-note { color: var(--color-base-500); font-size: 0.85rem; }
  .karni-stats { display: flex; flex-wrap: wrap; gap: 1.5rem; margin: 1rem 0; }
  .karni-stats div { min-width: 6rem; }
  .karni-stats strong { display: block; font-size: 1.5rem; }
  .karni-progress { height: 10px; background: var(--color-base-200); border-radius: 5px; overflow: hidden; margin: 0.5rem 0; }
  .karni-progress span { display: block; height: 100%; background: var(--color-primary-600); width: 0; transition: width 0.3s; }
  .karni-problem td { color: #b91c1c; }
  html.dark .karni-problem td { color: #fca5a5; }
</style>
{% endblock %}

{% block content %}
<div class="karni-import">
  <p class="karni-note">
    {% blocktranslate trimmed %}
      Upload a CSV or XLSX file, map its columns to fields, preview what would change, then commit.
      Nothing is written before the preview; rows with errors are skipped and listed.
    {% endblocktranslate %}
    <a href="{{ template_url }}">{% translate "Download the template (XLSX)" %}</a> ·
    <a href="{{ template_url }}?format=csv">{% translate "CSV" %}</a>
  </p>

  {% if not job %}
    <form method="post" enctype="multipart/form-data" class="karni-toolbar">
      {% csrf_token %}
      <input type="file" name="file" accept=".csv,.xlsx" required>
      <button type="submit" class="karni-button">{% translate "Upload" %}</button>
      <a class="karni-button karni-button-secondary" href="{{ changelist_url }}">{% translate "Back" %}</a>
    </form>
    <h2 class="font-semibold mt-6 mb-2">{% translate "Importable fields" %}</h2>
    <table>
      <thead><tr><th>{% translate "Field" %}</th><th>{% translate "Kind" %}</th><th>{% translate "Required" %}</th><th>{% translate "Allowed values" %}</th></tr></thead>
      <tbody>
        {% for spec in fields %}
          <tr>
            <td><code>{{ spec.name }}</code>{% if spec.name == key %} <span class="karni-note">({% translate "matches existing rows" %})</span>{% endif %}</td>
            <td>{{ spec.kind }}</td>
            <td>{% if spec.required %}{% translate "yes" %}{% else %}—{% endif %}</td>
            <td>
              {% if spec.choices %}{% for value, label in spec.choices %}<code>{{ value }}</code>{% if not forloop.last %}, {% endif %}{% endfor %}
              {% elif spec.target %}{% blocktranslate with lookup=spec.lookup|default:"id" target=spec.target %}the {{ lookup }} of a {{ target }}{% endblocktranslate %}
              {% else %}—{% endif %}
            </td>
          </tr>
        {% endfor %}
      </tbody>
    </table>
  {% else %}
    <p><strong>{{ job.original_name }}</strong> — {{ job.rows_total }} {% translate "rows" %}, {% translate "status" %}: {{ job.get_status_display }}</p>

    {% if state.status == "uploaded" or state.status == "failed" %}
      {% if state.error %}<p role="alert" class="karni-problem"><strong>{{ state.error }}</strong></p>{% endif %}
      <form method="post">
        {% csrf_token %}
        <input type="hidden" name="step" value="map">
        <h2 class="font-semibold mb-2">{% translate "Map columns to fields" %}</h2>
        <table>
          <thead><tr><th>{% translate "Column in the file" %}</th><th>{% translate "Field" %}</th></tr></thead>
          <tbody>
            {% for column in columns %}
              <tr>
                <td>{{ column.header }}</td>
                <td>
                  <select name="map:{{ column.index }}">
                    <option value="" {% if not column.value %}selected{% endif %}>{% translate "— ignore —" %}</option>
                    {% for name, label, required in column.options %}
                      <option value="{{ name }}" {% if column.value == name %}selected{% endif %}>{{ name }}{% if required %} *{% endif %}</option>
                    {% endfor %}
                  </select>
                </td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
        <div class="karni-toolbar">
          <button type="submit" class="karni-button">{% translate "Preview" %}</button>
          <a class="karni-button karni-button-secondary" href="{{ upload_url }}">{% translate "Upload another file" %}</a>
        </div>
      </form>

    {% elif state.status == "previewing" or state.status == "committing" %}
      <p id="karni-import-progress-text">{{ state.rows_done }} / {{ state.rows_total }}</p>
      <div class="karni-progress"><span id="karni-import-progress-bar"></span></div>
      <p class="karni-note">{% translate "Running in the background; this page refreshes itself." %}</p>
      <script>
        (function () {
          var url = "{{ state_url|escapejs }}";
          var total = {{ state.rows_total }};
          function tick() {
            fetch(url, { credentials: "same-origin" }).then(function (r) { return r.json(); }).then(function (s) {
              var done = s.rows_done || 0;
              document.getElementById("karni-import-progress-text").textContent = done + " / " + total;
              document.getElementById("karni-import-progress-bar").style.width = (total ? Math.round(done * 100 / total) : 0) + "%";
              if (s.status === "previewing" || s.status === "committing") { setTimeout(tick, 1500); } else { window.location.reload(); }
            }).catch(function () { setTimeout(tick, 3000); });
          }
          setTimeout(tick, 1000);
        })();
      </script>

    {% else %}
      {% with result=state.result %}
        <div class="karni-stats">
          <div><strong>{{ result.created }}</strong>{% translate "created" %}</div>
          <div><strong>{{ result.updated }}</strong>{% translate "updated" %}</div>
          <div><strong>{{ result.skipped }}</strong>{% translate "skipped" %} <span class="karni-note">({{ result.unchanged }} {% translate "unchanged" %}, {{ result.errors }} {% translate "with errors" %})</span></div>
        </div>
      {% endwith %}
      {% if state.problems %}
        <h2 class="font-semibold mb-2">{% translate "Rows with errors" %}</h2>
        <table>
          <thead><tr><th>{% translate "Row" %}</th><th>{% translate "Field" %}</th><th>{% translate "Problem" %}</th></tr></thead>
          <tbody>
            {% for problem in state.problems %}
              <tr class="karni-problem"><td>{{ problem.row }}</td><td>{{ problem.field|default:"—" }}</td><td>{{ problem.message }}</td></tr>
            {% endfor %}
          </tbody>
        </table>
      {% endif %}
      <form method="post" class="karni-toolbar">
        {% csrf_token %}
        {% if state.status == "previewed" %}
          <input type="hidden" name="step" value="commit">
          <button type="submit" class="karni-button">{% translate "Commit" %}</button>
          <button type="submit" name="step" value="remap" class="karni-button karni-button-secondary">{% translate "Change the mapping" %}</button>
        {% else %}
          <span class="karni-note">{% translate "Done." %}{% if state.batch %} {% translate "Change batch" %} #{{ state.batch }}.{% endif %}</span>
          <a class="karni-button karni-button-secondary" href="{{ changelist_url }}">{% translate "Back to the list" %}</a>
          <a class="karni-button karni-button-secondary" href="{{ upload_url }}">{% translate "Import another file" %}</a>
        {% endif %}
      </form>
    {% endif %}
  {% endif %}
</div>
{% endblock %}