import { useState, useEffect, type FormEvent } from "react";
import { useAuth } from "../contexts/AuthContext";
import { useNavigate } from "react-router";
import { Masthead } from "../components/Masthead";
import { useUserSettings } from "../hooks/useUserSettings";
import {
  getApiKey,
  createApiKey,
  refreshApiKey,
  revokeApiKey,
  changePassword,
  changeEmail,
  deleteAccount,
  listRepositoryHistory,
  deleteRepositoryHistory,
  type ApiKeyInfo,
  type CreateApiKeyResponse,
  type RepositoryHistoryEntry,
} from "../lib/api";

// =============================================================================
// Password Strength Indicator
// =============================================================================

interface PasswordStrength {
  score: number;
  label: string;
  color: string;
  requirements: { met: boolean; text: string }[];
}

function getPasswordStrength(password: string): PasswordStrength {
  const requirements = [
    { met: password.length >= 6, text: "At least 6 characters" },
  ];

  const score = requirements.filter((r) => r.met).length;

  const label = score === 1 ? "Valid" : "Too short";
  const color = score === 1 ? "bg-green-500" : "bg-red-500";

  return { score, label, color, requirements };
}

// =============================================================================
// Confirmation Dialog Component
// =============================================================================

interface ConfirmDialogProps {
  isOpen: boolean;
  title: string;
  message: string;
  confirmText: string;
  confirmButtonClass?: string;
  requireInput?: string;
  inputPlaceholder?: string;
  onConfirm: () => void;
  onCancel: () => void;
}

function ConfirmDialog({
  isOpen,
  title,
  message,
  confirmText,
  confirmButtonClass = "bg-red-900/50 border-red-700 hover:bg-red-800/50",
  requireInput,
  inputPlaceholder,
  onConfirm,
  onCancel,
}: ConfirmDialogProps) {
  const [inputValue, setInputValue] = useState("");

  useEffect(() => {
    if (!isOpen) {
      setInputValue("");
    }
  }, [isOpen]);

  if (!isOpen) return null;

  const canConfirm = !requireInput || inputValue === requireInput;

  return (
    <div className="fixed inset-0 bg-black/70 flex items-center justify-center z-50">
      <div className="bg-[#0d1b2d] border border-[rgba(117,170,252,0.35)] p-6 max-w-md w-full mx-4">
        <h3 className="text-sm font-mono uppercase tracking-wide text-[#9bc3ff] mb-3">{title}</h3>
        <p className="text-[#75aafc] text-xs font-mono mb-4">{message}</p>
        {requireInput && (
          <div className="mb-4">
            <label className="block text-xs font-mono text-[#8899aa] mb-2">
              Type <span className="text-[#9bc3ff]">{requireInput}</span> to confirm:
            </label>
            <input
              type="text"
              value={inputValue}
              onChange={(e) => setInputValue(e.target.value)}
              placeholder={inputPlaceholder}
              className="w-full px-3 py-2 bg-transparent border border-[rgba(117,170,252,0.25)] text-white font-mono text-sm placeholder-[#556677] focus:outline-none focus:border-[#3f6fb3]"
            />
          </div>
        )}
        <div className="flex gap-3 justify-end">
          <button
            onClick={onCancel}
            className="px-4 py-2 border border-[rgba(117,170,252,0.25)] text-[#9bc3ff] font-mono text-xs uppercase tracking-wide hover:border-[#3f6fb3] transition-colors"
          >
            Cancel
          </button>
          <button
            onClick={onConfirm}
            disabled={!canConfirm}
            className={`px-4 py-2 border font-mono text-xs uppercase tracking-wide transition-colors disabled:opacity-50 disabled:cursor-not-allowed ${confirmButtonClass}`}
          >
            {confirmText}
          </button>
        </div>
      </div>
    </div>
  );
}

// =============================================================================
// Section Header Component
// =============================================================================

function SectionHeader({ children }: { children: React.ReactNode }) {
  return (
    <h2 className="text-[11px] font-mono uppercase tracking-wide text-[#8899aa] mb-3 pb-2 border-b border-[rgba(117,170,252,0.15)]">
      {children}
    </h2>
  );
}

// =============================================================================
// Form Input Component
// =============================================================================

function FormInput({
  label,
  type = "text",
  value,
  onChange,
  placeholder,
  required,
  disabled,
}: {
  label: string;
  type?: string;
  value: string;
  onChange: (value: string) => void;
  placeholder?: string;
  required?: boolean;
  disabled?: boolean;
}) {
  return (
    <div>
      <label className="block text-[10px] font-mono uppercase tracking-wide text-[#7788aa] mb-1">
        {label}
      </label>
      <input
        type={type}
        value={value}
        onChange={(e) => onChange(e.target.value)}
        placeholder={placeholder}
        required={required}
        disabled={disabled}
        className="w-full px-3 py-2 bg-transparent border border-[rgba(117,170,252,0.25)] text-white font-mono text-sm placeholder-[#556677] focus:outline-none focus:border-[#3f6fb3] disabled:opacity-50"
      />
    </div>
  );
}

// =============================================================================
// Alert Components
// =============================================================================

function ErrorAlert({ children }: { children: React.ReactNode }) {
  return (
    <div className="border border-red-700/50 bg-red-900/20 text-red-400 px-3 py-2 mb-4 font-mono text-xs">
      {children}
    </div>
  );
}

function SuccessAlert({ children }: { children: React.ReactNode }) {
  return (
    <div className="border border-green-700/50 bg-green-900/20 text-green-400 px-3 py-2 mb-4 font-mono text-xs">
      {children}
    </div>
  );
}

// =============================================================================
// Button Components
// =============================================================================

function PrimaryButton({
  children,
  onClick,
  disabled,
  type = "button",
}: {
  children: React.ReactNode;
  onClick?: () => void;
  disabled?: boolean;
  type?: "button" | "submit";
}) {
  return (
    <button
      type={type}
      onClick={onClick}
      disabled={disabled}
      className="px-4 py-2 bg-[#3f6fb3] border border-[#75aafc] text-white font-mono text-xs uppercase tracking-wide hover:bg-[#4a7fc3] transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
    >
      {children}
    </button>
  );
}

function SecondaryButton({
  children,
  onClick,
  disabled,
}: {
  children: React.ReactNode;
  onClick?: () => void;
  disabled?: boolean;
}) {
  return (
    <button
      type="button"
      onClick={onClick}
      disabled={disabled}
      className="px-4 py-2 border border-[rgba(117,170,252,0.25)] text-[#9bc3ff] font-mono text-xs uppercase tracking-wide hover:border-[#3f6fb3] transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
    >
      {children}
    </button>
  );
}

function DangerButton({
  children,
  onClick,
  disabled,
}: {
  children: React.ReactNode;
  onClick?: () => void;
  disabled?: boolean;
}) {
  return (
    <button
      type="button"
      onClick={onClick}
      disabled={disabled}
      className="px-4 py-2 bg-red-900/30 border border-red-700/50 text-red-400 font-mono text-xs uppercase tracking-wide hover:bg-red-800/30 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
    >
      {children}
    </button>
  );
}

// =============================================================================
// Main Settings Page
// =============================================================================

export default function SettingsPage() {
  const { user, isAuthConfigured, signOut } = useAuth();
  const navigate = useNavigate();

  // User settings (feature flags) state
  const { settings: userSettings, loading: userSettingsLoading, update: updateUserSettings } = useUserSettings();
  const [featureFlagSaving, setFeatureFlagSaving] = useState(false);
  const [featureFlagError, setFeatureFlagError] = useState<string | null>(null);

  // API Key state
  const [apiKeyInfo, setApiKeyInfo] = useState<ApiKeyInfo | null>(null);
  const [newKey, setNewKey] = useState<string | null>(null);
  const [loading, setLoading] = useState(true);
  const [actionLoading, setActionLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [copied, setCopied] = useState(false);

  // Password change state
  const [passwordForm, setPasswordForm] = useState({
    currentPassword: "",
    newPassword: "",
    confirmPassword: "",
  });
  const [passwordLoading, setPasswordLoading] = useState(false);
  const [passwordError, setPasswordError] = useState<string | null>(null);
  const [passwordSuccess, setPasswordSuccess] = useState<string | null>(null);

  // Email change state
  const [emailForm, setEmailForm] = useState({
    password: "",
    newEmail: "",
  });
  const [emailLoading, setEmailLoading] = useState(false);
  const [emailError, setEmailError] = useState<string | null>(null);
  const [emailSuccess, setEmailSuccess] = useState<string | null>(null);

  // Account deletion state
  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
  const [deletePassword, setDeletePassword] = useState("");
  const [deleteLoading, setDeleteLoading] = useState(false);
  const [deleteError, setDeleteError] = useState<string | null>(null);

  // Repository history state
  const [repoHistory, setRepoHistory] = useState<RepositoryHistoryEntry[]>([]);
  const [repoHistoryLoading, setRepoHistoryLoading] = useState(true);
  const [repoHistoryError, setRepoHistoryError] = useState<string | null>(null);
  const [deletingRepoId, setDeletingRepoId] = useState<string | null>(null);

  useEffect(() => {
    loadApiKey();
    loadRepoHistory();
  }, []);

  const loadApiKey = async () => {
    try {
      setLoading(true);
      setError(null);
      const key = await getApiKey();
      setApiKeyInfo(key);
    } catch (err) {
      setError(err instanceof Error ? err.message : "Failed to load API key");
    } finally {
      setLoading(false);
    }
  };

  const loadRepoHistory = async () => {
    try {
      setRepoHistoryError(null);
      const response = await listRepositoryHistory();
      setRepoHistory(response.entries);
    } catch (err) {
      setRepoHistoryError(err instanceof Error ? err.message : "Failed to load repository history");
    } finally {
      setRepoHistoryLoading(false);
    }
  };

  const handleDeleteRepoHistory = async (id: string) => {
    try {
      setDeletingRepoId(id);
      await deleteRepositoryHistory(id);
      setRepoHistory((prev) => prev.filter((entry) => entry.id !== id));
    } catch (err) {
      setRepoHistoryError(err instanceof Error ? err.message : "Failed to delete entry");
    } finally {
      setDeletingRepoId(null);
    }
  };

  const handleCreate = async () => {
    try {
      setActionLoading(true);
      setError(null);
      setNewKey(null);
      const response: CreateApiKeyResponse = await createApiKey("Web UI");
      setNewKey(response.key);
      setApiKeyInfo({
        id: response.id,
        prefix: response.prefix,
        name: response.name,
        lastUsedAt: null,
        createdAt: response.createdAt,
      });
    } catch (err) {
      setError(err instanceof Error ? err.message : "Failed to create API key");
    } finally {
      setActionLoading(false);
    }
  };

  const handleRefresh = async () => {
    try {
      setActionLoading(true);
      setError(null);
      setNewKey(null);
      const response = await refreshApiKey("Web UI (Refreshed)");
      setNewKey(response.key);
      setApiKeyInfo({
        id: response.id,
        prefix: response.prefix,
        name: response.name,
        lastUsedAt: null,
        createdAt: response.createdAt,
      });
    } catch (err) {
      setError(err instanceof Error ? err.message : "Failed to refresh API key");
    } finally {
      setActionLoading(false);
    }
  };

  const handleRevoke = async () => {
    if (!confirm("Are you sure you want to revoke this API key? Any applications using it will stop working.")) {
      return;
    }
    try {
      setActionLoading(true);
      setError(null);
      setNewKey(null);
      await revokeApiKey();
      setApiKeyInfo(null);
    } catch (err) {
      setError(err instanceof Error ? err.message : "Failed to revoke API key");
    } finally {
      setActionLoading(false);
    }
  };

  const copyToClipboard = async () => {
    if (!newKey) return;
    try {
      await navigator.clipboard.writeText(newKey);
      setCopied(true);
      setTimeout(() => setCopied(false), 2000);
    } catch (err) {
      console.error("Failed to copy:", err);
    }
  };

  // Password change handlers
  const handlePasswordChange = async (e: FormEvent) => {
    e.preventDefault();
    setPasswordError(null);
    setPasswordSuccess(null);

    if (passwordForm.newPassword !== passwordForm.confirmPassword) {
      setPasswordError("New passwords do not match");
      return;
    }

    const strength = getPasswordStrength(passwordForm.newPassword);
    if (strength.score < 1) {
      setPasswordError("Password must be at least 6 characters");
      return;
    }

    try {
      setPasswordLoading(true);
      await changePassword(passwordForm.currentPassword, passwordForm.newPassword);
      setPasswordSuccess("Password changed successfully. Please sign in with your new password.");
      setPasswordForm({ currentPassword: "", newPassword: "", confirmPassword: "" });
      setTimeout(async () => {
        await signOut();
        navigate("/login");
      }, 1500);
    } catch (err) {
      setPasswordError(err instanceof Error ? err.message : "Failed to change password");
    } finally {
      setPasswordLoading(false);
    }
  };

  // Email change handlers
  const handleEmailChange = async (e: FormEvent) => {
    e.preventDefault();
    setEmailError(null);
    setEmailSuccess(null);

    if (!emailForm.newEmail.includes("@")) {
      setEmailError("Please enter a valid email address");
      return;
    }

    try {
      setEmailLoading(true);
      await changeEmail(emailForm.password, emailForm.newEmail);
      setEmailSuccess("Email changed successfully");
      setEmailForm({ password: "", newEmail: "" });
    } catch (err) {
      setEmailError(err instanceof Error ? err.message : "Failed to change email");
    } finally {
      setEmailLoading(false);
    }
  };

  // Account deletion handlers
  const DELETE_CONFIRMATION = "DELETE MY ACCOUNT";

  const handleDeleteAccount = async () => {
    try {
      setDeleteLoading(true);
      setDeleteError(null);
      await deleteAccount(deletePassword, DELETE_CONFIRMATION);
      await signOut();
      navigate("/login");
    } catch (err) {
      setDeleteError(err instanceof Error ? err.message : "Failed to delete account");
      setDeleteLoading(false);
    }
  };

  // Feature flag toggle handlers
  const handleToggleDocumentMode = async () => {
    if (featureFlagSaving) return;
    setFeatureFlagError(null);
    setFeatureFlagSaving(true);
    try {
      const next = !(userSettings?.documentModeEnabled ?? false);
      await updateUserSettings({ documentModeEnabled: next });
    } catch (err) {
      setFeatureFlagError(err instanceof Error ? err.message : "Failed to update setting");
    } finally {
      setFeatureFlagSaving(false);
    }
  };

  const passwordStrength = getPasswordStrength(passwordForm.newPassword);

  return (
    <div className="relative z-10 min-h-screen flex flex-col bg-[#0a1628]">
      <Masthead showNav />

      <main className="flex-1 max-w-4xl mx-auto p-6 w-full">
        {/* Page Header */}
        <div className="mb-8">
          <h1 className="text-sm font-mono uppercase tracking-wide text-[#9bc3ff]">Settings</h1>
          <div className="h-px bg-[rgba(117,170,252,0.35)] mt-2" />
        </div>

        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
          {/* Left Column */}
          <div className="space-y-6">
            {/* Account Info */}
            <section className="border border-[rgba(117,170,252,0.25)] bg-[#0d1b2d] p-4">
              <SectionHeader>Account</SectionHeader>
              {isAuthConfigured && user ? (
                <div className="space-y-2 font-mono text-xs">
                  <div className="flex justify-between">
                    <span className="text-[#7788aa]">Email</span>
                    <span className="text-[#9bc3ff]">{user.email}</span>
                  </div>
                  <div className="flex justify-between">
                    <span className="text-[#7788aa]">User ID</span>
                    <span className="text-[#75aafc] text-[10px]">{user.id}</span>
                  </div>
                </div>
              ) : (
                <p className="text-[#7788aa] font-mono text-xs">
                  {isAuthConfigured
                    ? "Not signed in"
                    : "Authentication not configured (API key mode)"}
                </p>
              )}
            </section>

            {/* API Key Section */}
            <section className="border border-[rgba(117,170,252,0.25)] bg-[#0d1b2d] p-4">
              <SectionHeader>API Key</SectionHeader>
              <p className="text-[#7788aa] font-mono text-[10px] mb-4">
                Authenticate daemon and CLI tools. One active key at a time.
              </p>

              {error && <ErrorAlert>{error}</ErrorAlert>}

              {newKey && (
                <div className="border border-green-700/50 bg-green-900/20 p-3 mb-4">
                  <p className="text-green-400 font-mono text-[10px] mb-2">
                    Key created. Copy now - won't be shown again.
                  </p>
                  <div className="flex items-center gap-2">
                    <code className="flex-1 bg-black/50 px-2 py-1 text-[10px] font-mono text-green-400 break-all">
                      {newKey}
                    </code>
                    <button
                      onClick={copyToClipboard}
                      className="px-2 py-1 bg-green-900/50 border border-green-700/50 text-green-400 font-mono text-[10px] uppercase hover:bg-green-800/50 transition-colors"
                    >
                      {copied ? "Copied" : "Copy"}
                    </button>
                  </div>
                </div>
              )}

              {loading ? (
                <p className="text-[#7788aa] font-mono text-xs">Loading...</p>
              ) : apiKeyInfo ? (
                <div className="space-y-3">
                  <div className="font-mono text-xs">
                    <div className="flex justify-between mb-1">
                      <span className="text-[#7788aa]">Prefix</span>
                      <code className="text-[#75aafc]">{apiKeyInfo.prefix}...</code>
                    </div>
                    <div className="flex justify-between mb-1">
                      <span className="text-[#7788aa]">Created</span>
                      <span className="text-[#9bc3ff]">
                        {new Date(apiKeyInfo.createdAt).toLocaleDateString()}
                      </span>
                    </div>
                    {apiKeyInfo.lastUsedAt && (
                      <div className="flex justify-between">
                        <span className="text-[#7788aa]">Last used</span>
                        <span className="text-[#9bc3ff]">
                          {new Date(apiKeyInfo.lastUsedAt).toLocaleDateString()}
                        </span>
                      </div>
                    )}
                  </div>
                  <div className="flex gap-2 pt-2">
                    <SecondaryButton onClick={handleRefresh} disabled={actionLoading}>
                      {actionLoading ? "..." : "Rotate"}
                    </SecondaryButton>
                    <DangerButton onClick={handleRevoke} disabled={actionLoading}>
                      {actionLoading ? "..." : "Revoke"}
                    </DangerButton>
                  </div>
                </div>
              ) : (
                <div>
                  <p className="text-[#7788aa] font-mono text-xs mb-3">No API key configured.</p>
                  <PrimaryButton onClick={handleCreate} disabled={actionLoading}>
                    {actionLoading ? "Creating..." : "Create API Key"}
                  </PrimaryButton>
                </div>
              )}
            </section>

            {/* Daemons Link */}
            <section className="border border-[rgba(117,170,252,0.25)] bg-[#0d1b2d] p-4">
              <SectionHeader>Daemons</SectionHeader>
              <p className="text-[#7788aa] font-mono text-[10px] mb-3">
                Daemon management has moved to its own page.
              </p>
              <a href="/daemons" className="text-[#75aafc] hover:text-[#9bc3ff] text-xs font-mono">
                Go to Daemons &rarr;
              </a>
            </section>

            {/* Repository History */}
            <section className="border border-[rgba(117,170,252,0.25)] bg-[#0d1b2d] p-4">
              <div className="flex items-center justify-between mb-3 pb-2 border-b border-[rgba(117,170,252,0.15)]">
                <div className="flex items-center gap-2">
                  <h2 className="text-[11px] font-mono uppercase tracking-wide text-[#8899aa]">
                    Repository History
                  </h2>
                  {repoHistory.length > 0 && (
                    <span className="text-[10px] font-mono text-[#556677]">
                      ({repoHistory.length} saved)
                    </span>
                  )}
                </div>
                <button
                  onClick={loadRepoHistory}
                  disabled={repoHistoryLoading}
                  className="text-[10px] font-mono text-[#75aafc] hover:text-[#9bc3ff] disabled:opacity-50"
                  title="Refresh"
                >
                  {repoHistoryLoading ? "..." : "↻"}
                </button>
              </div>
              <p className="text-[#7788aa] font-mono text-[10px] mb-3">
                Previously used repositories will appear as suggestions when adding repos to contracts.
              </p>

              {repoHistoryError && <ErrorAlert>{repoHistoryError}</ErrorAlert>}

              {repoHistoryLoading && repoHistory.length === 0 ? (
                <p className="text-[#7788aa] font-mono text-xs">Loading...</p>
              ) : repoHistory.length === 0 ? (
                <div className="text-center py-4">
                  <p className="text-[#7788aa] font-mono text-xs mb-2">No repository history</p>
                  <p className="text-[#556677] font-mono text-[10px]">
                    Add repositories to contracts to build history
                  </p>
                </div>
              ) : (
                <div className="space-y-2 max-h-[300px] overflow-y-auto">
                  {repoHistory.map((entry) => (
                    <div
                      key={entry.id}
                      className="border border-[rgba(117,170,252,0.15)] bg-[#0a1525] p-3"
                    >
                      <div className="flex items-start justify-between gap-2">
                        <div className="flex-1 min-w-0">
                          <div className="flex items-center gap-2 mb-1">
                            <span className="font-mono text-xs text-[#9bc3ff] truncate">
                              {entry.name}
                            </span>
                            <span
                              className={`text-[10px] font-mono uppercase px-1.5 py-0.5 border ${
                                entry.sourceType === "remote"
                                  ? "text-cyan-400 border-cyan-700/50 bg-cyan-900/20"
                                  : "text-green-400 border-green-700/50 bg-green-900/20"
                              }`}
                            >
                              {entry.sourceType}
                            </span>
                          </div>
                          <div className="font-mono text-[10px] text-[#556677] truncate mb-1">
                            {entry.repositoryUrl || entry.localPath}
                          </div>
                          <div className="flex items-center gap-3 font-mono text-[10px] text-[#7788aa]">
                            <span>Used {entry.useCount}×</span>
                            <span>
                              Last: {new Date(entry.lastUsedAt).toLocaleDateString()}
                            </span>
                          </div>
                        </div>
                        <button
                          onClick={() => handleDeleteRepoHistory(entry.id)}
                          disabled={deletingRepoId === entry.id}
                          className="p-1 font-mono text-[10px] text-[#555] hover:text-red-400 transition-colors disabled:opacity-50"
                          title="Delete from history"
                        >
                          {deletingRepoId === entry.id ? "..." : "×"}
                        </button>
                      </div>
                    </div>
                  ))}
                </div>
              )}
            </section>
          </div>

          {/* Right Column */}
          <div className="space-y-6">
            {/* Password Change */}
            {isAuthConfigured && user && (
              <section className="border border-[rgba(117,170,252,0.25)] bg-[#0d1b2d] p-4">
                <SectionHeader>Change Password</SectionHeader>
                {passwordError && <ErrorAlert>{passwordError}</ErrorAlert>}
                {passwordSuccess && <SuccessAlert>{passwordSuccess}</SuccessAlert>}
                <form onSubmit={handlePasswordChange} className="space-y-3">
                  <FormInput
                    label="Current Password"
                    type="password"
                    value={passwordForm.currentPassword}
                    onChange={(v) => setPasswordForm({ ...passwordForm, currentPassword: v })}
                    required
                  />
                  <FormInput
                    label="New Password"
                    type="password"
                    value={passwordForm.newPassword}
                    onChange={(v) => setPasswordForm({ ...passwordForm, newPassword: v })}
                    required
                  />
                  {passwordForm.newPassword && (
                    <div className="space-y-1">
                      <div className="flex items-center gap-2">
                        <div className="flex-1 h-1 bg-[#1a2a3a]">
                          <div
                            className={`h-full transition-all ${passwordStrength.color}`}
                            style={{ width: `${passwordStrength.score * 100}%` }}
                          />
                        </div>
                        <span className="text-[10px] font-mono text-[#9bc3ff]">
                          {passwordStrength.label}
                        </span>
                      </div>
                    </div>
                  )}
                  <FormInput
                    label="Confirm Password"
                    type="password"
                    value={passwordForm.confirmPassword}
                    onChange={(v) => setPasswordForm({ ...passwordForm, confirmPassword: v })}
                    required
                  />
                  {passwordForm.confirmPassword &&
                    passwordForm.newPassword !== passwordForm.confirmPassword && (
                      <p className="text-red-400 font-mono text-[10px]">Passwords do not match</p>
                    )}
                  <div className="pt-2">
                    <PrimaryButton
                      type="submit"
                      disabled={passwordLoading || passwordStrength.score < 1}
                    >
                      {passwordLoading ? "Changing..." : "Change Password"}
                    </PrimaryButton>
                  </div>
                </form>
              </section>
            )}

            {/* Email Change */}
            {isAuthConfigured && user && (
              <section className="border border-[rgba(117,170,252,0.25)] bg-[#0d1b2d] p-4">
                <SectionHeader>Change Email</SectionHeader>
                {emailError && <ErrorAlert>{emailError}</ErrorAlert>}
                {emailSuccess && <SuccessAlert>{emailSuccess}</SuccessAlert>}
                <form onSubmit={handleEmailChange} className="space-y-3">
                  <FormInput
                    label="New Email"
                    type="email"
                    value={emailForm.newEmail}
                    onChange={(v) => setEmailForm({ ...emailForm, newEmail: v })}
                    placeholder="new@example.com"
                    required
                  />
                  <FormInput
                    label="Password (to confirm)"
                    type="password"
                    value={emailForm.password}
                    onChange={(v) => setEmailForm({ ...emailForm, password: v })}
                    required
                  />
                  <div className="pt-2">
                    <PrimaryButton type="submit" disabled={emailLoading}>
                      {emailLoading ? "Changing..." : "Change Email"}
                    </PrimaryButton>
                  </div>
                </form>
              </section>
            )}

            {/* Feature Flags (POC) */}
            <section className="border border-[rgba(117,170,252,0.25)] bg-[#0d1b2d] p-4">
              <SectionHeader>Feature Flags (POC)</SectionHeader>
              {featureFlagError && <ErrorAlert>{featureFlagError}</ErrorAlert>}
              <div className="flex items-start gap-3">
                <button
                  type="button"
                  role="switch"
                  aria-checked={userSettings?.documentModeEnabled ?? false}
                  aria-label="Document Mode for directives"
                  onClick={handleToggleDocumentMode}
                  disabled={userSettingsLoading || featureFlagSaving}
                  className={`relative shrink-0 mt-0.5 w-10 h-5 border transition-colors disabled:opacity-50 disabled:cursor-not-allowed ${
                    userSettings?.documentModeEnabled
                      ? "bg-[#3f6fb3] border-[#75aafc]"
                      : "bg-[#0a1628] border-[rgba(117,170,252,0.35)]"
                  }`}
                >
                  <span
                    className={`absolute top-0.5 left-0.5 w-3.5 h-3.5 transition-transform ${
                      userSettings?.documentModeEnabled
                        ? "translate-x-5 bg-white"
                        : "translate-x-0 bg-[#9bc3ff]"
                    }`}
                  />
                </button>
                <div className="flex-1 min-w-0">
                  <div className="font-mono text-xs text-[#9bc3ff] mb-1">
                    Document Mode for directives
                  </div>
                  <p className="font-mono text-[10px] text-[#7788aa] leading-snug">
                    Replaces the tabular directives UI with a Lexical-based interactive
                    document editor. Proof of concept; expect rough edges.
                  </p>
                  {(userSettingsLoading || featureFlagSaving) && (
                    <p className="font-mono text-[10px] text-[#556677] mt-1">
                      {userSettingsLoading ? "Loading..." : "Saving..."}
                    </p>
                  )}
                </div>
              </div>
            </section>

            {/* Danger Zone */}
            {isAuthConfigured && user && (
              <section className="border border-red-900/50 bg-[#0d1b2d] p-4">
                <h2 className="text-[11px] font-mono uppercase tracking-wide text-red-400 mb-3 pb-2 border-b border-red-900/30">
                  Danger Zone
                </h2>
                <p className="text-[#7788aa] font-mono text-[10px] mb-3">
                  Permanently delete your account and all data. This cannot be undone.
                </p>
                {deleteError && <ErrorAlert>{deleteError}</ErrorAlert>}
                <div className="space-y-3">
                  <FormInput
                    label="Password"
                    type="password"
                    value={deletePassword}
                    onChange={setDeletePassword}
                    placeholder="Enter password to continue"
                  />
                  <DangerButton
                    onClick={() => setDeleteDialogOpen(true)}
                    disabled={!deletePassword || deleteLoading}
                  >
                    {deleteLoading ? "Deleting..." : "Delete Account"}
                  </DangerButton>
                </div>
              </section>
            )}
          </div>
        </div>
      </main>

      {/* Delete Confirmation Dialog */}
      <ConfirmDialog
        isOpen={deleteDialogOpen}
        title="Delete Account"
        message="This will permanently delete your account and all your data. This action cannot be undone."
        confirmText="Delete"
        confirmButtonClass="bg-red-900/50 border border-red-700 text-red-400 hover:bg-red-800/50"
        requireInput={DELETE_CONFIRMATION}
        inputPlaceholder={`Type "${DELETE_CONFIRMATION}" to confirm`}
        onConfirm={() => {
          setDeleteDialogOpen(false);
          handleDeleteAccount();
        }}
        onCancel={() => setDeleteDialogOpen(false)}
      />
    </div>
  );
}