{% extends "base.html" %}
{% from 'macros/help.html' import help_icon %}
{% block title %}Import — MedCover{% endblock %}

{% block content %}
<div class="row justify-content-center">
  <div class="col-12 col-lg-9">

    <div class="d-flex align-items-center gap-3 mb-4">
      <h2 class="mb-0">Import z Google Sheets</h2>
      {{ help_icon(
        "Import umožňuje hromadné vytvoření akcí a uživatelů z exportu Google Sheets. "
        "Data nejprve převeďte skriptem scripts/import_events.py do formátu JSON "
        "a celý obsah výsledného souboru vložte do pole níže.",
        title="O importu"
      ) }}
    </div>

    {# ── How-to steps ──────────────────────────────────────────────────── #}
    <div class="card mb-4">
      <div class="card-header fw-semibold">Jak importovat data</div>
      <div class="card-body">
        <ol class="mb-0">
          <li class="mb-1">
            Otevřete Google Sheet <em>Dozory YYYY</em> a stáhněte ho jako
            <strong>Microsoft Excel (.xlsx)</strong>
            <span class="text-muted">(Soubor → Stáhnout → Microsoft Excel)</span>.
          </li>
          <li class="mb-1">
            Spusťte konverzní skript (vyžaduje Python 3 + <code>pip install openpyxl</code>):
            <pre class="bg-body-secondary rounded p-2 mb-0 mt-1"><code>python scripts/import_events.py --input "Dozory 2026.xlsx" --output import_events.json</code></pre>
          </li>
          <li class="mb-1">
            Otevřete výsledný soubor <code>import_events.json</code> v textovém editoru,
            obsah celý zkopírujte a vložte do pole níže.
          </li>
          <li>
            Klikněte na <strong>Zkontrolovat a zobrazit náhled</strong>.
            Před potvrzením importu budete moci upravit data v přehledné tabulce.
          </li>
        </ol>
      </div>
    </div>

    {# ── Parse errors (if any) ─────────────────────────────────────────── #}
    {% if parse_errors %}
    <div class="alert alert-danger">
      <strong>Chyby v importních datech:</strong>
      <ul class="mb-0 mt-2">
        {% for row_num, errs in parse_errors %}
        <li>Řádek {{ row_num }}:
          <ul>
            {% for e in errs %}<li>{{ e }}</li>{% endfor %}
          </ul>
        </li>
        {% endfor %}
      </ul>
    </div>
    {% endif %}

    {# ── Paste form ───────────────────────────────────────────────────── #}
    <form method="POST" action="{{ url_for('import_events.events_preview') }}" novalidate>
      <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">

      <div class="mb-3">
        <label for="json_data" class="form-label fw-semibold">
          JSON data
          {{ help_icon(
            "Vložte sem celý obsah souboru import_events.json vygenerovaného skriptem. "
            "Formát je JSON objekt s klíči 'version', 'users' a 'events' (v2), "
            "nebo starší formát: pole akcí (začíná [ a končí ]).",
            title="Formát dat"
          ) }}
        </label>
        <textarea
          id="json_data"
          name="json_data"
          class="form-control font-monospace"
          rows="18"
          placeholder='[&#10;  {&#10;    "name": "Extraliga házená",&#10;    "date": "2026-02-08",&#10;    ...&#10;  }&#10;]'
          spellcheck="false"
          required>{{ json_data or '' }}</textarea>
        <div class="form-text">
          Každý objekt v poli představuje jednu akci. Viz <code>scripts/README_import.md</code>
          pro popis formátu (v2: objekt s klíči <code>version</code>, <code>users</code>, <code>events</code>).
        </div>
      </div>

      <div class="d-flex gap-2">
        <button type="submit" class="btn btn-primary">
          Zkontrolovat a zobrazit náhled
        </button>
        <a href="{{ url_for('events.index') }}" class="btn btn-outline-secondary">Zrušit</a>
      </div>
    </form>

  </div>
</div>
{% endblock %}