{% extends "base.html" %}

{% block title %}Erste Schritte{% endblock %}
{% block heading %}Erste Schritte mit Takoma{% endblock %}

{% block content %}

<div class="card" style="margin-bottom: 16px;">
  <div style="display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;">
    <div style="flex:1; min-width: 280px;">
      <h3 style="margin:0 0 6px; font-size: 1.05em;">
        Setup-Fortschritt: {{ progress.done }} / {{ progress.total }} Schritten erledigt
      </h3>
      <p style="margin:0; color: var(--card-text-muted); font-size: 0.9em;">
        Arbeite die Liste in deinem Tempo ab — kein Zeitdruck.
        Diese Seite verschwindet automatisch, sobald alle Schritte erledigt sind.
      </p>
    </div>
    <div style="min-width: 200px;">
      <div style="background: var(--card-border); border-radius: 8px; height: 14px; overflow:hidden;">
        <div style="background: linear-gradient(90deg, var(--brand-orange) 0%, var(--brand-blue-light) 100%);
                    height: 100%; width: {{ progress.percent }}%;
                    transition: width 400ms ease-out;"></div>
      </div>
      <div style="text-align:right; margin-top: 4px; font-size: 0.85em;
                  color: var(--card-text-muted);">
        {{ progress.percent }} % erledigt
      </div>
    </div>
  </div>
</div>

<div class="card" style="margin-bottom: 12px;">
  <h3 style="margin: 0 0 12px; font-size: 1.0em;">Checkliste</h3>
  <ol style="list-style: none; padding: 0; margin: 0;">
    {% for step in progress.steps %}
    <li style="display:flex; align-items:center; gap: 12px;
               padding: 10px 8px; border-bottom: 1px solid var(--card-border);">
      <div style="flex-shrink: 0; width: 28px; height: 28px;
                  border-radius: 50%;
                  background: {% if step.done %}#16a34a{% else %}var(--card-border){% endif %};
                  color: {% if step.done %}white{% else %}var(--card-text-muted){% endif %}; font-weight: 700;
                  display:flex; align-items:center; justify-content:center;
                  font-size: 13px;">
        {% if step.done %}✓{% else %}{{ loop.index }}{% endif %}
      </div>
      <div style="flex: 1;">
        <div style="font-weight: {% if step.done %}400{% else %}600{% endif %};
                    color: {% if step.done %}var(--card-text-muted){% else %}var(--card-text){% endif %};
                    text-decoration: {% if step.done %}line-through{% else %}none{% endif %};">
          {{ step.label }}
        </div>
      </div>
      {% if not step.done %}
      <a href="{{ step.link }}" class="btn btn-sm btn-primary">Jetzt erledigen</a>
      {% else %}
      <span style="color: #16a34a; font-size: 0.85em; font-weight: 600;">Fertig</span>
      {% endif %}
    </li>
    {% endfor %}
  </ol>
</div>

{% if progress.percent < 100 %}
<div class="card" style="border-left: 4px solid var(--brand-blue-light); margin-bottom: 12px; padding: 14px 18px;">
  <h4 style="margin: 0 0 6px; color: var(--brand-blue-light);">Lieber persönlich?</h4>
  <p style="margin: 0; font-size: 0.9em; color: var(--card-text-muted);">
    Wenn du den Setup lieber mit uns zusammen machst — buche dir einen
    kostenlosen 30-Min-Onboarding-Termin:
    <a href="https://calendly.com/takoma-digital/onboarding" target="_blank"
       style="color: var(--brand-orange); font-weight: 600;">Calendly-Termin buchen →</a>
  </p>
</div>
{% else %}
<div class="card" style="border-left: 4px solid #4ade80; padding: 14px 18px;">
  <h4 style="margin: 0 0 6px; color: #4ade80;">Geschafft! Du bist startklar.</h4>
  <p style="margin: 0; font-size: 0.9em; color: var(--card-text-muted);">
    Alle Setup-Schritte erledigt — dein Takoma ist einsatzbereit.
    Diese Seite kannst du jederzeit über Settings wieder aufrufen.
  </p>
</div>
{% endif %}

<div class="card" style="margin-top: 12px;">
  <h4 style="margin: 0 0 10px; font-size: 0.95em;">Stammdaten in Sekunden importieren</h4>
  <p style="margin: 0 0 14px; font-size: 0.85em; color: var(--card-text-muted);">
    Lade die Vorlage runter, füll sie in Excel/LibreOffice aus, lade sie hier hoch.
    Bestehende Einträge mit gleichem Namen werden übersprungen — idempotent.
  </p>

  <div class="grid" style="grid-template-columns: repeat(3, 1fr); gap: 12px;">
    {% for label, slug, kind in [
        ('Kunden',     'kunden',     'customers'),
        ('Materialien','materialien','materials'),
        ('Maschinen',  'maschinen',  'machines'),
    ] %}
    <div style="border: 1px solid var(--card-border); border-radius: 8px; padding: 12px;">
      <h5 style="margin: 0 0 8px; font-size: 0.95em;">{{ label }}</h5>
      <a href="/static/onboarding-templates/{{ slug }}-template.csv" download
         class="btn btn-sm btn-ghost" style="width: 100%; margin-bottom: 6px;">
        Vorlage runterladen
      </a>
      <form class="csv-import-form" data-kind="{{ kind }}" data-label="{{ label }}"
            style="margin:0;">
        <input type="file" name="file" accept=".csv,text/csv" required
               style="width: 100%; font-size: 0.85em; margin-bottom: 6px;">
        <button type="submit" class="btn btn-sm btn-primary" style="width: 100%;">
          Hochladen + importieren
        </button>
      </form>
      <div class="csv-result" data-kind="{{ kind }}"
           style="margin-top: 8px; font-size: 0.85em; min-height: 1em;"></div>
    </div>
    {% endfor %}
  </div>
</div>

<script>
document.querySelectorAll('.csv-import-form').forEach(form => {
  form.addEventListener('submit', async (e) => {
    e.preventDefault();
    const kind = form.dataset.kind;
    const label = form.dataset.label;
    const btn = form.querySelector('button[type=submit]');
    const result = document.querySelector(`.csv-result[data-kind="${kind}"]`);
    const fd = new FormData(form);
    btn.disabled = true; btn.textContent = '… läuft';
    result.textContent = '';
    try {
      const r = await fetch(`/api/onboarding/import-${kind}`, {
        method: 'POST', body: fd,
      });
      const d = await r.json();
      if (d.ok) {
        result.innerHTML = `<span style="color: #16a34a; font-weight: 600;">${d.inserted} neu</span>`
          + (d.skipped ? ` · ${d.skipped} übersprungen (gab's schon)` : '')
          + (d.errors && d.errors.length ? `<br><span style="color:#dc2626;">Fehler:<br>${d.errors.map(e => '· ' + e).join('<br>')}</span>` : '');
        setTimeout(() => location.reload(), 1500);
      } else {
        result.innerHTML = `<span style="color:#dc2626;">${d.error || 'Fehler'}</span>`;
        btn.disabled = false; btn.textContent = 'Hochladen + importieren';
      }
    } catch (err) {
      result.innerHTML = `<span style="color:#dc2626;">Netzwerk-Fehler</span>`;
      btn.disabled = false; btn.textContent = 'Hochladen + importieren';
    }
  });
});
</script>

{% endblock %}