/**
 * 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';

const _TABS: { key: SettingsTab; label: string }[] = [
  { key: 'profile', label: 'Profil' },
  { key: 'appearance', label: 'Darstellung' },
  { key: 'voice', label: 'Stimme & Sprache' },
  { key: 'privacy', label: '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 profileAttributes: AttributeDefinition[] = [
    { name: 'fullName', type: 'string', label: 'Vollstaendiger Name', description: 'Ihr vollstaendiger Name', required: false, placeholder: 'Max Mustermann' },
    { name: 'email', type: 'email', label: 'E-Mail-Adresse', description: 'Ihre E-Mail-Adresse fuer Benachrichtigungen', required: true, placeholder: 'name@example.com' },
    { name: 'language', type: 'select', label: 'Sprache', description: 'Anzeigesprache der Anwendung', required: true, options: [{ value: 'de', label: 'Deutsch' }, { value: 'en', label: 'English' }, { value: 'fr', label: 'Français' }] },
  ];

  const handleSubmit = async (formData: any) => {
    setIsSaving(true);
    setError(null);
    try {
      await onSave(formData);
      onClose();
    } catch (err: any) {
      setError(err.message || '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>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 ? 'Speichern...' : 'Speichern'} cancelButtonText="Abbrechen" />
        </div>
      </div>
    </div>
  );
};

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

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

const VoiceSettingsTab: React.FC = () => {
  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/local/voice-preferences', method: 'get' }),
        request({ url: '/api/local/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 || '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/local/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/local/voice-preferences',
        method: 'put',
        data: { sttLanguage, ttsLanguage: sttLanguage, ttsVoiceMap: mapObj },
      });
      setSuccess('Einstellungen gespeichert');
      setTimeout(() => setSuccess(null), 3000);
      await _loadSettings();
    } catch (err: any) {
      setError(err.message || '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/local/voice/test',
        method: 'post',
        data: { language: lang, voiceId: voice || undefined, text: `Hallo, das ist ein Stimmtest in ${lang}.` },
      });
      if (result?.success && result?.audio) {
        const audio = new Audio(`data:audio/mp3;base64,${result.audio}`);
        audio.play();
      }
    } catch { setError('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' }}>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}>STT-Sprache (Spracheingabe)</h2>
        <div className={styles.settingRow}>
          <div className={styles.settingInfo}>
            <label className={styles.settingLabel}>Sprache fuer Spracherkennung</label>
            <p className={styles.settingDescription}>Wird fuer die Sprache-zu-Text-Erkennung 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}>TTS-Stimmen (Sprachausgabe)</h2>
        <p className={styles.settingDescription} style={{ marginBottom: '1rem' }}>
          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' }}>
            Keine Stimmen konfiguriert. Die Standardstimme wird fuer 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' }}>Sprache</th><th style={{ textAlign: 'left', padding: '0.5rem' }}>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 || '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 ? '...' : '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)}>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' }}>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' }}>Stimme</label>
            <select className={styles.select} value={addVoiceName} onChange={e => setAddVoiceName(e.target.value)} disabled={loadingVoices}>
              <option value="">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' }}>Zuweisen</button>
          <button className={styles.button} onClick={() => _handleTestVoice(addLanguage, addVoiceName)} disabled={testing !== null} style={{ padding: '0.5rem 1rem' }}>
            {testing === addLanguage ? '...' : '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 ? 'Speichern...' : 'Einstellungen speichern'}
      </button>
    </>
  );
};

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

export const SettingsPage: React.FC = () => {
  const { currentLanguage, setLanguage } = 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);

  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: 'de' | 'en' | 'fr') => {
    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('Sprache konnte nicht gespeichert werden'); }
    finally { setIsSavingLanguage(false); }
  }, [currentUser, updateUser, setLanguage]);

  const handleProfileSave = useCallback(async (formData: any) => {
    if (!currentUser?.id || !currentUser?.username) throw new Error('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 as 'de' | 'en' | 'fr');
    if (refetchUser) await refetchUser();
    window.dispatchEvent(new CustomEvent('userInfoUpdated'));
  }, [currentUser, updateUser, refetchUser, currentLanguage, setLanguage]);

  return (
    <div className={styles.settings}>
      <header className={styles.header}>
        <h1>Einstellungen</h1>
        <p className={styles.subtitle}>Persoenliche Einstellungen und Praeferenzen</p>
      </header>

      <nav style={{ display: 'flex', gap: 0, borderBottom: '1px solid var(--border-color, #e0e0e0)', marginBottom: '1.5rem' }}>
        {_TABS.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}>Konto</h2>
              <div className={styles.settingRow}>
                <div className={styles.settingInfo}>
                  <label className={styles.settingLabel}>Profil bearbeiten</label>
                  <p className={styles.settingDescription}>Aendern Sie Ihren Namen und Ihre E-Mail-Adresse.</p>
                </div>
                <div className={styles.settingControl}>
                  <button className={styles.button} onClick={async () => { await refetchUser(); setIsProfileModalOpen(true); }}>Profil oeffnen</button>
                </div>
              </div>
              {currentUser && (
                <div className={styles.userInfoCard}>
                  <div className={styles.userInfoRow}><span className={styles.userInfoLabel}>Benutzername</span><span className={styles.userInfoValue}>{currentUser.username}</span></div>
                  <div className={styles.userInfoRow}><span className={styles.userInfoLabel}>Name</span><span className={styles.userInfoValue}>{currentUser.fullName || '-'}</span></div>
                  <div className={styles.userInfoRow}><span className={styles.userInfoLabel}>E-Mail</span><span className={styles.userInfoValue}>{currentUser.email || '-'}</span></div>
                </div>
              )}
            </section>
            <section className={styles.section}>
              <h2 className={styles.sectionTitle}>Ueber</h2>
              <div className={styles.infoCard}>
                <div className={styles.infoRow}><span className={styles.infoLabel}>Version</span><span className={styles.infoValue}>2.0.0</span></div>
                <div className={styles.infoRow}><span className={styles.infoLabel}>Build</span><span className={styles.infoValue}>2026.03.23</span></div>
              </div>
            </section>
          </>
        )}

        {activeTab === 'appearance' && (
          <section className={styles.section}>
            <h2 className={styles.sectionTitle}>Darstellung</h2>
            <div className={styles.settingRow}>
              <div className={styles.settingInfo}><label className={styles.settingLabel}>Theme</label><p className={styles.settingDescription}>Waehlen Sie zwischen hellem und dunklem Design.</p></div>
              <div className={styles.settingControl}>
                <div className={styles.themeToggle}>
                  <button className={`${styles.themeButton} ${theme === 'light' ? styles.active : ''}`} onClick={() => handleThemeChange('light')}>Hell</button>
                  <button className={`${styles.themeButton} ${theme === 'dark' ? styles.active : ''}`} onClick={() => handleThemeChange('dark')}>Dunkel</button>
                </div>
              </div>
            </div>
            <div className={styles.settingRow}>
              <div className={styles.settingInfo}><label className={styles.settingLabel}>Anzeigesprache</label><p className={styles.settingDescription}>Waehlen Sie die Sprache der Benutzeroberflaeche.{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 as 'de' | 'en' | 'fr')} disabled={isSavingLanguage}>
                  <option value="de">Deutsch</option><option value="en">English</option><option value="fr">Français</option>
                </select>
                {isSavingLanguage && <span className={styles.savingIndicator}>Speichern...</span>}
              </div>
            </div>
          </section>
        )}

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

        {activeTab === 'privacy' && (
          <section className={styles.section}>
            <h2 className={styles.sectionTitle}>Datenschutz</h2>
            <div className={styles.settingRow}>
              <div className={styles.settingInfo}><label className={styles.settingLabel}>GDPR / Privacy</label><p className={styles.settingDescription}>Datenexport, Portabilitaet und Kontoloeschung.</p></div>
              <div className={styles.settingControl}><Link className={`${styles.button} ${styles.linkButton}`} to="/gdpr">GDPR oeffnen</Link></div>
            </div>
          </section>
        )}
      </main>

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

export default SettingsPage;
