import { useState, useEffect, useRef, type FormEvent, type ChangeEvent } from 'react';
import { useLocation } from 'react-router-dom';
import { useAuth } from '../auth/AuthContext';
import api from '../api/client';
import { UserAvatar } from '../components/UserAvatar';
import { resizeImageToBase64 } from '../utils/imageUtils';
import { ExpertProfileTab } from './ExpertProfileTab';
import { useIntegrations, useDisconnectM365 } from '../crm/hooks';
import { integrationsApi, office365Api } from '../crm/api';
import styles from './ProfilePage.module.css';

type ProfileTab = 'personal' | 'expert' | 'password' | 'integrations';

export function ProfilePage() {
  const { user, refreshUser } = useAuth();

  // --- Persönliche Informationen ---
  const [firstName, setFirstName] = useState(user?.firstName ?? '');
  const [lastName, setLastName] = useState(user?.lastName ?? '');
  const [phone, setPhone] = useState(user?.phone ?? '');
  const [mobile, setMobile] = useState(user?.mobile ?? '');
  const [street, setStreet] = useState(user?.street ?? '');
  const [postalCode, setPostalCode] = useState(user?.postalCode ?? '');
  const [city, setCity] = useState(user?.city ?? '');

  // --- Organisation ---
  const [jobTitle, setJobTitle] = useState(user?.jobTitle ?? '');
  const [department, setDepartment] = useState(user?.department ?? '');
  const [companyName, setCompanyName] = useState(user?.companyName ?? '');
  const [officeLocation, setOfficeLocation] = useState(user?.officeLocation ?? '');
  const [profileMsg, setProfileMsg] = useState('');
  const [profileError, setProfileError] = useState('');
  const [profileLoading, setProfileLoading] = useState(false);

  // --- Profilbild ---
  const [avatar, setAvatar] = useState<string | null>(user?.avatar ?? null);
  const [avatarMsg, setAvatarMsg] = useState('');
  const [avatarError, setAvatarError] = useState('');
  const [avatarLoading, setAvatarLoading] = useState(false);
  const fileInputRef = useRef<HTMLInputElement>(null);

  // --- O365-Profilanreicherung ---
  const [enrichLoading, setEnrichLoading] = useState(false);
  const [enrichMsg, setEnrichMsg] = useState('');
  const [enrichError, setEnrichError] = useState('');

  // --- Passwort ändern ---
  const [currentPassword, setCurrentPassword] = useState('');
  const [newPassword, setNewPassword] = useState('');
  const [confirmPassword, setConfirmPassword] = useState('');
  const [passwordMsg, setPasswordMsg] = useState('');
  const [passwordError, setPasswordError] = useState('');
  const [passwordLoading, setPasswordLoading] = useState(false);

  // --- 2FA ---
  const [twoFactorEnabled, setTwoFactorEnabled] = useState(
    user?.twoFactorEnabled ?? false,
  );
  const [setupData, setSetupData] = useState<{
    qrCode: string;
    secret: string;
  } | null>(null);
  const [totpCode, setTotpCode] = useState('');
  const [disablePassword, setDisablePassword] = useState('');
  const [showDisableConfirm, setShowDisableConfirm] = useState(false);
  const [tfaMsg, setTfaMsg] = useState('');
  const [tfaError, setTfaError] = useState('');
  const [tfaLoading, setTfaLoading] = useState(false);

  // 2FA-Status mit Context-User synchronisieren
  useEffect(() => {
    if (user?.twoFactorEnabled !== undefined) {
      setTwoFactorEnabled(user.twoFactorEnabled);
    }
  }, [user?.twoFactorEnabled]);

  // Avatar mit Context-User synchronisieren
  useEffect(() => {
    if (user?.avatar !== undefined) {
      setAvatar(user.avatar ?? null);
    }
  }, [user?.avatar]);

  // Kontaktdaten mit Context-User synchronisieren
  useEffect(() => {
    if (user) {
      setPhone(user.phone ?? '');
      setMobile(user.mobile ?? '');
      setStreet(user.street ?? '');
      setPostalCode(user.postalCode ?? '');
      setCity(user.city ?? '');
    }
  }, [user?.phone, user?.mobile, user?.street, user?.postalCode, user?.city]);

  // Organisationsdaten mit Context-User synchronisieren
  useEffect(() => {
    if (user) {
      setJobTitle(user.jobTitle ?? '');
      setDepartment(user.department ?? '');
      setCompanyName(user.companyName ?? '');
      setOfficeLocation(user.officeLocation ?? '');
    }
  }, [user?.jobTitle, user?.department, user?.companyName, user?.officeLocation]);

  // === Handler: Profilbild hochladen ===
  const handleAvatarChange = async (e: ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (!file) return;

    if (!file.type.startsWith('image/')) {
      setAvatarError('Bitte wählen Sie eine Bilddatei aus');
      return;
    }

    if (file.size > 5 * 1024 * 1024) {
      setAvatarError('Bild darf maximal 5MB groß sein');
      return;
    }

    setAvatarMsg('');
    setAvatarError('');
    setAvatarLoading(true);

    try {
      const base64 = await resizeImageToBase64(file, 200, 200);
      await api.patch('/users/me', { avatar: base64 });
      setAvatar(base64);
      await refreshUser();
      setAvatarMsg('Profilbild erfolgreich aktualisiert');
    } catch (err: unknown) {
      const error = err as { response?: { data?: { message?: string } } };
      setAvatarError(
        error.response?.data?.message ?? 'Fehler beim Hochladen des Profilbilds',
      );
    } finally {
      setAvatarLoading(false);
      if (fileInputRef.current) {
        fileInputRef.current.value = '';
      }
    }
  };

  // === Handler: Profilbild entfernen ===
  const handleAvatarRemove = async () => {
    setAvatarMsg('');
    setAvatarError('');
    setAvatarLoading(true);

    try {
      await api.patch('/users/me', { avatar: null });
      setAvatar(null);
      await refreshUser();
      setAvatarMsg('Profilbild entfernt');
    } catch (err: unknown) {
      const error = err as { response?: { data?: { message?: string } } };
      setAvatarError(
        error.response?.data?.message ?? 'Fehler beim Entfernen des Profilbilds',
      );
    } finally {
      setAvatarLoading(false);
    }
  };

  // === Handler: Profil aktualisieren ===
  const handleProfileUpdate = async (e: FormEvent) => {
    e.preventDefault();
    setProfileMsg('');
    setProfileError('');
    setProfileLoading(true);

    try {
      await api.patch('/users/me', {
        firstName,
        lastName,
        phone: phone || null,
        mobile: mobile || null,
        street: street || null,
        postalCode: postalCode || null,
        city: city || null,
        jobTitle: jobTitle || null,
        department: department || null,
        companyName: companyName || null,
        officeLocation: officeLocation || null,
      });
      await refreshUser();
      setProfileMsg('Profil erfolgreich aktualisiert');
    } catch (err: unknown) {
      const error = err as { response?: { data?: { message?: string } } };
      setProfileError(
        error.response?.data?.message ?? 'Fehler beim Aktualisieren',
      );
    } finally {
      setProfileLoading(false);
    }
  };

  // === Handler: Profil aus O365 synchronisieren (überschreibt bestehende Werte) ===
  const handleEnrichFromO365 = async () => {
    setEnrichMsg('');
    setEnrichError('');
    setEnrichLoading(true);

    try {
      // Profil + Foto parallel laden
      const [profileResult, photoResult] = await Promise.all([
        office365Api.getM365Profile(),
        office365Api.getM365Photo(),
      ]);
      const p = profileResult.data;

      const updated: string[] = [];

      // Kontaktfelder — immer überschreiben wo O365 Daten hat
      if (p.givenName) { setFirstName(p.givenName); updated.push('Vorname'); }
      if (p.surname)   { setLastName(p.surname);    updated.push('Nachname'); }
      if (p.businessPhones?.[0]) { setPhone(p.businessPhones[0]); updated.push('Telefon'); }
      if (p.mobilePhone)         { setMobile(p.mobilePhone);      updated.push('Mobil'); }
      if (p.city)                { setCity(p.city);               updated.push('Ort'); }
      if (p.streetAddress)       { setStreet(p.streetAddress);    updated.push('Straße'); }
      if (p.postalCode)          { setPostalCode(p.postalCode);   updated.push('PLZ'); }

      // Organisationsfelder
      if (p.jobTitle)       { setJobTitle(p.jobTitle);             updated.push('Position'); }
      if (p.department)     { setDepartment(p.department);         updated.push('Abteilung'); }
      if (p.companyName)    { setCompanyName(p.companyName);       updated.push('Firma'); }
      if (p.officeLocation) { setOfficeLocation(p.officeLocation); updated.push('Standort'); }

      // Profilbild übernehmen (manuelle Sync überschreibt immer)
      if (photoResult.data.photoBase64) {
        await api.patch('/users/me', { avatar: photoResult.data.photoBase64 });
        setAvatar(photoResult.data.photoBase64);
        await refreshUser();
        updated.push('Profilbild');
      }

      if (updated.length > 0) {
        setEnrichMsg(
          `${updated.length} Felder aktualisiert: ${updated.join(', ')}. Bitte prüfen und speichern.`,
        );
      } else {
        setEnrichMsg('Keine Profildaten in Microsoft 365 gefunden.');
      }
    } catch {
      setEnrichError('O365-Profil konnte nicht geladen werden.');
    } finally {
      setEnrichLoading(false);
    }
  };

  // === Handler: Passwort ändern ===
  const handlePasswordChange = async (e: FormEvent) => {
    e.preventDefault();
    setPasswordMsg('');
    setPasswordError('');

    if (newPassword !== confirmPassword) {
      setPasswordError('Passwörter stimmen nicht überein');
      return;
    }

    if (newPassword.length < 8) {
      setPasswordError('Neues Passwort muss mindestens 8 Zeichen lang sein');
      return;
    }

    setPasswordLoading(true);

    try {
      await api.post('/users/me/change-password', {
        currentPassword,
        newPassword,
      });
      setPasswordMsg('Passwort erfolgreich geändert');
      setCurrentPassword('');
      setNewPassword('');
      setConfirmPassword('');
    } catch (err: unknown) {
      const error = err as { response?: { data?: { message?: string } } };
      setPasswordError(
        error.response?.data?.message ?? 'Fehler beim Ändern des Passworts',
      );
    } finally {
      setPasswordLoading(false);
    }
  };

  // === Handler: 2FA Setup starten ===
  const handleSetup2fa = async () => {
    setTfaMsg('');
    setTfaError('');
    setTfaLoading(true);

    try {
      const { data } = await api.post<{ qrCode: string; secret: string }>(
        '/auth/2fa/setup',
      );
      setSetupData(data);
    } catch (err: unknown) {
      const error = err as { response?: { data?: { message?: string } } };
      setTfaError(
        error.response?.data?.message ?? 'Fehler beim 2FA-Setup',
      );
    } finally {
      setTfaLoading(false);
    }
  };

  // === Handler: 2FA aktivieren (Code verifizieren) ===
  const handleEnable2fa = async (e: FormEvent) => {
    e.preventDefault();
    setTfaMsg('');
    setTfaError('');
    setTfaLoading(true);

    try {
      await api.post('/auth/2fa/enable', { totpCode });
    } catch (err: unknown) {
      const error = err as { response?: { data?: { message?: string } } };
      setTfaError(
        error.response?.data?.message ?? 'Ungültiger Code',
      );
      setTfaLoading(false);
      return;
    }

    // Erfolg — State aktualisieren
    setTwoFactorEnabled(true);
    setSetupData(null);
    setTotpCode('');
    setTfaMsg('2FA wurde erfolgreich aktiviert');
    setTfaLoading(false);

    // User-Context im Hintergrund aktualisieren
    refreshUser().catch(() => {});
  };

  // === Handler: 2FA deaktivieren ===
  const handleDisable2fa = async (e: FormEvent) => {
    e.preventDefault();
    setTfaMsg('');
    setTfaError('');
    setTfaLoading(true);

    try {
      await api.post('/auth/2fa/disable', { password: disablePassword });
    } catch (err: unknown) {
      const error = err as { response?: { data?: { message?: string } } };
      setTfaError(
        error.response?.data?.message ?? 'Fehler beim Deaktivieren',
      );
      setTfaLoading(false);
      return;
    }

    // Erfolg — State aktualisieren
    setTwoFactorEnabled(false);
    setShowDisableConfirm(false);
    setDisablePassword('');
    setTfaMsg('2FA wurde erfolgreich deaktiviert');
    setTfaLoading(false);

    // User-Context im Hintergrund aktualisieren
    refreshUser().catch(() => {});
  };

  // --- Tab-Navigation ---
  const location = useLocation();
  const searchParams = new URLSearchParams(location.search);
  const integrationParam = searchParams.get('integration');
  const integrationStatus = searchParams.get('status');

  const [activeTab, setActiveTab] = useState<ProfileTab>(
    integrationParam === 'microsoft-365' ? 'integrations' : 'personal',
  );

  // --- Microsoft 365 Integration ---
  const { data: integrationsData, isLoading: integrationsLoading } = useIntegrations();
  const disconnectM365 = useDisconnectM365();
  const m365Integration = integrationsData?.data?.find((i) => i.provider === 'MICROSOFT_365');
  const [m365Msg, setM365Msg] = useState(
    integrationParam === 'microsoft-365' && integrationStatus === 'success'
      ? 'Microsoft 365 wurde erfolgreich verbunden!'
      : integrationParam === 'microsoft-365' && integrationStatus === 'error'
        ? 'Verbindung mit Microsoft 365 fehlgeschlagen. Bitte versuchen Sie es erneut.'
        : '',
  );
  const [m365IsError, setM365IsError] = useState(
    integrationParam === 'microsoft-365' && integrationStatus === 'error',
  );

  return (
    <div>
      <h1
        style={{
          fontSize: '1.5rem',
          fontWeight: 600,
          marginBottom: '1.5rem',
          display: 'flex',
          alignItems: 'center',
          gap: '0.75rem',
        }}
      >
        Mein Profil
        {!twoFactorEnabled && (
          <span
            className={styles.tfaWarning}
            onClick={() => setActiveTab('password')}
            role="button"
            tabIndex={0}
            onKeyDown={(e) => {
              if (e.key === 'Enter' || e.key === ' ') setActiveTab('password');
            }}
            title="Klicken, um 2FA zu aktivieren"
          >
            2FA nicht aktiv
          </span>
        )}
      </h1>

      {/* === Tab-Leiste === */}
      <div className={styles.tabs}>
        <button
          type="button"
          className={`${styles.tab} ${activeTab === 'personal' ? styles.tabActive : ''}`}
          onClick={() => setActiveTab('personal')}
        >
          Profil
        </button>
        <button
          type="button"
          className={`${styles.tab} ${activeTab === 'expert' ? styles.tabActive : ''}`}
          onClick={() => setActiveTab('expert')}
        >
          Experten Profil
        </button>
        <button
          type="button"
          className={`${styles.tab} ${activeTab === 'password' ? styles.tabActive : ''}`}
          onClick={() => setActiveTab('password')}
        >
          Passwort ändern
        </button>
        <button
          type="button"
          className={`${styles.tab} ${activeTab === 'integrations' ? styles.tabActive : ''}`}
          onClick={() => setActiveTab('integrations')}
        >
          Integrationen
        </button>
      </div>

      {/* === Tab: Profil === */}
      {activeTab === 'personal' && (
        <div className={styles.section}>
          <div className={styles.profileLayout}>
            {/* --- Linke Spalte: Avatar --- */}
            <div className={styles.avatarColumn}>
              <div
                className={styles.avatarPreview}
                onClick={() => fileInputRef.current?.click()}
                role="button"
                tabIndex={0}
                onKeyDown={(e) => {
                  if (e.key === 'Enter' || e.key === ' ') fileInputRef.current?.click();
                }}
              >
                <UserAvatar
                  firstName={user?.firstName ?? ''}
                  lastName={user?.lastName ?? ''}
                  avatar={avatar}
                  size={96}
                />
                <div className={styles.avatarOverlay}>
                  <span>Ändern</span>
                </div>
              </div>
              <input
                ref={fileInputRef}
                type="file"
                accept="image/jpeg,image/png,image/gif,image/webp"
                onChange={handleAvatarChange}
                className={styles.hiddenInput}
              />
              <div className={styles.avatarActions}>
                <button
                  type="button"
                  className={styles.buttonSecondary}
                  onClick={() => fileInputRef.current?.click()}
                  disabled={avatarLoading}
                >
                  {avatarLoading ? 'Laden...' : 'Hochladen'}
                </button>
                {avatar && (
                  <button
                    type="button"
                    className={styles.buttonDanger}
                    onClick={handleAvatarRemove}
                    disabled={avatarLoading}
                  >
                    Entfernen
                  </button>
                )}
              </div>
              {avatarMsg && <div className={styles.success}>{avatarMsg}</div>}
              {avatarError && <div className={styles.error}>{avatarError}</div>}
              <small className={styles.avatarHint}>
                JPEG, PNG, GIF oder WebP. Max. 200x200px.
              </small>
            </div>

            {/* --- Rechte Spalte: Formular --- */}
            <div className={styles.formColumn}>

              {/* O365-Anreicherung (nur wenn verbunden) */}
              {m365Integration?.connected && (
                <div className={styles.enrichBanner}>
                  <div className={styles.enrichInfo}>
                    <span className={styles.enrichIcon}>
                      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
                        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z"/>
                        <path d="M15 9l-6 6M9 9l6 6"/>
                      </svg>
                    </span>
                    <span className={styles.enrichLabel}>
                      Profil mit Microsoft 365 synchronisieren
                    </span>
                  </div>
                  <button
                    type="button"
                    className={styles.enrichBtn}
                    onClick={handleEnrichFromO365}
                    disabled={enrichLoading}
                  >
                    {enrichLoading ? 'Lädt…' : '↓ O365 übernehmen'}
                  </button>
                  {enrichMsg && <div className={`${styles.success} ${styles.enrichFeedback}`}>{enrichMsg}</div>}
                  {enrichError && <div className={`${styles.error} ${styles.enrichFeedback}`}>{enrichError}</div>}
                </div>
              )}

              <form onSubmit={handleProfileUpdate} className={styles.form}>
                {profileMsg && <div className={styles.success}>{profileMsg}</div>}
                {profileError && <div className={styles.error}>{profileError}</div>}

                {/* Name */}
                <fieldset className={styles.fieldGroup}>
                  <legend className={styles.fieldGroupLegend}>Name</legend>
                  <div className={styles.fieldRow}>
                    <div className={styles.field}>
                      <label htmlFor="firstName">Vorname</label>
                      <input
                        id="firstName"
                        type="text"
                        value={firstName}
                        onChange={(e) => setFirstName(e.target.value)}
                        required
                        maxLength={100}
                      />
                    </div>
                    <div className={styles.field}>
                      <label htmlFor="lastName">Nachname</label>
                      <input
                        id="lastName"
                        type="text"
                        value={lastName}
                        onChange={(e) => setLastName(e.target.value)}
                        required
                        maxLength={100}
                      />
                    </div>
                  </div>
                </fieldset>

                {/* E-Mail & Rolle */}
                <div className={styles.fieldRow}>
                  <div className={styles.field}>
                    <label htmlFor="email">E-Mail</label>
                    <input
                      id="email"
                      type="email"
                      value={user?.email ?? ''}
                      disabled
                    />
                    <small>E-Mail kann nicht geändert werden</small>
                  </div>
                  <div className={styles.field}>
                    <label>Rolle</label>
                    <input type="text" value={user?.role ?? ''} disabled />
                  </div>
                </div>

                {/* Telefon */}
                <fieldset className={styles.fieldGroup}>
                  <legend className={styles.fieldGroupLegend}>Kontakt</legend>
                  <div className={styles.fieldRow}>
                    <div className={styles.field}>
                      <label htmlFor="phone">Telefon</label>
                      <input
                        id="phone"
                        type="tel"
                        value={phone}
                        onChange={(e) => setPhone(e.target.value)}
                        maxLength={30}
                        placeholder="+49 123 456789"
                      />
                    </div>
                    <div className={styles.field}>
                      <label htmlFor="mobile">Mobil</label>
                      <input
                        id="mobile"
                        type="tel"
                        value={mobile}
                        onChange={(e) => setMobile(e.target.value)}
                        maxLength={30}
                        placeholder="+49 170 1234567"
                      />
                    </div>
                  </div>
                </fieldset>

                {/* Adresse */}
                <fieldset className={styles.fieldGroup}>
                  <legend className={styles.fieldGroupLegend}>Adresse</legend>
                  <div className={styles.field}>
                    <label htmlFor="street">Straße</label>
                    <input
                      id="street"
                      type="text"
                      value={street}
                      onChange={(e) => setStreet(e.target.value)}
                      maxLength={200}
                      placeholder="Musterstraße 42"
                    />
                  </div>
                  <div className={styles.fieldRow}>
                    <div className={`${styles.field} ${styles.fieldSmall}`}>
                      <label htmlFor="postalCode">PLZ</label>
                      <input
                        id="postalCode"
                        type="text"
                        value={postalCode}
                        onChange={(e) => setPostalCode(e.target.value)}
                        maxLength={10}
                        placeholder="12345"
                      />
                    </div>
                    <div className={styles.field}>
                      <label htmlFor="city">Ort</label>
                      <input
                        id="city"
                        type="text"
                        value={city}
                        onChange={(e) => setCity(e.target.value)}
                        maxLength={100}
                        placeholder="Berlin"
                      />
                    </div>
                  </div>
                </fieldset>

                {/* Organisation */}
                <fieldset className={styles.fieldGroup}>
                  <legend className={styles.fieldGroupLegend}>Organisation</legend>
                  <div className={styles.fieldRow}>
                    <div className={styles.field}>
                      <label htmlFor="jobTitle">Stellenbezeichnung</label>
                      <input
                        id="jobTitle"
                        type="text"
                        value={jobTitle}
                        onChange={(e) => setJobTitle(e.target.value)}
                        maxLength={100}
                        placeholder="Senior Developer"
                      />
                    </div>
                    <div className={styles.field}>
                      <label htmlFor="department">Abteilung</label>
                      <input
                        id="department"
                        type="text"
                        value={department}
                        onChange={(e) => setDepartment(e.target.value)}
                        maxLength={100}
                        placeholder="Engineering"
                      />
                    </div>
                  </div>
                  <div className={styles.fieldRow}>
                    <div className={styles.field}>
                      <label htmlFor="companyName">Firma</label>
                      <input
                        id="companyName"
                        type="text"
                        value={companyName}
                        onChange={(e) => setCompanyName(e.target.value)}
                        maxLength={200}
                        placeholder="Acme GmbH"
                      />
                    </div>
                    <div className={styles.field}>
                      <label htmlFor="officeLocation">Standort</label>
                      <input
                        id="officeLocation"
                        type="text"
                        value={officeLocation}
                        onChange={(e) => setOfficeLocation(e.target.value)}
                        maxLength={200}
                        placeholder="Berlin Office"
                      />
                    </div>
                  </div>
                </fieldset>

                <button
                  type="submit"
                  className={styles.button}
                  disabled={profileLoading}
                >
                  {profileLoading ? 'Speichern...' : 'Profil speichern'}
                </button>
              </form>
            </div>
          </div>
        </div>
      )}

      {/* === Tab: Experten Profil === */}
      {activeTab === 'expert' && <ExpertProfileTab />}

      {/* === Tab: Passwort ändern + 2FA === */}
      {activeTab === 'password' && (
        <>
          <div className={styles.section}>
            <h2 className={styles.sectionTitle}>Passwort ändern</h2>
            <form onSubmit={handlePasswordChange} className={styles.form}>
              {passwordMsg && <div className={styles.success}>{passwordMsg}</div>}
              {passwordError && (
                <div className={styles.error}>{passwordError}</div>
              )}

              <div className={styles.field}>
                <label htmlFor="currentPassword">Aktuelles Passwort</label>
                <input
                  id="currentPassword"
                  type="password"
                  value={currentPassword}
                  onChange={(e) => setCurrentPassword(e.target.value)}
                  required
                  minLength={8}
                />
              </div>

              <div className={styles.field}>
                <label htmlFor="newPassword">Neues Passwort</label>
                <input
                  id="newPassword"
                  type="password"
                  value={newPassword}
                  onChange={(e) => setNewPassword(e.target.value)}
                  required
                  minLength={8}
                />
              </div>

              <div className={styles.field}>
                <label htmlFor="confirmPassword">Neues Passwort bestätigen</label>
                <input
                  id="confirmPassword"
                  type="password"
                  value={confirmPassword}
                  onChange={(e) => setConfirmPassword(e.target.value)}
                  required
                  minLength={8}
                />
              </div>

              <button
                type="submit"
                className={styles.button}
                disabled={passwordLoading}
              >
                {passwordLoading ? 'Ändern...' : 'Passwort ändern'}
              </button>
            </form>
          </div>

          {/* === 2FA Sektion (innerhalb Passwort-Tab) === */}
          <div className={styles.section}>
            <h2 className={styles.sectionTitle}>
              Zwei-Faktor-Authentifizierung (2FA)
            </h2>

            {tfaMsg && <div className={styles.success}>{tfaMsg}</div>}
            {tfaError && <div className={styles.error}>{tfaError}</div>}

            <div className={styles.tfaStatus}>
              <span
                style={{
                  display: 'inline-block',
                  width: 8,
                  height: 8,
                  borderRadius: '50%',
                  background: twoFactorEnabled
                    ? 'var(--color-success)'
                    : 'var(--color-error)',
                  marginRight: '0.5rem',
                }}
              />
              <span>
                {twoFactorEnabled
                  ? '2FA ist aktiviert'
                  : '2FA ist nicht aktiviert'}
              </span>
            </div>

            {/* 2FA NICHT aktiviert: Setup starten */}
            {!twoFactorEnabled && !setupData && (
              <button
                type="button"
                className={styles.button}
                onClick={handleSetup2fa}
                disabled={tfaLoading}
              >
                {tfaLoading ? 'Laden...' : '2FA aktivieren'}
              </button>
            )}

            {/* QR-Code anzeigen + Verifizierung */}
            {!twoFactorEnabled && setupData && (
              <div className={styles.tfaSetup}>
                <p className={styles.tfaInstructions}>
                  Scannen Sie den QR-Code mit Ihrer Authenticator-App (z.B. Google
                  Authenticator, Authy):
                </p>

                <div className={styles.qrContainer}>
                  <img src={setupData.qrCode} alt="QR-Code für 2FA" />
                </div>

                <div className={styles.manualSecret}>
                  <label>Manueller Schlüssel:</label>
                  <code>{setupData.secret}</code>
                </div>

                <form onSubmit={handleEnable2fa} className={styles.form}>
                  <div className={styles.field}>
                    <label htmlFor="totpCode">Bestätigungscode</label>
                    <input
                      id="totpCode"
                      type="text"
                      value={totpCode}
                      onChange={(e) => setTotpCode(e.target.value)}
                      placeholder="6-stelliger Code"
                      maxLength={6}
                      pattern="[0-9]{6}"
                      required
                      autoFocus
                    />
                    <small>
                      Geben Sie den 6-stelligen Code aus Ihrer Authenticator-App ein
                    </small>
                  </div>

                  <div className={styles.buttonRow}>
                    <button
                      type="submit"
                      className={styles.button}
                      disabled={tfaLoading}
                    >
                      {tfaLoading
                        ? 'Verifizieren...'
                        : 'Code verifizieren und aktivieren'}
                    </button>
                    <button
                      type="button"
                      className={styles.buttonSecondary}
                      onClick={() => {
                        setSetupData(null);
                        setTotpCode('');
                      }}
                    >
                      Abbrechen
                    </button>
                  </div>
                </form>
              </div>
            )}

            {/* 2FA aktiviert: Deaktivieren-Option */}
            {twoFactorEnabled && !showDisableConfirm && (
              <button
                type="button"
                className={styles.buttonDanger}
                onClick={() => setShowDisableConfirm(true)}
              >
                2FA deaktivieren
              </button>
            )}

            {/* Deaktivierung mit Passwort bestätigen */}
            {twoFactorEnabled && showDisableConfirm && (
              <form onSubmit={handleDisable2fa} className={styles.form}>
                <p
                  style={{
                    color: 'var(--color-text-secondary)',
                    fontSize: '0.875rem',
                    marginBottom: '0.75rem',
                  }}
                >
                  Geben Sie Ihr Passwort ein, um 2FA zu deaktivieren:
                </p>
                <div className={styles.field}>
                  <label htmlFor="disablePassword">Passwort</label>
                  <input
                    id="disablePassword"
                    type="password"
                    value={disablePassword}
                    onChange={(e) => setDisablePassword(e.target.value)}
                    required
                    minLength={8}
                    autoFocus
                  />
                </div>
                <div className={styles.buttonRow}>
                  <button
                    type="submit"
                    className={styles.buttonDanger}
                    disabled={tfaLoading}
                  >
                    {tfaLoading ? 'Deaktivieren...' : '2FA deaktivieren'}
                  </button>
                  <button
                    type="button"
                    className={styles.buttonSecondary}
                    onClick={() => {
                      setShowDisableConfirm(false);
                      setDisablePassword('');
                    }}
                  >
                    Abbrechen
                  </button>
                </div>
              </form>
            )}
          </div>
        </>
      )}

      {/* === Tab: Integrationen === */}
      {activeTab === 'integrations' && (
        <>
          <div className={styles.section}>
            <h2 className={styles.sectionTitle}>Microsoft 365</h2>

            {m365Msg && (
              <div className={m365IsError ? styles.error : styles.success} style={{ marginBottom: '1rem' }}>
                {m365Msg}
              </div>
            )}

            {integrationsLoading ? (
              <p style={{ color: 'var(--color-text-muted)', fontSize: '0.875rem' }}>Laden…</p>
            ) : m365Integration?.connected ? (
              <div>
                <p style={{ fontSize: '0.9375rem', color: 'var(--color-text)', marginBottom: '0.5rem' }}>
                  <span style={{ color: 'var(--color-success, #16a34a)', fontWeight: 600 }}>● Verbunden</span>
                  {m365Integration.msTenantId && (
                    <span style={{ marginLeft: '0.75rem', fontSize: '0.8125rem', color: 'var(--color-text-muted)' }}>
                      Tenant: {m365Integration.msTenantId}
                    </span>
                  )}
                </p>
                {m365Integration.expiresAt && (
                  <p style={{ fontSize: '0.8125rem', color: 'var(--color-text-muted)', marginBottom: '1rem' }}>
                    Token gültig bis: {new Date(m365Integration.expiresAt).toLocaleString('de-DE')}
                  </p>
                )}
                <button
                  type="button"
                  className={styles.buttonDanger}
                  disabled={disconnectM365.isPending}
                  onClick={() => {
                    setM365Msg('');
                    disconnectM365.mutate(undefined, {
                      onSuccess: () => {
                        setM365Msg('Microsoft 365 wurde getrennt.');
                        setM365IsError(false);
                      },
                      onError: () => {
                        setM365Msg('Fehler beim Trennen der Verbindung.');
                        setM365IsError(true);
                      },
                    });
                  }}
                >
                  {disconnectM365.isPending ? 'Trennen…' : 'Verbindung trennen'}
                </button>
              </div>
            ) : (
              <div>
                <p style={{ fontSize: '0.9375rem', color: 'var(--color-text-secondary)', marginBottom: '1rem' }}>
                  Verbinden Sie Ihr Microsoft 365 Konto, um E-Mails, Kalendertermine und Aufgaben
                  direkt in Kontaktprofilen zu sehen.
                </p>
                <button
                  type="button"
                  onClick={() => integrationsApi.connectM365()}
                  style={{
                    display: 'inline-flex',
                    alignItems: 'center',
                    gap: '0.5rem',
                    padding: '0.5rem 1.25rem',
                    background: 'var(--color-primary)',
                    color: 'white',
                    border: 'none',
                    borderRadius: 'var(--radius-sm)',
                    fontSize: '0.9375rem',
                    fontWeight: 600,
                    cursor: 'pointer',
                  }}
                >
                  <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
                    <path d="M0 0h7.5v7.5H0zm8.5 0H16v7.5H8.5zM0 8.5h7.5V16H0zm8.5 0H16V16H8.5z" />
                  </svg>
                  Microsoft 365 verbinden
                </button>
              </div>
            )}
          </div>
        </>
      )}
    </div>
  );
}