/**
 * Settings Page — User-level settings with tabs.
 * Route: /settings
 */

import React, { useState, useCallback, useEffect } from 'react';
import { Link } from 'react-router-dom';
import { useLanguage } from '../providers/language/LanguageContext';
import { useCurrentUser, useUser } from '../hooks/useUsers';
import { setUserDataCache, getUserDataCache } from '../utils/userCache';
import { FormGeneratorForm } from '../components/FormGenerator/FormGeneratorForm/FormGeneratorForm';
import type { AttributeDefinition } from '../components/FormGenerator/FormGeneratorForm/FormGeneratorForm';
import { useApiRequest } from '../hooks/useApi';
import styles from './Settings.module.css';

// =============================================================================
// TYPES
// =============================================================================

type SettingsTab = 'profile' | 'appearance' | 'voice' | 'privacy';

function _getTabs(t: (key: string) => string): { key: SettingsTab; label: string }[] {
  return [
    { key: 'profile', label: t('Profil') },
    { key: 'appearance', label: t('Darstellung') },
    { key: 'voice', label: t('Stimme & Sprache') },
    { key: 'privacy', label: t('Datenschutz') },
  ];
}

// =============================================================================
// PROFILE EDIT MODAL
// =============================================================================

interface ProfileEditModalProps {
  isOpen: boolean;
  onClose: () => void;
  userData: any;
  onSave: (data: any) => Promise<void>;
}

const ProfileEditModal: React.FC<ProfileEditModalProps> = ({ isOpen, onClose, userData, onSave }) => {
  const [isSaving, setIsSaving] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const { t, availableLanguages } = useLanguage();

  const languageOptions = availableLanguages.map((l) => ({ value: l.code, label: l.label || l.code }));

  const profileAttributes: AttributeDefinition[] = [
    { name: 'fullName', type: 'string', label: t('Vollständiger Name'), description: t('Ihr vollständiger Name'), required: false, placeholder: t('Name-Platzhalter') },
    { name: 'email', type: 'email', label: t('E-Mail-Adresse'), description: t('E-Mail-Beschreibung'), required: true, placeholder: t('E-Mail-Platzhalter') },
    { name: 'language', type: 'select', label: t('Sprache'), description: t('Anzeigesprache der Anwendung'), required: true, options: languageOptions },
  ];

  const handleSubmit = async (formData: any) => {
    setIsSaving(true);
    setError(null);
    try {
      await onSave(formData);
      onClose();
    } catch (err: any) {
      setError(err.message || t('Fehler beim Speichern des Profils'));
    } finally {
      setIsSaving(false);
    }
  };

  if (!isOpen) return null;

  return (
    <div className={styles.modalOverlay} onClick={onClose}>
      <div className={styles.modalContent} onClick={(e) => e.stopPropagation()}>
        <div className={styles.modalHeader}>
          <h2>{t('Profil bearbeiten')}</h2>
          <button className={styles.closeButton} onClick={onClose}>&times;</button>
        </div>
        <div className={styles.modalBody}>
          {error && <div className={styles.errorMessage}>{error}</div>}
          <FormGeneratorForm attributes={profileAttributes} data={userData} mode="edit" onSubmit={handleSubmit} onCancel={onClose} submitButtonText={isSaving ? t('Speichern') : t('Speichern')} cancelButtonText={t('Abbrechen')} />
        </div>
      </div>
    </div>
  );
};

// =============================================================================
// VOICE SETTINGS TAB
// =============================================================================

interface VoiceMapEntry { language: string; voiceName: string; }

const VoiceSettingsTab: React.FC = () => {
  const { t } = useLanguage();
  const { request } = useApiRequest();

  const [loading, setLoading] = useState(true);
  const [saving, setSaving] = useState(false);
  const [testing, setTesting] = useState<string | null>(null);
  const [error, setError] = useState<string | null>(null);
  const [success, setSuccess] = useState<string | null>(null);

  const [sttLanguage, setSttLanguage] = useState('de-DE');
  const [languages, setLanguages] = useState<any[]>([]);
  const [voiceMap, setVoiceMap] = useState<VoiceMapEntry[]>([]);

  const [addLanguage, setAddLanguage] = useState('de-DE');
  const [addVoices, setAddVoices] = useState<any[]>([]);
  const [addVoiceName, setAddVoiceName] = useState('');
  const [loadingVoices, setLoadingVoices] = useState(false);

  const _loadSettings = useCallback(async () => {
    setLoading(true);
    try {
      const [prefsData, languagesData] = await Promise.all([
        request({ url: '/api/voice/preferences', method: 'get' }),
        request({ url: '/api/voice/languages', method: 'get' }),
      ]);

      const langList = (languagesData as any)?.languages || [];
      setLanguages(langList);

      const prefs = prefsData as any;
      setSttLanguage(prefs?.sttLanguage || 'de-DE');

      const map: Record<string, any> = prefs?.ttsVoiceMap || {};
      const entries: VoiceMapEntry[] = Object.entries(map).map(([lang, cfg]) => ({
        language: lang,
        voiceName: typeof cfg === 'string' ? cfg : (cfg as any)?.voiceName || '',
      }));
      setVoiceMap(entries);
    } catch (err: any) {
      setError(err.message || t('Fehler beim Laden der Voice-Einstellungen'));
    } finally {
      setLoading(false);
    }
  }, [request]);

  useEffect(() => { _loadSettings(); }, [_loadSettings]);

  const _loadVoicesForLanguage = useCallback(async (lang: string) => {
    setLoadingVoices(true);
    try {
      const result = await request({ url: '/api/voice/voices', method: 'get', params: { language: lang } });
      setAddVoices((result as any)?.voices || []);
      setAddVoiceName('');
    } catch { setAddVoices([]); }
    finally { setLoadingVoices(false); }
  }, [request]);

  useEffect(() => { _loadVoicesForLanguage(addLanguage); }, [addLanguage, _loadVoicesForLanguage]);

  const _handleAddEntry = useCallback(() => {
    if (!addLanguage) return;
    const exists = voiceMap.some(e => e.language === addLanguage);
    if (exists) {
      setVoiceMap(prev => prev.map(e => e.language === addLanguage ? { ...e, voiceName: addVoiceName } : e));
    } else {
      setVoiceMap(prev => [...prev, { language: addLanguage, voiceName: addVoiceName }]);
    }
    setAddVoiceName('');
  }, [addLanguage, addVoiceName, voiceMap]);

  const _handleRemoveEntry = useCallback((lang: string) => {
    setVoiceMap(prev => prev.filter(e => e.language !== lang));
  }, []);

  const _handleSave = useCallback(async () => {
    setSaving(true);
    setError(null);
    setSuccess(null);
    try {
      const mapObj: Record<string, any> = {};
      voiceMap.forEach(e => { mapObj[e.language] = { voiceName: e.voiceName || '' }; });
      await request({
        url: '/api/voice/preferences',
        method: 'put',
        data: { sttLanguage, ttsLanguage: sttLanguage, ttsVoiceMap: mapObj },
      });
      setSuccess(t('Einstellungen gespeichert'));
      setTimeout(() => setSuccess(null), 3000);
      await _loadSettings();
    } catch (err: any) {
      setError(err.message || t('Fehler beim Speichern'));
    } finally {
      setSaving(false);
    }
  }, [request, voiceMap, sttLanguage, _loadSettings]);

  const _handleTestVoice = useCallback(async (lang: string, voice: string) => {
    setTesting(lang);
    try {
      const result: any = await request({
        url: '/api/voice/test',
        method: 'post',
        data: { language: lang, voiceId: voice || undefined },
      });
      if (result?.success && result?.audio) {
        const audio = new Audio(`data:audio/mp3;base64,${result.audio}`);
        audio.play();
      }
    } catch { setError(t('Stimmtest fehlgeschlagen')); }
    finally { setTesting(null); }
  }, [request]);

  const _getLanguageName = useCallback((code: string) => {
    const found = languages.find((l: any) => (l.code || l) === code);
    return found?.name || found?.code || code;
  }, [languages]);

  const _defaultLangs = [
    { code: 'de-DE', name: 'Deutsch' }, { code: 'en-US', name: 'English (US)' },
    { code: 'fr-FR', name: 'Francais' }, { code: 'it-IT', name: 'Italiano' },
    { code: 'es-ES', name: 'Espanol' },
  ];
  const _displayLanguages = languages.length > 0 ? languages : _defaultLangs;

  if (loading) return <div style={{ padding: '1rem', color: '#888' }}>{t('Einstellungen werden geladen')}</div>;

  return (
    <>
      {error && <div className={styles.errorMessage}>{error}</div>}
      {success && <div style={{ background: '#f0fdf4', border: '1px solid #bbf7d0', color: '#16a34a', padding: '0.75rem 1rem', borderRadius: 6, marginBottom: '1rem', fontSize: '0.875rem' }}>{success}</div>}

      <section className={styles.section}>
        <h2 className={styles.sectionTitle}>{t('STT-Sprache Spracheingabe')}</h2>
        <div className={styles.settingRow}>
          <div className={styles.settingInfo}>
            <label className={styles.settingLabel}>{t('Sprache für Spracherkennung')}</label>
            <p className={styles.settingDescription}>{t('Wird für Sprach- und Texterkennung verwendet')}</p>
          </div>
          <div className={styles.settingControl}>
            <select className={styles.select} value={sttLanguage} onChange={e => setSttLanguage(e.target.value)}>
              {_displayLanguages.map((lang: any) => (
                <option key={lang.code || lang} value={lang.code || lang}>{lang.name || lang.code || lang}</option>
              ))}
            </select>
          </div>
        </div>
      </section>

      <section className={styles.section}>
        <h2 className={styles.sectionTitle}>{t('TTS-Stimmen Sprachausgabe')}</h2>
        <p className={styles.settingDescription} style={{ marginBottom: '1rem' }}>
          {t('Die Sprache wird automatisch erkannt. Hier kann pro Sprache eine bevorzugte Stimme festgelegt werden.')}
        </p>

        {voiceMap.length === 0 ? (
          <div style={{ padding: '0.75rem', background: 'var(--surface-color, #f9fafb)', borderRadius: 8, fontSize: '0.85rem', color: '#888' }}>
            {t('Keine Stimmen konfiguriert. Die Standardstimme wird für alle Sprachen verwendet.')}
          </div>
        ) : (
          <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: '0.875rem' }}>
            <thead><tr style={{ borderBottom: '1px solid var(--border-color, #e0e0e0)' }}><th style={{ textAlign: 'left', padding: '0.5rem' }}>{t('Sprache')}</th><th style={{ textAlign: 'left', padding: '0.5rem' }}>{t('Stimme')}</th><th /><th /></tr></thead>
            <tbody>
              {voiceMap.map(entry => (
                <tr key={entry.language} style={{ borderBottom: '1px solid var(--border-color, #eee)' }}>
                  <td style={{ padding: '0.5rem' }}>{_getLanguageName(entry.language)}</td>
                  <td style={{ padding: '0.5rem' }}>{entry.voiceName || t('Standard')}</td>
                  <td style={{ padding: '0.5rem' }}>
                    <button className={styles.button} style={{ padding: '0.25rem 0.5rem', fontSize: '0.75rem' }} onClick={() => _handleTestVoice(entry.language, entry.voiceName)} disabled={testing === entry.language}>
                      {testing === entry.language ? '...' : t('Test')}
                    </button>
                  </td>
                  <td style={{ padding: '0.5rem' }}>
                    <button className={styles.button} style={{ padding: '0.25rem 0.5rem', fontSize: '0.75rem', color: '#dc2626' }} onClick={() => _handleRemoveEntry(entry.language)}>{t('Entfernen')}</button>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        )}

        <div style={{ marginTop: '1rem', display: 'flex', gap: '0.5rem', alignItems: 'flex-end', flexWrap: 'wrap' }}>
          <div>
            <label className={styles.settingLabel} style={{ fontSize: '0.8rem' }}>{t('Sprache')}</label>
            <select className={styles.select} value={addLanguage} onChange={e => setAddLanguage(e.target.value)}>
              {_displayLanguages.map((lang: any) => (
                <option key={lang.code || lang} value={lang.code || lang}>{lang.name || lang.code || lang}</option>
              ))}
            </select>
          </div>
          <div>
            <label className={styles.settingLabel} style={{ fontSize: '0.8rem' }}>{t('Stimme')}</label>
            <select className={styles.select} value={addVoiceName} onChange={e => setAddVoiceName(e.target.value)} disabled={loadingVoices}>
              <option value="">{t('Standard')}</option>
              {addVoices.map((v: any) => (
                <option key={v.name || v} value={v.name || v}>{v.displayName || v.name || v}</option>
              ))}
            </select>
          </div>
          <button className={styles.button} onClick={_handleAddEntry} style={{ padding: '0.5rem 1rem' }}>{t('Zuweisen')}</button>
          <button className={styles.button} onClick={() => _handleTestVoice(addLanguage, addVoiceName)} disabled={testing !== null} style={{ padding: '0.5rem 1rem' }}>
            {testing === addLanguage ? '...' : t('Testen')}
          </button>
        </div>
      </section>

      <button className={styles.button} onClick={_handleSave} disabled={saving} style={{ background: 'var(--primary-color, #2563eb)', color: '#fff', border: 'none', padding: '0.625rem 1.5rem', fontWeight: 600, borderRadius: 6 }}>
        {saving ? t('Speichern') : t('Einstellungen speichern')}
      </button>
    </>
  );
};

// =============================================================================
// NEUTRALIZATION MAPPINGS TAB
// =============================================================================

interface NeutralizationMapping {
  id: string;
  originalText: string;
  patternType: string;
  fileId?: string;
  featureInstanceId?: string;
}

const NeutralizationMappingsTab: React.FC = () => {
  const { t } = useLanguage();
  const { request } = useApiRequest();
  const [mappings, setMappings] = useState<NeutralizationMapping[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  const _load = useCallback(async () => {
    setLoading(true);
    setError(null);
    try {
      const result: any = await request({ url: '/api/local/neutralization-mappings', method: 'get' });
      const items = (result?.mappings || []).map((m: any) => ({
        id: m.id,
        originalText: m.originalText || '',
        patternType: m.patternType || '',
        fileId: m.fileId,
        featureInstanceId: m.featureInstanceId,
      }));
      setMappings(items);
    } catch (err: any) {
      setError(err.message || t('Fehler beim Laden'));
    } finally {
      setLoading(false);
    }
  }, [request]);

  useEffect(() => { _load(); }, [_load]);

  const _handleDelete = useCallback(async (id: string) => {
    try {
      await request({ url: `/api/local/neutralization-mappings/${id}`, method: 'delete' });
      setMappings(prev => prev.filter(m => m.id !== id));
    } catch (err: any) {
      setError(err.message || t('Fehler beim Löschen'));
    }
  }, [request]);

  const _maskText = (text: string) => {
    if (text.length <= 4) return '****';
    return text.slice(0, 2) + '*'.repeat(Math.min(text.length - 4, 20)) + text.slice(-2);
  };

  if (loading) return <div style={{ padding: '1rem', color: '#888' }}>{t('Mappings werden geladen')}</div>;

  return (
    <>
      {error && <div className={styles.errorMessage}>{error}</div>}

      <section className={styles.section}>
        <h2 className={styles.sectionTitle}>{t('Platzhaltermappings lokal')}</h2>
        <div
          style={{
            marginBottom: '1rem',
            padding: '0.75rem 1rem',
            background: 'var(--surface-color, #eff6ff)',
            border: '1px solid var(--border-color, #bfdbfe)',
            borderRadius: 8,
            fontSize: '0.85rem',
            lineHeight: 1.5,
            color: 'var(--text-primary, #1e3a5f)',
          }}
        >
          <strong>{t('AI-Workspace:')}</strong> {t('Neutralisierter Chat-Text, Dokumente und Platzhalter-Mappings finden Sie unter')}{' '}
          <strong>{t('Mandant AI-Workspace-Instanz Einstellungen Tab Neutralisierung')}</strong> {t('(nicht auf dieser Seite). Dieser Tab zeigt nur die lokale Liste.')}
        </div>
        <p className={styles.settingDescription} style={{ marginBottom: '1rem' }}>
          {t('Bei der Datenneutralisierung werden personenbezogene Daten durch Platzhalter ersetzt, bevor Text an KI-Modelle geht; die Antwort wird anschliessend wieder mit Ihren Originalbegriffen angereichert. Die Tabelle unten betrifft nur lokale Entwickler-/Test-Mappings.')}
        </p>

        {mappings.length === 0 ? (
          <div style={{ padding: '0.75rem', background: 'var(--surface-color, #f9fafb)', borderRadius: 8, fontSize: '0.85rem', color: '#888' }}>
            {t('Keine Neutralisierungs-Mappings vorhanden.')}
          </div>
        ) : (
          <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: '0.875rem' }}>
            <thead>
              <tr style={{ borderBottom: '1px solid var(--border-color, #e0e0e0)' }}>
                <th style={{ textAlign: 'left', padding: '0.5rem' }}>{t('Platzhalter-ID')}</th>
                <th style={{ textAlign: 'left', padding: '0.5rem' }}>{t('Originaltext')}</th>
                <th style={{ textAlign: 'left', padding: '0.5rem' }}>{t('Typ')}</th>
                <th />
              </tr>
            </thead>
            <tbody>
              {mappings.map(m => (
                <tr key={m.id} style={{ borderBottom: '1px solid var(--border-color, #eee)' }}>
                  <td style={{ padding: '0.5rem', fontFamily: 'monospace', fontSize: '0.75rem' }}>{m.id.slice(0, 12)}...</td>
                  <td style={{ padding: '0.5rem' }}>{_maskText(m.originalText)}</td>
                  <td style={{ padding: '0.5rem' }}>
                    <span style={{ fontSize: '0.75rem', padding: '2px 8px', borderRadius: 10, background: '#f3f4f6' }}>
                      {m.patternType}
                    </span>
                  </td>
                  <td style={{ padding: '0.5rem' }}>
                    <button
                      className={styles.button}
                      style={{ padding: '0.25rem 0.5rem', fontSize: '0.75rem', color: '#dc2626' }}
                      onClick={() => _handleDelete(m.id)}
                    >
                      {t('Löschen')}
                    </button>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        )}
      </section>
    </>
  );
};

// =============================================================================
// SETTINGS PAGE
// =============================================================================

export const SettingsPage: React.FC = () => {
  const { t, currentLanguage, setLanguage, availableLanguages, refreshAvailableLanguages } = useLanguage();
  const { user: currentUser, refetch: refetchUser } = useCurrentUser();
  const { updateUser } = useUser();

  const [activeTab, setActiveTab] = useState<SettingsTab>('profile');
  const [theme, setTheme] = useState<'light' | 'dark'>(() => (localStorage.getItem('theme') as 'light' | 'dark') || 'light');
  const [isProfileModalOpen, setIsProfileModalOpen] = useState(false);
  const [isSavingLanguage, setIsSavingLanguage] = useState(false);
  const [languageError, setLanguageError] = useState<string | null>(null);

  useEffect(() => {
    if (availableLanguages.length === 0) {
      refreshAvailableLanguages();
    }
  }, [availableLanguages.length, refreshAvailableLanguages]);

  const handleThemeChange = (newTheme: 'light' | 'dark') => {
    setTheme(newTheme);
    localStorage.setItem('theme', newTheme);
    if (newTheme === 'dark') { document.documentElement.classList.add('dark-theme'); document.documentElement.classList.remove('light-theme'); }
    else { document.documentElement.classList.add('light-theme'); document.documentElement.classList.remove('dark-theme'); }
    document.documentElement.setAttribute('data-theme', newTheme);
  };

  const handleLanguageChange = useCallback(async (newLanguage: string) => {
    if (!currentUser?.id || !currentUser?.username) return;
    setIsSavingLanguage(true);
    setLanguageError(null);
    try {
      await updateUser(currentUser.id, { id: currentUser.id, username: currentUser.username, email: currentUser.email, fullName: currentUser.fullName, language: newLanguage, enabled: currentUser.enabled ?? true, authenticationAuthority: currentUser.authenticationAuthority || 'local' });
      const cachedUser = getUserDataCache();
      if (cachedUser) setUserDataCache({ ...cachedUser, language: newLanguage });
      setLanguage(newLanguage);
      window.dispatchEvent(new CustomEvent('userInfoUpdated'));
    } catch { setLanguageError(t('Sprache konnte nicht gespeichert werden')); }
    finally { setIsSavingLanguage(false); }
  }, [currentUser, updateUser, setLanguage, t]);

  const handleProfileSave = useCallback(async (formData: any) => {
    if (!currentUser?.id || !currentUser?.username) throw new Error(t('Nicht angemeldet'));
    const newLanguage = formData.language || currentUser.language || 'de';
    const updatedUser = await updateUser(currentUser.id, { id: currentUser.id, username: currentUser.username, email: formData.email || currentUser.email, fullName: formData.fullName || currentUser.fullName, language: newLanguage, enabled: currentUser.enabled ?? true, authenticationAuthority: currentUser.authenticationAuthority || 'local' });
    const cachedUser = getUserDataCache();
    if (cachedUser) setUserDataCache({ ...cachedUser, fullName: updatedUser.fullName || cachedUser.fullName, email: updatedUser.email || cachedUser.email, language: newLanguage });
    if (newLanguage !== currentLanguage) setLanguage(newLanguage);
    if (refetchUser) await refetchUser();
    window.dispatchEvent(new CustomEvent('userInfoUpdated'));
  }, [currentUser, updateUser, refetchUser, currentLanguage, setLanguage]);

  return (
    <div className={styles.settings}>
      <header className={styles.header}>
        <h1>{t('Einstellungen')}</h1>
        <p className={styles.subtitle}>{t('Persönliche Einstellungen und Präferenzen')}</p>
      </header>

      <nav style={{ display: 'flex', gap: 0, borderBottom: '1px solid var(--border-color, #e0e0e0)', marginBottom: '1.5rem' }}>
        {_getTabs(t).map(tab => (
          <button key={tab.key} onClick={() => setActiveTab(tab.key)} style={{
            padding: '10px 20px', border: 'none', borderBottom: activeTab === tab.key ? '2px solid var(--primary-color, #2563eb)' : '2px solid transparent',
            background: 'none', cursor: 'pointer', fontSize: 14, fontWeight: activeTab === tab.key ? 600 : 400,
            color: activeTab === tab.key ? 'var(--primary-color, #2563eb)' : 'var(--text-secondary, #888)',
          }}>
            {tab.label}
          </button>
        ))}
      </nav>

      <main className={styles.content}>
        {activeTab === 'profile' && (
          <>
            <section className={styles.section}>
              <h2 className={styles.sectionTitle}>{t('Konto')}</h2>
              <div className={styles.settingRow}>
                <div className={styles.settingInfo}>
                  <label className={styles.settingLabel}>{t('Profil bearbeiten')}</label>
                  <p className={styles.settingDescription}>{t('Ändern Sie Ihren Namen und')}</p>
                </div>
                <div className={styles.settingControl}>
                  <button className={styles.button} onClick={async () => { await refetchUser(); setIsProfileModalOpen(true); }}>{t('Profil öffnen')}</button>
                </div>
              </div>
              {currentUser && (
                <div className={styles.userInfoCard}>
                  <div className={styles.userInfoRow}><span className={styles.userInfoLabel}>{t('Benutzername')}</span><span className={styles.userInfoValue}>{currentUser.username}</span></div>
                  <div className={styles.userInfoRow}><span className={styles.userInfoLabel}>{t('Name')}</span><span className={styles.userInfoValue}>{currentUser.fullName || '-'}</span></div>
                  <div className={styles.userInfoRow}><span className={styles.userInfoLabel}>{t('E-Mail')}</span><span className={styles.userInfoValue}>{currentUser.email || '-'}</span></div>
                </div>
              )}
            </section>
            <section className={styles.section}>
              <h2 className={styles.sectionTitle}>{t('Applikation')}</h2>
              <div className={styles.infoCard}>
                <div className={styles.infoRow}><span className={styles.infoLabel}>{t('Version')}</span><span className={styles.infoValue}>2.0.0</span></div>
                <div className={styles.infoRow}><span className={styles.infoLabel}>{t('Build')}</span><span className={styles.infoValue}>2026.03.23</span></div>
              </div>
            </section>
          </>
        )}

        {activeTab === 'appearance' && (
          <section className={styles.section}>
            <h2 className={styles.sectionTitle}>{t('Darstellung')}</h2>
            <div className={styles.settingRow}>
              <div className={styles.settingInfo}><label className={styles.settingLabel}>{t('Theme')}</label><p className={styles.settingDescription}>{t('Wählen zwischen Hell- und Dunkelmodus')}</p></div>
              <div className={styles.settingControl}>
                <div className={styles.themeToggle}>
                  <button className={`${styles.themeButton} ${theme === 'light' ? styles.active : ''}`} onClick={() => handleThemeChange('light')}>{t('Thema Hell')}</button>
                  <button className={`${styles.themeButton} ${theme === 'dark' ? styles.active : ''}`} onClick={() => handleThemeChange('dark')}>{t('Thema Dunkel')}</button>
                </div>
              </div>
            </div>
            <div className={styles.settingRow}>
              <div className={styles.settingInfo}><label className={styles.settingLabel}>{t('Anzeigesprache')}</label><p className={styles.settingDescription}>{t('Sprachbeschreibung')}{languageError && <span className={styles.errorText}> {languageError}</span>}</p></div>
              <div className={styles.settingControl}>
                <select className={styles.select} value={currentLanguage} onChange={(e) => handleLanguageChange(e.target.value)} disabled={isSavingLanguage}>
                  {availableLanguages.map((l) => (
                    <option key={l.code} value={l.code}>
                      {l.label || l.code}
                    </option>
                  ))}
                </select>
                {isSavingLanguage && <span className={styles.savingIndicator}>{t('Speichern')}</span>}
              </div>
            </div>
          </section>
        )}

        {activeTab === 'voice' && <VoiceSettingsTab />}

        {activeTab === 'privacy' && (
          <>
            <section className={styles.section}>
              <h2 className={styles.sectionTitle}>{t('Datenschutz')}</h2>
              <p className={styles.settingDescription} style={{ marginBottom: '1rem' }}>
                {t('Datenschutzbeschreibung')}
              </p>
              <div className={styles.settingRow}>
                <div className={styles.settingInfo}><label className={styles.settingLabel}>{t('GDPR Datenschutz')}</label><p className={styles.settingDescription}>{t('Datenexport, Portabilität und Kontolöschung')}</p></div>
                <div className={styles.settingControl}><Link className={`${styles.button} ${styles.linkButton}`} to="/gdpr">{t('GDPR öffnen')}</Link></div>
              </div>
            </section>
            <NeutralizationMappingsTab />
          </>
        )}
      </main>

      <ProfileEditModal isOpen={isProfileModalOpen} onClose={() => setIsProfileModalOpen(false)} userData={currentUser} onSave={handleProfileSave} />
    </div>
  );
};

export default SettingsPage;
