import React, { useEffect, useState } from 'react';
import {
  Shield,
  Users,
  Server,
  Mail,
  Plus,
  Trash2,
  KeyRound,
  Copy,
  Check,
  ArrowLeft,
  Send,
  AlertCircle,
  UserPlus,
} from 'lucide-react';
import {
  SystemSettings,
  User,
  UserInvite,
  UserRole,
} from '../../lib/types';
import { api, triggerHaptic } from '../../lib/api';

interface AdminSettingsViewProps {
  currentUser: User;
  onBack: () => void;
}

type AdminSection = 'users' | 'server' | 'smtp';

export const AdminSettingsView: React.FC<AdminSettingsViewProps> = ({
  currentUser,
  onBack,
}) => {
  const isServerAdmin = currentUser.role === 'admin';
  const [section, setSection] = useState<AdminSection>('users');

  // --- Users & Invites State ---
  const [users, setUsers] = useState<User[]>([]);
  const [invites, setInvites] = useState<UserInvite[]>([]);
  const [newUserName, setNewUserName] = useState('');
  const [newUserEmail, setNewUserEmail] = useState('');
  const [newUserPassword, setNewUserPassword] = useState('');
  const [newUserRole, setNewUserRole] = useState<UserRole>('member');

  const [inviteEmail, setInviteEmail] = useState('');
  const [inviteRole, setInviteRole] = useState<UserRole>('member');
  const [copiedInviteId, setCopiedInviteId] = useState<string | null>(null);

  const [resetPwdUserId, setResetPwdUserId] = useState<string | null>(null);
  const [resetPwdVal, setResetPwdVal] = useState('');

  // --- Server & SMTP Settings State ---
  const [settings, setSettings] = useState<SystemSettings>({
    sharingMode: 'teams_only',
    allowRegistration: false,
    instanceName: 'MindSift',
    smtpHost: '',
    smtpPort: 587,
    smtpUser: '',
    smtpPass: '',
    smtpFrom: '',
    smtpTls: true,
    smtpConfiguredViaEnv: false,
  });
  const [testSmtpEmail, setTestSmtpEmail] = useState(currentUser.email || '');
  const [testingSmtp, setTestingSmtp] = useState(false);

  const [statusMsg, setStatusMsg] = useState<{ type: 'ok' | 'err'; text: string } | null>(null);

  const loadAll = async () => {
    try {
      const [uList, invList] = await Promise.all([
        api.adminGetUsers(),
        api.adminGetInvites(),
      ]);
      setUsers(uList);
      setInvites(invList);

      if (isServerAdmin) {
        const sys = await api.adminGetSettings();
        setSettings({
          sharingMode: sys.sharingMode || 'teams_only',
          allowRegistration: Boolean(sys.allowRegistration),
          instanceName: sys.instanceName || 'MindSift',
          smtpHost: sys.smtpHost || '',
          smtpPort: sys.smtpPort || 587,
          smtpUser: sys.smtpUser || '',
          smtpPass: sys.smtpPass || '',
          smtpFrom: sys.smtpFrom || '',
          smtpTls: sys.smtpTls ?? true,
          smtpConfiguredViaEnv: Boolean(sys.smtpConfiguredViaEnv),
        });
      }
    } catch (err: any) {
      setStatusMsg({ type: 'err', text: err.message || 'Fehler beim Laden der Administrationsdaten' });
    }
  };

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

  // ============================================================================
  // HANDLERS: USERS & INVITES
  // ============================================================================
  const handleCreateUser = async (e: React.FormEvent) => {
    e.preventDefault();
    setStatusMsg(null);
    triggerHaptic(15);
    try {
      const created = await api.adminCreateUser({
        email: newUserEmail.trim(),
        password: newUserPassword,
        displayName: newUserName.trim() || newUserEmail.split('@')[0],
        role: newUserRole,
      });
      setUsers((prev) => [...prev, created]);
      setNewUserName('');
      setNewUserEmail('');
      setNewUserPassword('');
      setNewUserRole('member');
      setStatusMsg({ type: 'ok', text: `Benutzer "${created.displayName}" wurde angelegt.` });
    } catch (err: any) {
      setStatusMsg({ type: 'err', text: err.message || 'Fehler beim Anlegen des Benutzers' });
    }
  };

  const handleCreateInvite = async (e: React.FormEvent) => {
    e.preventDefault();
    setStatusMsg(null);
    triggerHaptic(15);
    try {
      const inv = await api.adminCreateInvite({
        email: inviteEmail.trim(),
        role: inviteRole,
      });
      setInvites((prev) => [inv, ...prev]);
      setInviteEmail('');
      setStatusMsg({
        type: 'ok',
        text: `Einladungscode ${inv.code} erfolgreich erstellt.`,
      });
    } catch (err: any) {
      setStatusMsg({ type: 'err', text: err.message || 'Fehler beim Erstellen der Einladung' });
    }
  };

  const handleDeleteInvite = async (id: string) => {
    try {
      await api.adminDeleteInvite(id);
      setInvites((prev) => prev.filter((i) => i.id !== id));
    } catch (err: any) {
      setStatusMsg({ type: 'err', text: err.message });
    }
  };

  const handleCopyInviteCode = (inv: UserInvite) => {
    navigator.clipboard.writeText(inv.code);
    setCopiedInviteId(inv.id);
    setTimeout(() => setCopiedInviteId(null), 2000);
  };

  const handleChangeUserRole = async (u: User, role: UserRole) => {
    setStatusMsg(null);
    try {
      const updated = await api.adminUpdateUser(u.id, { role });
      setUsers((prev) => prev.map((item) => (item.id === u.id ? updated : item)));
      setStatusMsg({
        type: 'ok',
        text: `Rolle für ${updated.displayName} auf "${role}" aktualisiert.`,
      });
    } catch (err: any) {
      setStatusMsg({ type: 'err', text: err.message });
    }
  };

  const handleToggleUserActive = async (u: User) => {
    setStatusMsg(null);
    try {
      const updated = await api.adminUpdateUser(u.id, { isActive: !u.isActive });
      setUsers((prev) => prev.map((item) => (item.id === u.id ? updated : item)));
    } catch (err: any) {
      setStatusMsg({ type: 'err', text: err.message });
    }
  };

  const handleConfirmResetPassword = async (userId: string) => {
    if (!resetPwdVal.trim()) return;
    setStatusMsg(null);
    try {
      await api.adminResetPassword(userId, resetPwdVal.trim());
      setResetPwdUserId(null);
      setResetPwdVal('');
      setStatusMsg({ type: 'ok', text: 'Passwort erfolgreich zurückgesetzt.' });
    } catch (err: any) {
      setStatusMsg({ type: 'err', text: err.message });
    }
  };

  const handleDeleteUser = async (u: User) => {
    if (
      !window.confirm(
        `Benutzer "${u.displayName}" (${u.email}) wirklich unwiderruflich löschen?`
      )
    )
      return;
    setStatusMsg(null);
    try {
      await api.adminDeleteUser(u.id);
      setUsers((prev) => prev.filter((item) => item.id !== u.id));
      setStatusMsg({ type: 'ok', text: 'Benutzer gelöscht.' });
    } catch (err: any) {
      setStatusMsg({ type: 'err', text: err.message });
    }
  };



  // ============================================================================
  // HANDLERS: SERVER & SMTP SETTINGS
  // ============================================================================
  const handleSaveSystemSettings = async (patch?: Partial<SystemSettings>) => {
    setStatusMsg(null);
    const next = { ...settings, ...(patch || {}) };
    setSettings(next);
    try {
      const saved = await api.adminUpdateSettings(next);
      setSettings((prev) => ({ ...prev, ...saved }));
      setStatusMsg({ type: 'ok', text: 'Server-Einstellungen erfolgreich gespeichert.' });
    } catch (err: any) {
      setStatusMsg({ type: 'err', text: err.message || 'Fehler beim Speichern' });
    }
  };

  const handleTestSmtp = async () => {
    if (!testSmtpEmail.trim()) return;
    setTestingSmtp(true);
    setStatusMsg(null);
    try {
      await api.adminUpdateSettings(settings);
      await api.adminTestSMTP(testSmtpEmail.trim());
      setStatusMsg({
        type: 'ok',
        text: `Test-E-Mail erfolgreich an ${testSmtpEmail.trim()} gesendet!`,
      });
    } catch (err: any) {
      setStatusMsg({
        type: 'err',
        text: `SMTP-Test fehlgeschlagen: ${err.message}`,
      });
    } finally {
      setTestingSmtp(false);
    }
  };

  return (
    <div className="w-full space-y-4">
      {/* Top Page Header */}
      <div className="flex items-center justify-between border-b border-border pb-3">
        <div className="flex items-center gap-3">
          <button
            onClick={onBack}
            className="btn-action h-8 px-2.5 text-xs flex items-center gap-1.5"
            title="Zurück zur Übersicht"
          >
            <ArrowLeft className="w-3.5 h-3.5" />
            <span>Zurück</span>
          </button>
          <div>
            <h1 className="text-base font-bold text-main tracking-tight flex items-center gap-2">
              <Shield className="w-4 h-4 text-accent" />
              <span>Server-Administration</span>
            </h1>
            <p className="text-xs text-muted">
              Benutzerverwaltung, Einladungscodes, Isolationsmodus & Mail-Server
            </p>
          </div>
        </div>

        <span className="badge-accent">Server-Administrator</span>
      </div>

      {statusMsg && (
        <div
          className={`p-3 text-xs flex items-center justify-between gap-2 rounded-card ${
            statusMsg.type === 'ok' ? 'alert-ok' : 'alert-err'
          }`}
        >
          <div className="flex items-center gap-2">
            {statusMsg.type === 'ok' ? (
              <Check className="w-4 h-4 text-accent flex-shrink-0" />
            ) : (
              <AlertCircle className="w-4 h-4 text-status-err flex-shrink-0" />
            )}
            <span>{statusMsg.text}</span>
          </div>
          <button
            onClick={() => setStatusMsg(null)}
            className="text-muted hover:text-main text-[11px]"
          >
            Schließen
          </button>
        </div>
      )}

      {/* Main 2-Column Layout */}
      <div className="grid grid-cols-1 md:grid-cols-4 gap-4 items-start">
        {/* Left Navigation Sidebar */}
        <aside className="panel-surface divide-y divide-border overflow-hidden">
          <button
            onClick={() => setSection('users')}
            className={`w-full px-3.5 py-3 text-left text-xs font-medium flex items-center gap-2.5 transition-colors ${
              section === 'users'
                ? 'bg-panel-elevated text-main border-l-2 border-l-accent'
                : 'text-muted hover:text-main hover:bg-canvas/50'
            }`}
          >
            <Users className="w-4 h-4 text-accent flex-shrink-0" />
            <div>
              <p className="font-semibold">Benutzer & Einladungen</p>
              <p className="text-[10px] text-faint">Konten, Rollen & Invite-Codes</p>
            </div>
          </button>

          {isServerAdmin && (
            <>
              <button
                onClick={() => setSection('server')}
                className={`w-full px-3.5 py-3 text-left text-xs font-medium flex items-center gap-2.5 transition-colors ${
                  section === 'server'
                    ? 'bg-panel-elevated text-main border-l-2 border-l-accent'
                    : 'text-muted hover:text-main hover:bg-canvas/50'
                }`}
              >
                <Server className="w-4 h-4 text-accent flex-shrink-0" />
                <div>
                  <p className="font-semibold">Server & Isolation</p>
                  <p className="text-[10px] text-faint">Sichtbarkeit & Registrierung</p>
                </div>
              </button>

              <button
                onClick={() => setSection('smtp')}
                className={`w-full px-3.5 py-3 text-left text-xs font-medium flex items-center gap-2.5 transition-colors ${
                  section === 'smtp'
                    ? 'bg-panel-elevated text-main border-l-2 border-l-accent'
                    : 'text-muted hover:text-main hover:bg-canvas/50'
                }`}
              >
                <Mail className="w-4 h-4 text-accent flex-shrink-0" />
                <div>
                  <p className="font-semibold">E-Mail / SMTP-Server</p>
                  <p className="text-[10px] text-faint">Mailversand für Alarme</p>
                </div>
              </button>
            </>
          )}
        </aside>

        {/* Right Content Area */}
        <div className="md:col-span-3 panel-surface p-5 text-xs">
          {/* ================================================================= */}
          {/* SECTION 1: BENUTZER, ROLLEN & EINLADUNGEN */}
          {/* ================================================================= */}
          {section === 'users' && (
            <div className="space-y-6">
              <div className="border-b border-border pb-3">
                <h2 className="text-sm font-bold text-main">Benutzersteuerung, Rollen & Einladungen</h2>
                <p className="text-muted mt-0.5">
                  Lege Benutzerkonten direkt an oder erzeuge Einladungscodes, mit denen sich eingeladene
                  Personen selbst registrieren können, auch wenn die öffentliche Registrierung gesperrt ist.
                </p>
              </div>

              {/* Direct User Creation Form */}
              <div className="p-4 bg-canvas border border-border rounded-card space-y-3">
                <h3 className="font-bold text-main flex items-center gap-1.5">
                  <UserPlus className="w-3.5 h-3.5 text-accent" />
                  <span>Neues Benutzerkonto direkt anlegen</span>
                </h3>

                <form onSubmit={handleCreateUser} className="space-y-3">
                  <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3">
                    <div className="min-w-0">
                      <label className="block text-muted mb-1">Anzeigename</label>
                      <input
                        type="text"
                        value={newUserName}
                        onChange={(e) => setNewUserName(e.target.value)}
                        placeholder="z.B. Anna Beispiel"
                        required
                        className="w-full min-w-0 h-8 px-2.5 input-field"
                      />
                    </div>

                    <div className="min-w-0">
                      <label className="block text-muted mb-1">E-Mail-Adresse</label>
                      <input
                        type="email"
                        value={newUserEmail}
                        onChange={(e) => setNewUserEmail(e.target.value)}
                        placeholder="anna@beispiel.de"
                        required
                        className="w-full min-w-0 h-8 px-2.5 input-field"
                      />
                    </div>

                    <div className="min-w-0">
                      <label className="block text-muted mb-1">Initial-Passwort</label>
                      <input
                        type="password"
                        value={newUserPassword}
                        onChange={(e) => setNewUserPassword(e.target.value)}
                        placeholder="Mind. 4 Zeichen"
                        minLength={4}
                        required
                        className="w-full min-w-0 h-8 px-2.5 input-field"
                      />
                    </div>

                    <div className="min-w-0">
                      <label className="block text-muted mb-1">Benutzerrolle</label>
                      <select
                        value={newUserRole}
                        onChange={(e) => setNewUserRole(e.target.value as UserRole)}
                        className="w-full min-w-0 h-8 px-2 input-field bg-panel"
                      >
                        <option value="member">Mitglied (Standard)</option>
                        <option value="admin">Server-Admin (Vollzugriff)</option>
                      </select>
                    </div>
                  </div>

                  <div className="flex justify-end">
                    <button
                      type="submit"
                      className="btn-primary h-8 px-4 text-xs font-semibold flex items-center gap-1.5"
                    >
                      <Plus className="w-3.5 h-3.5" />
                      <span>Benutzer jetzt anlegen</span>
                    </button>
                  </div>
                </form>
              </div>

              {/* Invite Code Generator */}
              <div className="p-4 bg-canvas border border-border rounded-card space-y-3">
                <h3 className="font-bold text-main flex items-center gap-1.5">
                  <KeyRound className="w-3.5 h-3.5 text-accent" />
                  <span>Einladungscode erzeugen (gültig für 7 Tage)</span>
                </h3>

                <form onSubmit={handleCreateInvite} className="space-y-3">
                  <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
                    <div className="min-w-0">
                      <label className="block text-muted mb-1">
                        Gebundene E-Mail (optional)
                      </label>
                      <input
                        type="email"
                        value={inviteEmail}
                        onChange={(e) => setInviteEmail(e.target.value)}
                        placeholder="Leer lassen für beliebige E-Mail"
                        className="w-full min-w-0 h-8 px-2.5 input-field"
                      />
                    </div>

                    <div className="min-w-0">
                      <label className="block text-muted mb-1">Zugewiesene Server-Rolle</label>
                      <select
                        value={inviteRole}
                        onChange={(e) => setInviteRole(e.target.value as UserRole)}
                        className="w-full min-w-0 h-8 px-2 input-field bg-panel"
                      >
                        <option value="member">Mitglied</option>
                        <option value="admin">Server-Admin</option>
                      </select>
                    </div>
                  </div>

                  <div className="flex justify-end">
                    <button
                      type="submit"
                      className="btn-action h-8 px-4 text-xs font-semibold flex items-center gap-1.5 border-accent text-main"
                    >
                      <KeyRound className="w-3.5 h-3.5 text-accent" />
                      <span>Einladungscode generieren</span>
                    </button>
                  </div>
                </form>

                {/* Active Invites List */}
                {invites.length > 0 && (
                  <div className="pt-2 border-t border-border space-y-1.5">
                    <p className="text-[11px] font-semibold text-muted">
                      Aktive & bisherige Einladungscodes:
                    </p>
                    <div className="divide-y divide-border border border-border bg-panel rounded-card overflow-hidden">
                      {invites.map((inv) => (
                        <div
                          key={inv.id}
                          className="p-2 flex flex-wrap items-center justify-between gap-2"
                        >
                          <div className="flex items-center gap-2.5">
                            <code className="px-2 py-0.5 bg-canvas border border-border font-mono font-bold text-accent rounded-card">
                              {inv.code}
                            </code>
                            <span className="text-muted">
                              Rolle: <strong className="text-main">{inv.role}</strong>
                              {inv.email ? ` · Für: ${inv.email}` : ''}
                            </span>
                            {inv.usedBy ? (
                              <span className="badge-neutral text-[10px]">
                                Eingelöst
                              </span>
                            ) : (
                              <span className="badge-ok text-[10px]">
                                Offen
                              </span>
                            )}
                          </div>

                          <div className="flex items-center gap-1.5">
                            {!inv.usedBy && (
                              <button
                                onClick={() => handleCopyInviteCode(inv)}
                                className="btn-action h-7 px-2 text-[11px] flex items-center gap-1"
                              >
                                <Copy className="w-3 h-3" />
                                <span>{copiedInviteId === inv.id ? 'Kopiert!' : 'Code kopieren'}</span>
                              </button>
                            )}
                            <button
                              onClick={() => handleDeleteInvite(inv.id)}
                              className="btn-icon btn-icon-danger"
                              title="Einladung löschen"
                            >
                              <Trash2 className="w-3.5 h-3.5" />
                            </button>
                          </div>
                        </div>
                      ))}
                    </div>
                  </div>
                )}
              </div>

              {/* Users List */}
              <div className="space-y-2">
                <h3 className="font-bold text-main">
                  Registrierte Benutzer ({users.length})
                </h3>
                <div className="border border-border divide-y divide-border bg-canvas rounded-card overflow-hidden">
                  {users.map((u) => (
                    <div key={u.id} className="p-3 space-y-2">
                      <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-2">
                        <div>
                          <div className="flex items-center gap-2">
                            <span className="font-bold text-main">{u.displayName}</span>
                            {!u.isActive && (
                              <span className="badge-err text-[10px]">
                                Gesperrt
                              </span>
                            )}
                          </div>
                          <p className="text-muted text-[11px]">{u.email}</p>
                        </div>

                        <div className="flex flex-wrap items-center gap-2">
                          {/* Role selector */}
                          <select
                            value={u.role}
                            disabled={!isServerAdmin && u.role === 'admin'}
                            onChange={(e) => handleChangeUserRole(u, e.target.value as UserRole)}
                            className="h-7 px-2 input-field text-[11px] bg-panel"
                            title="Benutzerrolle ändern"
                          >
                            <option value="member">Mitglied</option>
                            <option value="admin">Server-Admin</option>
                          </select>

                          {isServerAdmin && (
                            <>
                              <button
                                onClick={() =>
                                  setResetPwdUserId(resetPwdUserId === u.id ? null : u.id)
                                }
                                className="btn-action h-7 px-2 text-[11px]"
                              >
                                Passwort
                              </button>

                              {u.id !== currentUser.id && (
                                <>
                                  <button
                                    onClick={() => handleToggleUserActive(u)}
                                    className="btn-action h-7 px-2 text-[11px]"
                                  >
                                    {u.isActive ? 'Sperren' : 'Aktivieren'}
                                  </button>

                                  <button
                                    onClick={() => handleDeleteUser(u)}
                                    className="btn-icon btn-icon-danger"
                                    title="Benutzer löschen"
                                  >
                                    <Trash2 className="w-3.5 h-3.5" />
                                  </button>
                                </>
                              )}
                            </>
                          )}
                        </div>
                      </div>

                      {resetPwdUserId === u.id && (
                        <div className="flex items-center gap-2 pt-2 border-t border-border">
                          <input
                            type="password"
                            value={resetPwdVal}
                            onChange={(e) => setResetPwdVal(e.target.value)}
                            placeholder="Neues Passwort eingeben…"
                            className="flex-1 h-7 px-2 input-field"
                          />
                          <button
                            onClick={() => handleConfirmResetPassword(u.id)}
                            className="btn-primary h-7 px-3 text-[11px]"
                          >
                            Speichern
                          </button>
                          <button
                            onClick={() => setResetPwdUserId(null)}
                            className="btn-action h-7 px-2 text-[11px]"
                          >
                            Abbrechen
                          </button>
                        </div>
                      )}
                    </div>
                  ))}
                </div>
              </div>
            </div>
          )}



          {/* ================================================================= */}
          {/* SECTION 3: SERVER & SHARING-ISOLATION (SERVER-ADMIN ONLY) */}
          {/* ================================================================= */}
          {section === 'server' && isServerAdmin && (
            <div className="space-y-6">
              <div className="border-b border-border pb-3">
                <h2 className="text-sm font-bold text-main">
                  Server-Grundeinstellungen & Benutzer-Sichtbarkeit
                </h2>
                <p className="text-muted mt-0.5">
                  Als Server-Admin bestimmst du zentral für alle Nutzer, ob sie komplett isoliert
                  arbeiten, sich nur innerhalb ihrer Teams sehen oder ob alle Nutzer für alle sichtbar sind.
                </p>
              </div>

              <div className="space-y-4">
                <div>
                  <label className="block text-muted font-semibold mb-1">
                    Name der MindSift-Instanz
                  </label>
                  <div className="flex gap-2 max-w-md">
                    <input
                      type="text"
                      value={settings.instanceName}
                      onChange={(e) =>
                        setSettings((prev) => ({ ...prev, instanceName: e.target.value }))
                      }
                      className="flex-1 h-9 px-3 input-field"
                    />
                    <button
                      type="button"
                      onClick={() => handleSaveSystemSettings()}
                      className="btn-primary h-9 px-4 text-xs"
                    >
                      Speichern
                    </button>
                  </div>
                </div>

                {/* Sharing Isolation Cards */}
                <div className="space-y-2">
                  <label className="block text-muted font-semibold flex items-center gap-1.5">
                    <Users className="w-4 h-4 text-accent" />
                    <span>Globale Sharing- & Sichtbarkeits-Isolation</span>
                  </label>

                  <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
                    <button
                      type="button"
                      onClick={() => handleSaveSystemSettings({ sharingMode: 'strict_private' })}
                      className={`p-4 text-left border rounded-card transition-colors ${
                        settings.sharingMode === 'strict_private'
                          ? 'bg-canvas border-accent text-main shadow-panel'
                          : 'bg-canvas/50 border-border text-muted hover:text-main'
                      }`}
                    >
                      <p className="font-bold text-xs text-main">1. Strikt Privat (Keiner sieht andere)</p>
                      <p className="text-[11px] text-muted mt-1 leading-relaxed">
                        Jeder Benutzer arbeitet komplett für sich allein. Keine geteilten Spaces und keine
                        Benutzersuche möglich.
                      </p>
                    </button>

                    <button
                      type="button"
                      onClick={() => handleSaveSystemSettings({ sharingMode: 'teams_only' })}
                      className={`p-4 text-left border rounded-card transition-colors ${
                        settings.sharingMode === 'teams_only'
                          ? 'bg-canvas border-accent text-main shadow-panel'
                          : 'bg-canvas/50 border-border text-muted hover:text-main'
                      }`}
                    >
                      <p className="font-bold text-xs text-main">2. Teams isoliert (Empfohlen)</p>
                      <p className="text-[11px] text-muted mt-1 leading-relaxed">
                        Benutzer sehen ausschließlich Personen, mit denen sie mindestens ein gemeinsames Team
                        teilen.
                      </p>
                    </button>

                    <button
                      type="button"
                      onClick={() => handleSaveSystemSettings({ sharingMode: 'open' })}
                      className={`p-4 text-left border rounded-card transition-colors ${
                        settings.sharingMode === 'open'
                          ? 'bg-canvas border-accent text-main shadow-panel'
                          : 'bg-canvas/50 border-border text-muted hover:text-main'
                      }`}
                    >
                      <p className="font-bold text-xs text-main">3. Offen (Alle sehen alle)</p>
                      <p className="text-[11px] text-muted mt-1 leading-relaxed">
                        Alle registrierten Benutzer dieser Instanz können sich gegenseitig sehen und Spaces
                        miteinander teilen.
                      </p>
                    </button>
                  </div>
                </div>

                {/* Public Registration Toggle Switch */}
                <div className="p-4 bg-canvas border border-border rounded-card flex items-center justify-between gap-4">
                  <div className="pr-4">
                    <p className="font-bold text-main">Öffentliche Selbstregistrierung erlauben</p>
                    <p className="text-[11px] text-muted mt-0.5">
                      Wenn deaktiviert, können sich fremde Personen auf dem Login-Bildschirm nicht selbst registrieren.
                      Neue Konten erfordern dann zwingend einen Einladungscode oder müssen von einem Admin angelegt werden.
                    </p>
                  </div>

                  <div className="flex items-center gap-3 flex-shrink-0">
                    <span className={`text-xs font-medium hidden sm:inline ${settings.allowRegistration ? 'text-accent' : 'text-muted'}`}>
                      {settings.allowRegistration ? 'Aktiviert (Offen)' : 'Gesperrt (Nur Einladung)'}
                    </span>
                    <button
                      type="button"
                      role="switch"
                      aria-checked={settings.allowRegistration}
                      onClick={() =>
                        handleSaveSystemSettings({ allowRegistration: !settings.allowRegistration })
                      }
                      className={`relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-pill border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none ${
                        settings.allowRegistration ? 'bg-accent' : 'bg-panel-elevated border border-border'
                      }`}
                      title={settings.allowRegistration ? 'Selbstregistrierung deaktivieren' : 'Selbstregistrierung aktivieren'}
                    >
                      <span
                        aria-hidden="true"
                        className={`pointer-events-none inline-block h-5 w-5 transform rounded-pill bg-white shadow-md ring-0 transition duration-200 ease-in-out ${
                          settings.allowRegistration ? 'translate-x-5' : 'translate-x-0'
                        }`}
                      />
                    </button>
                  </div>
                </div>
              </div>
            </div>
          )}

          {/* ================================================================= */}
          {/* SECTION 4: E-MAIL / SMTP-SERVER (SERVER-ADMIN ONLY) */}
          {/* ================================================================= */}
          {section === 'smtp' && isServerAdmin && (
            <div className="space-y-6">
              <div className="border-b border-border pb-3 flex flex-col sm:flex-row sm:items-center justify-between gap-2">
                <div>
                  <h2 className="text-sm font-bold text-main">
                    E-Mail / SMTP-Server für Aufgaben-Alarme
                  </h2>
                  <p className="text-muted mt-0.5">
                    Konfiguriere den Postausgangsserver per Docker-Compose Environment-Variablen oder
                    direkt hier über die Oberfläche (wird persistent in der SQLite-Datenbank gespeichert).
                  </p>
                </div>

                {settings.smtpConfiguredViaEnv && (
                  <span className="badge-ok text-[11px] flex-shrink-0">
                    Docker Env erkannt
                  </span>
                )}
              </div>

              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div>
                  <label className="block text-muted font-medium mb-1">
                    SMTP Host (`SMTP_HOST`)
                  </label>
                  <input
                    type="text"
                    value={settings.smtpHost || ''}
                    onChange={(e) =>
                      setSettings((prev) => ({ ...prev, smtpHost: e.target.value }))
                    }
                    placeholder="z.B. smtp.example.com oder mail.deinedomain.de"
                    className="w-full h-9 px-3 input-field font-mono"
                  />
                </div>

                <div>
                  <label className="block text-muted font-medium mb-1">
                    SMTP Port (`SMTP_PORT`)
                  </label>
                  <input
                    type="number"
                    value={settings.smtpPort || 587}
                    onChange={(e) =>
                      setSettings((prev) => ({ ...prev, smtpPort: Number(e.target.value) }))
                    }
                    placeholder="587"
                    className="w-full h-9 px-3 input-field font-mono"
                  />
                </div>

                <div>
                  <label className="block text-muted font-medium mb-1">
                    SMTP Benutzername (`SMTP_USER`)
                  </label>
                  <input
                    type="text"
                    value={settings.smtpUser || ''}
                    onChange={(e) =>
                      setSettings((prev) => ({ ...prev, smtpUser: e.target.value }))
                    }
                    placeholder="alerts@deinedomain.de"
                    className="w-full h-9 px-3 input-field font-mono"
                  />
                </div>

                <div>
                  <label className="block text-muted font-medium mb-1">
                    SMTP Passwort (`SMTP_PASS`)
                  </label>
                  <input
                    type="password"
                    value={settings.smtpPass || ''}
                    onChange={(e) =>
                      setSettings((prev) => ({ ...prev, smtpPass: e.target.value }))
                    }
                    placeholder="••••••••••••"
                    className="w-full h-9 px-3 input-field font-mono"
                  />
                </div>

                <div>
                  <label className="block text-muted font-medium mb-1">
                    Absender-Adresse (`SMTP_FROM`)
                  </label>
                  <input
                    type="text"
                    value={settings.smtpFrom || ''}
                    onChange={(e) =>
                      setSettings((prev) => ({ ...prev, smtpFrom: e.target.value }))
                    }
                    placeholder="MindSift <alerts@deinedomain.de>"
                    className="w-full h-9 px-3 input-field"
                  />
                </div>

                <div className="flex items-center pt-5">
                  <label className="flex items-center gap-2 cursor-pointer select-none">
                    <input
                      type="checkbox"
                      checked={settings.smtpTls ?? true}
                      onChange={(e) =>
                        setSettings((prev) => ({ ...prev, smtpTls: e.target.checked }))
                      }
                      className="w-4 h-4 checkbox-square cursor-pointer"
                    />
                    <span className="text-main font-medium">
                      STARTTLS / TLS-Verschlüsselung verwenden (`SMTP_TLS=true`)
                    </span>
                  </label>
                </div>
              </div>

              <div className="flex justify-end pt-2 border-t border-border">
                <button
                  type="button"
                  onClick={() => handleSaveSystemSettings()}
                  className="btn-primary h-9 px-5 text-xs font-semibold"
                >
                  SMTP-Konfiguration in Datenbank speichern
                </button>
              </div>

              {/* Test SMTP Delivery */}
              <div className="p-4 bg-canvas border border-border rounded-card space-y-2">
                <h3 className="font-bold text-main">SMTP-Verbindung testen</h3>
                <p className="text-[11px] text-muted">
                  Sendet sofort eine Test-E-Mail mit den oben eingetragenen Daten.
                </p>
                <div className="flex flex-col sm:flex-row gap-2">
                  <input
                    type="email"
                    value={testSmtpEmail}
                    onChange={(e) => setTestSmtpEmail(e.target.value)}
                    placeholder="empfaenger@beispiel.de"
                    className="flex-1 h-8 px-3 input-field"
                  />
                  <button
                    type="button"
                    onClick={handleTestSmtp}
                    disabled={testingSmtp || !testSmtpEmail.trim()}
                    className="btn-action h-8 px-4 text-xs flex items-center justify-center gap-1.5 disabled:opacity-40"
                  >
                    <Send className="w-3.5 h-3.5 text-accent" />
                    <span>{testingSmtp ? 'Sende Test-Mail…' : 'Test-E-Mail senden'}</span>
                  </button>
                </div>
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  );
};