{% extends "base.html" %}

{% block title %}Voice-Einstellungen{% endblock %}

{% block content %}
<div style="max-width: 760px; margin: 0 auto; padding: 24px;">

  <div style="display: flex; align-items: baseline; gap: 12px; margin-bottom: 8px;">
    <h1 style="margin: 0;">🎤 Takoma Voice — Einstellungen</h1>
  </div>
  <p style="color: #94a3b8; margin-bottom: 32px;">
    Konfiguration für die Sprachsteuerung. Status:
    {% if voice_enabled %}
      <span style="background:#16a34a;color:white;padding:2px 8px;border-radius:8px;font-size:12px;">VOICE AKTIV</span>
    {% else %}
      <span style="background:#94a3b8;color:white;padding:2px 8px;border-radius:8px;font-size:12px;">VOICE AUS</span>
    {% endif %}
    {% if llm_enabled %}
      <span style="background:#f2581b;color:white;padding:2px 8px;border-radius:8px;font-size:12px;">LLM AKTIV</span>
    {% else %}
      <span style="background:#94a3b8;color:white;padding:2px 8px;border-radius:8px;font-size:12px;">LLM AUS</span>
    {% endif %}
  </p>

  <section style="background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.10); border-radius:12px; padding:24px; margin-bottom:24px;">
    <h2 style="margin: 0 0 8px; color:#add5f4;">3-Stufen-System</h2>
    <ol style="color:#cbd5e1; line-height:1.8; padding-left:20px;">
      <li><strong>Wizards</strong> — gescriptet, offline, kostenfrei. „Leg neuen Auftrag an" → Multi-Turn-Dialog.</li>
      <li><strong>Pattern-Matcher</strong> — 24 schnelle Befehle. „Dashboard", „Pause", „Status Auftrag 487".</li>
      <li><strong>LLM (Claude)</strong> — freie Sprache, kettet Aktionen. „Lass uns ein Angebot für Falkenroth aus Ennepetal — leg den Kunden vorher an."</li>
    </ol>
  </section>

  <section style="background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.10); border-radius:12px; padding:24px; margin-bottom:24px;">
    <h2 style="margin: 0 0 16px;">LLM-Mode (Stufe 3)</h2>

    <form method="POST" action="/api/settings/voice-llm" enctype="application/x-www-form-urlencoded"
          id="llm-form" style="display:flex; flex-direction:column; gap:18px;">

      <label style="display:flex; align-items:start; gap:12px; cursor:pointer;">
        <input type="checkbox" name="enabled" value="true" {% if llm_enabled %}checked{% endif %}
               style="margin-top:4px; width:18px; height:18px;">
        <div>
          <div style="font-weight:600; font-size:16px;">LLM-Fallback aktivieren</div>
          <div style="font-size:13px; color:#94a3b8; margin-top:4px;">
            Wenn Wizards + Pattern den Befehl nicht verstehen → Anfrage an Claude.
            Kosten: ca. 0,5–3 ct pro komplexer Befehl.
          </div>
        </div>
      </label>

      <div>
        <label style="display:block; font-weight:600; font-size:14px; margin-bottom:6px;">
          Anthropic API-Key
          {% if has_env_key %}
            <span style="background:#16a34a;color:white;padding:1px 6px;border-radius:6px;font-size:10px;margin-left:6px;">aus ENV gelesen</span>
          {% elif has_api_key %}
            <span style="background:#356692;color:white;padding:1px 6px;border-radius:6px;font-size:10px;margin-left:6px;">gespeichert</span>
          {% endif %}
        </label>
        <input type="password" name="api_key"
               placeholder="{% if has_api_key %}••• bereits hinterlegt — leer lassen, um zu behalten{% else %}sk-ant-api03-…{% endif %}"
               style="width:100%; padding:10px 14px; border-radius:8px; border:1px solid rgba(255,255,255,0.2);
                      background:rgba(0,0,0,0.3); color:#fafafa; font-family:monospace; font-size:13px;">
        <div style="font-size:12px; color:#94a3b8; margin-top:6px;">
          API-Key von <a href="https://console.anthropic.com/settings/keys" target="_blank" style="color:#add5f4;">console.anthropic.com</a> holen.
          Wird verschlüsselt in der DB gespeichert.
        </div>
      </div>

      <div style="background:rgba(242,88,27,0.08); border-left:3px solid #f2581b; padding:12px 16px; border-radius:8px; font-size:13px; color:#fcc09c;">
        <strong>⚠ DSGVO-Hinweis:</strong> Bei aktiviertem LLM-Mode geht der Voice-Befehl-Text an Anthropic (USA).
        Für Pilot-Auslieferung muss das im AVV stehen. Für Production später auf Ollama (lokal) wechseln.
      </div>

      <button type="submit" style="background:linear-gradient(135deg,#356692,#284e72); color:white; padding:12px 24px;
                                    border:none; border-radius:8px; font-weight:600; cursor:pointer; width:200px;">
        Einstellungen speichern
      </button>
    </form>

    <div id="llm-form-result" style="margin-top:16px;"></div>
  </section>

  <section style="background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.10); border-radius:12px; padding:24px;">
    <h2 style="margin: 0 0 12px;">Test-Sätze (sobald LLM aktiv)</h2>
    <ul style="color:#cbd5e1; line-height:1.8; padding-left:20px;">
      <li>„Leg mir ein neues Angebot für Falkenroth aus Ennepetal an — den Kunden vorher anlegen. 50 Stück Welle DIN 1234."</li>
      <li>„Maschine 5 hat Spindel-Lager defekt — Wartungstermin morgen mit Mechaniker Schmidt."</li>
      <li>„Erstelle einen Auftrag für die Müller GmbH: 200 Bolzen M8x40 aus C45, bis übernächste Woche."</li>
    </ul>
  </section>

  <p style="margin-top: 32px; font-size:13px; color:#64748b;">
    <a href="/voice/help" style="color:#add5f4;">→ Alle Sprachbefehle</a> ·
    <a href="/voice/audit" style="color:#add5f4;">→ Audit-Log</a>
  </p>
</div>

<script>
document.getElementById('llm-form').addEventListener('submit', async function(e) {
  e.preventDefault();
  const form = e.target;
  const fd = new FormData(form);
  if (!fd.get('enabled')) fd.set('enabled', 'false');
  const resp = await fetch('/api/settings/voice-llm', { method: 'POST', body: fd });
  const data = await resp.json();
  const result = document.getElementById('llm-form-result');
  if (data.ok) {
    result.innerHTML = '<div style="background:#16a34a;color:white;padding:12px;border-radius:8px;">✓ Gespeichert. Seite neu laden …</div>';
    setTimeout(() => location.reload(), 1200);
  } else {
    result.innerHTML = '<div style="background:#dc2626;color:white;padding:12px;border-radius:8px;">❌ ' + (data.error || 'Fehler') + '</div>';
  }
});
</script>
{% endblock %}