{% extends "admin/onboarding/base.html" %}
{% block title %}Vereinsdaten laden{% endblock %}

{% block head %}
<style>
  .status-box {
    background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
    padding: 16px 18px; margin-bottom: 20px; display: flex; align-items: center; gap: 12px;
  }
  .status-icon { font-size: 22px; flex-shrink: 0; }
  .status-text { font-size: 14px; line-height: 1.5; }
  .status-text strong { display: block; margin-bottom: 2px; }

  .checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
  .checklist li {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 12px 14px; background: var(--bg); border: 1px solid var(--border);
    border-radius: 8px; font-size: 14px;
  }
  .checklist li.done  { border-color: var(--success); }
  .checklist li.warn  { border-color: var(--warning); }
  .checklist li.info  { border-color: var(--accent);  }
  .check-icon { font-size: 18px; flex-shrink: 0; margin-top: 1px; }
  .check-body { flex: 1; }
  .check-body strong { display: block; margin-bottom: 2px; }
  .check-body span   { color: var(--muted); font-size: 13px; }
  .check-link {
    display: inline-block; margin-top: 6px; font-size: 12px; font-weight: 600;
    color: var(--accent); text-decoration: none;
  }
  .check-link:hover { text-decoration: underline; }

  .spinner {
    width: 20px; height: 20px; border: 2px solid var(--border);
    border-top-color: var(--accent); border-radius: 50%;
    animation: spin .8s linear infinite; flex-shrink: 0;
  }
  @keyframes spin { to { transform: rotate(360deg); } }

  #fetch-section { display: block; }
  #result-section { display: none; }
</style>
{% endblock %}

{% block content %}
<h1>Vereinsdaten laden</h1>
<p class="lead">Der Server ruft jetzt die Mannschaften und den Spielplan von fussball.de ab.</p>

<!-- Ladebereich -->
<div id="fetch-section">
  <div class="status-box">
    <div class="spinner" id="spinner"></div>
    <div class="status-text">
      <strong>Verbinde mit fussball.de…</strong>
      Club-ID: <code>{{ club_id or '(nicht gesetzt)' }}</code>
    </div>
  </div>
  {% if not club_id %}
  <div class="alert alert-warn">
    Keine Club-ID gesetzt — Schritt 3 wurde übersprungen oder war leer.
    <a href="{{ url_for('onboarding.step_3') }}" style="color:var(--warning);font-weight:600;">Zurück zu Schritt 3</a>
  </div>
  {% endif %}
</div>

<!-- Ergebnisbereich -->
<div id="result-section">
  <div id="result-box" class="status-box"></div>

  <h2 style="font-size:16px;margin:24px 0 12px;">Was jetzt noch zu tun ist</h2>
  <ul class="checklist" id="checklist">

    <li class="warn" id="item-logo">
      <span class="check-icon">&#128444;</span>
      <div class="check-body">
        <strong>Vereinslogo hochladen</strong>
        <span>PNG oder JPG, wird in der App als Vereinswappen angezeigt.</span>
        <a class="check-link" href="/admin/einstellungen#logo">&#8594; Einstellungen &rarr; Logo</a>
      </div>
    </li>

    <li class="warn" id="item-hymne">
      <span class="check-icon">&#127925;</span>
      <div class="check-body">
        <strong>Vereinshymne hochladen</strong>
        <span>MP3-Datei, Tap auf das Logo in der App spielt sie ab.</span>
        <a class="check-link" href="/admin/einstellungen#hymne">&#8594; Einstellungen &rarr; Hymne</a>
      </div>
    </li>

    <li class="warn" id="item-teamfoto">
      <span class="check-icon">&#128247;</span>
      <div class="check-body">
        <strong>Standard-Mannschaftsfoto hochladen</strong>
        <span>Wird als Platzhalterbild angezeigt wenn kein Teamfoto vorhanden ist.</span>
        <a class="check-link" href="/admin/einstellungen#teamfoto">&#8594; Einstellungen &rarr; Mannschaftsfoto</a>
      </div>
    </li>

    <li class="info">
      <span class="check-icon">&#9881;</span>
      <div class="check-body">
        <strong>Vereinsname und -daten anpassen</strong>
        <span>Name, Kurzname, Gründungsjahr und Farbe in <code>data/verein.json</code> eintragen.</span>
        <a class="check-link" href="/admin/daten">&#8594; Admin &rarr; Datenverwaltung</a>
      </div>
    </li>

    <li class="info">
      <span class="check-icon">&#128101;</span>
      <div class="check-body">
        <strong>Trainer einrichten (TeamManagement)</strong>
        <span>Für jede Mannschaft kann der Trainer per QR-Code die Eltern einbinden.</span>
        <span style="display:block;margin-top:4px;">Dies erfolgt in der App: Team &rarr; Mitglieder &rarr; TeamManagement aktivieren.</span>
      </div>
    </li>

    <li class="info">
      <span class="check-icon">&#128241;</span>
      <div class="check-body">
        <strong>App für Eltern bereitstellen</strong>
        <span>APK-Datei hochladen und den Download-Link an die Eltern weitergeben.</span>
        <a class="check-link" href="/admin/einstellungen#app">&#8594; Einstellungen &rarr; App-Verteilung</a>
      </div>
    </li>

    <li class="info">
      <span class="check-icon">&#128230;</span>
      <div class="check-body">
        <strong>Vereinspaket (Bundle) erstellen</strong>
        <span>Verschlüsseltes Offline-Paket für Vereine ohne dauerhaften Server-Betrieb.</span>
        <a class="check-link" href="/admin/einstellungen#bundle">&#8594; Einstellungen &rarr; Bundle</a>
      </div>
    </li>

    <li class="done">
      <span class="check-icon">&#10003;</span>
      <div class="check-body">
        <strong>Server eingerichtet</strong>
        <span>Konfiguration, Admin-Passwort und Vereinsdaten sind gesetzt.</span>
      </div>
    </li>

  </ul>

  <div class="btn-row" style="margin-top:28px;">
    <a href="{{ url_for('admin.dashboard') }}" class="btn btn-primary">Zum Dashboard &rarr;</a>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script>
(function() {
  function markDone(id) {
    var li = document.getElementById(id);
    if (!li) return;
    li.className = 'done';
    li.querySelector('.check-icon').innerHTML = '&#10003;';
  }

  fetch('/onboarding/ajax/erststart', { method: 'POST' })
    .then(function(r) { return r.json(); })
    .then(function(data) {
      document.getElementById('fetch-section').style.display = 'none';
      document.getElementById('result-section').style.display = 'block';

      var box = document.getElementById('result-box');
      if (data.ok) {
        box.innerHTML =
          '<span class="status-icon">&#10003;</span>' +
          '<div class="status-text">' +
            '<strong>' + (data.verein_name || 'Verein') + ' — Daten geladen</strong>' +
            data.team_count + ' Mannschaft' + (data.team_count !== 1 ? 'en' : '') + ' gefunden.' +
          '</div>';
        box.style.borderColor = 'var(--success)';

        // Bereits vorhandene Medien abhaken
        var missing = data.missing || [];
        if (missing.indexOf('logo')     === -1) markDone('item-logo');
        if (missing.indexOf('hymne')    === -1) markDone('item-hymne');
        if (missing.indexOf('teamfoto') === -1) markDone('item-teamfoto');
      } else {
        box.innerHTML =
          '<span class="status-icon">&#10008;</span>' +
          '<div class="status-text">' +
            '<strong>Vereinsdaten konnten nicht geladen werden</strong>' +
            '<span>' + (data.error || 'Unbekannter Fehler') + '</span>' +
            '<a href="/admin/einstellungen" style="display:block;margin-top:6px;color:var(--accent);">' +
              'Club-ID prüfen &rarr; Einstellungen' +
            '</a>' +
          '</div>';
        box.style.borderColor = 'var(--danger)';
      }
    })
    .catch(function(err) {
      document.getElementById('fetch-section').style.display = 'none';
      document.getElementById('result-section').style.display = 'block';
      var box = document.getElementById('result-box');
      box.innerHTML =
        '<span class="status-icon">&#10008;</span>' +
        '<div class="status-text"><strong>Verbindungsfehler</strong>' + err + '</div>';
      box.style.borderColor = 'var(--danger)';
    });
})();
</script>
{% endblock %}