import { useEffect, useRef, useState } from "react";
import { Archive, ArchiveRestore, Eye, Fingerprint, Globe, FileText, ImagePlus, KeyRound, Link2, Mail, Palette, Pencil, ScanText, Search, Settings2, ShieldCheck, Sparkles, Tag, Trash2, Unplug, User as UserIcon, X } from "lucide-react";
import { api } from "../lib/api.ts";
import { cn } from "../lib/cn.ts";
import { ACCENT_PRESETS, applyAccent, currentAccent, previewAccent, type AccentState } from "../lib/accent.ts";
import { FEATURES, setFeature, useFeatures } from "../lib/features.ts";
import type { Conversation, FilePreview, User } from "../lib/types.ts";
import { useT, type StringKey } from "../lib/i18n.ts";
import { Avatar, bumpCdnVersion, Button, ConfirmDialog, CopyButton, Field, Input, LangPicker, Modal, Picker, Spinner, Toggle } from "./ui.tsx";

/* ---------- Rename + topic ---------- */

export function ConvEditDialog({
  conv,
  onClose,
  onSaved,
}: {
  conv: Conversation | null;
  onClose: () => void;
  onSaved: (c: Conversation) => void;
}) {
  const { t } = useT();
  const [title, setTitle] = useState("");
  const [topic, setTopic] = useState("");
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState("");

  useEffect(() => {
    if (conv) {
      setTitle(conv.title);
      setTopic(conv.topic);
      setError("");
    }
  }, [conv]);

  async function save(e: React.FormEvent) {
    e.preventDefault();
    if (!conv || busy) return;
    setBusy(true);
    setError("");
    try {
      const res = await api.patchConv(conv.id, { title: title.trim(), topic: topic.trim() });
      onSaved(res.conversation);
      onClose();
    } catch (err) {
      setError(err instanceof Error ? err.message : t("common.saveFailed"));
    } finally {
      setBusy(false);
    }
  }

  return (
    <Modal open={conv !== null} onClose={onClose} title={t("dlg.editConv")} icon={Pencil}>
      <form onSubmit={save} className="space-y-4">
        <Field label={t("dlg.fTitle")}>
          <Input value={title} onChange={(e) => setTitle(e.target.value)} maxLength={120} required />
        </Field>
        <Field label={t("dlg.fTopic")} hint={t("dlg.topicHint")}>
          <div className="relative">
            <Tag size={15} className="pointer-events-none absolute left-4 top-1/2 -translate-y-1/2 opacity-40" />
            <Input className="pl-10" value={topic} onChange={(e) => setTopic(e.target.value)} maxLength={120} placeholder={t("dlg.noTopic")} />
          </div>
        </Field>
        {error && <p className="text-sm text-red-600 dark:text-red-400">{error}</p>}
        <div className="flex justify-end gap-2">
          <Button variant="secondary" size="sm" type="button" onClick={onClose}>{t("common.cancel")}</Button>
          <Button size="sm" type="submit" disabled={busy}>{busy ? <Spinner size={15} /> : t("common.save")}</Button>
        </div>
      </form>
    </Modal>
  );
}

/* ---------- Key recovery ---------- */

export function RecoverDialog({ open, onClose, from }: { open: boolean; onClose: () => void; from?: string }) {
  const { t } = useT();
  const [username, setUsername] = useState("");
  const [sent, setSent] = useState(false);
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState("");

  useEffect(() => {
    if (open) {
      setUsername("");
      setSent(false);
      setError("");
    }
  }, [open ]);

  async function submit(e: React.FormEvent) {
    e.preventDefault();
    if (busy) return;
    setBusy(true);
    setError("");
    try {
      await api.recover(username.trim().toLowerCase());
      setSent(true);
    } catch (err) {
      setError(err instanceof Error ? err.message : t("dlg.reqFailed"));
    } finally {
      setBusy(false);
    }
  }

  return (
    <Modal open={open} onClose={onClose} title={t("dlg.recoverTitle")} icon={Mail} wide>
      {sent ? (
        <div className="space-y-4">
          <p className="text-sm opacity-80">
            {t("dlg.recoverSent", {
              user: username.trim().toLowerCase() || "…",
              fromPart: from ? t("dlg.recoverSentFrom", { from }) : "",
            })}
          </p>
          <p className="rounded-2xl bg-amber-500/10 px-4 py-2.5 text-sm opacity-90 dark:bg-amber-500/10">
            {t("dlg.spamNote")}
          </p>
          <p className="text-sm opacity-70">
            {t("dlg.noMailNote")}
          </p>
          <div className="flex justify-end">
            <Button size="sm" onClick={onClose}>{t("common.done")}</Button>
          </div>
        </div>
      ) : (
        <form onSubmit={submit} className="space-y-4">
          <p className="text-sm opacity-70">
            {t("dlg.recoverIntro")}
          </p>
          <Field label={t("common.username")}>
            <Input value={username} onChange={(e) => setUsername(e.target.value)} placeholder="alice" required />
          </Field>
          {error && <p className="text-sm text-red-600 dark:text-red-400">{error}</p>}
          <div className="flex justify-end gap-2">
            <Button variant="secondary" size="sm" type="button" onClick={onClose}>{t("common.cancel")}</Button>
            <Button size="sm" type="submit" disabled={busy}>{busy ? <Spinner size={15} /> : t("dlg.sendLink")}</Button>
          </div>
        </form>
      )}
    </Modal>
  );
}

/* ---------- File preview (pre-transcription review) ---------- */

export function FilePreviewModal({
  preview,
  busy,
  onClose,
  onAttach,
}: {
  preview: FilePreview | null;
  busy: boolean;
  onClose: () => void;
  onAttach: (text: string) => void;
}) {
  const { t } = useT();
  const [text, setText] = useState("");

  useEffect(() => {
    if (preview) setText(preview.text);
  }, [preview]);

  const isOcr = preview?.kind === "ocr";

  return (
    <Modal
      open={preview !== null}
      onClose={onClose}
      title={isOcr ? t("dlg.reviewOcr") : t("dlg.reviewText")}
      icon={isOcr ? ScanText : FileText}
      wide
    >
      {busy ? (
        <p className="flex items-center gap-2 py-8 text-sm opacity-70">
          <Spinner size={16} />
          {isOcr ? t("dlg.transcribing") : t("dlg.uploadingTools")}
        </p>
      ) : (
        <div className="space-y-3">
          <p className="rounded-2xl bg-accent-600/10 px-4 py-2.5 text-sm opacity-90">
            {isOcr ? t("dlg.ocrExpl") : t("dlg.textExpl")}
          </p>
          {preview?.truncated && (
            <p className="rounded-2xl bg-amber-500/10 px-4 py-2.5 text-sm">{t("dlg.truncWarn")}</p>
          )}
          <textarea
            rows={10}
            value={text}
            onChange={(e) => setText(e.target.value)}
            className="w-full resize-y rounded-2xl border border-stone-200 bg-stone-50 p-4 font-mono text-[13px] leading-relaxed outline-none focus:border-accent-500 dark:border-zinc-700 dark:bg-zinc-800"
          />
          <div className="flex items-center justify-between">
            <span className="text-xs opacity-60">{preview?.name} · {t("dlg.chars", { n: text.length.toLocaleString() })}</span>
            <div className="flex gap-2">
              <Button variant="secondary" size="sm" onClick={onClose}>{t("common.cancel")}</Button>
              <Button size="sm" onClick={() => onAttach(text)} disabled={!text.trim()}>{t("dlg.attachBtn")}</Button>
            </div>
          </div>
        </div>
      )}
    </Modal>
  );
}

/* ---------- Share ---------- */

export function ShareModal({ conv, onClose }: { conv: Conversation | null; onClose: () => void }) {
  const { t } = useT();
  const [url, setUrl] = useState<string | null>(null);
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState("");

  useEffect(() => {
    if (!conv) {
      setUrl(null);
      return;
    }
    setBusy(true);
    setError("");
    api.share(conv.id)
      .then((r) => setUrl(window.location.origin + r.url))
      .catch((err) => setError(err instanceof Error ? err.message : t("dlg.reqFailed")))
      .finally(() => setBusy(false));
  }, [conv]);

  async function unshare() {
    if (!conv) return;
    await api.unshare(conv.id);
    onClose();
  }

  return (
    <Modal open={conv !== null} onClose={onClose} title={t("dlg.shareTitle")} icon={Globe}>
      {busy && <p className="flex items-center gap-2 text-sm opacity-70"><Spinner size={15} /> {t("dlg.shareCreating")}</p>}
      {error && <p className="text-sm text-red-600 dark:text-red-400">{error}</p>}
      {url && (
        <div className="space-y-4">
          <p className="text-sm opacity-70">{t("dlg.shareIntro", { title: conv?.title ?? "" })}</p>
          <div className="flex items-center gap-2 rounded-2xl border border-stone-200 bg-stone-50 px-4 py-3 text-sm dark:border-zinc-700 dark:bg-zinc-800">
            <Link2 size={15} className="shrink-0 opacity-50" />
            <span className="min-w-0 flex-1 truncate">{url}</span>
            <CopyButton text={url} />
          </div>
          <div className="flex justify-between">
            <Button variant="ghost" size="sm" onClick={unshare}><Unplug size={15} /> {t("dlg.unshare")}</Button>
            <Button size="sm" onClick={onClose}>{t("common.done")}</Button>
          </div>
        </div>
      )}
    </Modal>
  );
}

/* ---------- Settings (profile) ---------- */

export function SettingsModal({
  user,
  onClose,
  onSaved,
  onKeyRotated,
  onViewArchived,
  onArchivedChanged,
}: {
  user: User | null;
  onClose: () => void;
  onSaved: (u: User) => void;
  onKeyRotated?: () => void;
  onViewArchived: (c: Conversation) => void;
  onArchivedChanged: (deletedId?: string) => void;
}) {
  const { t } = useT();
  const [displayName, setDisplayName] = useState("");
  const [avatarUrl, setAvatarUrl] = useState("");
  const [email, setEmail] = useState("");
  const [theme, setTheme] = useState("auto");
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState("");
  const [stagedFile, setStagedFile] = useState<File | null>(null);
  const [stagedUrl, setStagedUrl] = useState<string | null>(null);
  const [uploadError, setUploadError] = useState("");
  const [dragOver, setDragOver] = useState(false);
  const [search, setSearch] = useState("");
  const fileRef = useRef<HTMLInputElement>(null);
  // Object URLs must be revoked or they leak; the ref mirrors the latest
  // staged URL so unmount/close cleanup always revokes the right one.
  const stagedUrlRef = useRef<string | null>(null);

  function discardStaged() {
    if (stagedUrlRef.current) URL.revokeObjectURL(stagedUrlRef.current);
    stagedUrlRef.current = null;
    setStagedUrl(null);
    setStagedFile(null);
  }

  // Two-column settings: categories on the left, content on the right.
  // Searching filters the category list and jumps to the first match.
  const CATS = [
    { id: "profile", title: t("settings.profile"), icon: UserIcon, keywords: ["profile", "avatar", "picture", "photo", "name", "display", "email", "account"] },
    { id: "appearance", title: t("settings.appearance"), icon: Palette, keywords: ["appearance", "theme", "dark", "light", "color", "colour", "accent", "palette", "language", "langue", "idioma", "lingua", "язык"] },
    { id: "features", title: t("settings.features"), icon: Sparkles, keywords: ["features", "thinking", "attachments", "search", "deep", "upload", "ocr", "capabilities", "enable", "disable"] },
    { id: "security", title: t("settings.security"), icon: ShieldCheck, keywords: ["security", "key", "rotate", "password", "totp", "2fa", "two", "factor", "authenticator", "passkey", "webauthn"] },
    { id: "archived", title: t("archived.title"), icon: Archive, keywords: ["archived", "archive", "old", "hidden", "read-only", "readonly", "archiv"] },
  ] as const;
  type CatId = (typeof CATS)[number]["id"];
  const [cat, setCat] = useState<CatId>("profile");

  const visibleCats = CATS.filter((c) => {
    const q = search.trim().toLowerCase();
    if (!q) return true;
    return c.title.toLowerCase().includes(q) || c.keywords.some((k) => k.includes(q));
  });
  const activeCat = visibleCats.some((c) => c.id === cat) ? cat : (visibleCats[0]?.id ?? "profile");

  useEffect(() => {
    if (user) {
      setDisplayName(user.displayName);
      setAvatarUrl(user.avatarUrl);
      setEmail(user.email);
      setTheme(user.theme);
      setError("");
      setUploadError("");
      setSearch("");
      discardStaged();
    } else {
      // Modal closed (Save, Cancel, Escape, backdrop): drop the staged file
      // so the next open previews the saved avatar again.
      discardStaged();
    }
  }, [user]);

  // Safety net: revoke the object URL if the component unmounts mid-stage.
  useEffect(() => () => {
    if (stagedUrlRef.current) URL.revokeObjectURL(stagedUrlRef.current);
  }, []);

  // Staging is preview-only: no bytes leave the browser until Save.
  // (The CDN path is fixed per account, so PUTing early would publish the
  // picture immediately and Cancel could never undo it.)
  function stageFile(f: File) {
    if (!user) return;
    if (f.size > 5 * 1024 * 1024) {
      setUploadError(t("sec.avatarTooBig"));
      return;
    }
    if (!/^image\/(jpeg|png|webp)$/.test(f.type)) {
      setUploadError(t("sec.avatarType"));
      return;
    }
    setUploadError("");
    if (stagedUrlRef.current) URL.revokeObjectURL(stagedUrlRef.current);
    const url = URL.createObjectURL(f);
    stagedUrlRef.current = url;
    setStagedFile(f);
    setStagedUrl(url);
  }

  async function save(e: React.FormEvent) {
    e.preventDefault();
    if (!user || busy) return;
    setBusy(true);
    setError("");
    try {
      // Save is the only point that touches the network for the avatar:
      // push the staged bytes first, then persist the resulting URL.
      let url = avatarUrl.trim();
      if (stagedFile) {
        try {
          const up = await api.uploadAvatar(user.id, stagedFile);
          url = up.url;
          // Same CDN path every upload -> bump the version so every <Avatar>
          // (sidebar, chat bubbles) re-fetches the new bytes immediately.
          bumpCdnVersion();
        } catch (err) {
          setUploadError(err instanceof Error ? err.message : t("attach.uploadFailed"));
          setBusy(false);
          return;
        }
        discardStaged();
      }
      const res = await api.updateMe({ displayName: displayName.trim(), avatarUrl: url, email: email.trim(), theme });
      onSaved(res.user);
      onClose();
    } catch (err) {
      setError(err instanceof Error ? err.message : t("common.saveFailed"));
    } finally {
      setBusy(false);
    }
  }

  return (
    <Modal open={user !== null} onClose={onClose} title={t("settings.title")} icon={Settings2} wide>
      <form onSubmit={save} className="space-y-4">
        <div className="relative">
          <Search size={15} className="pointer-events-none absolute left-3.5 top-1/2 -translate-y-1/2 opacity-50" />
          <input
            value={search}
            onChange={(e) => setSearch(e.target.value)}
            placeholder={t("settings.searchPh")}
            aria-label={t("settings.searchAria")}
            className="w-full rounded-2xl border border-stone-200/70 bg-stone-100 py-2 pl-9 pr-8 text-sm outline-none transition placeholder:text-stone-400 focus:border-accent-500/60 focus:bg-white dark:border-zinc-800 dark:bg-zinc-800/60 dark:placeholder:text-zinc-500 dark:focus:bg-zinc-900"
          />
          {search && (
            <button
              type="button"
              aria-label={t("settings.clearSearch")}
              onClick={() => setSearch("")}
              className="absolute right-2.5 top-1/2 -translate-y-1/2 rounded-full p-0.5 opacity-60 transition hover:opacity-100"
            >
              <X size={14} />
            </button>
          )}
        </div>

        {search.trim() && visibleCats.length === 0 ? (
          <p className="px-2 py-4 text-center text-sm opacity-50">{t("settings.noMatch", { q: search.trim() })}</p>
        ) : (
        <div className="flex flex-col gap-4 sm:flex-row">
          <nav aria-label="Settings categories" className="flex shrink-0 gap-1.5 overflow-x-auto sm:w-44 sm:flex-col">
            {visibleCats.map((c) => (
              <button
                key={c.id}
                type="button"
                onClick={() => setCat(c.id)}
                aria-current={activeCat === c.id}
                className={cn(
                  "flex shrink-0 items-center gap-2.5 rounded-2xl px-3.5 py-2.5 text-sm transition",
                  activeCat === c.id
                    ? "bg-accent-600/10 font-medium text-accent-900 dark:bg-accent-500/10 dark:text-accent-100"
                    : "hover:bg-stone-200/50 dark:hover:bg-zinc-800/70",
                )}
              >
                <c.icon size={16} className="opacity-70" />
                {c.title}
              </button>
            ))}
          </nav>

          <div className="min-w-0 flex-1 space-y-4">
            {activeCat === "profile" && (
              <SettingsPane>
                <div className="flex items-center gap-3">
              <Avatar name={displayName || "?"} url={stagedUrl ?? avatarUrl ?? undefined} size={52} />
              <div className="min-w-0 flex-1">
                <p className="truncate text-sm font-medium">{displayName || "…"}</p>
                <p className="truncate text-xs opacity-60">@{user?.username}</p>
              </div>
              {stagedUrl && (
                <button
                  type="button"
                  onClick={discardStaged}
                  aria-label={t("common.cancel")}
                  title={t("common.cancel")}
                  className="rounded-full p-1.5 transition hover:bg-stone-200/60 dark:hover:bg-zinc-800"
                >
                  <X size={16} />
                </button>
              )}
            </div>
            <div>
              <span className="mb-1.5 block text-sm font-medium opacity-80">{t("settings.avatarUpload")}</span>
              <div
                role="button"
                tabIndex={0}
                aria-label={t("settings.avatarUpload")}
                onClick={() => fileRef.current?.click()}
                onKeyDown={(e) => e.key === "Enter" && fileRef.current?.click()}
                onDragOver={(e) => { e.preventDefault(); setDragOver(true); }}
                onDragLeave={() => setDragOver(false)}
                onDrop={(e) => {
                  e.preventDefault();
                  setDragOver(false);
                  const f = e.dataTransfer.files?.[0];
                  if (f) stageFile(f);
                }}
                className={cn(
                  "flex cursor-pointer items-center gap-3 rounded-3xl border-2 border-dashed px-4 py-3.5 transition",
                  dragOver
                    ? "border-accent-500 bg-accent-500/10"
                    : "border-stone-200 hover:border-accent-500/60 hover:bg-stone-50 dark:border-zinc-700 dark:hover:bg-zinc-800/60",
                )}
              >
                <span className="grid h-10 w-10 shrink-0 place-items-center rounded-full bg-accent-600/10 text-accent-600 dark:text-accent-400">
                  <ImagePlus size={17} />
                </span>
                <span className="min-w-0 flex-1 text-sm">
                  <span className="block font-medium">{dragOver ? t("settings.dropActive") : t("settings.dropIdle")}</span>
                  <span className="block text-xs opacity-60">{t("settings.avatarHint")}</span>
                </span>
              </div>
              <input
                ref={fileRef}
                type="file"
                accept="image/jpeg,image/png,image/webp"
                className="hidden"
                onChange={(e) => {
                  const f = e.target.files?.[0];
                  if (f) stageFile(f);
                  e.target.value = "";
                }}
              />
              {uploadError && <p className="mt-1.5 text-sm text-red-600 dark:text-red-400">{uploadError}</p>}
            </div>
            <Field label={t("common.displayName")}>
              <Input value={displayName} onChange={(e) => setDisplayName(e.target.value)} maxLength={60} required />
            </Field>
            <Field label={t("settings.email")} hint={t("settings.emailHint")}>
              <Input value={email} onChange={(e) => setEmail(e.target.value)} placeholder="you@example.com" inputMode="email" />
            </Field>
              </SettingsPane>
            )}

            {activeCat === "appearance" && (
              <SettingsPane>
            <Field label={t("common.theme")}>
              <Picker
                ariaLabel={t("common.theme")}
                value={theme}
                onChange={setTheme}
                align="left"
                options={[
                  { value: "auto", label: t("common.themeAutoFull") },
                  { value: "light", label: t("common.light") },
                  { value: "dark", label: t("common.dark") },
                ]}
              />
            </Field>
            <Field label={t("settings.language")} hint={t("settings.languageHint")}>
              <LangPicker align="left" />
            </Field>
            <AccentSection />
              </SettingsPane>
            )}

            {activeCat === "features" && (
              <SettingsPane>
            <p className="-mb-2 text-xs opacity-60">{t("settings.featHint")}</p>
            <FeaturesSection />
              </SettingsPane>
            )}

            {activeCat === "security" && (
              <SettingsPane>
                <SecuritySection onKeyRotated={onKeyRotated} />
              </SettingsPane>
            )}

            {activeCat === "archived" && (
              <SettingsPane>
                <ArchivedSection onView={onViewArchived} onChanged={onArchivedChanged} />
              </SettingsPane>
            )}
          </div>
        </div>
        )}

        {error && <p className="text-sm text-red-600 dark:text-red-400">{error}</p>}
        <div className="flex justify-end gap-2">
          <Button variant="secondary" size="sm" type="button" onClick={onClose}>{t("common.cancel")}</Button>
          <Button size="sm" type="submit" disabled={busy}>{busy ? <Spinner size={15} /> : t("common.save")}</Button>
        </div>
      </form>
    </Modal>
  );
}

/* ---------- Settings pane (unified glass card for every category) ---------- */

function SettingsPane({ children }: { children: React.ReactNode }) {
  // Single unified surface for every settings section: flat matte card with
  // one soft shadow — identical gloss on profile, appearance and features.
  return (
    <section className="space-y-4 rounded-3xl border border-stone-200/70 bg-stone-50 p-4 shadow-sm shadow-stone-900/5 dark:border-zinc-800 dark:bg-zinc-800/60 dark:shadow-black/20">
      {children}
    </section>
  );
}

/* ---------- Archived chats (settings): view, unarchive, delete ---------- */

function ArchivedSection({ onView, onChanged }: { onView: (c: Conversation) => void; onChanged: (deletedId?: string) => void }) {
  const { t } = useT();
  const [list, setList] = useState<Conversation[] | null>(null);
  const [error, setError] = useState("");
  const [busyId, setBusyId] = useState<string | null>(null);
  const [deleteTarget, setDeleteTarget] = useState<Conversation | null>(null);

  async function refresh() {
    try {
      const res = await api.archivedConvs();
      setList(res.conversations);
    } catch (err) {
      setError(err instanceof Error ? err.message : t("common.loadFailed"));
    }
  }

  useEffect(() => {
    refresh();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  async function unarchive(c: Conversation) {
    setBusyId(c.id);
    setError("");
    try {
      await api.unarchiveConv(c.id);
      await refresh();
      onChanged();
    } catch (err) {
      setError(err instanceof Error ? err.message : t("common.saveFailed"));
    } finally {
      setBusyId(null);
    }
  }

  async function remove(c: Conversation) {
    setBusyId(c.id);
    setError("");
    try {
      await api.deleteConv(c.id);
      setDeleteTarget(null);
      await refresh();
      onChanged(c.id);
    } catch (err) {
      setError(err instanceof Error ? err.message : t("common.deleteFailed"));
    } finally {
      setBusyId(null);
    }
  }

  if (list === null && !error) {
    return <p className="flex items-center gap-2 py-4 text-sm opacity-60"><Spinner size={15} /> {t("common.loading")}</p>;
  }

  return (
    <div className="space-y-3">
      <p className="text-xs leading-relaxed opacity-60">{t("archived.readonly")}</p>
      {error && <p className="text-sm text-red-600 dark:text-red-400">{error}</p>}
      {(list ?? []).length === 0 ? (
        <p className="py-4 text-center text-sm opacity-50">{t("archived.empty")}</p>
      ) : (
        <ul className="space-y-2">
          {(list ?? []).map((c) => (
            <li key={c.id} className="flex items-center gap-2 rounded-2xl border border-stone-200/70 px-3.5 py-2.5 dark:border-zinc-800">
              <span className="grid h-9 w-9 shrink-0 place-items-center rounded-full bg-accent-600/10 text-accent-600 dark:text-accent-400">
                <Archive size={15} />
              </span>
              <div className="min-w-0 flex-1">
                <p className="truncate text-sm font-medium">{c.title}</p>
                <p className="truncate text-xs opacity-50">{new Date(c.updated_at).toLocaleDateString()}</p>
              </div>
              <div className="flex shrink-0 gap-1">
                <button
                  type="button"
                  title={t("archived.view")}
                  aria-label={`${t("archived.view")}: ${c.title}`}
                  onClick={() => onView(c)}
                  className="rounded-full p-2 transition hover:bg-stone-100 dark:hover:bg-zinc-800"
                >
                  <Eye size={15} />
                </button>
                <button
                  type="button"
                  title={t("archived.unarchive")}
                  aria-label={`${t("archived.unarchive")}: ${c.title}`}
                  disabled={busyId === c.id}
                  onClick={() => unarchive(c)}
                  className="rounded-full p-2 transition hover:bg-stone-100 disabled:opacity-50 dark:hover:bg-zinc-800"
                >
                  <ArchiveRestore size={15} />
                </button>
                <button
                  type="button"
                  title={t("common.delete")}
                  aria-label={`${t("common.delete")}: ${c.title}`}
                  disabled={busyId === c.id}
                  onClick={() => setDeleteTarget(c)}
                  className="rounded-full p-2 text-red-600 transition hover:bg-red-50 disabled:opacity-50 dark:text-red-400 dark:hover:bg-red-950/40"
                >
                  <Trash2 size={15} />
                </button>
              </div>
            </li>
          ))}
        </ul>
      )}
      <ConfirmDialog
        open={deleteTarget !== null}
        onClose={() => setDeleteTarget(null)}
        title={t("archived.deleteTitle")}
        message={t("archived.deleteMsg")}
        confirmLabel={t("common.delete")}
        onConfirm={() => deleteTarget && remove(deleteTarget)}
      />
    </div>
  );
}

/* ---------- Accent color (settings) ---------- */

function AccentSection() {
  const { t } = useT();
  const [state, setState] = useState<AccentState>(() => currentAccent());

  function pick(presetId: string) {
    const next = { ...state, presetId };
    setState(next);
    applyAccent(next);
  }

  function pickCustom(hex: string) {
    const next = { presetId: "custom", customHex: hex };
    setState(next);
    previewAccent(hex);
  }

  return (
    <div>
      <span className="mb-1.5 block text-sm font-medium opacity-80">{t("settings.accent")}</span>
      <p className="mb-2 text-xs opacity-60">{t("settings.accentHint")}</p>
      <div className="flex flex-wrap items-center gap-2">
        {ACCENT_PRESETS.map((p) => (
          <button
            key={p.id}
            type="button"
            title={t(`accent.preset.${p.id}` as StringKey)}
            aria-label={t("settings.accentAria", { label: t(`accent.preset.${p.id}` as StringKey) })}
            onClick={() => pick(p.id)}
            className={cn(
              "h-8 w-8 rounded-full border-2 transition active:scale-90",
              state.presetId === p.id
                ? "border-stone-900 dark:border-white"
                : "border-transparent hover:scale-110",
            )}
            style={{ backgroundColor: p.base }}
          />
        ))}
        <label
          className={cn(
            "relative grid h-8 w-8 cursor-pointer place-items-center overflow-hidden rounded-full border-2 transition active:scale-90",
            state.presetId === "custom"
              ? "border-stone-900 dark:border-white"
              : "border-transparent hover:scale-110",
          )}
          style={{ background: state.presetId === "custom" ? state.customHex : undefined }}
          title={t("settings.customColor")}
        >
          <Sparkles size={14} className={cn("text-white drop-shadow-[0_1px_2px_rgba(0,0,0,0.6)]", state.presetId === "custom" && "opacity-0")} />
          <input
            type="color"
            aria-label={t("settings.customAria")}
            value={state.presetId === "custom" ? state.customHex : "#10b981"}
            onChange={(e) => pickCustom(e.target.value)}
            onBlur={() => applyAccent(state)} // persist the last previewed value
            className="absolute inset-0 cursor-pointer opacity-0"
          />
        </label>
      </div>
    </div>
  );
}

/* ---------- Features (settings) ---------- */

function FeaturesSection() {
  const { t } = useT();
  const flags = useFeatures();
  return (
    <div>
      <div className="space-y-1">
        {FEATURES.map((f) => (
          <label
            key={f.key}
            className={cn(
              "flex items-center gap-3 rounded-2xl px-3 py-2 transition",
              f.ready ? "cursor-pointer hover:bg-stone-100 dark:hover:bg-zinc-800" : "opacity-50",
            )}
          >
            <Toggle
              checked={!!flags[f.key]}
              disabled={!f.ready}
              label={t(`feat.${f.key}.label` as StringKey)}
              onChange={(v) => setFeature(f.key, v)}
            />
            <span className="min-w-0">
              <span className="block text-sm font-medium">
                {t(`feat.${f.key}.label` as StringKey)}
                {!f.ready && <span className="ml-1.5 text-xs opacity-60">{t("feat.soon")}</span>}
              </span>
              <span className="block text-xs opacity-60">{t(`feat.${f.key}.hint` as StringKey)}</span>
            </span>
          </label>
        ))}
      </div>
    </div>
  );
}

/* ---------- Security (settings): key rotation, TOTP, passkeys ---------- */

function SecuritySection({ onKeyRotated }: { onKeyRotated?: () => void }) {
  const { t } = useT();
  const [totpOn, setTotpOn] = useState<boolean | null>(null);
  const [secret, setSecret] = useState<string | null>(null);
  const [otpauthUrl, setOtpauthUrl] = useState("");
  const [code, setCode] = useState("");
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState("");
  const [rotatedKey, setRotatedKey] = useState<string | null>(null);
  const [armingRotate, setArmingRotate] = useState(false);
  const [confirmDelete, setConfirmDelete] = useState(false);

  useEffect(() => {
    api.totpStatus().then((r) => setTotpOn(r.enabled)).catch(() => setTotpOn(false));
  }, []);

  async function rotate() {
    if (!armingRotate) {
      setArmingRotate(true);
      return;
    }
    setBusy(true);
    setError("");
    try {
      const res = await api.rotateKey();
      setRotatedKey(res.key);
      setArmingRotate(false);
    } catch (err) {
      setError(err instanceof Error ? err.message : t("sec.rotationFailed"));
    } finally {
      setBusy(false);
    }
  }

  async function startTotp() {
    setBusy(true);
    setError("");
    try {
      const res = await api.totpSetup();
      setSecret(res.secret);
      setOtpauthUrl(res.otpauthUrl);
      setCode("");
    } catch (err) {
      setError(err instanceof Error ? err.message : t("sec.setupFailed"));
    } finally {
      setBusy(false);
    }
  }

  async function confirmTotp() {
    if (!secret || code.replace(/\D/g, "").length !== 6) return;
    setBusy(true);
    setError("");
    try {
      await api.totpVerify(secret, code.replace(/\D/g, ""));
      setTotpOn(true);
      setSecret(null);
      setCode("");
    } catch (err) {
      setError(err instanceof Error ? err.message : t("login.totpInvalid"));
    } finally {
      setBusy(false);
    }
  }

  async function disableTotp() {
    if (code.replace(/\D/g, "").length !== 6) return;
    setBusy(true);
    setError("");
    try {
      await api.totpDisable(code.replace(/\D/g, ""));
      setTotpOn(false);
      setCode("");
    } catch (err) {
      setError(err instanceof Error ? err.message : t("login.totpInvalid"));
    } finally {
      setBusy(false);
    }
  }

  async function removeAccount() {
    setBusy(true);
    setError("");
    try {
      await api.deleteMe();
      setConfirmDelete(false);
      onKeyRotated?.();
    } catch (err) {
      setError(err instanceof Error ? err.message : t("sec.deleteFailed"));
    } finally {
      setBusy(false);
    }
  }

  return (
    <div className="space-y-5">
      <div>
        <p className="mb-1 flex items-center gap-1.5 text-sm font-medium"><KeyRound size={14} className="opacity-60" /> {t("sec.accessKey")}</p>
        <p className="mb-2 text-xs opacity-60">{t("sec.accessKeyHint")}</p>
        <Button size="sm" variant="secondary" disabled={busy} onClick={rotate}>
          {armingRotate ? t("sec.rotateConfirm") : t("sec.rotate")}
        </Button>
      </div>

      <div>
        <p className="mb-1 flex items-center gap-1.5 text-sm font-medium"><ShieldCheck size={14} className="opacity-60" /> {t("sec.totp")}</p>
        {totpOn === null && <p className="flex items-center gap-2 text-sm opacity-60"><Spinner size={14} /> {t("sec.totpChecking")}</p>}
        {totpOn === false && !secret && (
          <>
            <p className="mb-2 text-xs opacity-60">{t("sec.totpAddHint")}</p>
            <Button size="sm" variant="secondary" disabled={busy} onClick={startTotp}>{t("sec.totpEnable")}</Button>
          </>
        )}
        {secret && (
          <div className="space-y-2 rounded-2xl border border-stone-200 p-3 dark:border-zinc-700">
            <p className="text-xs opacity-70">{t("sec.totpSecretHint")}</p>
            <div className="flex items-center gap-2">
              <code className="min-w-0 flex-1 break-all rounded-xl bg-stone-100 px-3 py-2 font-mono text-sm dark:bg-zinc-800">{secret}</code>
              <CopyButton text={secret} />
            </div>
            <a href={otpauthUrl} className="block truncate text-xs text-accent-700 underline-offset-2 hover:underline dark:text-accent-400">{otpauthUrl}</a>
            <div className="flex gap-2">
              <Input
                value={code}
                onChange={(e) => setCode(e.target.value.replace(/\D/g, "").slice(0, 6))}
                placeholder="000000"
                aria-label={t("login.totpAria")}
                inputMode="numeric"
                className="text-center tracking-[0.4em]"
              />
              <Button size="sm" disabled={busy || code.length !== 6} onClick={confirmTotp}>{t("sec.totpConfirm")}</Button>
            </div>
          </div>
        )}
        {totpOn === true && (
          <div className="flex flex-wrap items-end gap-2">
            <div className="min-w-36 flex-1">
              <Field label={t("sec.totpDisableLabel")}>
                <Input
                  value={code}
                  onChange={(e) => setCode(e.target.value.replace(/\D/g, "").slice(0, 6))}
                  placeholder="000000"
                  aria-label={t("login.totpAria")}
                  inputMode="numeric"
                  className="text-center tracking-[0.4em]"
                />
              </Field>
            </div>
            <Button size="sm" variant="secondary" disabled={busy || code.length !== 6} onClick={disableTotp} className="!text-red-600 dark:!text-red-400">
              {t("sec.totpDisable")}
            </Button>
          </div>
        )}
      </div>

      <div className="flex items-center gap-3 rounded-2xl px-1 py-1 opacity-50">
        <Fingerprint size={16} />
        <span className="min-w-0 flex-1">
          <span className="block text-sm font-medium">{t("sec.passkeys")} <span className="ml-1 text-xs opacity-60">{t("feat.soon")}</span></span>
          <span className="block text-xs opacity-60">{t("sec.passkeysHint")}</span>
        </span>
      </div>

      <div className="rounded-2xl border border-red-500/30 p-3">
        <p className="mb-1 flex items-center gap-1.5 text-sm font-medium text-red-600 dark:text-red-400">
          <Trash2 size={14} /> {t("sec.danger")}
        </p>
        <p className="mb-2 text-xs opacity-60">{t("sec.dangerHint")}</p>
        <Button size="sm" variant="secondary" disabled={busy} onClick={() => setConfirmDelete(true)} className="!text-red-600 dark:!text-red-400">
          {t("sec.deleteMe")}
        </Button>
      </div>

      {error && <p className="text-sm text-red-600 dark:text-red-400">{error}</p>}

      <Modal open={rotatedKey !== null} onClose={() => {}} title={t("sec.newKeyTitle")} icon={KeyRound}>
        <div className="space-y-4">
          <p className="text-sm opacity-80">{t("sec.newKeyHint")}</p>
          <div className="flex items-center gap-2">
            <code className="min-w-0 flex-1 truncate rounded-2xl bg-stone-100 px-3 py-2.5 font-mono text-sm dark:bg-zinc-800">{rotatedKey}</code>
            {rotatedKey && <CopyButton text={rotatedKey} />}
          </div>
          <Button size="sm" className="w-full" onClick={() => onKeyRotated?.()}>{t("sec.newKeyDone")}</Button>
        </div>
      </Modal>

      <ConfirmDialog
        open={confirmDelete}
        onClose={() => setConfirmDelete(false)}
        onConfirm={removeAccount}
        title={t("sec.deleteTitle")}
        message={t("sec.deleteMsg")}
        confirmLabel={t("sec.deleteForever")}
      />
    </div>
  );
}