{% extends "base.html" %}
{% set active = 'settings' %}
{% block title %}Einstellungen{% endblock %}
{% block content %}
<h1>Einstellungen</h1>

<!-- ── VereinsID (fussball.de) ────────────────────────────────────────── -->
<div class="card">
  <div class="card-title">Fussball.de &mdash; VereinsID</div>
  <form method="post" action="{{ url_for('admin.einstellungen_vereinsid') }}">
    <div class="grid-2">
      <div class="form-group">
        <label for="verein_id">Club-ID <span style="color:var(--danger)">*</span></label>
        <input type="text" id="verein_id" name="verein_id"
               value="{{ verein_id }}"
               placeholder="00ES8GN75400000VVV0AG08LVUPGND5I">
        <p class="form-hint">
          URL-Segment der Vereinsseite auf fussball.de.<br>
          <code>fussball.de/verein/…/<strong>CLUB_ID</strong>/</code>
        </p>
      </div>
      <div class="form-group">
        <label for="heim_keywords">Heim-Keywords <span style="color:var(--muted)">(kommagetrennt)</span></label>
        <input type="text" id="heim_keywords" name="heim_keywords"
               value="{{ heim_keywords }}"
               placeholder="TuS Cremlingen, Cremlingen">
        <p class="form-hint">
          Zur Heimspiel-Erkennung im Spielplan.
          Vereinsname und g&auml;ngige Abk&uuml;rzungen eintragen.
        </p>
      </div>
    </div>
    <div class="btn-row">
      <button type="submit" class="btn btn-primary btn-sm">Speichern</button>
      <a href="{{ url_for('admin.crawler') }}" class="btn btn-secondary btn-sm">
        Crawler jetzt starten &rarr;
      </a>
    </div>
  </form>
</div>

<!-- ── Vereinsdaten ───────────────────────────────────────────────────── -->
<div class="card">
  <div class="card-title">Vereinsdaten</div>
  <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:20px;align-items:start;">

    <!-- Logo -->
    <div>
      <p style="font-weight:600;font-size:13px;margin:0 0 8px;">Vereinslogo</p>
      {% if logo_exists %}
      <div style="margin-bottom:8px;">
        <img src="{{ url_for('admin.media_logo') }}" alt="Vereinslogo"
             style="height:60px;width:auto;border-radius:6px;
                    background:rgba(255,255,255,.06);padding:6px;
                    border:1px solid var(--border);display:block;margin-bottom:4px;">
        <span class="badge badge-ok">geladen</span>
      </div>
      {% else %}
      <span class="badge badge-warn" style="display:inline-block;margin-bottom:8px;">kein Logo</span>
      {% endif %}
      <form method="post" action="{{ url_for('admin.einstellungen_logo') }}"
            enctype="multipart/form-data">
        <input type="file" name="logo" accept=".png,.jpg,.jpeg,image/*"
               style="color:var(--text);font-size:12px;width:100%;margin-bottom:6px;">
        <button type="submit" class="btn btn-primary btn-sm">Hochladen</button>
      </form>
    </div>

    <!-- Hymne -->
    <div>
      <p style="font-weight:600;font-size:13px;margin:0 0 8px;">Vereinshymne</p>
      {% if hymne_exists %}
      <div style="margin-bottom:8px;">
        <span class="badge badge-ok" style="display:inline-block;margin-bottom:6px;">geladen</span>
        <audio controls style="width:100%;height:32px;accent-color:var(--accent);display:block;">
          <source src="{{ url_for('admin.media_hymne') }}" type="audio/mpeg">
        </audio>
      </div>
      {% else %}
      <span class="badge badge-warn" style="display:inline-block;margin-bottom:8px;">keine Hymne</span>
      {% endif %}
      <form method="post" action="{{ url_for('admin.einstellungen_hymne') }}"
            enctype="multipart/form-data">
        <input type="file" name="hymne" accept=".mp3,audio/mpeg"
               style="color:var(--text);font-size:12px;width:100%;margin-bottom:6px;">
        <button type="submit" class="btn btn-primary btn-sm">Hochladen</button>
      </form>
    </div>

    <!-- Vereinsfarbe -->
    <div>
      <p style="font-weight:600;font-size:13px;margin:0 0 8px;">Vereinsfarbe</p>
      <form method="post" action="{{ url_for('admin.einstellungen_vereinsfarbe') }}">
        <div style="display:flex;align-items:center;gap:8px;margin-bottom:8px;">
          <input type="color" id="farbe" name="farbe" value="{{ verein_farbe }}"
                 style="width:54px;height:38px;padding:2px;border-radius:6px;
                        border:1px solid var(--border);background:var(--bg);cursor:pointer;flex-shrink:0;">
          <input type="text" id="farbe_hex" name="farbe_hex_display"
                 value="{{ verein_farbe }}" readonly
                 style="width:80px;font-family:monospace;font-size:13px;">
        </div>
        <button type="submit" class="btn btn-primary btn-sm">Speichern</button>
        <p class="form-hint" style="margin-top:6px;">Hintergrundfarbe in der App.</p>
      </form>
    </div>

    <!-- Standard-Teamfoto -->
    <div>
      <p style="font-weight:600;font-size:13px;margin:0 0 8px;">Standard-Teamfoto</p>
      {% if mannschaftslogo_exists %}
      <div style="margin-bottom:8px;">
        <img src="{{ url_for('admin.media_mannschaftslogo') }}" alt="Mannschaftsfoto"
             style="height:60px;width:auto;border-radius:6px;
                    background:rgba(255,255,255,.06);padding:6px;
                    border:1px solid var(--border);display:block;margin-bottom:4px;">
        <span class="badge badge-ok">geladen</span>
      </div>
      {% else %}
      <span class="badge badge-warn" style="display:inline-block;margin-bottom:8px;">kein Foto</span>
      {% endif %}
      <form method="post" action="{{ url_for('admin.einstellungen_mannschaftslogo') }}"
            enctype="multipart/form-data">
        <input type="file" name="logo" accept=".png,.jpg,.jpeg,image/*"
               style="color:var(--text);font-size:12px;width:100%;margin-bottom:6px;">
        <button type="submit" class="btn btn-primary btn-sm">Hochladen</button>
      </form>
    </div>

  </div>
</div>

<!-- ── Bundle ─────────────────────────────────────────────────────────── -->
<div class="card">
  <div class="card-title">Verschl&uuml;sseltes Datenpaket (.trb)</div>
  <p style="color:var(--muted);font-size:13px;margin-bottom:16px;">
    Erzeugt ein AES-256-GCM-verschl&uuml;sseltes Bundle aus den aktuellen Vereinsdaten.
    Die App-Nutzer tragen die URL + PIN in den Einstellungen ein.
  </p>

  <form method="post" action="{{ url_for('admin.einstellungen_bundle_save') }}"
        style="margin-bottom:16px;">
    <div class="grid-2">
      <div class="form-group">
        <label for="bundle_url">Bundle-URL <span style="color:var(--danger)">*</span></label>
        <input type="text" id="bundle_url" name="bundle_url"
               value="{{ bundle.get('bundle_url') or bundle_url_default }}">
        <p class="form-hint">
          Standard: <code>http://&lt;Server-IP&gt;:&lt;Port&gt;/dist/vereinspaket.trb</code><br>
          Der Vorschlag oben passt zum aktuell erkannten Server.
          F&uuml;r externen Zugriff ggf. durch Domain oder externe IP ersetzen.
        </p>
      </div>
      <div class="form-group">
        <label for="bundle_pin">Verschl&uuml;sselungs-PIN <span style="color:var(--danger)">*</span></label>
        <input type="password" id="bundle_pin" name="bundle_pin"
               value="{{ bundle.get('bundle_pin', '') }}"
               placeholder="Geheimer PIN">
        <p class="form-hint">
          Key = SHA-256(PIN). Separat an Eltern weitergeben &mdash;
          <strong>nicht</strong> per QR-Code.
        </p>
      </div>
    </div>
    <button type="submit" class="btn btn-secondary btn-sm">Konfiguration speichern</button>
  </form>

  <div style="display:flex;gap:12px;align-items:center;flex-wrap:wrap;
              border-top:1px solid var(--border);padding-top:14px;">
    <form method="post" action="{{ url_for('admin.einstellungen_bundle_generieren') }}">
      <button type="submit" class="btn btn-primary btn-sm"
              {% if not bundle.get('bundle_url') and not bundle_url_default %}
              disabled title="Zuerst URL und PIN speichern"{% endif %}>
        Bundle jetzt generieren
      </button>
    </form>

    {% if trb_exists %}
      <a href="{{ url_for('admin.einstellungen_bundle_download') }}"
         class="btn btn-secondary btn-sm">vereinspaket.trb herunterladen</a>
      <code style="color:var(--muted);font-size:11px;">{{ trb_path }}</code>
    {% else %}
      <span style="color:var(--muted);font-size:12px;">Noch kein Bundle generiert.</span>
    {% endif %}
  </div>
</div>

<!-- ── Auto-Crawler ───────────────────────────────────────────────────── -->
<div class="card">
  <div class="card-title">Automatischer Spielplan-Crawler</div>
  <p style="color:var(--muted);font-size:13px;margin-bottom:16px;">
    Wenn aktiviert, l&auml;dt der Crawler t&auml;glich die aktuellen Spielplandaten
    von fussball.de und aktualisiert <code>verein.json</code>.
    Per default deaktiviert &mdash; manueller Start &uuml;ber
    <a href="{{ url_for('admin.crawler') }}">Crawler-Seite</a> jederzeit m&ouml;glich.
  </p>
  <form method="post" action="{{ url_for('admin.einstellungen_crawler_toggle') }}">
    {% if crawler_enabled %}
      <div style="display:flex;align-items:center;gap:12px;margin-bottom:14px;">
        <span class="badge badge-ok">aktiv</span>
        <span style="color:var(--muted);font-size:13px;">L&auml;uft t&auml;glich automatisch.</span>
      </div>
      <input type="hidden" name="crawler_enabled" value="0">
      <button type="submit" class="btn btn-secondary btn-sm">Deaktivieren</button>
    {% else %}
      <div style="display:flex;align-items:center;gap:12px;margin-bottom:14px;">
        <span class="badge badge-warn">inaktiv</span>
        <span style="color:var(--muted);font-size:13px;">Kein automatischer Lauf.</span>
      </div>
      <input type="hidden" name="crawler_enabled" value="1">
      <button type="submit" class="btn btn-primary btn-sm">Aktivieren</button>
    {% endif %}
  </form>
</div>

<!-- ── SMTP ───────────────────────────────────────────────────────────── -->
<div class="card">
  <div class="card-title">SMTP &mdash; Absturzbenachrichtigungen</div>
  <p style="color:var(--muted);font-size:13px;margin-bottom:16px;">
    Bei {{ threshold }} Serverneustarts in Folge wird eine E-Mail versendet.
    Schwellwert &auml;nderbar &uuml;ber <code>CRASH_THRESHOLD</code> in der <code>.env</code>.
  </p>

  <form method="post" action="{{ url_for('admin.einstellungen_smtp_save') }}">
    <div class="grid-2">
      <div class="form-group">
        <label for="host">SMTP-Host <span style="color:var(--danger)">*</span></label>
        <input type="text" id="host" name="host"
               value="{{ smtp.get('host', '') }}" placeholder="mail.example.com">
      </div>
      <div class="form-group">
        <label for="smtp_port">Port</label>
        <input type="number" id="smtp_port" name="port"
               value="{{ smtp.get('port', 587) }}" min="1" max="65535">
      </div>
      <div class="form-group">
        <label for="user">Benutzername</label>
        <input type="text" id="user" name="user"
               value="{{ smtp.get('user', '') }}" placeholder="user@example.com">
      </div>
      <div class="form-group">
        <label for="smtp_password">Passwort</label>
        <input type="password" id="smtp_password" name="password"
               value="{{ smtp.get('password', '') }}">
      </div>
      <div class="form-group">
        <label for="sender">Absender</label>
        <input type="text" id="sender" name="sender"
               value="{{ smtp.get('sender', '') }}" placeholder="teamrally@example.com">
        <p class="form-hint">Leer = Benutzername wird als Absender verwendet.</p>
      </div>
      <div class="form-group">
        <label for="recipient">Admin-E-Mail <span style="color:var(--danger)">*</span></label>
        <input type="email" id="recipient" name="recipient"
               value="{{ smtp.get('recipient', '') }}" placeholder="admin@example.com">
      </div>
    </div>
    <div class="form-group">
      <div class="checkbox-row">
        <input type="checkbox" id="use_tls" name="use_tls"
               {% if smtp.get('use_tls', 1) %}checked{% endif %}>
        <label for="use_tls" style="margin:0;cursor:pointer;">STARTTLS verwenden</label>
      </div>
    </div>
    <button type="submit" class="btn btn-primary">Speichern</button>
  </form>

  {% if smtp.get('host') %}
  <div style="margin-top:14px;border-top:1px solid var(--border);padding-top:14px;">
    <form method="post" action="{{ url_for('admin.einstellungen_smtp_test') }}">
      <button type="submit" class="btn btn-secondary btn-sm">Test-E-Mail senden</button>
    </form>
  </div>
  {% endif %}
</div>

<!-- ── Absturzzähler ──────────────────────────────────────────────────── -->
<div class="card">
  <div class="card-title">Absturzz&auml;hler</div>
  <dl class="kv">
    <dt>Aktuelle Neustarts</dt>
    <dd>
      {% if crash_count > 0 %}
        <span class="badge badge-warn">{{ crash_count }}</span>
      {% else %}
        <span class="badge badge-ok">0</span>
      {% endif %}
    </dd>
    <dt>Schwellwert</dt>
    <dd>{{ threshold }} (via <code>CRASH_THRESHOLD</code>)</dd>
    <dt>Reset nach</dt>
    <dd>{{ stable_minutes }} Minuten stabilem Betrieb</dd>
  </dl>
</div>

<!-- ── Daten neu laden ────────────────────────────────────────────────── -->
<div class="card" style="border-color:var(--accent);">
  <div class="card-title" style="color:var(--accent);">&#196;nderungen &uuml;bernehmen</div>
  <p style="color:var(--muted);font-size:13px;margin-bottom:14px;">
    Nach &Auml;nderungen an Vereinsfarbe, VereinsID oder Datendateien die geladenen Daten
    aktualisieren. Kein Serverneustart n&ouml;tig.
  </p>
  <form method="post" action="{{ url_for('admin.daten_reload') }}">
    <button type="submit" class="btn btn-primary">Daten jetzt neu laden</button>
  </form>
</div>

<script>
  const picker = document.getElementById('farbe');
  const hexDisplay = document.getElementById('farbe_hex');
  if (picker && hexDisplay) {
    picker.addEventListener('input', () => { hexDisplay.value = picker.value; });
  }
</script>
{% endblock %}