{% extends "base.html" %}
{% block title %}Werkstatt-Onboarding{% endblock %}
{% block heading %}🎤 Voice-Onboarding für Werkstatt-Geräte{% endblock %}

{% block content %}
<style>
  .onb-card { background:#0d1117; border:1px solid rgba(255,255,255,0.12);
              border-radius:12px; padding:24px; margin-bottom:18px; }
  .onb-card h3 { margin:0 0 10px; color:#fafafa; }
  .onb-step { display:flex; gap:14px; align-items:flex-start; padding:14px 0;
              border-bottom:1px solid rgba(255,255,255,0.06); }
  .onb-step:last-child { border-bottom:0; }
  .onb-num { width:32px; height:32px; border-radius:50%; background:#356692;
             color:white; display:flex; align-items:center; justify-content:center;
             font-weight:700; flex-shrink:0; font-size:14px; }
  .onb-text { color:#cbd5e1; line-height:1.55; font-size:14px; }
  .onb-btn { display:inline-block; background:linear-gradient(135deg,#356692,#284e72);
             color:white; padding:10px 20px; border-radius:8px; font-weight:600;
             text-decoration:none; margin-top:8px; }
  .onb-btn:hover { opacity:0.9; }
  .qr-box { background:white; padding:14px; border-radius:10px; display:inline-block; }
  .device-tab { padding:10px 18px; cursor:pointer; border-radius:8px 8px 0 0;
                background:rgba(255,255,255,0.04); color:#94a3b8; border:1px solid transparent;
                border-bottom:0; font-weight:600; font-size:13px; }
  .device-tab.active { background:#0d1117; color:#fafafa;
                        border-color:rgba(255,255,255,0.12); }
  .device-panel { display:none; }
  .device-panel.active { display:block; }
  .fingerprint { font-family:'SF Mono',Menlo,monospace; font-size:11px;
                 background:rgba(0,0,0,0.4); padding:8px 12px; border-radius:6px;
                 color:#fbbf24; word-break:break-all; }
</style>

<div style="max-width:920px; margin:0 auto;">

  <!-- HEADER -->
  <div class="onb-card" style="text-align:center; background:linear-gradient(135deg,rgba(53,102,146,0.10),rgba(40,78,114,0.05));">
    <h2 style="margin:0 0 6px; color:#fafafa;">Willkommen in der Takoma-Werkstatt</h2>
    <p style="color:#cbd5e1; margin:0; font-size:14px;">
      Diese Seite richtet dein Tablet oder Smartphone in 2 Minuten so ein, dass
      <strong style="color:#fbbf24;">Voice-Mikrofon und HTTPS sofort funktionieren</strong>.
    </p>
  </div>

  {% if not is_https %}
  <div class="onb-card" style="background:rgba(245,158,11,0.08); border-color:rgba(245,158,11,0.4);">
    <h3 style="color:#fbbf24;">⚠ Du nutzt gerade die HTTP-Adresse</h3>
    <p style="color:#cbd5e1; margin:0;">
      Voice funktioniert auf Werkstatt-Tablets nur über HTTPS. Wechsle auf die
      HTTPS-Adresse — sie zeigt nach der Cert-Installation kein Warnsymbol mehr.
    </p>
    <a href="{{ server_url }}/onboarding" class="onb-btn" style="margin-top:12px;">
      → {{ server_url }}/onboarding
    </a>
  </div>
  {% endif %}

  <!-- QR-CODE für andere Geräte -->
  <div class="onb-card">
    <div style="display:grid; grid-template-columns: 220px 1fr; gap:24px; align-items:center;">
      <div class="qr-box" style="justify-self:center;">
        <img src="/onboarding/qr.png" alt="QR-Code" style="display:block; width:200px; height:200px;">
      </div>
      <div>
        <h3>📱 Tablet / Smartphone einrichten</h3>
        <p style="color:#cbd5e1; line-height:1.6; font-size:13px;">
          1. Öffne die <strong>Kamera-App</strong> auf dem Tablet/Phone<br>
          2. Halte sie auf den QR-Code links<br>
          3. Tippe auf den erscheinenden Link → diese Seite öffnet sich dort<br>
          4. Folge der Anleitung unten (1 Klick)
        </p>
        <p style="color:#64748b; font-size:11px; margin-top:8px;">
          Verbindet sich automatisch mit <code style="background:rgba(0,0,0,0.4);
          padding:1px 5px; border-radius:3px;">{{ server_url }}</code>
        </p>
      </div>
    </div>
  </div>

  <!-- DEVICE-TABS -->
  <div class="onb-card">
    <h3>Schritt 1: Zertifikat auf diesem Gerät installieren</h3>
    <p style="color:#94a3b8; font-size:13px; margin-bottom:14px;">
      Damit Browser das HTTPS-Zertifikat ohne Warnung akzeptieren, muss es einmalig
      pro Gerät vertraut werden. Wähle dein System unten:
    </p>

    <div style="display:flex; gap:4px; margin-bottom:0; border-bottom:1px solid rgba(255,255,255,0.12);">
      <div class="device-tab {% if device_type == 'apple' %}active{% endif %}" onclick="showTab('apple')">🍎 iOS / macOS</div>
      <div class="device-tab {% if device_type == 'android' %}active{% endif %}" onclick="showTab('android')">🤖 Android</div>
      <div class="device-tab {% if device_type == 'windows' %}active{% endif %}" onclick="showTab('windows')">🪟 Windows</div>
      <div class="device-tab {% if device_type == 'other' %}active{% endif %}" onclick="showTab('linux')">🐧 Linux / Anderes</div>
    </div>

    <!-- iOS / macOS -->
    <div id="tab-apple" class="device-panel {% if device_type == 'apple' %}active{% endif %}" style="padding-top:18px;">
      <div class="onb-step">
        <div class="onb-num">1</div>
        <div class="onb-text">
          <strong>Profil herunterladen</strong> — Safari fragt direkt
          "Möchtest du dieses Konfigurationsprofil installieren?"<br>
          <a href="/onboarding/cert.mobileconfig" class="onb-btn">
            ⬇ Takoma-Profil installieren (iOS/macOS)
          </a>
        </div>
      </div>
      <div class="onb-step">
        <div class="onb-num">2</div>
        <div class="onb-text">
          <strong>iOS:</strong> Einstellungen öffnen → ganz oben „Profil geladen"
          tippen → <strong>Installieren</strong> → Code eingeben → bestätigen.
          <br><strong>macOS:</strong> Systemeinstellungen → Profile → Doppelklick → Installieren.
        </div>
      </div>
      <div class="onb-step">
        <div class="onb-num">3</div>
        <div class="onb-text">
          <strong>iOS-only:</strong> Einstellungen → Allgemein → Info →
          <strong>Zertifikatsvertrauensstellung</strong> →
          „takoma.local" auf <strong>EIN</strong> schalten.
        </div>
      </div>
      <div class="onb-step">
        <div class="onb-num">✓</div>
        <div class="onb-text">
          <strong>Fertig.</strong> Browser zu <a href="{{ server_url }}">{{ server_url }}</a> öffnen —
          KEIN Warnsymbol mehr, Voice-Mikrofon funktioniert.
        </div>
      </div>
    </div>

    <!-- Android -->
    <div id="tab-android" class="device-panel {% if device_type == 'android' %}active{% endif %}" style="padding-top:18px;">
      <div class="onb-step">
        <div class="onb-num">1</div>
        <div class="onb-text">
          <strong>Zertifikat herunterladen</strong> (Browser fragt nach Speicherort,
          ein „Downloads" reicht):<br>
          <a href="/onboarding/cert.crt" class="onb-btn">⬇ takoma-ca.crt herunterladen</a>
        </div>
      </div>
      <div class="onb-step">
        <div class="onb-num">2</div>
        <div class="onb-text">
          Android-Einstellungen → <strong>Sicherheit & Datenschutz</strong> →
          „Verschlüsselung & Anmeldedaten" → „Zertifikate installieren" →
          „CA-Zertifikat" → Warnung mit „Trotzdem installieren" bestätigen →
          <strong>takoma-ca.crt</strong> aus Downloads wählen.
        </div>
      </div>
      <div class="onb-step">
        <div class="onb-num">✓</div>
        <div class="onb-text">
          <strong>Fertig.</strong> Browser zu <code>{{ server_url }}</code> — Voice geht.<br>
          <small style="color:#94a3b8;">Hinweis Android: bei manchen Versionen funktioniert es nur
          in Firefox/Chrome, nicht in jeder WebView eingebetteter Apps.</small>
        </div>
      </div>
    </div>

    <!-- Windows -->
    <div id="tab-windows" class="device-panel {% if device_type == 'windows' %}active{% endif %}" style="padding-top:18px;">
      <div class="onb-step">
        <div class="onb-num">1</div>
        <div class="onb-text">
          <strong>Zertifikat herunterladen</strong>:<br>
          <a href="/onboarding/cert.crt" class="onb-btn">⬇ takoma-ca.crt</a>
        </div>
      </div>
      <div class="onb-step">
        <div class="onb-num">2</div>
        <div class="onb-text">
          Doppelklick auf die Datei → <strong>Zertifikat installieren</strong> →
          <strong>Lokaler Computer</strong> (Admin-Rechte) ODER aktueller Benutzer →
          „Alle Zertifikate in folgendem Speicher" → <strong>Vertrauenswürdige Stammzertifizierungsstellen</strong> →
          Weiter → Fertig stellen → Sicherheitswarnung mit „Ja" bestätigen.
        </div>
      </div>
      <div class="onb-step">
        <div class="onb-num">✓</div>
        <div class="onb-text">
          <strong>Fertig.</strong> Chrome/Edge zu <a href="{{ server_url }}">{{ server_url }}</a> öffnen.
        </div>
      </div>
    </div>

    <!-- Linux / Anderes -->
    <div id="tab-linux" class="device-panel {% if device_type == 'other' %}active{% endif %}" style="padding-top:18px;">
      <div class="onb-step">
        <div class="onb-num">1</div>
        <div class="onb-text">
          <a href="/onboarding/cert.crt" class="onb-btn">⬇ takoma-ca.crt</a>
        </div>
      </div>
      <div class="onb-step">
        <div class="onb-num">2</div>
        <div class="onb-text">
          <strong>Ubuntu/Debian:</strong>
          <pre style="background:rgba(0,0,0,0.4); padding:8px 12px; border-radius:5px; font-size:11px; color:#cbd5e1;">sudo cp takoma-ca.crt /usr/local/share/ca-certificates/
sudo update-ca-certificates</pre>
        </div>
      </div>
    </div>
  </div>

  <!-- FINGERPRINT-VERIFIZIERUNG -->
  {% if fingerprint %}
  <div class="onb-card">
    <h3>🔒 Sicherheits-Verifikation (optional)</h3>
    <p style="color:#94a3b8; font-size:13px; margin-bottom:10px;">
      Beim Cert-Install zeigt dein System einen <strong>SHA-256-Fingerprint</strong>.
      Vergleich mit dem hier — sie müssen identisch sein:
    </p>
    <div class="fingerprint">{{ fingerprint }}</div>
    <p style="color:#64748b; font-size:11px; margin-top:8px;">
      Wenn der Fingerprint nicht stimmt, brich ab — möglicher Man-in-the-Middle.
    </p>
  </div>
  {% endif %}

  <!-- NEXT STEPS -->
  <div class="onb-card" style="background:rgba(16,185,129,0.06); border-color:rgba(16,185,129,0.3);">
    <h3 style="color:#10b981;">Nach dem Cert-Install</h3>
    <p style="color:#cbd5e1; margin:0; font-size:14px;">
      Öffne im Browser <code style="background:rgba(0,0,0,0.4); padding:1px 6px; border-radius:3px;">{{ server_url }}</code> —
      kein Warnsymbol, grünes Schloss, Voice-Mikrofon-Button funktioniert sofort.
    </p>
    <a href="{{ server_url }}" class="onb-btn" style="margin-top:14px;">
      → Zur Hauptseite {{ server_url }}
    </a>
  </div>

</div>

<script>
function showTab(name) {
  document.querySelectorAll('.device-tab').forEach(t => t.classList.remove('active'));
  document.querySelectorAll('.device-panel').forEach(p => p.classList.remove('active'));
  event.target.classList.add('active');
  document.getElementById('tab-' + name).classList.add('active');
}
</script>
{% endblock %}