import { useEffect, useMemo, useState } from "react";
import { createPortal } from "react-dom";
import QRCode from "qrcode";
import { listBlockedUsers, updateMyProfile } from "../api/users";
import { requestUploadUrl, uploadToPresignedUrl } from "../api/chats";
import {
  disableTwoFactor,
  enableTwoFactor,
  getTwoFactorRecoveryStatus,
  listSessions,
  regenerateTwoFactorRecoveryCodes,
  revokeAllSessions,
  revokeSession,
  setupTwoFactor
} from "../api/auth";
import { getNotifications, type NotificationItem } from "../api/notifications";
import type { AuthSession, AuthUser } from "../chat/types";
import { useAuthStore } from "../store/authStore";
import { useUiStore } from "../store/uiStore";
import { AppPreferences, getAppPreferences, updateAppPreferences } from "../utils/preferences";
import { AvatarCropModal } from "./AvatarCropModal";

type SettingsPage = "main" | "general" | "notifications" | "privacy";

interface Props {
  open: boolean;
  onClose: () => void;
}

export function SettingsPanel({ open, onClose }: Props) {
  const me = useAuthStore((s) => s.me);
  const logout = useAuthStore((s) => s.logout);
  const showToast = useUiStore((s) => s.showToast);
  const [page, setPage] = useState<SettingsPage>("main");
  const [prefs, setPrefs] = useState<AppPreferences>(() => getAppPreferences());
  const [blockedCount, setBlockedCount] = useState(0);
  const [savingPrivacy, setSavingPrivacy] = useState(false);
  const [privacyPrivateMessages, setPrivacyPrivateMessages] = useState<"everyone" | "contacts" | "nobody">("everyone");
  const [sessions, setSessions] = useState<AuthSession[]>([]);
  const [sessionsLoading, setSessionsLoading] = useState(false);
  const [sessionsError, setSessionsError] = useState<string | null>(null);
  const [revokeAllLoading, setRevokeAllLoading] = useState(false);
  const [revokingSessionIds, setRevokingSessionIds] = useState<string[]>([]);
  const [twofaCode, setTwofaCode] = useState("");
  const [twofaSecret, setTwofaSecret] = useState<string | null>(null);
  const [twofaUrl, setTwofaUrl] = useState<string | null>(null);
  const [twofaQrUrl, setTwofaQrUrl] = useState<string | null>(null);
  const [twofaError, setTwofaError] = useState<string | null>(null);
  const [recoveryRemaining, setRecoveryRemaining] = useState<number>(0);
  const [recoveryCodes, setRecoveryCodes] = useState<string[]>([]);
  const [privacyLastSeen, setPrivacyLastSeen] = useState<"everyone" | "contacts" | "nobody">("everyone");
  const [privacyAvatar, setPrivacyAvatar] = useState<"everyone" | "contacts" | "nobody">("everyone");
  const [privacyGroupInvites, setPrivacyGroupInvites] = useState<"everyone" | "contacts" | "nobody">("everyone");
  const [notificationItems, setNotificationItems] = useState<NotificationItem[]>([]);
  const [notificationItemsLoading, setNotificationItemsLoading] = useState(false);
  const [profileDraft, setProfileDraft] = useState({
    name: "",
    username: "",
    bio: "",
    avatarUrl: "",
  });
  const [profileAvatarUploading, setProfileAvatarUploading] = useState(false);
  const [avatarCropFile, setAvatarCropFile] = useState<File | null>(null);

  useEffect(() => {
    if (!me) {
      return;
    }
    setPrivacyPrivateMessages(me.privacy_private_messages || (me.allow_private_messages ? "everyone" : "nobody"));
    setPrivacyLastSeen(me.privacy_last_seen || "everyone");
    setPrivacyAvatar(me.privacy_avatar || "everyone");
    setPrivacyGroupInvites(me.privacy_group_invites || "everyone");
    setProfileDraft({
      name: me.name || "",
      username: me.username || "",
      bio: me.bio || "",
      avatarUrl: me.avatar_url || "",
    });
  }, [me]);

  useEffect(() => {
    if (!twofaUrl) {
      setTwofaQrUrl(null);
      return;
    }
    let cancelled = false;
    void (async () => {
      try {
        const url = await QRCode.toDataURL(twofaUrl, { margin: 1, width: 192 });
        if (!cancelled) {
          setTwofaQrUrl(url);
        }
      } catch {
        if (!cancelled) {
          setTwofaQrUrl(null);
        }
      }
    })();
    return () => {
      cancelled = true;
    };
  }, [twofaUrl]);

  useEffect(() => {
    if (!open) {
      return;
    }
    setPrefs(getAppPreferences());
  }, [open]);

  useEffect(() => {
    if (!open || page !== "privacy") {
      return;
    }
    let cancelled = false;
    void (async () => {
      try {
        const blocked = await listBlockedUsers();
        if (!cancelled) {
          setBlockedCount(blocked.length);
        }
      } catch {
        if (!cancelled) {
          setBlockedCount(0);
        }
      }
    })();
    return () => {
      cancelled = true;
    };
  }, [open, page]);

  useEffect(() => {
    if (!open || page !== "privacy" || !me?.twofa_enabled) {
      setRecoveryRemaining(0);
      return;
    }
    let cancelled = false;
    void (async () => {
      try {
        const status = await getTwoFactorRecoveryStatus();
        if (!cancelled) {
          setRecoveryRemaining(status.remaining_codes);
        }
      } catch {
        if (!cancelled) {
          setRecoveryRemaining(0);
        }
      }
    })();
    return () => {
      cancelled = true;
    };
  }, [open, page, me?.twofa_enabled]);

  useEffect(() => {
    if (!open || page !== "notifications") {
      return;
    }
    let cancelled = false;
    setNotificationItemsLoading(true);
    void (async () => {
      try {
        const rows = await getNotifications(30);
        if (!cancelled) {
          setNotificationItems(rows);
        }
      } catch {
        if (!cancelled) {
          setNotificationItems([]);
        }
      } finally {
        if (!cancelled) {
          setNotificationItemsLoading(false);
        }
      }
    })();
    return () => {
      cancelled = true;
    };
  }, [open, page]);

  useEffect(() => {
    if (!open || page !== "privacy") {
      return;
    }
    let cancelled = false;
    setSessionsLoading(true);
    setSessionsError(null);
    void (async () => {
      try {
        const rows = await listSessions();
        if (!cancelled) {
          setSessions(rows);
        }
      } catch {
        if (!cancelled) {
          setSessions([]);
          setSessionsError("Failed to load sessions");
        }
      } finally {
        if (!cancelled) {
          setSessionsLoading(false);
        }
      }
    })();
    return () => {
      cancelled = true;
    };
  }, [open, page]);

  const title = useMemo(() => {
    if (page === "general") return "General";
    if (page === "notifications") return "Notifications";
    if (page === "privacy") return "Privacy and Security";
    return "Settings";
  }, [page]);

  if (!open || !me) {
    return null;
  }

  function updatePrefs(patch: Partial<AppPreferences>) {
    setPrefs(updateAppPreferences(patch));
  }

  const notificationStatus = "Notification" in window ? Notification.permission : "denied";

  async function uploadAvatar(file: File) {
    setProfileAvatarUploading(true);
    try {
      const upload = await requestUploadUrl(file);
      await uploadToPresignedUrl(upload.upload_url, upload.required_headers, file);
      setProfileDraft((prev) => ({ ...prev, avatarUrl: upload.file_url }));
      showToast("Avatar uploaded");
    } catch {
      showToast("Avatar upload failed");
    } finally {
      setProfileAvatarUploading(false);
    }
  }

  async function copyRecoveryCodes(codes: string[]) {
    if (!codes.length) {
      showToast("No recovery codes to copy");
      return;
    }
    try {
      await navigator.clipboard.writeText(codes.join("\n"));
      showToast("Recovery codes copied");
    } catch {
      showToast("Failed to copy recovery codes");
    }
  }

  function downloadRecoveryCodes(codes: string[]) {
    if (!codes.length) {
      showToast("No recovery codes to download");
      return;
    }
    const content = `BenyaMessenger 2FA Recovery Codes\n\n${codes.join("\n")}\n`;
    const blob = new Blob([content], { type: "text/plain;charset=utf-8" });
    const url = URL.createObjectURL(blob);
    const link = document.createElement("a");
    link.href = url;
    link.download = "benya-recovery-codes.txt";
    document.body.appendChild(link);
    link.click();
    link.remove();
    URL.revokeObjectURL(url);
    showToast("Recovery codes downloaded");
  }

  return createPortal(
    <div className="fixed inset-0 z-[150] bg-slate-950/60" onClick={onClose}>
      <aside
        className="absolute left-0 top-0 flex h-full w-full max-w-md flex-col border-r border-slate-700/70 bg-slate-900 shadow-2xl"
        onClick={(event) => event.stopPropagation()}
      >
        <div className="flex items-center justify-between border-b border-slate-700/60 px-4 py-3">
          <div className="flex items-center gap-2">
            {page !== "main" ? (
              <button className="rounded bg-slate-700 px-2 py-1 text-xs" onClick={() => setPage("main")} type="button">
                Back
              </button>
            ) : null}
            <p className="text-lg font-semibold">{title}</p>
          </div>
          <button className="rounded bg-slate-700 px-2 py-1 text-xs" onClick={onClose} type="button">
            Close
          </button>
        </div>

        <div className="tg-scrollbar min-h-0 flex-1 overflow-y-auto">
          {page === "main" ? (
            <>
              <section className="border-b border-slate-700/60 px-4 py-4">
                <p className="mb-2 text-xs uppercase tracking-wide text-slate-400">Profile</p>
                <div className="space-y-2">
                  <div className="flex items-center gap-3 rounded border border-slate-700/70 bg-slate-800/40 p-2">
                    {profileDraft.avatarUrl.trim() ? (
                      <img alt="avatar preview" className="h-12 w-12 rounded-full object-cover" src={profileDraft.avatarUrl.trim()} />
                    ) : (
                      <div className="flex h-12 w-12 flex-col items-center justify-center rounded-full bg-slate-700 text-[10px] leading-[1.05] text-slate-300">
                        <span>No</span>
                        <span>avatar</span>
                      </div>
                    )}
                    <div className="flex flex-wrap items-center gap-2">
                      <label className="cursor-pointer rounded bg-sky-500 px-3 py-1.5 text-xs font-semibold text-slate-950">
                        {profileAvatarUploading ? "Uploading..." : "Upload avatar"}
                        <input
                          accept="image/*"
                          className="hidden"
                          disabled={profileAvatarUploading}
                          onChange={(e) => {
                            const file = e.target.files?.[0];
                            e.currentTarget.value = "";
                            if (!file) {
                              return;
                            }
                            setAvatarCropFile(file);
                          }}
                          type="file"
                        />
                      </label>
                      {profileDraft.avatarUrl.trim() ? (
                        <button
                          className="rounded bg-slate-700 px-3 py-1.5 text-xs"
                          onClick={() => setProfileDraft((prev) => ({ ...prev, avatarUrl: "" }))}
                          type="button"
                        >
                          Remove
                        </button>
                      ) : null}
                    </div>
                  </div>
                  <input
                    className="w-full rounded bg-slate-800 px-3 py-2 text-sm"
                    placeholder="Name"
                    value={profileDraft.name}
                    onChange={(e) => setProfileDraft((prev) => ({ ...prev, name: e.target.value }))}
                  />
                  <input
                    className="w-full rounded bg-slate-800 px-3 py-2 text-sm"
                    placeholder="Username"
                    value={profileDraft.username}
                    onChange={(e) => setProfileDraft((prev) => ({ ...prev, username: e.target.value.replace("@", "") }))}
                  />
                  <input
                    className="w-full rounded bg-slate-800 px-3 py-2 text-sm"
                    placeholder="Bio"
                    value={profileDraft.bio}
                    onChange={(e) => setProfileDraft((prev) => ({ ...prev, bio: e.target.value }))}
                  />
                  <input
                    className="w-full rounded bg-slate-800 px-3 py-2 text-sm"
                    placeholder="Avatar URL (optional)"
                    value={profileDraft.avatarUrl}
                    onChange={(e) => setProfileDraft((prev) => ({ ...prev, avatarUrl: e.target.value }))}
                  />
                  <button
                    className="w-full rounded bg-sky-500 px-3 py-2 text-sm font-semibold text-slate-950 disabled:opacity-60"
                    disabled={profileAvatarUploading}
                    onClick={async () => {
                      const updated = await updateMyProfile({
                        name: profileDraft.name.trim() || undefined,
                        username: profileDraft.username.trim() || undefined,
                        bio: profileDraft.bio.trim() || null,
                        avatar_url: profileDraft.avatarUrl.trim() || null,
                      });
                      useAuthStore.setState({ me: updated as AuthUser });
                    }}
                    type="button"
                  >
                    Save profile
                  </button>
                </div>
              </section>

              <section className="border-b border-slate-700/60 py-1">
                <SettingsRow label="General Settings" value={`${prefs.messageFontSize}px, ${prefs.theme}`} onClick={() => setPage("general")} />
                <SettingsRow
                  label="Notifications"
                  value={prefs.webNotifications ? "Enabled" : "Disabled"}
                  onClick={() => setPage("notifications")}
                />
                <SettingsRow
                  label="Privacy and Security"
                  value={
                    privacyPrivateMessages === "everyone"
                      ? "Everybody can message"
                      : privacyPrivateMessages === "contacts"
                        ? "Only contacts can message"
                        : "Messages disabled"
                  }
                  onClick={() => setPage("privacy")}
                />
              </section>
            </>
          ) : null}

          {page === "general" ? (
            <div className="space-y-4 px-4 py-3">
              <section className="rounded border border-slate-700/70 bg-slate-800/50 p-3">
                <p className="mb-2 text-xs uppercase tracking-wide text-slate-400">Settings</p>
                <p className="mb-2 text-sm">Message Font Size</p>
                <div className="flex items-center gap-3">
                  <input
                    className="w-full"
                    min={12}
                    max={24}
                    step={1}
                    type="range"
                    value={prefs.messageFontSize}
                    onChange={(e) => updatePrefs({ messageFontSize: Number(e.target.value) })}
                  />
                  <span className="text-sm">{prefs.messageFontSize}</span>
                </div>
              </section>

              <section className="rounded border border-slate-700/70 bg-slate-800/50 p-3">
                <p className="mb-2 text-xs uppercase tracking-wide text-slate-400">Theme</p>
                <RadioOption checked={prefs.theme === "light"} label="Light" onChange={() => updatePrefs({ theme: "light" })} />
                <RadioOption checked={prefs.theme === "dark"} label="Dark" onChange={() => updatePrefs({ theme: "dark" })} />
                <RadioOption checked={prefs.theme === "system"} label="System" onChange={() => updatePrefs({ theme: "system" })} />
              </section>

              <section className="rounded border border-slate-700/70 bg-slate-800/50 p-3">
                <p className="mb-2 text-xs uppercase tracking-wide text-slate-400">Keyboard</p>
                <RadioOption checked={prefs.sendMode === "enter"} label="Send with Enter (Shift+Enter new line)" onChange={() => updatePrefs({ sendMode: "enter" })} />
                <RadioOption checked={prefs.sendMode === "ctrl_enter"} label="Send with Ctrl+Enter (Enter new line)" onChange={() => updatePrefs({ sendMode: "ctrl_enter" })} />
              </section>
            </div>
          ) : null}

          {page === "notifications" ? (
            <div className="space-y-4 px-4 py-3">
              <section className="rounded border border-slate-700/70 bg-slate-800/50 p-3">
                <p className="mb-2 text-xs uppercase tracking-wide text-slate-400">Web Notifications</p>
                <CheckboxOption
                  checked={prefs.webNotifications}
                  label={`Web Notifications (${notificationStatus})`}
                  onChange={async (checked) => {
                    updatePrefs({ webNotifications: checked });
                    if (checked && "Notification" in window && Notification.permission === "default") {
                      await Notification.requestPermission();
                    }
                  }}
                />
                <CheckboxOption checked={prefs.notificationSound} label="Notification Sound" onChange={(checked) => updatePrefs({ notificationSound: checked })} />
                <CheckboxOption checked={prefs.messagePreview} label="Message Preview" onChange={(checked) => updatePrefs({ messagePreview: checked })} />
              </section>

              <section className="rounded border border-slate-700/70 bg-slate-800/50 p-3">
                <p className="mb-2 text-xs uppercase tracking-wide text-slate-400">Chats</p>
                <CheckboxOption checked={prefs.privateNotifications} label="Notifications for private chats" onChange={(checked) => updatePrefs({ privateNotifications: checked })} />
                <CheckboxOption checked={prefs.groupNotifications} label="Notifications for groups" onChange={(checked) => updatePrefs({ groupNotifications: checked })} />
                <CheckboxOption checked={prefs.channelNotifications} label="Notifications for channels" onChange={(checked) => updatePrefs({ channelNotifications: checked })} />
              </section>

              <section className="rounded border border-slate-700/70 bg-slate-800/50 p-3">
                <div className="mb-2 flex items-center justify-between">
                  <p className="text-xs uppercase tracking-wide text-slate-400">Recent Notifications</p>
                  <button
                    className="rounded bg-slate-700 px-2 py-1 text-[11px]"
                    onClick={async () => {
                      setNotificationItemsLoading(true);
                      try {
                        setNotificationItems(await getNotifications(30));
                      } finally {
                        setNotificationItemsLoading(false);
                      }
                    }}
                    type="button"
                  >
                    Refresh
                  </button>
                </div>
                {notificationItemsLoading ? <p className="text-xs text-slate-400">Loading...</p> : null}
                {!notificationItemsLoading && notificationItems.length === 0 ? <p className="text-xs text-slate-400">No notifications yet</p> : null}
                <div className="space-y-2">
                  {notificationItems.slice(0, 20).map((item) => (
                    <div className="rounded bg-slate-900/50 px-2 py-2" key={item.id}>
                      <p className="text-xs font-semibold text-slate-200">{item.event_type}</p>
                      <p className="mt-0.5 line-clamp-2 text-[11px] text-slate-400">{renderNotificationPayload(item.payload)}</p>
                      <p className="mt-0.5 text-[11px] text-slate-500">{new Date(item.created_at).toLocaleString()}</p>
                    </div>
                  ))}
                </div>
              </section>
            </div>
          ) : null}

          {page === "privacy" ? (
            <div className="space-y-4 px-4 py-3">
              <section className="rounded border border-slate-700/70 bg-slate-800/50 p-3">
                <p className="mb-2 text-xs uppercase tracking-wide text-slate-400">Privacy</p>
                <SettingsTextRow label="Blocked Users" value={String(blockedCount)} />
                <div className="mb-2 rounded bg-slate-900/50 px-2 py-2">
                  <p className="mb-1 text-xs text-slate-300">Who can send me private messages?</p>
                  <select
                    className="w-full rounded bg-slate-800 px-2 py-1 text-xs"
                    value={privacyPrivateMessages}
                    onChange={(e) => setPrivacyPrivateMessages(e.target.value as "everyone" | "contacts" | "nobody")}
                  >
                    <option value="everyone">Everybody</option>
                    <option value="contacts">My contacts</option>
                    <option value="nobody">Nobody</option>
                  </select>
                </div>
                <div className="mb-2 rounded bg-slate-900/50 px-2 py-2">
                  <p className="mb-1 text-xs text-slate-300">Who can see my profile photo?</p>
                  <select
                    className="w-full rounded bg-slate-800 px-2 py-1 text-xs"
                    value={privacyAvatar}
                    onChange={(e) => setPrivacyAvatar(e.target.value as "everyone" | "contacts" | "nobody")}
                  >
                    <option value="everyone">Everybody</option>
                    <option value="contacts">My contacts</option>
                    <option value="nobody">Nobody</option>
                  </select>
                </div>
                <div className="mb-2 rounded bg-slate-900/50 px-2 py-2">
                  <p className="mb-1 text-xs text-slate-300">Who can see my last seen?</p>
                  <select
                    className="w-full rounded bg-slate-800 px-2 py-1 text-xs"
                    value={privacyLastSeen}
                    onChange={(e) => setPrivacyLastSeen(e.target.value as "everyone" | "contacts" | "nobody")}
                  >
                    <option value="everyone">Everybody</option>
                    <option value="contacts">My contacts</option>
                    <option value="nobody">Nobody</option>
                  </select>
                </div>
                <div className="mb-2 rounded bg-slate-900/50 px-2 py-2">
                  <p className="mb-1 text-xs text-slate-300">Who can add me to groups?</p>
                  <select
                    className="w-full rounded bg-slate-800 px-2 py-1 text-xs"
                    value={privacyGroupInvites}
                    onChange={(e) => setPrivacyGroupInvites(e.target.value as "everyone" | "contacts" | "nobody")}
                  >
                    <option value="everyone">Everybody</option>
                    <option value="contacts">My contacts</option>
                    <option value="nobody">Nobody</option>
                  </select>
                </div>
                <button
                  className="w-full rounded bg-sky-500 px-3 py-2 text-sm font-semibold text-slate-950 disabled:opacity-60"
                  onClick={async () => {
                    setSavingPrivacy(true);
                    try {
                      const updated = await updateMyProfile({
                        allow_private_messages: privacyPrivateMessages !== "nobody",
                        privacy_private_messages: privacyPrivateMessages,
                        privacy_last_seen: privacyLastSeen,
                        privacy_avatar: privacyAvatar,
                        privacy_group_invites: privacyGroupInvites,
                      });
                      useAuthStore.setState({ me: updated as AuthUser });
                      showToast("Privacy settings saved");
                    } catch {
                      showToast("Failed to save privacy settings");
                    } finally {
                      setSavingPrivacy(false);
                    }
                  }}
                  disabled={savingPrivacy}
                  type="button"
                >
                  {savingPrivacy ? "Saving..." : "Save privacy settings"}
                </button>
              </section>
              <section className="rounded border border-slate-700/70 bg-slate-800/50 p-3">
                <div className="mb-2 flex items-center justify-between">
                  <p className="text-xs uppercase tracking-wide text-slate-400">Two-Factor Authentication</p>
                  <span className="text-[11px] text-slate-400">{me.twofa_enabled ? "Enabled" : "Disabled"}</span>
                </div>
                {!me.twofa_enabled ? (
                  <>
                    <button
                      className="mb-2 rounded bg-slate-700 px-2 py-1 text-xs"
                      onClick={async () => {
                        setTwofaError(null);
                        try {
                          const setup = await setupTwoFactor();
                          setTwofaSecret(setup.secret);
                          setTwofaUrl(setup.otpauth_url);
                        } catch {
                          setTwofaError("Failed to setup 2FA");
                        }
                      }}
                      type="button"
                    >
                      Generate secret
                    </button>
                    {twofaSecret ? (
                      <div className="mb-2 rounded bg-slate-900/50 px-2 py-2">
                        <p className="text-[11px] text-slate-400">Secret</p>
                        <p className="break-all text-xs text-slate-200">{twofaSecret}</p>
                        {twofaQrUrl ? (
                          <div className="mt-2 rounded bg-white p-2">
                            <img alt="TOTP QR" className="mx-auto h-44 w-44" src={twofaQrUrl} />
                          </div>
                        ) : null}
                        {twofaUrl ? <p className="mt-1 break-all text-[11px] text-slate-500">{twofaUrl}</p> : null}
                      </div>
                    ) : null}
                    <div className="flex gap-2">
                      <input
                        className="w-full rounded bg-slate-800 px-2 py-1.5 text-xs"
                        placeholder="Enter app code"
                        value={twofaCode}
                        onChange={(e) => setTwofaCode(e.target.value.replace(/\D/g, "").slice(0, 8))}
                      />
                      <button
                        className="rounded bg-sky-500 px-2 py-1 text-xs font-semibold text-slate-950"
                        onClick={async () => {
                          setTwofaError(null);
                          try {
                            await enableTwoFactor(twofaCode);
                            await useAuthStore.getState().loadMe();
                            setTwofaCode("");
                          } catch {
                            setTwofaError("Invalid 2FA code");
                          }
                        }}
                        type="button"
                      >
                        Enable
                      </button>
                    </div>
                  </>
                ) : (
                  <div className="flex gap-2">
                    <input
                      className="w-full rounded bg-slate-800 px-2 py-1.5 text-xs"
                      placeholder="Code to disable"
                      value={twofaCode}
                      onChange={(e) => setTwofaCode(e.target.value.replace(/\D/g, "").slice(0, 8))}
                    />
                    <button
                      className="rounded bg-red-500 px-2 py-1 text-xs font-semibold text-white"
                      onClick={async () => {
                        setTwofaError(null);
                        try {
                          await disableTwoFactor(twofaCode);
                          await useAuthStore.getState().loadMe();
                          setTwofaCode("");
                          setTwofaSecret(null);
                          setTwofaUrl(null);
                          setTwofaQrUrl(null);
                          setRecoveryCodes([]);
                          setRecoveryRemaining(0);
                        } catch {
                          setTwofaError("Invalid 2FA code");
                        }
                      }}
                      type="button"
                    >
                      Disable
                    </button>
                  </div>
                )}
                {twofaError ? <p className="mt-2 text-xs text-red-400">{twofaError}</p> : null}
                {me.twofa_enabled ? (
                  <div className="mt-3 rounded bg-slate-900/50 px-2 py-2">
                    {recoveryRemaining === 0 ? (
                      <p className="mb-2 rounded border border-amber-500/40 bg-amber-500/10 px-2 py-1.5 text-[11px] text-amber-200">
                        You have no recovery codes. Generate and save them to avoid lockout.
                      </p>
                    ) : null}
                    <div className="mb-2 flex items-center justify-between gap-2">
                      <p className="text-xs text-slate-300">Recovery codes remaining: {recoveryRemaining}</p>
                      <button
                        className="rounded bg-slate-700 px-2 py-1 text-[11px]"
                        onClick={async () => {
                          setTwofaError(null);
                          try {
                            const result = await regenerateTwoFactorRecoveryCodes(twofaCode);
                            setRecoveryCodes(result.codes);
                            setRecoveryRemaining(result.codes.length);
                            setTwofaCode("");
                            showToast("New recovery codes generated");
                          } catch {
                            setTwofaError("Invalid 2FA code for recovery codes");
                          }
                        }}
                        type="button"
                      >
                        Generate recovery codes
                      </button>
                    </div>
                    {recoveryCodes.length > 0 ? (
                      <div className="rounded border border-amber-500/40 bg-amber-500/10 p-2">
                        <p className="mb-1 text-[11px] text-amber-200">Save these codes now. They are shown only once.</p>
                        <div className="mb-2 flex items-center gap-2">
                          <button
                            className="rounded bg-slate-700 px-2 py-1 text-[11px]"
                            onClick={() => {
                              void copyRecoveryCodes(recoveryCodes);
                            }}
                            type="button"
                          >
                            Copy
                          </button>
                          <button
                            className="rounded bg-slate-700 px-2 py-1 text-[11px]"
                            onClick={() => downloadRecoveryCodes(recoveryCodes)}
                            type="button"
                          >
                            Download .txt
                          </button>
                        </div>
                        <div className="grid grid-cols-2 gap-1">
                          {recoveryCodes.map((item) => (
                            <code className="rounded bg-slate-900 px-1.5 py-1 text-[11px]" key={item}>
                              {item}
                            </code>
                          ))}
                        </div>
                      </div>
                    ) : null}
                  </div>
                ) : null}
              </section>
              <section className="rounded border border-slate-700/70 bg-slate-800/50 p-3">
                <div className="mb-2 flex items-center justify-between">
                  <p className="text-xs uppercase tracking-wide text-slate-400">Active Sessions</p>
                  <button
                    className="rounded bg-slate-700 px-2 py-1 text-xs disabled:opacity-60"
                    onClick={async () => {
                      if (revokeAllLoading) {
                        return;
                      }
                      if (!window.confirm("Revoke all sessions and log out on this device?")) {
                        return;
                      }
                      setRevokeAllLoading(true);
                      try {
                        await revokeAllSessions();
                        setSessions([]);
                        logout();
                        onClose();
                      } catch {
                        showToast("Failed to revoke sessions");
                      } finally {
                        setRevokeAllLoading(false);
                      }
                    }}
                    disabled={revokeAllLoading}
                    type="button"
                  >
                    {revokeAllLoading ? "Revoking..." : "Revoke all"}
                  </button>
                </div>
                {sessionsLoading ? <p className="text-xs text-slate-400">Loading sessions...</p> : null}
                {!sessionsLoading && sessionsError ? <p className="text-xs text-red-400">{sessionsError}</p> : null}
                {!sessionsLoading && sessions.length === 0 ? <p className="text-xs text-slate-400">No active sessions</p> : null}
                <div className="space-y-2">
                  {sessions.map((session) => (
                    <div className="rounded bg-slate-900/50 px-2 py-2" key={session.jti}>
                      <p className="truncate text-xs text-slate-300">
                        {session.user_agent || "Unknown device"}
                        {session.current ? " (current)" : ""}
                      </p>
                      <p className="truncate text-[11px] text-slate-500">Token: {session.token_type || "refresh"}</p>
                      <p className="truncate text-[11px] text-slate-400">{session.ip_address || "Unknown IP"}</p>
                      <p className="text-[11px] text-slate-500">{new Date(session.created_at).toLocaleString()}</p>
                      {session.token_type === "refresh" ? (
                        <button
                          className="mt-1 rounded bg-slate-700 px-2 py-1 text-[11px] disabled:opacity-60"
                          onClick={async () => {
                            const token = session.jti;
                            setRevokingSessionIds((prev) => (prev.includes(token) ? prev : [...prev, token]));
                            try {
                              await revokeSession(session.jti);
                              setSessions((prev) => prev.filter((item) => item.jti !== session.jti));
                            } catch {
                              showToast("Failed to revoke session");
                            } finally {
                              setRevokingSessionIds((prev) => prev.filter((item) => item !== token));
                            }
                          }}
                          disabled={revokingSessionIds.includes(session.jti)}
                          type="button"
                        >
                          {revokingSessionIds.includes(session.jti) ? "Revoking..." : "Revoke"}
                        </button>
                      ) : (
                        <p className="mt-1 text-[11px] text-slate-500">Use Revoke all to invalidate active access token.</p>
                      )}
                    </div>
                  ))}
                </div>
              </section>
            </div>
          ) : null}
        </div>
      </aside>
      <AvatarCropModal
        file={avatarCropFile}
        onApply={(processedFile) => {
          setAvatarCropFile(null);
          void uploadAvatar(processedFile);
        }}
        onCancel={() => setAvatarCropFile(null)}
        open={Boolean(avatarCropFile)}
      />
    </div>,
    document.body
  );
}

function renderNotificationPayload(payload: string): string {
  try {
    const parsed = JSON.parse(payload) as { text?: string; title?: string; body?: string; chat_id?: number };
    return parsed.text || parsed.body || parsed.title || (parsed.chat_id ? `Chat #${parsed.chat_id}` : payload);
  } catch {
    return payload;
  }
}

function SettingsRow({ label, value, onClick }: { label: string; value: string; onClick: () => void }) {
  return (
    <button className="flex w-full items-center justify-between px-4 py-3 text-left hover:bg-slate-800/60" onClick={onClick} type="button">
      <div className="min-w-0">
        <p className="truncate text-sm font-semibold">{label}</p>
        <p className="truncate text-xs text-slate-400">{value}</p>
      </div>
      <span className="text-slate-400">›</span>
    </button>
  );
}

function SettingsTextRow({ label, value }: { label: string; value: string }) {
  return (
    <div className="mb-2 flex items-center justify-between gap-2 rounded bg-slate-900/50 px-2 py-2">
      <p className="text-sm">{label}</p>
      <p className="text-xs text-slate-400">{value}</p>
    </div>
  );
}

function RadioOption({ checked, label, onChange }: { checked: boolean; label: string; onChange: () => void }) {
  return (
    <label className="mb-2 flex items-center gap-2 text-sm">
      <input checked={checked} onChange={onChange} type="radio" />
      <span>{label}</span>
    </label>
  );
}

function CheckboxOption({
  checked,
  label,
  onChange,
  disabled,
}: {
  checked: boolean;
  label: string;
  onChange: (checked: boolean) => void;
  disabled?: boolean;
}) {
  return (
    <label className="mb-2 flex items-center gap-2 text-sm">
      <input checked={checked} disabled={disabled} onChange={(e) => onChange(e.target.checked)} type="checkbox" />
      <span>{label}</span>
    </label>
  );
}