{% extends "base.html" %}

{% block title %}Zwei-Faktor-Authentifizierung{% endblock %}
{% block breadcrumb %}<p class="text-xs text-neutral-500"><a href="/settings" class="hover:underline">Einstellungen</a> / 2FA</p>{% endblock %}
{% block heading %}Zwei-Faktor-Authentifizierung (TOTP){% endblock %}

{% block content %}
<div class="max-w-3xl space-y-4">

  {% if request.query_params.get('enabled') %}
  <div class="card" style="border-color:#10b981;background:rgba(16,185,129,0.10);">
    <div class="p-4 text-sm" style="color:#10b981;font-weight:600;">
      ✓ 2FA wurde erfolgreich aktiviert. Beim nächsten Login wirst du nach dem 6-stelligen Code gefragt.
    </div>
  </div>
  {% endif %}

  {% if request.query_params.get('error') == 'invalid' %}
  <div class="card" style="border-color:#ef4444;background:rgba(239,68,68,0.10);">
    <div class="p-4 text-sm" style="color:#ef4444;font-weight:600;">
      ✗ Code ungültig. Stelle sicher, dass die Uhrzeit auf deinem Gerät korrekt ist und versuche es erneut.
    </div>
  </div>
  {% elif request.query_params.get('error') == 'missing' %}
  <div class="card" style="border-color:#f59e0b;background:rgba(245,158,11,0.10);">
    <div class="p-4 text-sm" style="color:#f59e0b;font-weight:600;">
      Bitte gib den 6-stelligen Code aus deiner Authenticator-App ein.
    </div>
  </div>
  {% endif %}

  {% if enabled %}
    {# ---------- AKTIVIERT — Disable-Card ---------- #}
    <div class="card">
      <div class="card-header"><div>
        <h2>2FA ist aktiv</h2>
        <p class="sub">Dein Login ist mit einem zweiten Faktor geschützt</p>
      </div></div>
      <div class="p-5 space-y-4">
        <div class="flex items-center gap-3">
          <span class="badge badge-emerald" style="font-size:11px;">AKTIVIERT</span>
          <span class="text-sm" style="color: var(--card-text);">
            Bei jedem Login musst du zusätzlich zum Passwort den 6-stelligen Code aus deiner
            Authenticator-App eingeben.
          </span>
        </div>

        <div class="rounded-md p-4" style="background: rgba(239,68,68,0.08); border:1px solid rgba(239,68,68,0.30);">
          <p class="text-sm font-semibold" style="color:#ef4444;">2FA deaktivieren</p>
          <p class="text-xs mt-1" style="color: var(--card-text-muted);">
            Achtung — danach reicht wieder das Passwort allein. Nur deaktivieren, wenn du den
            Authenticator verloren hast oder neu aufsetzen möchtest.
          </p>
          <form method="post" action="/settings/2fa/disable" class="mt-3" onsubmit="return confirm('2FA wirklich deaktivieren?');">
            <button class="btn btn-secondary" type="submit" style="color:#ef4444;border-color:#ef4444;">
              2FA deaktivieren
            </button>
          </form>
        </div>
      </div>
    </div>
  {% else %}
    {# ---------- NICHT AKTIV — Setup-Wizard ---------- #}
    <div class="card">
      <div class="card-header"><div>
        <h2>2FA einrichten</h2>
        <p class="sub">Schütze deinen Login mit einer Authenticator-App (Google Authenticator, Authy, 1Password, …)</p>
      </div></div>
      <div class="p-5 space-y-6">

        {# Step 1: QR-Code + Secret #}
        <div>
          <div class="flex items-center gap-2 mb-2">
            <span class="badge badge-blue" style="font-size:11px;">SCHRITT 1</span>
            <span class="text-sm font-semibold">App registrieren</span>
          </div>
          <p class="text-xs mb-3" style="color: var(--card-text-muted);">
            Öffne deine Authenticator-App, tippe auf „+ neuen Account" und scanne diesen
            QR-Code. Alternativ kannst du den Secret-Schlüssel manuell eingeben.
          </p>
          <div class="grid grid-cols-1 md:grid-cols-2 gap-4 items-start">
            {# QR Container — wird per JS gefüllt #}
            <div id="qr-container" class="flex items-center justify-center"
                 style="background:white;border-radius:8px;padding:16px;min-height:200px;">
              <div class="text-xs text-neutral-500">QR-Code wird geladen …</div>
            </div>
            <div>
              <label class="text-[10px] uppercase tracking-wider font-semibold" style="color: var(--card-text-muted);">Secret (Manuelle Eingabe)</label>
              <div class="mt-1 px-3 py-2 rounded font-mono text-xs break-all"
                   style="background:rgba(0,0,0,0.30);border:1px solid var(--card-border-2); user-select:all;">{{ secret }}</div>
              <p class="text-[10px] mt-2" style="color: var(--card-text-muted);">
                Algorithmus: SHA-1 · Zeitfenster: 30 Sekunden · Stellen: 6
              </p>
            </div>
          </div>
        </div>

        {# Step 2: Code eingeben + bestätigen #}
        <form method="post" action="/settings/2fa/enable" class="border-t pt-5" style="border-color: var(--card-border-2);">
          <input type="hidden" name="secret" value="{{ secret }}">
          <div class="flex items-center gap-2 mb-2">
            <span class="badge badge-blue" style="font-size:11px;">SCHRITT 2</span>
            <span class="text-sm font-semibold">Aktivierung bestätigen</span>
          </div>
          <p class="text-xs mb-3" style="color: var(--card-text-muted);">
            Gib jetzt den 6-stelligen Code ein, den deine App anzeigt — damit beweisen wir,
            dass alles korrekt verknüpft ist.
          </p>
          <div class="flex items-center gap-3">
            <input class="input nums" type="text" name="code"
                   inputmode="numeric" autocomplete="one-time-code"
                   pattern="[0-9]{6}" maxlength="6" required
                   placeholder="123456" autofocus
                   style="width:160px;font-size:18px;letter-spacing:4px;text-align:center;">
            <button class="btn btn-primary" type="submit">Aktivieren</button>
          </div>
        </form>

      </div>
    </div>
  {% endif %}

  <div class="card">
    <div class="card-header"><div>
      <h2>Was ist 2FA?</h2>
      <p class="sub">Kurzer Hintergrund</p>
    </div></div>
    <div class="p-5 text-sm space-y-2" style="color: var(--card-text);">
      <p>
        Two-Factor Authentication (TOTP, RFC 6238) verlangt beim Login zwei unabhängige
        Beweise: dein Passwort (das du weißt) und einen 6-stelligen Code, der sich alle
        30 Sekunden ändert (den nur dein Telefon erzeugt).
      </p>
      <p>
        Selbst wenn jemand dein Passwort kennt — ohne Zugriff auf dein Telefon kommt er
        nicht in dein Takoma-Konto. Empfohlen für alle Konten mit Berechtigung
        „Rechnungen freigeben" oder „Stammdaten ändern".
      </p>
    </div>
  </div>

</div>

<script src="https://cdn.jsdelivr.net/npm/qrcode@1.5.4/build/qrcode.min.js"></script>
<script>
(function () {
  const url = {{ otpauth | tojson }};
  const target = document.getElementById('qr-container');
  if (!target) return;
  if (typeof QRCode === 'undefined') {
    target.innerHTML = '<div class="text-xs text-neutral-500">QR-Bibliothek nicht erreichbar — bitte Secret manuell eingeben.</div>';
    return;
  }
  QRCode.toCanvas(url, { width: 200, margin: 1, errorCorrectionLevel: 'M' }, function (err, canvas) {
    if (err || !canvas) {
      target.innerHTML = '<div class="text-xs" style="color:#ef4444;">QR-Erzeugung fehlgeschlagen — bitte Secret manuell eingeben.</div>';
      return;
    }
    target.innerHTML = '';
    target.appendChild(canvas);
  });
})();
</script>
{% endblock %}