{% extends "admin/base.html" %}
{% set active = 'teammanagement' %}

{% block title %}TeamManagement{% endblock %}

{% block content %}
<h1>TeamManagement</h1>
<p style="color:var(--muted);margin-bottom:20px;font-size:13px;">
  Aktiviere TeamManagement pro Mannschaft. Trainer erhalten einen QR-Code, den sie in der App scannen.
</p>

{% if not teams %}
  <div class="card">
    <p style="color:var(--muted);font-size:13px;">Keine Teams in verein.json gefunden.</p>
  </div>
{% endif %}

{% for team in teams %}
{% set status = tm_status.get(team.id) %}
{% set aktiv  = status is not none %}
<div class="card" id="card-{{ team.id }}">
  <div style="display:flex;align-items:center;gap:12px;flex-wrap:wrap;">
    <div style="flex:1;min-width:160px;">
      <strong style="font-size:14px;">{{ team.name }}</strong>
      <div style="margin-top:4px;">
        {% if aktiv %}
          <span class="badge badge-ok">Aktiv</span>
          <span style="font-size:12px;color:var(--muted);margin-left:8px;">
            {{ status.mitglieder_count }} Mitglied{{ 'er' if status.mitglieder_count != 1 else '' }}
          </span>
        {% else %}
          <span class="badge" style="background:rgba(139,148,158,.15);color:var(--muted);">Inaktiv</span>
        {% endif %}
      </div>
    </div>
    <div class="btn-row" style="margin-top:0;">
      {% if aktiv %}
        <a class="btn btn-secondary btn-sm" href="/admin/teammanagement/team/{{ team.id }}">
          Token-Übersicht
        </a>
        <button class="btn btn-secondary btn-sm" onclick="zeigeQr({{ team.id }}, '{{ status.trainer_token }}')">
          QR anzeigen
        </button>
        <button class="btn btn-secondary btn-sm" onclick="tokenRotieren({{ team.id }})">
          Token rotieren
        </button>
        <button class="btn btn-secondary btn-sm" onclick="resetBestaetigen({{ team.id }}, '{{ team.name }}')">
          Saisonstart-Reset
        </button>
        <button class="btn btn-danger btn-sm" onclick="deaktivierenBestaetigen({{ team.id }}, '{{ team.name }}')">
          Deaktivieren
        </button>
      {% else %}
        <button class="btn btn-primary btn-sm" onclick="aktivieren({{ team.id }})">
          Aktivieren
        </button>
      {% endif %}
    </div>
  </div>
</div>
{% endfor %}

<!-- Migration-Karte -->
<div class="card" style="margin-top:24px;border-left:3px solid var(--warning);">
  <h2 style="margin-bottom:8px;font-size:15px;">Datenbank-Migration (Update auf v1.2)</h2>
  <p style="color:var(--muted);font-size:13px;margin-bottom:16px;">
    Setzt alle Slot- und Mitglieder-Daten auf jungfräulichen Stand (neue UUID-Struktur).
    <strong>Trainer-Tokens bleiben erhalten</strong> — Trainer müssen keinen neuen QR scannen.
    Termine bleiben ebenfalls erhalten. Slots müssen danach vom Trainer neu eingepflegt werden.
  </p>
  <div class="btn-row" style="margin-top:0;">
    <button class="btn btn-sm" style="background:rgba(210,153,34,.2);color:var(--warning);border:1px solid rgba(210,153,34,.3);"
            onclick="migrierenBestaetigen()">
      Datenbank migrieren
    </button>
    <a class="btn btn-secondary btn-sm" href="/admin/teammanagement/db-editor">
      DB-Editor öffnen
    </a>
  </div>
  <div id="migration-result" style="display:none;margin-top:12px;font-size:13px;padding:8px 12px;border-radius:6px;"></div>
</div>

<!-- Saisonwechsel-Karte -->
<div class="card" style="margin-top:24px;border-left:3px solid var(--danger,#f85149);">
  <h2 style="margin-bottom:8px;font-size:15px;">Saisonwechsel</h2>
  <p style="color:var(--muted);font-size:13px;margin-bottom:16px;">
    Archiviert die aktuelle TeamManagement-Datenbank und setzt alle Mitglieder, Rückmeldungen und Tokens zurück.
    Trainer-QR-Codes müssen danach neu verteilt werden.
  </p>
  <div style="display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;">
    <div style="flex:1;min-width:180px;">
      <label style="font-size:12px;color:var(--muted);display:block;margin-bottom:4px;">Neue Saison (z.B. 2026/27)</label>
      <input id="sw-saison" type="text" placeholder="2026/27"
             style="width:100%;box-sizing:border-box;padding:7px 10px;border-radius:6px;border:1px solid var(--border);background:var(--bg-secondary,#161b22);color:inherit;font-size:13px;">
    </div>
    <button class="btn btn-danger btn-sm" onclick="saisonwechselBestaetigen()" style="height:36px;">
      Saisonwechsel starten
    </button>
  </div>
  <div id="sw-result" style="display:none;margin-top:12px;font-size:13px;padding:8px 12px;border-radius:6px;"></div>
</div>

<!-- QR-Modal -->
<div id="qr-modal" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:1000;align-items:center;justify-content:center;">
  <div class="card" style="max-width:380px;width:90%;margin:0;padding:24px;text-align:center;">
    <h2 style="margin-bottom:4px;" id="qr-title">Trainer-QR</h2>
    <p style="color:var(--muted);font-size:12px;margin-bottom:16px;">
      Trainer scannt diesen Code in der TeamRally-App &rarr; Einstellungen &rarr; TeamManagement.
    </p>
    <div id="qr-container" style="display:flex;justify-content:center;margin-bottom:16px;"></div>
    <p style="font-size:11px;color:var(--muted);margin-bottom:12px;">Token:</p>
    <code id="qr-token" style="font-size:11px;word-break:break-all;display:block;margin-bottom:16px;"></code>
    <button class="btn btn-secondary" onclick="schliesseQrModal()">Schließen</button>
  </div>
</div>

<!-- Bestätigungs-Modal -->
<div id="confirm-modal" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:1000;align-items:center;justify-content:center;">
  <div class="card" style="max-width:360px;width:90%;margin:0;padding:24px;">
    <h2 id="confirm-title" style="margin-bottom:12px;">Bestätigen</h2>
    <p id="confirm-text" style="font-size:13px;color:var(--muted);margin-bottom:20px;"></p>
    <div class="btn-row">
      <button class="btn btn-secondary" onclick="schliesseConfirmModal()">Abbrechen</button>
      <button class="btn btn-danger" id="confirm-ok">Bestätigen</button>
    </div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/qrcodejs/qrcode.min.js"></script>
<script>
  // ── Hilfsfunktionen ──────────────────────────────────────────────────────────

  async function apiPost(url) {
    const res = await fetch(url, {method: 'POST', credentials: 'include'});
    return res;
  }

  async function apiDelete(url) {
    const res = await fetch(url, {method: 'DELETE', credentials: 'include'});
    return res;
  }

  function zeigeQr(teamId, trainerToken) {
    document.getElementById('qr-title').textContent = 'Trainer-QR — Team ' + teamId;
    document.getElementById('qr-token').textContent = trainerToken;

    const container = document.getElementById('qr-container');
    container.innerHTML = '';

    // QR-Payload: base64(JSON) — identisch zu _build_qr_payload auf dem Server
    const payload = {
      trainer_token: trainerToken,
      team_id: teamId,
      server_url: window.location.origin
    };
    const payloadB64 = btoa(unescape(encodeURIComponent(JSON.stringify(payload))));

    new QRCode(container, {
      text:   payloadB64,
      width:  300,
      height: 300,
      colorDark:  '#000000',
      colorLight: '#ffffff',
    });

    const modal = document.getElementById('qr-modal');
    modal.style.display = 'flex';
  }

  function schliesseQrModal() {
    document.getElementById('qr-modal').style.display = 'none';
    document.getElementById('qr-container').innerHTML = '';
  }

  // ── Confirm-Modal ────────────────────────────────────────────────────────────

  let _confirmCallback = null;

  function zeigeConfirm(title, text, callback) {
    document.getElementById('confirm-title').textContent = title;
    document.getElementById('confirm-text').textContent  = text;
    _confirmCallback = callback;
    document.getElementById('confirm-modal').style.display = 'flex';
  }

  function schliesseConfirmModal() {
    document.getElementById('confirm-modal').style.display = 'none';
    _confirmCallback = null;
  }

  document.getElementById('confirm-ok').addEventListener('click', function() {
    schliesseConfirmModal();
    if (_confirmCallback) _confirmCallback();
  });

  // ── Aktionen ─────────────────────────────────────────────────────────────────

  async function aktivieren(teamId) {
    const res = await apiPost('/admin/teammanagement/aktivieren/' + teamId);
    if (!res.ok) {
      const data = await res.json().catch(() => ({}));
      alert('Fehler: ' + (data.error || res.status));
      return;
    }
    const data = await res.json();
    location.reload();
    // Nach Reload anzeigen — alternativ direkt zeigen:
    // zeigeQr(teamId, data.trainer_token);
  }

  function resetBestaetigen(teamId, teamName) {
    zeigeConfirm(
      'Saisonstart-Reset',
      'Alle Mitglieder von "' + teamName + '" werden gelöscht. Der Trainer-Token bleibt erhalten. Fortfahren?',
      () => resetAusfuehren(teamId)
    );
  }

  async function resetAusfuehren(teamId) {
    const res = await apiPost('/admin/teammanagement/reset/' + teamId);
    if (!res.ok) {
      const data = await res.json().catch(() => ({}));
      alert('Fehler: ' + (data.error || res.status));
      return;
    }
    const data = await res.json();
    alert(data.cleared + ' Mitglied(er) gelöscht.');
    location.reload();
  }

  async function tokenRotieren(teamId) {
    const res = await apiPost('/admin/teammanagement/token-rotieren/' + teamId);
    if (!res.ok) {
      const data = await res.json().catch(() => ({}));
      alert('Fehler: ' + (data.error || res.status));
      return;
    }
    const data = await res.json();
    zeigeQr(teamId, data.trainer_token);
  }

  function deaktivierenBestaetigen(teamId, teamName) {
    zeigeConfirm(
      'TeamManagement deaktivieren',
      '"' + teamName + '" wird vollständig deaktiviert. Alle Mitglieder, Termine und Rückmeldungen werden gelöscht.',
      () => deaktivierenAusfuehren(teamId)
    );
  }

  async function deaktivierenAusfuehren(teamId) {
    const res = await apiDelete('/admin/teammanagement/deaktivieren/' + teamId);
    if (!res.ok && res.status !== 204) {
      alert('Fehler beim Deaktivieren: ' + res.status);
      return;
    }
    location.reload();
  }

  // ── Migration ────────────────────────────────────────────────────────────────

  function migrierenBestaetigen() {
    zeigeConfirm(
      'Datenbank migrieren',
      'Alle Slots, Mitglieder, Beitritte und Join-Tokens werden gelöscht. ' +
      'Trainer-Tokens und Termine bleiben erhalten. Fortfahren?',
      () => migrierenAusfuehren()
    );
  }

  async function migrierenAusfuehren() {
    const resultDiv = document.getElementById('migration-result');
    resultDiv.style.display = 'none';
    const res = await fetch('/admin/teammanagement/migrieren', {
      method: 'POST', credentials: 'include',
    });
    const data = await res.json().catch(() => ({}));
    resultDiv.style.display = 'block';
    if (res.ok) {
      resultDiv.style.background = 'rgba(63,185,80,.15)';
      resultDiv.style.color      = '#3fb950';
      resultDiv.textContent      = 'Migration abgeschlossen. Slots können jetzt neu eingepflegt werden.';
    } else {
      resultDiv.style.background = 'rgba(248,81,73,.15)';
      resultDiv.style.color      = '#f85149';
      resultDiv.textContent      = 'Fehler: ' + (data.error || res.status);
    }
  }

  // ── Saisonwechsel ────────────────────────────────────────────────────────────

  function saisonwechselBestaetigen() {
    const saison = document.getElementById('sw-saison').value.trim();
    if (!saison) { alert('Bitte Saison eingeben (z.B. 2026/27).'); return; }
    zeigeConfirm(
      'Saisonwechsel bestätigen',
      'Die Datenbank wird archiviert und zurückgesetzt. Alle Mitglieder und Rückmeldungen gehen verloren. Saison: ' + saison,
      () => saisonwechselAusfuehren(saison)
    );
  }

  async function saisonwechselAusfuehren(saison) {
    const resultDiv = document.getElementById('sw-result');
    resultDiv.style.display = 'none';
    const res = await fetch('/admin/teammanagement/saisonwechsel', {
      method: 'POST',
      credentials: 'include',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify({saison: saison}),
    });
    const data = await res.json().catch(() => ({}));
    resultDiv.style.display = 'block';
    if (res.ok) {
      resultDiv.style.background = 'rgba(63,185,80,.15)';
      resultDiv.style.color      = '#3fb950';
      resultDiv.textContent      = 'Saisonwechsel abgeschlossen. Archiv: ' + (data.archiv || '');
      setTimeout(() => location.reload(), 2000);
    } else {
      resultDiv.style.background = 'rgba(248,81,73,.15)';
      resultDiv.style.color      = '#f85149';
      resultDiv.textContent      = 'Fehler: ' + (data.error || res.status);
    }
  }

  // Klick außerhalb der Modals schließt sie
  document.getElementById('qr-modal').addEventListener('click', function(e) {
    if (e.target === this) schliesseQrModal();
  });
  document.getElementById('confirm-modal').addEventListener('click', function(e) {
    if (e.target === this) schliesseConfirmModal();
  });
</script>
{% endblock %}