src/views/settings/settings-view.js

import { db } from '../../db/database.js';
import { Clipboard } from '@capacitor/clipboard';
import { authService } from '../../services/auth-service.js';
import { AuthView } from '../auth/auth-view.js';
import { promptQuickSettingsTile } from '../../services/quick-settings-service.js';

export class SettingsView {
  constructor(containerId) {
    this.container = document.getElementById(containerId);
  }

  init() {
    this.render();
    this.attachEvents();
  }

  render() {
    const currentModel = db.getSetting('model') || 'gemini-3.5-flash';
    const currentApiKey = db.getSetting('gemini_api_key') || '';
    const groqApiKey = db.getSetting('groq_api_key') || '';
    const openrouterApiKey = db.getSetting('openrouter_api_key') || '';
    const deepseekApiKey = db.getSetting('deepseek_api_key') || '';
    const huggingfaceApiKey = db.getSetting('huggingface_api_key') || '';
    const ollamaUrl = db.getSetting('ollama_url') || 'http://localhost:11434';
    const startBehavior = db.getSetting('start_behavior') || 'new';
    const bgStyle = db.getSetting('background_style') || 'standard';

    this.container.innerHTML = `
      <div style="padding: 24px; padding-bottom: 100px; display: flex; flex-direction: column; gap: 32px; max-width: 600px; margin: 0 auto;">
        
        <div>
          <h2 style="margin-bottom: 8px; font-size: 28px;">Einstellungen</h2>
          <p style="color: var(--text-secondary);">Passe die SchoolMind KI an deine Bedürfnisse an.</p>
        </div>

        <!-- Account & Sync -->
        <div class="liquid-glass-subtle" style="padding: 20px; border-radius: 20px; display: flex; flex-direction: column; gap: 12px;">
          <h3 style="margin-bottom: 4px; display: flex; align-items: center; gap: 8px;">
            <span style="font-size: 20px;">☁️</span> Cloud Account
          </h3>
          <p style="color: var(--text-secondary); font-size: 14px; line-height: 1.5; margin-bottom: 8px;">Sichere deine Chats und API Keys mit End-zu-End Verschlüsselung und synchronisiere sie zwischen Geräten.</p>
          <div id="account-status-container"></div>
        </div>

        <!-- Model Selection -->
        <div class="liquid-glass-subtle" style="padding: 20px; border-radius: 20px;">
          <h3 style="margin-bottom: 16px; display: flex; align-items: center; gap: 8px;">
            <span style="font-size: 20px;">🧠</span> KI-Modell
          </h3>
          
          <label style="display: block; margin-bottom: 8px; color: var(--text-secondary); font-size: 14px;">Aktives Modell</label>
          <select id="model-select" style="width: 100%; padding: 12px; border-radius: 12px; background: rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.1); color: white; font-family: var(--font-ui); font-size: 16px; margin-bottom: 16px; outline: none; appearance: none;">
            <optgroup label="Google Gemini">
              <option value="gemini-3.6-flash" ${currentModel === 'gemini-3.6-flash' ? 'selected' : ''}>Gemini 3.6 Flash</option>
              <option value="gemini-3.5-flash" ${currentModel === 'gemini-3.5-flash' ? 'selected' : ''}>Gemini 3.5 Flash</option>
              <option value="gemini-3.5-flash-lite" ${currentModel === 'gemini-3.5-flash-lite' ? 'selected' : ''}>Gemini 3.5 Flash Lite</option>
              <option value="gemini-3.1-flash-lite" ${currentModel === 'gemini-3.1-flash-lite' ? 'selected' : ''}>Gemini 3.1 Flash Lite</option>
              <option value="gemini-3-flash-preview" ${currentModel === 'gemini-3-flash-preview' ? 'selected' : ''}>Gemini 3 Flash Preview</option>
              <option value="gemini-2.5-flash" ${currentModel === 'gemini-2.5-flash' ? 'selected' : ''}>Gemini 2.5 Flash</option>
              <option value="gemini-2.5-flash-lite" ${currentModel === 'gemini-2.5-flash-lite' ? 'selected' : ''}>Gemini 2.5 Flash Lite</option>
            </optgroup>
            <optgroup label="Gemma & Groq">
              <option value="gemma-4-31b-it" ${currentModel === 'gemma-4-31b-it' ? 'selected' : ''}>Gemma 4 31B IT</option>
              <option value="gemma-4-26b-a4b-it" ${currentModel === 'gemma-4-26b-a4b-it' ? 'selected' : ''}>Gemma 4 26B IT</option>
              <option value="groq-llama-3.3-70b-versatile" ${currentModel === 'groq-llama-3.3-70b-versatile' ? 'selected' : ''}>Llama 3.3 70B (Groq)</option>
              <option value="groq-llama3-70b-8192" ${currentModel === 'groq-llama3-70b-8192' ? 'selected' : ''}>llama3-70b-8192</option>
            </optgroup>
            <optgroup label="OpenRouter (Mobile App)">
              <option value="openrouter-meta-llama/llama-3.1-70b-instruct" ${currentModel === 'openrouter-meta-llama/llama-3.1-70b-instruct' ? 'selected' : ''}>Meta-Llama-3.1-70B-Instruct</option>
              <option value="openrouter-mistralai/codestral-2501" ${currentModel === 'openrouter-mistralai/codestral-2501' ? 'selected' : ''}>codestral-latest</option>
              <option value="openrouter-qwen/qwen-2.5-coder-32b-instruct:free" ${currentModel === 'openrouter-qwen/qwen-2.5-coder-32b-instruct:free' ? 'selected' : ''}>qwen/qwen-2.5-coder-32b-instruct:free</option>
              <option value="openrouter-google/gemma-3-27b-it" ${currentModel === 'openrouter-google/gemma-3-27b-it' ? 'selected' : ''}>gemma-4-31b</option>
              <option value="openrouter-deepseek/deepseek-v4-flash-0731" ${currentModel === 'openrouter-deepseek/deepseek-v4-flash-0731' ? 'selected' : ''}>DeepSeek V4 Flash</option>
              <option value="openrouter-deepseek/deepseek-v4-pro-latest" ${currentModel === 'openrouter-deepseek/deepseek-v4-pro-latest' ? 'selected' : ''}>DeepSeek V4 Pro</option>
            </optgroup>
            <optgroup label="DeepSeek V4">
              <option value="deepseek-deepseek-reasoner" ${currentModel === 'deepseek-deepseek-reasoner' ? 'selected' : ''}>DeepSeek V4 Pro</option>
              <option value="deepseek-deepseek-chat" ${currentModel === 'deepseek-deepseek-chat' ? 'selected' : ''}>DeepSeek V4 Flash</option>
            </optgroup>
            <optgroup label="Lokal">
              <option value="local-phone-qwen" ${currentModel === 'local-phone-qwen' ? 'selected' : ''}>Lokal Handy (Qwen 1.5B)</option>
              <option value="local-pc-llama" ${currentModel === 'local-pc-llama' ? 'selected' : ''}>Lokal PC (Llama 3 8B)</option>
            </optgroup>
          </select>

          <details style="background: rgba(0,0,0,0.2); border-radius: 12px; border: 1px solid rgba(255,255,255,0.05); margin-bottom: 16px;">
            <summary style="padding: 16px; cursor: pointer; color: var(--text-primary); font-size: 16px; display: flex; align-items: center; justify-content: space-between; user-select: none; list-style: none;">
              <div style="display: flex; align-items: center; gap: 8px;">
                <span style="font-size: 18px;">🔑</span> API-Schlüssel & Verbindungen
              </div>
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="details-chevron"><path d="M6 9l6 6 6-6"/></svg>
            </summary>
            <div style="padding: 0 16px 16px 16px; border-top: 1px solid rgba(255,255,255,0.05); margin-top: 8px; padding-top: 16px;">
              <label style="display: block; margin-bottom: 8px; font-size: 14px;">
                <a href="https://aistudio.google.com/app/apikey" target="_blank" style="color: white; text-decoration: none; display: flex; align-items: center; gap: 4px;">Gemini API Key <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg></a>
              </label>
              <div style="position: relative; margin-bottom: 16px;">
                <input type="password" id="api-key-input" value="${currentApiKey}" placeholder="AIzaSy..." style="width: 100%; padding: 12px; padding-right: 48px; border-radius: 12px; background: rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.1); color: white; font-family: var(--font-code); font-size: 14px; outline: none;">
                <button type="button" class="paste-key-btn" data-target="api-key-input" style="position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: transparent; border: none; color: var(--text-secondary); cursor: pointer; padding: 4px; display: flex; align-items: center; justify-content: center;" title="Schlüssel einfügen">
                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect></svg>
                </button>
              </div>
              
              <label style="display: block; margin-bottom: 8px; font-size: 14px;">
                <a href="https://app.tavily.com/home" target="_blank" style="color: white; text-decoration: none; display: flex; align-items: center; gap: 4px;">Tavily API Key (Für Deep Research) <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg></a>
              </label>
              <div style="position: relative; margin-bottom: 16px;">
                <input type="password" id="tavily-key-input" value="${db.getSetting('tavily_api_key') || ''}" placeholder="tvly-..." style="width: 100%; padding: 12px; padding-right: 48px; border-radius: 12px; background: rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.1); color: white; font-family: var(--font-code); font-size: 14px; outline: none;">
                <button type="button" class="paste-key-btn" data-target="tavily-key-input" style="position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: transparent; border: none; color: var(--text-secondary); cursor: pointer; padding: 4px; display: flex; align-items: center; justify-content: center;" title="Schlüssel einfügen">
                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect></svg>
                </button>
              </div>
              
              <label style="display: block; margin-bottom: 8px; font-size: 14px;">
                <a href="https://console.groq.com/keys" target="_blank" style="color: white; text-decoration: none; display: flex; align-items: center; gap: 4px;">Groq API Key <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg></a>
              </label>
              <div style="position: relative; margin-bottom: 16px;">
                <input type="password" id="groq-key-input" value="${groqApiKey}" placeholder="gsk_..." style="width: 100%; padding: 12px; padding-right: 48px; border-radius: 12px; background: rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.1); color: white; font-family: var(--font-code); font-size: 14px; outline: none;">
                <button type="button" class="paste-key-btn" data-target="groq-key-input" style="position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: transparent; border: none; color: var(--text-secondary); cursor: pointer; padding: 4px; display: flex; align-items: center; justify-content: center;" title="Schlüssel einfügen">
                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect></svg>
                </button>
              </div>
              
              <label style="display: block; margin-bottom: 8px; font-size: 14px;">
                <a href="https://openrouter.ai/keys" target="_blank" style="color: white; text-decoration: none; display: flex; align-items: center; gap: 4px;">OpenRouter API Key <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg></a>
              </label>
              <div style="position: relative; margin-bottom: 16px;">
                <input type="password" id="openrouter-key-input" value="${openrouterApiKey}" placeholder="sk-or-v1-..." style="width: 100%; padding: 12px; padding-right: 48px; border-radius: 12px; background: rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.1); color: white; font-family: var(--font-code); font-size: 14px; outline: none;">
                <button type="button" class="paste-key-btn" data-target="openrouter-key-input" style="position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: transparent; border: none; color: var(--text-secondary); cursor: pointer; padding: 4px; display: flex; align-items: center; justify-content: center;" title="Schlüssel einfügen">
                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect></svg>
                </button>
              </div>

              <label style="display: block; margin-bottom: 8px; font-size: 14px;">
                <a href="https://platform.deepseek.com/api_keys" target="_blank" style="color: white; text-decoration: none; display: flex; align-items: center; gap: 4px;">DeepSeek API Key <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg></a>
              </label>
              <div style="position: relative; margin-bottom: 16px;">
                <input type="password" id="deepseek-key-input" value="${deepseekApiKey}" placeholder="sk-..." style="width: 100%; padding: 12px; padding-right: 48px; border-radius: 12px; background: rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.1); color: white; font-family: var(--font-code); font-size: 14px; outline: none;">
                <button type="button" class="paste-key-btn" data-target="deepseek-key-input" style="position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: transparent; border: none; color: var(--text-secondary); cursor: pointer; padding: 4px; display: flex; align-items: center; justify-content: center;" title="Schlüssel einfügen">
                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect></svg>
                </button>
              </div>

              <label style="display: block; margin-bottom: 8px; font-size: 14px;">
                <a href="https://huggingface.co/settings/tokens" target="_blank" style="color: white; text-decoration: none; display: flex; align-items: center; gap: 4px;">Hugging Face API Token <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg></a>
              </label>
              <div style="position: relative; margin-bottom: 16px;">
                <input type="password" id="huggingface-key-input" value="${huggingfaceApiKey}" placeholder="hf_..." style="width: 100%; padding: 12px; padding-right: 48px; border-radius: 12px; background: rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.1); color: white; font-family: var(--font-code); font-size: 14px; outline: none;">
                <button type="button" class="paste-key-btn" data-target="huggingface-key-input" style="position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: transparent; border: none; color: var(--text-secondary); cursor: pointer; padding: 4px; display: flex; align-items: center; justify-content: center;" title="Schlüssel einfügen">
                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect></svg>
                </button>
              </div>
              
              <label style="display: block; margin-bottom: 8px; font-size: 14px;">
                <a href="https://serpapi.com/manage-api-key" target="_blank" style="color: white; text-decoration: none; display: flex; align-items: center; gap: 4px;">SerpAPI Key (Optional) <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg></a>
              </label>
              <div style="position: relative; margin-bottom: 16px;">
                <input type="password" id="serpapi-key-input" value="${db.getSetting('serpapi_key') || ''}" placeholder="Dein SerpAPI Key..." style="width: 100%; padding: 12px; padding-right: 48px; border-radius: 12px; background: rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.1); color: white; font-family: var(--font-code); font-size: 14px; outline: none;">
                <button type="button" class="paste-key-btn" data-target="serpapi-key-input" style="position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: transparent; border: none; color: var(--text-secondary); cursor: pointer; padding: 4px; display: flex; align-items: center; justify-content: center;" title="Schlüssel einfügen">
                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect></svg>
                </button>
              </div>

              <label style="display: block; margin-bottom: 8px; font-size: 14px;">
                <a href="https://www.deepl.com/pro-api?cta=header-pro-api" target="_blank" style="color: white; text-decoration: none; display: flex; align-items: center; gap: 4px;">DeepL API Key (Schnelleingabe) <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg></a>
              </label>
              <div style="position: relative; margin-bottom: 16px;">
                <input type="password" id="deepl-key-input" value="${db.getSetting('deepl_api_key') || ''}" placeholder="Dein DeepL API Free Key..." style="width: 100%; padding: 12px; padding-right: 48px; border-radius: 12px; background: rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.1); color: white; font-family: var(--font-code); font-size: 14px; outline: none;">
                <button type="button" class="paste-key-btn" data-target="deepl-key-input" style="position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: transparent; border: none; color: var(--text-secondary); cursor: pointer; padding: 4px; display: flex; align-items: center; justify-content: center;" title="Schlüssel einfügen">
                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect></svg>
                </button>
              </div>
              
              <label style="display: block; margin-bottom: 8px; color: var(--text-secondary); font-size: 14px;">Ollama URL (für lokale KI)</label>
              <div style="position: relative;">
                <input type="text" id="ollama-url-input" value="${ollamaUrl}" placeholder="http://localhost:11434" style="width: 100%; padding: 12px; padding-right: 48px; border-radius: 12px; background: rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.1); color: white; font-family: var(--font-code); font-size: 14px; outline: none;">
              </div>
            </div>
          </details>
        </div>

        <!-- Start Behavior -->
        <div class="liquid-glass-subtle" style="padding: 20px; border-radius: 20px;">
          <h3 style="margin-bottom: 16px; display: flex; align-items: center; gap: 8px;">
            <span style="font-size: 20px;">🚀</span> Startverhalten
          </h3>
          <label style="display: block; margin-bottom: 8px; color: var(--text-secondary); font-size: 14px;">Beim Öffnen der App</label>
          <select id="start-behavior-select" style="width: 100%; padding: 12px; border-radius: 12px; background: rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.1); color: white; font-family: var(--font-ui); font-size: 16px; outline: none; appearance: none;">
            <option value="new" ${startBehavior === 'new' ? 'selected' : ''}>Immer einen neuen Chat starten</option>
            <option value="last" ${startBehavior === 'last' ? 'selected' : ''}>Zuletzt aktiven Chat öffnen</option>
          </select>
        </div>

        <!-- Background Style -->
        <div class="liquid-glass-subtle" style="padding: 20px; border-radius: 20px;">
          <h3 style="margin-bottom: 16px; display: flex; align-items: center; gap: 8px;">
            <span style="font-size: 20px;">🎨</span> Hintergrund-Stil
          </h3>
          <select id="background-style-select" style="width: 100%; padding: 12px; border-radius: 12px; background: rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.1); color: white; font-family: var(--font-ui); font-size: 16px; outline: none; appearance: none;">
            <option value="standard" ${bgStyle === 'standard' ? 'selected' : ''}>Standard</option>
            <option value="fluid-dark" ${bgStyle === 'fluid-dark' ? 'selected' : ''}>Fluid Dark (Animiert)</option>
          </select>
        </div>

        <!-- Style Profile -->
        <div class="liquid-glass-subtle" style="padding: 20px; border-radius: 20px;">
          <h3 style="margin-bottom: 16px; display: flex; align-items: center; gap: 8px;">
            <span style="font-size: 20px;">✍️</span> Schreibstil-Profil
          </h3>
          <p style="color: var(--text-secondary); font-size: 14px; margin-bottom: 12px; line-height: 1.5;">Dein persönlicher Stil (Note 2, 12. Klasse) ist aktiv und steuert jede Antwort der KI.</p>
          <textarea id="style-profile-input" style="width: 100%; min-height: 120px; background: rgba(0,0,0,0.4); padding: 16px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.1); font-family: var(--font-code); font-size: 12px; color: var(--text-secondary); outline: none; resize: vertical;">${db.getSetting('style_profile') || ''}</textarea>
        </div>

        <!-- OS Integration -->
        <div class="liquid-glass-subtle" style="padding: 20px; border-radius: 20px;">
          <h3 style="margin-bottom: 16px; display: flex; align-items: center; gap: 8px;">
            <span style="font-size: 20px;">⚙️</span> System-Integration
          </h3>
          <p style="color: var(--text-secondary); font-size: 14px; margin-bottom: 12px; line-height: 1.5;">Füge Schnelleingabe zu deinen Android Quick Settings hinzu (Android 13+).</p>
          <button id="add-quick-tile-btn" class="liquid-glass" style="padding: 12px 16px; border-radius: 12px; color: white; font-size: 14px; font-weight: 500; cursor: pointer; transition: opacity 0.2s; border: 1px solid rgba(255, 255, 255, 0.1); width: 100%;">
            Zu Schnelleinstellungen hinzufügen
          </button>
        </div>

        <button id="save-settings-btn" class="liquid-glass" style="padding: 16px; border-radius: 16px; color: var(--primary-accent); font-size: 16px; font-weight: 600; cursor: pointer; transition: opacity 0.2s; border: 1px solid rgba(0, 122, 255, 0.3);">

          Einstellungen speichern
        </button>

      </div>
    `;
  }

  attachEvents() {
    const saveBtn = document.getElementById('save-settings-btn');
    
    // Attach paste button listeners
    document.querySelectorAll('.paste-key-btn').forEach(btn => {
      btn.addEventListener('click', async (e) => {
        e.preventDefault();
        const targetId = btn.getAttribute('data-target');
        const input = document.getElementById(targetId);
        if (!input) return;

        // Force focus into the input field so the OS knows we are in typing mode
        input.focus();

        try {
          // 1. Try native Capacitor clipboard (works reliably if inside Android/iOS App wrapper)
          let text = '';
          try {
            const result = await Clipboard.read();
            text = result.value;
          } catch(err) {
            // 2. Fallback to Web API (works in secure contexts)
            if (navigator.clipboard && navigator.clipboard.readText) {
              text = await navigator.clipboard.readText();
            }
          }
          
          if (text) {
            input.value = text.trim();
            const originalHTML = btn.innerHTML;
            btn.innerHTML = `<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--success)" stroke-width="2"><polyline points="20 6 9 17 4 12"></polyline></svg>`;
            setTimeout(() => { btn.innerHTML = originalHTML; }, 2000);
          } else {
            // 3. Fallback: just trigger native paste event
            document.execCommand('paste');
          }
        } catch (error) {
           console.warn('Konnte nicht einfügen', error);
           document.execCommand('paste');
        }
      });
    });

    if (!saveBtn) return;

    saveBtn.addEventListener('click', () => {
      const model = document.getElementById('model-select').value;
      const apiKey = document.getElementById('api-key-input').value.trim();
      const tavilyKey = document.getElementById('tavily-key-input').value.trim();
      const groqKey = document.getElementById('groq-key-input').value.trim();
      const orKey = document.getElementById('openrouter-key-input').value.trim();
      const dsKey = document.getElementById('deepseek-key-input').value.trim();
      const hfKey = document.getElementById('huggingface-key-input').value.trim();
      const serpApiKey = document.getElementById('serpapi-key-input').value.trim();
      const deeplKey = document.getElementById('deepl-key-input').value.trim();
      const ollamaUrl = document.getElementById('ollama-url-input').value.trim();
      const startBehavior = document.getElementById('start-behavior-select').value;
      const bgStyle = document.getElementById('background-style-select').value;
      const styleProfile = document.getElementById('style-profile-input').value.trim();

      db.setSetting('model', model);
      db.setSetting('style_profile', styleProfile);
      db.setSetting('start_behavior', startBehavior);
      db.setSetting('background_style', bgStyle);
      document.body.dataset.bgStyle = bgStyle;
      if (apiKey) db.setSetting('gemini_api_key', apiKey);
      if (tavilyKey !== undefined) db.setSetting('tavily_api_key', tavilyKey);
      if (groqKey) db.setSetting('groq_api_key', groqKey);
      if (orKey) db.setSetting('openrouter_api_key', orKey);
      if (dsKey) db.setSetting('deepseek_api_key', dsKey);
      if (hfKey) db.setSetting('huggingface_api_key', hfKey);
      if (serpApiKey) db.setSetting('serpapi_key', serpApiKey);
      if (deeplKey) db.setSetting('deepl_api_key', deeplKey);
      if (ollamaUrl) db.setSetting('ollama_url', ollamaUrl);

      // Visual feedback
      const originalText = saveBtn.innerText;
      saveBtn.innerText = 'Gespeichert! ✓';
      saveBtn.style.color = 'var(--success)';
      saveBtn.style.borderColor = 'rgba(48, 209, 88, 0.3)';
      
      setTimeout(() => {
        saveBtn.innerText = originalText;
        saveBtn.style.color = 'var(--primary-accent)';
        saveBtn.style.borderColor = 'rgba(0, 122, 255, 0.3)';
      }, 2000);
    });

    this.updateAccountStatus();
    authService.onAuthStateChange(() => {
      this.updateAccountStatus();
    });

    const addTileBtn = document.getElementById('add-quick-tile-btn');
    if (addTileBtn) {
      addTileBtn.addEventListener('click', async () => {
        const originalText = addTileBtn.innerText;
        addTileBtn.innerText = 'Wird angefragt...';
        
        const success = await promptQuickSettingsTile();
        
        if (success) {
          addTileBtn.innerText = 'Hinzugefügt ✓';
          addTileBtn.style.color = 'var(--success)';
        } else {
          addTileBtn.innerText = 'Nicht unterstützt oder Fehler';
          addTileBtn.style.color = '#ff3b30';
        }
        
        setTimeout(() => {
          addTileBtn.innerText = originalText;
          addTileBtn.style.color = 'white';
        }, 3000);
      });
    }
  }

  updateAccountStatus() {
    const container = this.container.querySelector('#account-status-container');
    if (!container) return;

    if (authService.user) {
      const email = authService.user.email;
      const isUnlocked = authService.isCryptoUnlocked();
      
      container.innerHTML = `
        <div style="background: rgba(0,0,0,0.3); padding: 12px 16px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.05); display: flex; justify-content: space-between; align-items: center;">
          <div>
            <div style="font-size: 14px; color: white; font-weight: 500;">Eingeloggt als</div>
            <div style="font-size: 13px; color: var(--text-secondary);">${email}</div>
            <div style="font-size: 12px; margin-top: 4px; color: ${isUnlocked ? '#34c759' : '#ff9f0a'};">
              ${isUnlocked ? '🔒 E2E Verschlüsselung aktiv' : '🔓 Keys gesperrt (Passwort benötigt)'}
            </div>
          </div>
          <button id="auth-action-btn" class="liquid-glass" style="padding: 8px 16px; border-radius: 10px; font-size: 14px; cursor: pointer;">
            ${isUnlocked ? 'Abmelden' : 'Entsperren'}
          </button>
        </div>
      `;

      container.querySelector('#auth-action-btn').addEventListener('click', () => {
        if (isUnlocked) {
          authService.signOut();
        } else {
          const authView = new AuthView();
          authView.show();
        }
      });

    } else {
      container.innerHTML = `
        <button id="auth-action-btn" class="liquid-glass" style="width: 100%; padding: 14px; border-radius: 12px; font-size: 15px; font-weight: 500; cursor: pointer; color: white;">
          Anmelden oder Registrieren
        </button>
      `;
      container.querySelector('#auth-action-btn').addEventListener('click', () => {
        const authView = new AuthView();
        authView.show();
      });
    }
  }
}