import { createEffect, createMemo, createSignal, For, Match, onCleanup, onMount, Show, Switch } from "solid-js";
import { sendMessage } from "../App";
import { PeachMark } from "../components/PeachMark";
import { SyncModeSelector } from "../components/SyncModeSelector";
import { StackDeck } from "../components/settings/StackDeck";
import type { CardId, StackBodies, StackCardSpec } from "../components/settings/types";
import { RecoveryWordDisplayView } from "./RecoveryWordDisplay";
import { WhatsNewView } from "./WhatsNew";
import type { Canary } from "../../shared/types";
import { ACCENT_COLORS } from "../../shared/types";
import { PEACH_VERSION, hasReleaseNotes } from "../../shared/release-notes";
import type {
  AccentColorName,
  PasskeyProviderState,
  ProFeature,
  VaultSnapshot,
} from "../../shared/types";
import type { PairedDevice } from "../../shared/sync-types";
import {
  describeSyncOutcome,
  syncIndicator,
  syncIndicatorLabel,
  type SyncOutcomeSummary,
} from "../../shared/sync-outcome";
import type { SyncGeneration } from "../../background/sync-generation";
import {
  DEFAULT_BINDINGS,
  findConflict,
  formatKeybinding,
  keybindingFromEvent,
  SHORTCUT_DESCRIPTORS,
  type Keybinding,
  type ShortcutAction,
} from "../../shared/shortcuts";
import { WEB3FORMS_KEY } from "../../shared/config";

interface LicenseInfo {
  valid: boolean;
  plan: "free" | "pro";
  issued?: string;
}

interface SettingsProps {
  entriesCount: number;
  breachMonitoring: boolean;
  lockOnClose: boolean;
  autoLockMinutes: number;
  trashRetentionDays: number;
  theme: "dark" | "light";
  accentColor: AccentColorName;
  textSize: "small" | "medium" | "large";
  reduceMotion: boolean;
  isPro?: boolean;
  initialSection?: string | null;
  upgradeHighlight?: ProFeature | null;
  onBreachMonitoringChange: (enabled: boolean) => void | Promise<void>;
  onLockOnCloseChange: (enabled: boolean) => void | Promise<void>;
  onAutoLockMinutesChange: (minutes: number) => void | Promise<void>;
  onTrashRetentionChange: (days: number) => void | Promise<void>;
  onThemeChange: (theme: "dark" | "light") => void;
  onAccentChange: (name: AccentColorName) => void | Promise<void>;
  onTextSizeChange: (size: "small" | "medium" | "large") => void | Promise<void>;
  onReduceMotionChange: (enabled: boolean) => void | Promise<void>;
  shortcuts: Record<ShortcutAction, Keybinding>;
  onShortcutsChange: (active: Record<ShortcutAction, Keybinding>) => void | Promise<void>;
  onLicenseChange?: () => void | Promise<void>;
  isExiting?: boolean;
  onBack: () => void;
  onImport: () => void;
  onExport: () => void;
  onBreachCheckDone: () => void;
  onOpenHealth?: () => void;
  onOpenSyncPairing?: (method?: "code") => void;
  onOpenFileImport?: () => void;
  onOpenPanic?: () => void;
  onOpenCodexGenerate?: () => void;
  onOpenCodexRestore?: () => void;
  /** Invoked from within Settings when a Pro-gated control is tapped on
   *  free tier. App owns the upgrade navigation + highlight state, so this
   *  callback is the single way for Settings to request that navigation. */
  onProGate?: (feature: ProFeature) => void;
  onCardChange?: (id: CardId) => void;
}

const FEEDBACK_CATEGORIES = ["Bug report", "Feature request", "Question", "Other"];
const MAX_FEEDBACK_MESSAGE_LENGTH = 4000;
const PRO_CELEBRATION_CARD_STEP_MS = 150;
const PRO_CELEBRATION_THANK_YOU_MS = 3200;

function sanitizeFeedbackMessage(value: string): string {
  return value
    .trim()
    .slice(0, MAX_FEEDBACK_MESSAGE_LENGTH)
    // biome-ignore lint/suspicious/noControlCharactersInRegex: intentional — strips control characters from feedback text
    .replace(/[\u0000-\u0008\u000B\u000C\u000E-\u001F\u007F]/g, "")
    .replace(/&/g, "&amp;")
    .replace(/</g, "&lt;")
    .replace(/>/g, "&gt;")
    .replace(/"/g, "&quot;")
    .replace(/'/g, "&#39;");
}

function formatActivatedSince(issued: string | undefined): string {
  if (!issued) return "Active";
  try {
    const d = new Date(issued);
    if (Number.isNaN(d.getTime())) return "Active";
    return `Active since ${d.toLocaleDateString(undefined, { month: "long", year: "numeric" })}`;
  } catch {
    return "Active";
  }
}

function initialSectionToCard(value: string | null | undefined): CardId | null {
  if (!value) return null;
  if (value === "security") return "protection";
  if (value === "license") return "pro";
  if (
    value === "protection" ||
    value === "vault" ||
    value === "sync" ||
    value === "appearance" ||
    value === "shortcuts" ||
    value === "pro" ||
    value === "feedback"
  ) {
    return value;
  }
  return null;
}

/**
 * §11 migration copy. It must never imply that old peers keep working: the
 * whole point of the reset is that they cannot.
 */
const SECURE_RESET_DISCLOSURE =
  "Peach will archive this device's old Sync trust and start the new Sync generation. " +
  "Every other device must be updated first, then re-paired with this one — they will " +
  "not continue on their own. Your vault and your recovery words are not changed.";

function secureResetHeadline(state: string | undefined): string {
  switch (state) {
    case "LEGACY_ACTIVE":
      return "Legacy Sync generation";
    case "RESET_REQUIRED":
      return "Reset required";
    case "RESET_CONFIRMED":
      return "Reset not completed";
    case "V2_ANCHOR":
    case "REPAIRING":
      return "Not re-paired";
    case "V2_ACTIVE":
      return "New Sync generation";
    case "UNKNOWN":
      return "Sync generation unreadable";
    default:
      return "Sync generation";
  }
}

function secureResetDetail(state: string | undefined): string {
  switch (state) {
    case "LEGACY_ACTIVE":
      return "This device still holds the old Sync trust. Resetting retires it for good: update Peach on every other device, then re-pair each one.";
    case "RESET_REQUIRED":
      return "Sync is stopped until the reset completes. Update Peach on every other device, then reset this one and re-pair each device.";
    case "RESET_CONFIRMED":
      return "The reset did not finish. Nothing was lost — the old trust is archived. Try again.";
    case "V2_ANCHOR":
    case "REPAIRING":
      return "This device anchors the new Sync generation and is not re-paired yet. Pair each device again; until then it keeps its own vault and cannot sync.";
    case "V2_ACTIVE":
      return "This device is on the new Sync generation. Each device is re-paired individually.";
    case "UNKNOWN":
      return "This device's Sync generation can't be read, so sync is stopped. Reinstall or contact support.";
    default:
      return "Sync state is unavailable.";
  }
}

export function SettingsView(props: SettingsProps) {
  const manifest = chrome.runtime.getManifest();
  const version = manifest.version;
  const initial = props.initialSection;
  const [activeCard, setActiveCard] = createSignal<CardId>(
    props.upgradeHighlight ? "pro" : initialSectionToCard(initial) ?? "pro"
  );

  createEffect(() => { props.onCardChange?.(activeCard()); });

  const [justActivated, setJustActivated] = createSignal(false);
  const [isFanning, setIsFanning] = createSignal(false);

  function triggerCelebration() {
    if (isFanning()) return;
    setJustActivated(false);
    setIsFanning(true);
    setActiveCard("pro");
    const fanOrder: CardId[] = ["protection", "vault", "sync", "appearance", "shortcuts", "feedback"];
    fanOrder.forEach((id, i) => {
      window.setTimeout(() => setActiveCard(id), (i + 1) * PRO_CELEBRATION_CARD_STEP_MS);
    });
    window.setTimeout(() => {
      setActiveCard("pro");
      setIsFanning(false);
      setJustActivated(true);
      window.setTimeout(() => setJustActivated(false), PRO_CELEBRATION_THANK_YOU_MS);
    }, (fanOrder.length + 1) * PRO_CELEBRATION_CARD_STEP_MS);
  }

  function handleProCelebrationClick(e: MouseEvent) {
    e.stopPropagation();
    triggerCelebration();
  }

  const [checkingBreaches, setCheckingBreaches] = createSignal(false);
  const [breachResult, setBreachResult] = createSignal<string | null>(null);
  const [licenseInfo, setLicenseInfo] = createSignal<LicenseInfo | null>(null);
  const [licenseKeyInput, setLicenseKeyInput] = createSignal("");
  const [licenseError, setLicenseError] = createSignal<string | null>(null);
  const [, setLicenseSuccess] = createSignal<string | null>(null);
  const [activatingLicense, setActivatingLicense] = createSignal(false);

  const isPro = () => props.isPro ?? false;
  const cards = createMemo<StackCardSpec[]>(() => [
    {
      id: "pro",
      num: "I · FOREVER",
      title: "Peach Pro",
      lede: isPro() ? "active · paid once, yours forever" : "$39 once · yours forever",
      bgVar: "--stack-pro-bg",
      fgVar: "--stack-pro-fg",
      icon: "spark",
      onIconClick: isPro() ? triggerCelebration : undefined,
    },
    {
      id: "protection",
      num: "II · PROTECT",
      title: "Protection",
      lede: `${props.breachMonitoring ? "breaches watched" : "breach watch off"} · ${props.lockOnClose ? "locks on close" : "manual lock"}`,
      bgVar: "--stack-protect-bg",
      fgVar: "--stack-protect-fg",
      icon: "shield",
    },
    {
      id: "vault",
      num: "III · KEEP",
      title: "Vault",
      lede: `${props.entriesCount} ${props.entriesCount === 1 ? "entry" : "entries"} · backups, history, cleanup`,
      bgVar: "--stack-vault-bg",
      fgVar: "--stack-vault-fg",
      icon: "lock",
    },
    {
      id: "sync",
      num: "IV · ECHO",
      title: "Sync",
      lede: isPro() ? "End to End Encryption" : "Pro · encrypted device sync",
      bgVar: "--stack-sync-bg",
      fgVar: "--stack-sync-fg",
      icon: "sync",
    },
    {
      id: "appearance",
      num: "V · DRESS",
      title: "Appearance",
      lede: `${props.theme} · ${props.accentColor} · ${props.textSize}`,
      bgVar: "--stack-appear-bg",
      fgVar: "--stack-appear-fg",
      icon: "sun",
    },
    {
      id: "shortcuts",
      num: "VI · KEYS",
      title: "Shortcuts",
      lede: `${SHORTCUT_DESCRIPTORS.length} bindings · what your fingers know`,
      bgVar: "--stack-shortcut-bg",
      fgVar: "--stack-shortcut-fg",
      icon: "keys",
    },
    {
      id: "feedback",
      num: "VII · ECHO",
      title: "Feedback",
      lede: `version ${version} · tell us what would make it better`,
      bgVar: "--stack-feedback-bg",
      fgVar: "--stack-feedback-fg",
      icon: "bubble",
    },
  ]);
  const [passkeyState, setPasskeyState] = createSignal<PasskeyProviderState | null>(null);
  const [passkeySaving, setPasskeySaving] = createSignal(false);

  // UI-3 / MV-7: devices vouched by another of the user's devices, awaiting
  // explicit confirmation before they become sync targets.
  interface PendingVouched {
    deviceId: string;
    deviceName: string;
    longTermPublicKeyHex: string;
    receivedAt: number;
    vouchedByDeviceId: string;
  }
  const [pendingVouched, setPendingVouched] = createSignal<PendingVouched[]>([]);
  const [vouchedBusy, setVouchedBusy] = createSignal<string | null>(null);
  // Paired-device management lives here — Settings is the sync hub.
  const [pairedDevices, setPairedDevices] = createSignal<PairedDevice[]>([]);
  const [trustDataCorrupted, setTrustDataCorrupted] = createSignal(false);

  const [confirmUnpair, setConfirmUnpair] = createSignal<string | null>(null);
  const [unpairError, setUnpairError] = createSignal<string | null>(null);
  const [renameDeviceId, setRenameDeviceId] = createSignal<string | null>(null);
  const [renameDraft, setRenameDraft] = createSignal("");
  const [syncStatus, setSyncStatus] = createSignal<"idle" | "syncing" | "error">("idle");
  const [syncFlash, setSyncFlash] = createSignal<string | null>(null);
  // The last sync ATTEMPT, kept on screen rather than flashed for 3 seconds —
  // a transient toast is no use for diagnosing a phone that isn't syncing.
  const [syncSummary, setSyncSummary] = createSignal<SyncOutcomeSummary>({});
  // §11: the Sync generation this installation is on. Not secret — a version
  // and a state name — so it renders the same in any session.
  const [generation, setGeneration] = createSignal<SyncGeneration | null>(null);
  const [resetOpen, setResetOpen] = createSignal(false);
  const [resetPassword, setResetPassword] = createSignal("");
  const [resetError, setResetError] = createSignal<string | null>(null);
  const [resetting, setResetting] = createSignal(false);
  const syncLight = () =>
    syncStatus() === "syncing"
      ? "busy"
      : syncIndicator(syncSummary(), pairedDevices().length);
  const syncLightLabel = () => syncIndicatorLabel(syncLight(), syncSummary());
  const lastSyncLine = () => {
    const s = syncSummary();
    if (!s.outcome) return "No sync attempted yet";
    return `${syncRelativeTime(s.finishedAt)} · ${describeSyncOutcome(s)}`;
  };
  async function loadSyncState() {
    const r = (await sendMessage({ type: "GET_SYNC_STATE" })) as {
      ok: boolean;
      data?: SyncOutcomeSummary;
    };
    if (r.ok && r.data) {
      setSyncSummary(r.data);
      setSyncStatus(r.data.status ?? "idle");
    }
  }

  async function loadGeneration() {
    const r = (await sendMessage({ type: "GET_SYNC_GENERATION" })) as {
      ok: boolean;
      data?: SyncGeneration | null;
    };
    if (r.ok) setGeneration(r.data ?? null);
  }

  async function runSecureReset() {
    setResetting(true);
    const r = (await sendMessage({
      type: "SECURE_RESET",
      payload: { password: resetPassword() },
    })) as { ok: boolean; data?: SyncGeneration | null; error?: string };
    setResetting(false);
    setResetPassword("");
    if (!r.ok) {
      setResetError(r.error ?? "The reset did not complete — nothing was lost, try again");
      await loadGeneration();
      return;
    }
    setResetError(null);
    setResetOpen(false);
    if (r.data) setGeneration(r.data);
  }

  const STALE_THRESHOLD_MS = 7 * 24 * 60 * 60 * 1000;
  function syncRelativeTime(when: number | undefined): string {
    if (!when) return "Not synced yet";
    const elapsed = Date.now() - when;
    if (elapsed < 60_000) return "Just now";
    const minutes = Math.floor(elapsed / 60_000);
    if (minutes < 60) return `${minutes} minute${minutes === 1 ? "" : "s"} ago`;
    const hours = Math.floor(minutes / 60);
    if (hours < 24) return `${hours} hour${hours === 1 ? "" : "s"} ago`;
    const days = Math.floor(hours / 24);
    return days < 7 ? `${days} day${days === 1 ? "" : "s"} ago` : "Not seen recently";
  }
  function isSyncStale(d: PairedDevice): boolean {
    return d.lastSyncedAt !== undefined && Date.now() - d.lastSyncedAt > STALE_THRESHOLD_MS;
  }
  function deviceTypeLabel(t: PairedDevice["deviceType"]): string {
    switch (t) {
      case "android": return "Android";
      case "ios": return "iPhone";
      case "extension": return "Browser";
      default: return "Device";
    }
  }

  async function loadPairedDevices() {
    if (!isPro()) return;
    const r = (await sendMessage({ type: "LIST_PAIRED_DEVICES" })) as {
      ok: boolean;
      error?: string;
      data?: { devices: PairedDevice[] };
    };
    if (r.ok) {
      setTrustDataCorrupted(false);
      setPairedDevices(r.data?.devices ?? []);
    } else if (r.error === "trust_data_corrupted") {
      setPairedDevices([]);
      setTrustDataCorrupted(true);
    }
  }
  async function unpairDevice(deviceId: string) {
    const result = (await sendMessage({ type: "UNPAIR_DEVICE", payload: { deviceId } })) as {
      ok: boolean;
      error?: string;
    };
    if (!result.ok) {
      setUnpairError(result.error ?? "Could not remove this device");
      return;
    }
    setUnpairError(null);
    setConfirmUnpair(null);
    await loadPairedDevices();
  }
  async function renameDevice(deviceId: string) {
    const name = renameDraft().trim();
    if (!name) return;
    const result = (await sendMessage({
      type: "RENAME_PAIRED_DEVICE",
      payload: { deviceId, name },
    })) as { ok: boolean };
    if (!result.ok) return;
    setRenameDeviceId(null);
    await loadPairedDevices();
  }
  async function syncNow() {
    setSyncStatus("syncing");
    setSyncFlash(null);
    const res = (await sendMessage({
      type: "TRIGGER_SYNC",
      payload: { reason: "manual", force: true },
    })) as { ok: boolean; error?: string };
    if (!res.ok) {
      setSyncStatus("error");
      setSyncSummary({ status: "error", outcome: "run_failed", detail: res.error });
      return;
    }
    // TRIGGER_SYNC returns as soon as the run is queued, so poll for the
    // outcome. A single delayed read used to land while the run was still
    // "syncing" and leave the button disabled forever.
    let s: SyncOutcomeSummary = { status: "syncing" };
    for (let i = 0; i < 40 && s.status === "syncing"; i++) {
      await new Promise((r) => setTimeout(r, 250));
      const state = (await sendMessage({ type: "GET_SYNC_STATE" })) as {
        ok: boolean;
        data?: SyncOutcomeSummary;
      };
      s = state.ok ? state.data ?? { status: "idle" } : { status: "error", outcome: "run_failed" };
    }
    setSyncSummary(s);
    setSyncStatus(s.status ?? "idle");
    // The persistent line below carries the outcome; the flash is only the
    // "that click did something" acknowledgement.
    setSyncFlash(describeSyncOutcome(s));
    setTimeout(() => setSyncFlash(null), 4000);
    await loadPairedDevices();
  }
  // UI-4 / MV-8: rotate sync identity confirmation dialog.
  const [rotateConfirmOpen, setRotateConfirmOpen] = createSignal(false);
  const [rotating, setRotating] = createSignal(false);
  const [rotateError, setRotateError] = createSignal<string | null>(null);
  const [showSyncConnection, setShowSyncConnection] = createSignal(false);
  const [showSyncRecovery, setShowSyncRecovery] = createSignal(false);

  async function loadPendingVouched() {
    const r = (await sendMessage({ type: "GET_PENDING_VOUCHED_DEVICES" })) as {
      ok: boolean;
      data?: PendingVouched[];
    };
    if (r.ok) setPendingVouched(r.data ?? []);
  }
  async function confirmVouched(deviceId: string) {
    setVouchedBusy(deviceId);
    try {
      await sendMessage({ type: "CONFIRM_VOUCHED_DEVICE", payload: { deviceId } });
      await loadPendingVouched();
    } finally {
      setVouchedBusy(null);
    }
  }
  async function rejectVouched(deviceId: string) {
    setVouchedBusy(deviceId);
    try {
      await sendMessage({ type: "REJECT_VOUCHED_DEVICE", payload: { deviceId } });
      await loadPendingVouched();
    } finally {
      setVouchedBusy(null);
    }
  }
  async function doRotateSyncIdentity() {
    setRotateError(null);
    setRotating(true);
    try {
      const r = (await sendMessage({ type: "ROTATE_SYNC_IDENTITY" })) as {
        ok: boolean;
        error?: string;
      };
      if (!r.ok) {
        setRotateError(r.error ?? "Rotation failed.");
        return;
      }
      setRotateConfirmOpen(false);
      // Backend set peach_recovery_pending; reuse the existing recovery-words
      // display (its GET_RECOVERY_WORDS fetch is exempted during pending).
      setShowNewRecoveryWords(true);
    } finally {
      setRotating(false);
    }
  }

  const [dedupCount, setDedupCount] = createSignal<number | null>(null);
  const [dedupRunning, setDedupRunning] = createSignal(false);
  const [dedupDone, setDedupDone] = createSignal<number | null>(null);

  const [declinedCardCount, setDeclinedCardCount] = createSignal(0);

  // Vault history (peach_vault_history) — last 10 snapshots, snapshotted
  // BEFORE every real-mode vault write so the user can roll back if a sync
  // or import overwrites the wrong state.
  const [historySnapshots, setHistorySnapshots] = createSignal<VaultSnapshot[]>([]);
  const [historyLoading, setHistoryLoading] = createSignal(false);
  const [historyRestoring, setHistoryRestoring] = createSignal<string | null>(null);
  const [historyShowAll, setHistoryShowAll] = createSignal(false);

  async function loadVaultHistory() {
    setHistoryLoading(true);
    try {
      const res = await sendMessage({ type: "GET_VAULT_HISTORY" });
      const list = (res as { ok: boolean; data?: VaultSnapshot[] }).data ?? [];
      setHistorySnapshots(list);
    } finally {
      setHistoryLoading(false);
    }
  }

  async function handleRestoreVaultSnapshot(id: string) {
    if (historyRestoring()) return;
    setHistoryRestoring(id);
    const res = await sendMessage({
      type: "RESTORE_VAULT_SNAPSHOT",
      payload: { snapshotId: id },
    });
    setHistoryRestoring(null);
    if ((res as { ok: boolean }).ok) {
      // Vault is now locked — let the parent close Settings; App.tsx's
      // VAULT_LOCKED listener will route back to the lock screen.
      props.onBack();
    }
  }

  function formatSnapshotTime(savedAt: number): string {
    const diff = Date.now() - savedAt;
    if (diff < 60_000) return "Just now";
    if (diff < 3_600_000) return `${Math.floor(diff / 60_000)}m ago`;
    const d = new Date(savedAt);
    const isToday = new Date().toDateString() === d.toDateString();
    const isYest =
      new Date(Date.now() - 86_400_000).toDateString() === d.toDateString();
    const t = d.toLocaleTimeString([], { hour: "numeric", minute: "2-digit" });
    if (isToday) return `Today ${t}`;
    if (isYest) return `Yesterday ${t}`;
    return `${d.toLocaleDateString([], { month: "short", day: "numeric" })} ${t}`;
  }

  function reasonLabel(reason: VaultSnapshot["reason"]): string {
    return (
      {
        local_save: "saved",
        sync_received: "synced",
        import: "imported",
        restore: "restored",
      } as const
    )[reason] ?? reason;
  }

  const [showVaultAdvanced, setShowVaultAdvanced] = createSignal(false);
  const [showWhatsNew, setShowWhatsNew] = createSignal(false);

  const [showChangePw, setShowChangePw] = createSignal(false);
  const [changePwCurrent, setChangePwCurrent] = createSignal("");
  const [changePwNew, setChangePwNew] = createSignal("");
  const [changePwConfirm, setChangePwConfirm] = createSignal("");
  const [changePwSaving, setChangePwSaving] = createSignal(false);
  const [changePwError, setChangePwError] = createSignal<string | null>(null);
  const [changePwSuccess] = createSignal(false);
  const [showNewRecoveryWords, setShowNewRecoveryWords] = createSignal(false);

  const [pinEnabled, setPinEnabled] = createSignal(false);
  const [pinFlow, setPinFlow] = createSignal<"setup" | "disable" | null>(null);
  const [pinCurrentPassword, setPinCurrentPassword] = createSignal("");
  const [pinValue, setPinValue] = createSignal("");
  const [pinConfirm, setPinConfirm] = createSignal("");
  const [pinSaving, setPinSaving] = createSignal(false);
  const [pinError, setPinError] = createSignal<string | null>(null);

  // UI-5 / LV-4: view existing recovery words behind a fresh password proof.
  const [showViewWords, setShowViewWords] = createSignal(false);
  const [viewWordsPassword, setViewWordsPassword] = createSignal("");
  const [viewWordsError, setViewWordsError] = createSignal<string | null>(null);
  const [viewedWords, setViewedWords] = createSignal<string[] | null>(null);
  const [viewWordsBusy, setViewWordsBusy] = createSignal(false);

  async function handleViewRecoveryWords() {
    setViewWordsError(null);
    if (!viewWordsPassword()) {
      setViewWordsError("Enter your master password.");
      return;
    }
    setViewWordsBusy(true);
    try {
      const r = (await sendMessage({
        type: "GET_RECOVERY_WORDS",
        payload: { password: viewWordsPassword() },
      })) as { ok: boolean; data?: string[]; error?: string };
      if (r.ok) {
        setViewedWords(r.data ?? []);
        setViewWordsPassword("");
        return;
      }
      switch (r.error) {
        case "wrong_password":
          setViewWordsError("Incorrect password");
          break;
        case "password_required":
          setViewWordsError("Enter your master password.");
          break;
        case "recovery_not_setup":
          setViewWordsError("Recovery words aren't set up for this vault yet.");
          break;
        default:
          setViewWordsError("Couldn't retrieve recovery words.");
      }
    } finally {
      setViewWordsBusy(false);
    }
  }
  function closeViewWords() {
    setShowViewWords(false);
    setViewWordsPassword("");
    setViewWordsError(null);
    setViewedWords(null);
  }

  const [duressEnabled, setDuressEnabled] = createSignal(false);
  const [showDuressSetup, setShowDuressSetup] = createSignal(false);
  const [duressPassword, setDuressPassword] = createSignal("");
  const [duressConfirm, setDuressConfirm] = createSignal("");
  const [duressMainPassword, setDuressMainPassword] = createSignal("");
  const [duressSaving, setDuressSaving] = createSignal(false);
  const [duressError, setDuressError] = createSignal<string | null>(null);
  const [duressSuccess, setDuressSuccess] = createSignal<string | null>(null);

  const [canaryEntries, setCanaryEntries] = createSignal<Array<{id: string; title: string; canary: Canary}>>([]);

  const [canaryTestingId, setCanaryTestingId] = createSignal<string | null>(null);
  const [canaryTestResult, setCanaryTestResult] = createSignal<{id: string; ok: boolean} | null>(null);

  const [fbCategory, setFbCategory] = createSignal("Bug report");
  const [fbMessage, setFbMessage] = createSignal("");
  type FeedbackState = 'idle' | 'sending' | 'sent' | 'error';
  const [feedbackState, setFeedbackState] = createSignal<FeedbackState>('idle');

  createEffect(() => {
    if (props.upgradeHighlight) {
      setActiveCard("pro");
    }
  });

  onMount(async () => {
    const [licenseRes, passkeyRes, duressRes, settingsRes, keyRes] = await Promise.all([
      sendMessage({ type: "GET_LICENSE" }),
      sendMessage({ type: "GET_PASSKEY_PROVIDER_STATE" }),
      sendMessage({ type: "IS_DURESS_ENABLED" }),
      sendMessage({ type: "GET_SETTINGS" }),
      sendMessage({ type: "GET_LICENSE_KEY" }),
    ]);

    // Vault history loads in the background — the Vault sub-view picks it up
    // when the user navigates in. Loading it lazily keeps Settings boot fast.
    void loadVaultHistory();

    // UI-3 / MV-7: surface devices a paired peer vouched for, and refresh the
    // list live if a VOUCHED_DEVICE_PENDING broadcast arrives while open.
    void loadPendingVouched();
    void loadPairedDevices();
    void loadSyncState();
    void loadGeneration();
    const onBroadcast = (msg: unknown) => {
      const m = msg as { type?: string; payload?: unknown } | null;
      if (m?.type === "VOUCHED_DEVICE_PENDING") {
        void loadPendingVouched();
      }
      if (m?.type === "SYNC_STATE_CHANGED") {
        const payload = (m.payload ?? {}) as SyncOutcomeSummary;
        setSyncSummary(payload);
        setSyncStatus(payload.status ?? "idle");
      }
    };
    chrome.runtime?.onMessage?.addListener(onBroadcast);
    onCleanup(() => {
      try { chrome.runtime?.onMessage?.removeListener(onBroadcast); } catch { /* ignore */ }
    });

    if ((licenseRes as { ok: boolean }).ok) {
      setLicenseInfo((licenseRes as { ok: boolean; data?: LicenseInfo }).data ?? null);
    }

    if ((passkeyRes as { ok: boolean }).ok) {
      setPasskeyState(
        (passkeyRes as { ok: boolean; data?: PasskeyProviderState }).data ?? null
      );
    }

    if ((duressRes as { ok: boolean }).ok) {
      setDuressEnabled((duressRes as { ok: boolean; data?: boolean }).data ?? false);
    }

    if ((settingsRes as { ok: boolean }).ok) {
      const sData = (settingsRes as { ok: boolean; data?: { declinedCardFingerprints?: string[]; pinEnabled?: boolean } }).data;
      setDeclinedCardCount(sData?.declinedCardFingerprints?.length ?? 0);
      setPinEnabled(sData?.pinEnabled === true);
    }

    if ((keyRes as { ok: boolean }).ok) {
      setLicenseKey((keyRes as { ok: boolean; data?: string }).data ?? null);
    }

    const entriesRes = await sendMessage({ type: "GET_ENTRIES" });
    if ((entriesRes as { ok: boolean }).ok) {
      const entries = (entriesRes as { ok: boolean; data?: Array<{id: string; title: string; canary?: Canary}> }).data ?? [];
      setCanaryEntries(
        entries
          .filter((e) => e.canary?.webhookUrl)
          .map((e) => ({ id: e.id, title: e.title, canary: e.canary! }))
      );
    }

  });

  function resetPinFlow() {
    setPinFlow(null);
    setPinCurrentPassword("");
    setPinValue("");
    setPinConfirm("");
    setPinError(null);
  }

  async function handleSetupPin() {
    setPinError(null);
    if (!pinCurrentPassword()) { setPinError("enter your current password"); return; }
    if (!/^\d{4,12}$/.test(pinValue())) { setPinError("PIN must be 4–12 digits"); return; }
    if (pinValue() !== pinConfirm()) { setPinError("PINs do not match"); return; }
    setPinSaving(true);
    const res = await sendMessage({
      type: "SETUP_PIN",
      payload: { currentPassword: pinCurrentPassword(), pin: pinValue() },
    }) as { ok: boolean; error?: string };
    if (res.ok) {
      setPinEnabled(true);
      resetPinFlow();
    } else {
      setPinError(res.error === "incorrect_current_password" ? "incorrect current password" : "couldn't set up PIN");
    }
    setPinSaving(false);
  }

  async function handleDisablePin() {
    setPinError(null);
    if (!pinCurrentPassword()) { setPinError("enter your current password"); return; }
    setPinSaving(true);
    const res = await sendMessage({
      type: "DISABLE_PIN",
      payload: { currentPassword: pinCurrentPassword() },
    }) as { ok: boolean; error?: string };
    if (res.ok) {
      setPinEnabled(false);
      resetPinFlow();
    } else {
      setPinError(res.error === "incorrect_current_password" ? "incorrect current password" : "couldn't remove PIN");
    }
    setPinSaving(false);
  }

  async function handleChangePassword() {
    setChangePwError(null);
    if (!changePwCurrent().trim()) { setChangePwError("enter your current password"); return; }
    if (changePwNew().length < 12) { setChangePwError("new password must be at least 12 characters"); return; }
    if (changePwNew() !== changePwConfirm()) { setChangePwError("new passwords do not match"); return; }
    if (changePwNew() === changePwCurrent()) { setChangePwError("new password must differ from current"); return; }
    setChangePwSaving(true);
    const res = await sendMessage({
      type: "CHANGE_PASSWORD",
      payload: { currentPassword: changePwCurrent(), newPassword: changePwNew() },
    }) as { ok: boolean; error?: string };
    if (res.ok) {
      setChangePwCurrent(""); setChangePwNew(""); setChangePwConfirm("");
      setShowChangePw(false);
      // LV-4: the user just authenticated (current password), so the recovery
      // words reveal that follows is exempt from the re-auth gate. The
      // background owns this session-scoped exemption; the display clears it.
      await sendMessage({ type: "SET_RECOVERY_CONFIRM_PENDING" });
      setShowNewRecoveryWords(true);
    } else {
      setChangePwError(res.error ?? "failed to change password");
    }
    setChangePwSaving(false);
  }

  const [copied, setCopied] = createSignal(false);

  async function copyLicenseKey(key: string) {
    await navigator.clipboard.writeText(key);
    setCopied(true);
    setTimeout(() => setCopied(false), 2000);
  }

  async function handleActivateLicense() {
    const key = licenseKeyInput().trim();
    if (!key) return;
    setActivatingLicense(true);
    setLicenseError(null);
    setLicenseSuccess(null);
    const res = await sendMessage({ type: "ACTIVATE_LICENSE", payload: { key } });
    setActivatingLicense(false);
    if ((res as { ok: boolean }).ok) {
      const data = (res as { ok: boolean; data?: LicenseInfo }).data;
      if (data?.valid) {
        setLicenseInfo(data);
        setLicenseKey(key);
        setLicenseSuccess("License activated!");
        setLicenseKeyInput("");
      } else {
        setLicenseError("Invalid license key");
      }
    } else {
      setLicenseError("Activation failed");
    }
  }

  async function handleTogglePasskeys() {
    const current = passkeyState();
    if (!current || !current.supported) return;
    setPasskeySaving(true);
    const res = await sendMessage({
      type: "SET_PASSKEY_PROVIDER_ENABLED",
      payload: { enabled: !current.enabled },
    });
    setPasskeySaving(false);
    if ((res as { ok: boolean }).ok) {
      setPasskeyState(
        (res as { ok: boolean; data?: PasskeyProviderState }).data ?? null
      );
    }
  }

  async function handleCheckAllBreaches() {
    setCheckingBreaches(true);
    setBreachResult(null);
    const res = await sendMessage({ type: "CHECK_ALL_BREACHES" });
    setCheckingBreaches(false);
    if ((res as { ok: boolean }).ok) {
      const data = (res as { ok: boolean; data?: Record<string, number> }).data ?? {};
      const breached = Object.values(data).filter((count) => count > 0).length;
      setBreachResult(
        breached > 0 ? `${breached} password${breached > 1 ? "s" : ""} found in breaches` : "All passwords clean"
      );
      props.onBreachCheckDone();
    }
  }


  async function handleSetupDuress() {
    const mainPw = duressMainPassword().trim();
    const duressPw = duressPassword().trim();
    const confirmPw = duressConfirm().trim();

    if (!mainPw) { setDuressError("enter your main password to confirm"); return; }
    if (duressPw.length < 8) { setDuressError("duress password must be at least 8 characters"); return; }
    if (duressPw === mainPw) { setDuressError("duress password must differ from your main password"); return; }
    if (duressPw !== confirmPw) { setDuressError("passwords do not match"); return; }

    setDuressSaving(true);
    setDuressError(null);

    const verifyRes = await sendMessage({ type: "VERIFY_MAIN_PASSWORD", payload: { password: mainPw } }) as { ok: boolean; data?: boolean };
    if (!verifyRes.ok || !verifyRes.data) {
      setDuressError("incorrect main password");
      setDuressSaving(false);
      return;
    }

    const res = await sendMessage({ type: "SETUP_DURESS", payload: { duressPassword: duressPw } }) as { ok: boolean; error?: string };
    setDuressSaving(false);
    if (res.ok) {
      setDuressEnabled(true);
      setShowDuressSetup(false);
      setDuressPassword("");
      setDuressConfirm("");
      setDuressMainPassword("");
      setDuressSuccess("Duress password set. If entered, a decoy vault will be shown.");
      setTimeout(() => setDuressSuccess(null), 5000);
    } else {
      setDuressError(
        res.error === "session_expired"
          ? "Vault session expired — lock and unlock Peach, then try again"
          : res.error ?? "failed to set duress password"
      );
    }
  }

  async function handleClearDeclinedCards() {
    await sendMessage({ type: "UPDATE_SETTINGS", payload: { declinedCardFingerprints: [] } });
    setDeclinedCardCount(0);
  }

  async function handleCountDuplicates() {
    setDedupRunning(true);
    setDedupDone(null);
    const res = await sendMessage({ type: "COUNT_DUPLICATES" }) as { ok: boolean; data?: number };
    setDedupRunning(false);
    if (res.ok) setDedupCount(res.data ?? 0);
  }

  async function handleDeduplicate() {
    setDedupRunning(true);
    const res = await sendMessage({ type: "DEDUPLICATE_ENTRIES" }) as { ok: boolean; data?: number };
    setDedupRunning(false);
    if (res.ok) {
      setDedupDone(res.data ?? 0);
      setDedupCount(0);
    }
  }

  async function handleDisableDuress() {
    const mainPw = duressMainPassword().trim();
    if (!mainPw) { setDuressError("enter your main password to confirm"); return; }

    setDuressSaving(true);
    setDuressError(null);

    const verifyRes = await sendMessage({ type: "VERIFY_MAIN_PASSWORD", payload: { password: mainPw } }) as { ok: boolean; data?: boolean };
    if (!verifyRes.ok || !verifyRes.data) {
      setDuressError("incorrect main password");
      setDuressSaving(false);
      return;
    }

    const res = await sendMessage({ type: "DISABLE_DURESS" }) as { ok: boolean; error?: string };
    setDuressSaving(false);
    if (res.ok) {
      setDuressEnabled(false);
      setShowDuressSetup(false);
      setDuressMainPassword("");
      setDuressSuccess("Duress password disabled.");
      setTimeout(() => setDuressSuccess(null), 4000);
    } else {
      setDuressError(res.error ?? "failed to disable duress password");
    }
  }

  async function handleSubmitFeedback() {
    const message = sanitizeFeedbackMessage(fbMessage());
    if (!message) return;

    setFeedbackState('sending');

    try {
      const category = FEEDBACK_CATEGORIES.includes(fbCategory())
        ? fbCategory()
        : FEEDBACK_CATEGORIES[0];
      const res = await fetch('https://api.web3forms.com/submit', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          access_key: WEB3FORMS_KEY,
          subject: `Peach Feedback - ${category}`,
          message,
          from_name: 'Peach User',
          // Honeypot — leave blank
          botcheck: '',
        }),
      });

      if (!res.ok) throw new Error(`HTTP ${res.status}`);
      const data = await res.json() as { success: boolean; message?: string };
      if (!data.success) throw new Error(data.message ?? 'unknown error');

      setFeedbackState('sent');
      setFbMessage('');
      setFbCategory(FEEDBACK_CATEGORIES[0]);
    } catch (err) {
      console.error('[feedback]', err);
      setFeedbackState('error');
      setTimeout(() => setFeedbackState('idle'), 4000);
    }
  }

  function renderSecurity() {
    return (
      <div class="peach-settings-body">
        <div class="peach-settings-group">
          <p class="peach-settings-sub-label">LOCKING</p>
          <div class="peach-settings-row">
            <span>Lock on close</span>
            <button
              class={`peach-toggle ${props.lockOnClose ? "is-on" : ""}`}
              onClick={() => void props.onLockOnCloseChange(!props.lockOnClose)}
              aria-label="Toggle lock on close"
            >
              <span class="peach-toggle-knob"></span>
            </button>
          </div>
          <div class="peach-settings-row">
            <span>Auto-lock after</span>
            <select
              class="peach-settings-select"
              value={String(props.autoLockMinutes)}
              onChange={(e) => void props.onAutoLockMinutesChange(Number(e.currentTarget.value))}
            >
              <option value="1">1 minute</option>
              <option value="5">5 minutes</option>
              <option value="15">15 minutes</option>
              <option value="30">30 minutes</option>
              <option value="0">Never</option>
            </select>
          </div>

          <p class="peach-settings-sub-label">QUICK UNLOCK</p>
          <div class="peach-settings-row peach-settings-row--meta">
            <span>PIN unlock</span>
            <button
              class="peach-btn peach-btn--subtle peach-btn--sm"
              onClick={() => { setPinFlow(pinEnabled() ? "disable" : "setup"); setPinError(null); }}
            >
              {pinEnabled() ? "remove" : "set up"}
            </button>
          </div>
          <Show when={pinFlow() === "setup"}>
            <div class="peach-settings-stack" style="padding: 4px 0 2px; gap: 6px;">
              <input
                class="peach-settings-input"
                type="password"
                placeholder="current password"
                value={pinCurrentPassword()}
                onInput={(e) => setPinCurrentPassword((e.target as HTMLInputElement).value)}
                autocomplete="current-password"
              />
              <input
                class="peach-settings-input"
                type="password"
                inputmode="numeric"
                maxlength="12"
                placeholder="new 4–12 digit PIN"
                value={pinValue()}
                onInput={(e) => setPinValue((e.target as HTMLInputElement).value.replace(/\D/g, "").slice(0, 12))}
                autocomplete="off"
              />
              <input
                class="peach-settings-input"
                type="password"
                inputmode="numeric"
                maxlength="12"
                placeholder="confirm PIN"
                value={pinConfirm()}
                onInput={(e) => setPinConfirm((e.target as HTMLInputElement).value.replace(/\D/g, "").slice(0, 12))}
                autocomplete="off"
                onKeyDown={(e) => { if (e.key === "Enter") void handleSetupPin(); }}
              />
              <Show when={pinError()}>
                <p class="peach-hint peach-hint-error" style="margin:0">{pinError()}</p>
              </Show>
              <button
                class="peach-btn peach-btn--accent peach-btn--sm"
                style="align-self:flex-start"
                onClick={() => void handleSetupPin()}
                disabled={pinSaving() || !pinCurrentPassword() || !/^\d{4,12}$/.test(pinValue()) || !/^\d{4,12}$/.test(pinConfirm())}
              >
                {pinSaving() ? "saving…" : "save PIN"}
              </button>
            </div>
          </Show>
          <Show when={pinFlow() === "disable"}>
            <div class="peach-settings-stack" style="padding: 4px 0 2px; gap: 6px;">
              <input
                class="peach-settings-input"
                type="password"
                placeholder="current password"
                value={pinCurrentPassword()}
                onInput={(e) => setPinCurrentPassword((e.target as HTMLInputElement).value)}
                autocomplete="current-password"
                onKeyDown={(e) => { if (e.key === "Enter") void handleDisablePin(); }}
              />
              <Show when={pinError()}>
                <p class="peach-hint peach-hint-error" style="margin:0">{pinError()}</p>
              </Show>
              <button
                class="peach-btn peach-btn--subtle peach-btn--sm"
                style="align-self:flex-start"
                onClick={() => void handleDisablePin()}
                disabled={pinSaving() || !pinCurrentPassword()}
              >
                {pinSaving() ? "removing…" : "remove PIN"}
              </button>
            </div>
          </Show>

          <p class="peach-settings-sub-label">BREACH PROTECTION</p>
          <div class="peach-settings-row">
            <span>Breach monitoring</span>
            <button
              class={`peach-toggle ${props.breachMonitoring ? "is-on" : ""}`}
              onClick={() => void props.onBreachMonitoringChange(!props.breachMonitoring)}
              aria-label="Toggle breach monitoring"
            >
              <span class="peach-toggle-knob"></span>
            </button>
          </div>
          <div class="peach-settings-row peach-settings-row--meta">
            <span>Check all passwords</span>
            <button
              class="peach-btn peach-btn--subtle peach-btn--sm"
              onClick={() => void handleCheckAllBreaches()}
              disabled={checkingBreaches()}
            >
              {checkingBreaches() ? "checking..." : "run"}
            </button>
          </div>
          <Show when={breachResult()}>
            <div class="peach-settings-row peach-settings-row--meta">
              <span>Last check</span>
              <span class="peach-settings-value">{breachResult()}</span>
            </div>
          </Show>

          <p class="peach-settings-sub-label">MASTER PASSWORD</p>
          <div class="peach-settings-row peach-settings-row--meta">
            <span>Master password</span>
            <button
              class="peach-btn peach-btn--subtle peach-btn--sm"
              onClick={() => { setShowChangePw((v) => !v); setChangePwError(null); }}
            >
              {showChangePw() ? "cancel" : "change"}
            </button>
          </div>
          <Show when={showChangePw()}>
            <div class="peach-settings-stack" style="padding: 4px 0 2px; gap: 6px;">
              <input
                class="peach-settings-input"
                type="password"
                placeholder="current password"
                value={changePwCurrent()}
                onInput={(e) => setChangePwCurrent((e.target as HTMLInputElement).value)}
                autocomplete="current-password"
              />
              <input
                class="peach-settings-input"
                type="password"
                placeholder="new password (min 12 chars)"
                value={changePwNew()}
                onInput={(e) => setChangePwNew((e.target as HTMLInputElement).value)}
                autocomplete="new-password"
              />
              <input
                class="peach-settings-input"
                type="password"
                placeholder="confirm new password"
                value={changePwConfirm()}
                onInput={(e) => setChangePwConfirm((e.target as HTMLInputElement).value)}
                autocomplete="new-password"
                onKeyDown={(e) => { if (e.key === "Enter") void handleChangePassword(); }}
              />
              <Show when={changePwError()}>
                <p class="peach-hint peach-hint-error" style="margin:0">{changePwError()}</p>
              </Show>
              <Show when={changePwSuccess()}>
                <p class="peach-hint" style="margin:0;color:var(--peach-accent)">password changed ✓</p>
              </Show>
              <button
                class="peach-btn peach-btn--accent peach-btn--sm"
                style="align-self:flex-start"
                onClick={() => void handleChangePassword()}
                disabled={changePwSaving() || !changePwCurrent() || !changePwNew() || !changePwConfirm()}
              >
                {changePwSaving() ? "saving…" : "save new password"}
              </button>
            </div>
          </Show>

          {/* UI-5 / LV-4: view existing recovery words behind a password proof. */}
          <div class="peach-settings-row peach-settings-row--meta">
            <span>Recovery words</span>
            <button
              class="peach-btn peach-btn--subtle peach-btn--sm"
              onClick={() => {
                if (showViewWords()) { closeViewWords(); } else { setShowViewWords(true); }
              }}
            >
              {showViewWords() ? "cancel" : "view"}
            </button>
          </div>
          <Show when={showViewWords()}>
            <div class="peach-settings-stack" style="padding: 4px 0 2px; gap: 6px;">
              <Show
                when={viewedWords()}
                fallback={
                  <>
                    <p class="peach-hint" style="margin:0;color:var(--peach-t2)">
                      Enter your master password to reveal your recovery words.
                    </p>
                    <input
                      class="peach-settings-input"
                      type="password"
                      placeholder="master password"
                      value={viewWordsPassword()}
                      onInput={(e) => setViewWordsPassword((e.target as HTMLInputElement).value)}
                      autocomplete="current-password"
                      onKeyDown={(e) => { if (e.key === "Enter") void handleViewRecoveryWords(); }}
                    />
                    <Show when={viewWordsError()}>
                      <p class="peach-hint peach-hint-error" style="margin:0">{viewWordsError()}</p>
                    </Show>
                    <button
                      class="peach-btn peach-btn--accent peach-btn--sm"
                      style="align-self:flex-start"
                      onClick={() => void handleViewRecoveryWords()}
                      disabled={viewWordsBusy() || !viewWordsPassword()}
                    >
                      {viewWordsBusy() ? "checking…" : "reveal recovery words"}
                    </button>
                  </>
                }
              >
                <div class="peach-recovery-words-grid">
                  <For each={viewedWords()!}>
                    {(word, i) => (
                      <span class="peach-recovery-word"><b>{i() + 1}</b> {word}</span>
                    )}
                  </For>
                </div>
                <button
                  class="peach-btn peach-btn--subtle peach-btn--sm"
                  style="align-self:flex-start"
                  onClick={closeViewWords}
                >done</button>
              </Show>
            </div>
          </Show>

          <p class="peach-settings-sub-label">
            DURESS PASSWORD
            <Show when={!isPro()}>
              <span class="peach-pro-mark" aria-label="Pro feature" style="margin-left:6px">✦</span>
            </Show>
          </p>
          <div class="peach-settings-row peach-settings-row--top">
            <div class="peach-settings-row-main">
              <span>
                Duress password
                <Show when={!isPro()}>
                  <span class="peach-pro-badge">Pro</span>
                </Show>
              </span>
              <span class="peach-settings-value" style="font-size:11px;line-height:1.5;color:var(--t2)">
                If entered under coercion, shows a decoy empty vault instead of your real one.
              </span>
            </div>
            <div class={`peach-duress-status-pill ${duressEnabled() ? "is-active" : ""}`}>
              {duressEnabled() ? "on" : "off"}
            </div>
          </div>

          <Show when={duressEnabled() && !showDuressSetup()}>
            <div class="peach-settings-row peach-settings-row--meta">
              <span class="peach-settings-value" style="font-size:11px;line-height:1.5;color:var(--peach-t2)">
                If someone forces you to unlock Peach, enter the duress password instead. A decoy empty vault opens; your real vault stays hidden. The encrypted storage is identical in size whether a hidden vault exists or not, so the hidden vault cannot be proven or disproven without both passwords. This protects against a coercer who demands your password — not against device malware or someone who already has your device unlocked.
              </span>
            </div>
          </Show>

          <Show when={duressSuccess()}>
            <div class="peach-settings-row peach-settings-row--meta">
              <span class="peach-settings-value" style="color:var(--peach-sync-ok)">{duressSuccess()}</span>
            </div>
          </Show>

          <Show when={!showDuressSetup()}>
            <div class="peach-settings-row peach-settings-row--meta">
              <button
                class="peach-btn peach-btn--subtle peach-btn--sm"
                onClick={() => {
                  // Pro gate entry-point: free users are redirected to the
                  // upgrade screen before the setup form opens. The server-
                  // side SETUP_DURESS handler is the single enforcement
                  // point; this is UI redirection so the form never appears
                  // for a user who can't complete it.
                  if (!isPro() && !duressEnabled()) {
                    props.onProGate?.("duress_vault");
                    setActiveCard("pro");
                    return;
                  }
                  setShowDuressSetup(true);
                  setDuressError(null);
                  setDuressSuccess(null);
                  setDuressPassword("");
                  setDuressConfirm("");
                  setDuressMainPassword("");
                }}
              >
                {duressEnabled() ? "Change / disable" : "Set up"}
              </button>
            </div>
          </Show>

          <Show when={showDuressSetup()}>
            <div class="peach-duress-form">
              <label class="peach-label">main password (to confirm)</label>
              <input
                class="peach-settings-input"
                type="password"
                placeholder="your current master password"
                autocomplete="current-password"
                value={duressMainPassword()}
                onInput={(e) => setDuressMainPassword(e.currentTarget.value)}
              />
              <Show when={!duressEnabled()}>
                <label class="peach-label">new duress password</label>
                <input
                  class="peach-settings-input"
                  type="password"
                  placeholder="duress password (min 8 chars)"
                  autocomplete="new-password"
                  value={duressPassword()}
                  onInput={(e) => setDuressPassword(e.currentTarget.value)}
                />
                <label class="peach-label">confirm duress password</label>
                <input
                  class="peach-settings-input"
                  type="password"
                  placeholder="confirm duress password"
                  autocomplete="new-password"
                  value={duressConfirm()}
                  onInput={(e) => setDuressConfirm(e.currentTarget.value)}
                />
              </Show>

              <Show when={duressError()}>
                <p class="peach-hint peach-hint-error">{duressError()}</p>
              </Show>

              <div class="peach-duress-actions">
                <button
                  class="peach-btn peach-btn--subtle peach-btn--sm"
                  onClick={() => { setShowDuressSetup(false); setDuressError(null); }}
                >
                  cancel
                </button>
                <Show when={duressEnabled()}>
                  <button
                    class="peach-btn peach-btn--ghost peach-btn--sm"
                    style="color:var(--peach-breach)"
                    onClick={() => void handleDisableDuress()}
                    disabled={duressSaving()}
                  >
                    {duressSaving() ? "disabling..." : "disable duress"}
                  </button>
                </Show>
                <Show when={!duressEnabled()}>
                  <button
                    class="peach-btn peach-btn--accent peach-btn--sm"
                    onClick={() => void handleSetupDuress()}
                    disabled={duressSaving() || !duressMainPassword() || !duressPassword() || !duressConfirm()}
                  >
                    {duressSaving() ? "saving..." : "save"}
                  </button>
                </Show>
              </div>
            </div>
          </Show>

          <p class="peach-settings-sub-label">
            CANARY ENTRIES
            <Show when={!isPro()}>
              <span class="peach-pro-mark" aria-label="Pro feature" style="margin-left:6px">✦</span>
            </Show>
          </p>
          <div class="peach-settings-row peach-settings-row--top">
            <div class="peach-settings-row-main">
              <span>
                Canary entries
                <Show when={!isPro()}>
                  <span class="peach-pro-badge">Pro</span>
                </Show>
              </span>
              <span class="peach-settings-value" style="font-size:11px;line-height:1.5;color:var(--peach-t2)">
                Silently pings a webhook when an entry is accessed. Configure canary on any entry in your vault.
              </span>
            </div>
            <span class="peach-settings-value" style="flex-shrink:0">
              {canaryEntries().length > 0 ? `${canaryEntries().length} active` : "none"}
            </span>
          </div>
          <Show when={canaryEntries().length > 0}>
            <For each={canaryEntries()}>
              {(entry) => (
                <div class="peach-settings-row peach-settings-row--meta">
                  <span style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0">{entry.title}</span>
                  <button
                    class="peach-btn peach-btn--subtle peach-btn--sm"
                    onClick={() => void handleTestCanary(entry)}
                    disabled={canaryTestingId() === entry.id}
                    style="flex-shrink:0"
                  >
                    {canaryTestingId() === entry.id
                      ? "sending…"
                      : canaryTestResult()?.id === entry.id
                        ? (canaryTestResult()!.ok ? "sent ✓" : "failed ✗")
                        : "test"}
                  </button>
                </div>
              )}
            </For>
          </Show>

          <p class="peach-settings-sub-label">PASSKEYS</p>
          <div class="peach-settings-row peach-settings-row--top">
            <div class="peach-settings-row-main">
              <span>Intercept passkey requests</span>
              <span class="peach-settings-value" style="font-size:11px;line-height:1.5;color:var(--t2)">
                Peach can handle passkey sign-in and creation on supported Chromium browsers.
              </span>
            </div>
            <button
              class={`peach-toggle ${passkeyState()?.enabled ? "is-on" : ""}`}
              onClick={() => void handleTogglePasskeys()}
              aria-label="Toggle passkey interception"
              disabled={!passkeyState()?.supported || passkeySaving()}
            >
              <span class="peach-toggle-knob"></span>
            </button>
          </div>
          <div class="peach-settings-row peach-settings-row--meta">
            <span>Status</span>
            <span class="peach-settings-value">{passkeyState()?.statusLabel ?? "Unavailable"}</span>
          </div>
          <div class="peach-settings-row peach-settings-row--meta">
            <span>Browser</span>
            <span class="peach-settings-value">
              {passkeyState()?.browserLabel ?? "Unknown"}
              {passkeyState()?.supported ? " ✓" : " (interception unavailable)"}
            </span>
          </div>
          <div class="peach-info-notice" style="margin-top:8px">
            Only one passkey provider can be active at a time. Disable Bitwarden or 1Password passkey interception if Peach reports a conflict.
          </div>
          <Show when={passkeyState()?.conflict}>
            <div class="peach-settings-row peach-settings-row--meta">
              <span class="peach-settings-value" style="color:#e7b36b">{passkeyState()!.conflict}</span>
            </div>
          </Show>
        </div>
      </div>
    );
  }

  function renderVault() {
    return (
      <div class="peach-settings-body">
        <div class="peach-settings-group">
          <p class="peach-settings-sub-label">ENTRIES</p>
          <div class="peach-settings-row peach-settings-row--meta">
            <span>Entries</span>
            <span class="peach-settings-value">{props.entriesCount}</span>
          </div>
          <div class="peach-settings-row peach-settings-row--meta">
            <span>Duplicates</span>
            <Show when={dedupDone() !== null} fallback={
              <button
                class="peach-btn peach-btn--subtle peach-btn--sm"
                onClick={() => void handleCountDuplicates()}
                disabled={dedupRunning()}
              >
                {dedupRunning() ? "scanning..." : dedupCount() === null ? "scan" : dedupCount() === 0 ? "none found" : `${dedupCount()} found — remove?`}
              </button>
            }>
              <span class="peach-settings-value" style="color:var(--peach-sync-ok)">
                {dedupDone() === 0 ? "already clean" : `removed ${dedupDone()}`}
              </span>
            </Show>
          </div>
          <Show when={dedupCount() !== null && dedupCount()! > 0 && dedupDone() === null}>
            <div class="peach-settings-row peach-settings-row--meta" style="flex-direction:column;align-items:stretch;gap:6px">
              <div class="peach-restore-warning">
                {dedupCount()} duplicate {dedupCount() === 1 ? "entry" : "entries"} found. The newest copy of each will be kept; older duplicates will be moved to trash.
              </div>
              <div style="display:flex;gap:6px">
                <button
                  class="peach-btn peach-btn--subtle peach-btn--sm"
                  onClick={() => setDedupCount(null)}
                >
                  cancel
                </button>
                <button
                  class="peach-btn peach-btn--accent peach-btn--sm"
                  onClick={() => void handleDeduplicate()}
                  disabled={dedupRunning()}
                >
                  {dedupRunning() ? "removing..." : "remove duplicates"}
                </button>
              </div>
            </div>
          </Show>

          <p class="peach-settings-sub-label">MAINTENANCE</p>
          <div class="peach-settings-row peach-settings-row--meta">
            <span>Trash auto-delete</span>
            <select
              class="peach-settings-select"
              value={String(props.trashRetentionDays)}
              onChange={(e) => void props.onTrashRetentionChange(Number(e.currentTarget.value))}
            >
              <option value="7">7 days</option>
              <option value="30">30 days</option>
              <option value="90">90 days</option>
              <option value="0">Never</option>
            </select>
          </div>
          <div class="peach-settings-row peach-settings-row--meta">
            <span>Advanced Vault Health</span>
            <button class="peach-btn peach-btn--subtle peach-btn--sm" onClick={props.onOpenHealth}>
              open
            </button>
          </div>
          <Show when={declinedCardCount() > 0}>
            <div class="peach-settings-row peach-settings-row--meta">
              <span>{declinedCardCount()} card{declinedCardCount() === 1 ? '' : 's'} set to never save</span>
              <button class="peach-btn peach-btn--subtle peach-btn--sm" onClick={() => void handleClearDeclinedCards()}>
                Clear
              </button>
            </div>
          </Show>

          <p class="peach-settings-sub-label">DATA</p>
          <div class="peach-settings-row peach-settings-row--meta">
            <span>Import passwords</span>
            <button class="peach-btn peach-btn--subtle peach-btn--sm" onClick={props.onImport}>
              open
            </button>
          </div>
          <div class="peach-settings-row peach-settings-row--meta">
            <span>Export backup</span>
            <button class="peach-btn peach-btn--subtle peach-btn--sm" onClick={props.onExport}>
              open
            </button>
          </div>
          <div class="peach-settings-row peach-settings-row--meta">
            <span>
              Peach Codex
              <Show when={!isPro()}>
                <span class="peach-pro-badge">Pro</span>
              </Show>
            </span>
            <button
              class="peach-btn peach-btn--subtle peach-btn--sm"
              onClick={() => props.onOpenCodexGenerate?.()}
            >
              open
            </button>
          </div>
          {/* Restore from Codex: intentionally never gated — a printed
              Codex must remain restorable regardless of license state. */}
          <div class="peach-settings-row peach-settings-row--meta">
            <span>Restore from Codex</span>
            <button
              class="peach-btn peach-btn--subtle peach-btn--sm"
              onClick={() => props.onOpenCodexRestore?.()}
            >
              open
            </button>
          </div>

          <Show when={hasReleaseNotes()}>
            <p class="peach-settings-sub-label">RELEASE NOTES</p>
            <div class="peach-settings-row peach-settings-row--meta">
              <span>v{PEACH_VERSION}</span>
              <button class="peach-btn peach-btn--subtle peach-btn--sm" onClick={() => setShowWhatsNew(true)}>
                view
              </button>
            </div>
          </Show>

          <span class="peach-settings-sub-label">VAULT HISTORY</span>
          <Show when={historyLoading()}>
            <p class="peach-settings-hint">Loading…</p>
          </Show>
          <Show when={!historyLoading() && historySnapshots().length === 0}>
            <p class="peach-settings-hint">
              No snapshots yet. Peach saves automatically before every change —
              saves, syncs, and imports.
            </p>
          </Show>
          <Show when={!historyLoading() && historySnapshots().length > 0}>
            <p class="peach-settings-hint">
              Restoring locks your vault. Unlock with the password that
              encrypted that snapshot to confirm.
            </p>
            <div class="peach-history-list">
              <For each={historySnapshots().slice(0, historyShowAll() ? undefined : 3)}>
                {(snap) => (
                  <div class="peach-history-row">
                    <div class="peach-history-meta">
                      <span class="peach-history-time">
                        {formatSnapshotTime(snap.savedAt)}
                      </span>
                      <span class="peach-history-sub">
                        {[
                          snap.entryCount !== null
                            ? `up to ${snap.entryCount} ${snap.entryCount === 1 ? "entry" : "entries"}`
                            : null,
                          reasonLabel(snap.reason),
                        ]
                          .filter(Boolean)
                          .join(" · ")}
                      </span>
                    </div>
                    <button
                      class={`peach-btn peach-btn--subtle peach-btn--sm peach-history-btn${
                        historyRestoring() === snap.id ? " is-busy" : ""
                      }`}
                      onClick={() => void handleRestoreVaultSnapshot(snap.id)}
                      disabled={historyRestoring() !== null}
                    >
                      <Show when={historyRestoring() === snap.id} fallback="Restore">
                        …
                      </Show>
                    </button>
                  </div>
                )}
              </For>
            </div>
            <Show when={historySnapshots().length > 3}>
              <button
                class="peach-settings-advanced-toggle"
                onClick={() => setHistoryShowAll((v) => !v)}
                aria-expanded={historyShowAll()}
              >
                <span class="peach-settings-hint" style="margin:0">
                  {historyShowAll() ? "show less" : `${historySnapshots().length - 3} older`}
                </span>
                <span class="peach-settings-advanced-chevron">
                  {historyShowAll() ? "▲" : "▼"}
                </span>
              </button>
            </Show>
            <p class="peach-history-footer">
              {historySnapshots().length} of 10 snapshots
            </p>
          </Show>

          <button
            class="peach-settings-advanced-toggle"
            onClick={() => setShowVaultAdvanced((v) => !v)}
            aria-expanded={showVaultAdvanced()}
          >
            <span class="peach-settings-sub-label" style="margin:0">ADVANCED</span>
            <span class="peach-settings-advanced-chevron">
              {showVaultAdvanced() ? "▲" : "▼"}
            </span>
          </button>

          <Show when={showVaultAdvanced()}>
            <div class="peach-danger-card">
              <div class="peach-danger-card-head">
                <span class="peach-danger-card-glyph" aria-hidden="true">⟳</span>
                <h3 class="peach-danger-card-title">Replace vault from backup</h3>
              </div>
              <p class="peach-danger-card-copy">
                Wipes the current vault and restores from a backup file.
                Recoverable only if your backup is good.
              </p>
              <button
                class="peach-danger-card-button"
                onClick={() => props.onOpenFileImport?.()}
              >
                Choose backup file
              </button>
            </div>

            <Show when={props.onOpenPanic}>
              <div class="peach-danger-card peach-danger-card--hazard">
                <div class="peach-danger-card-head">
                  <span class="peach-danger-card-glyph" aria-hidden="true">⚠</span>
                  <h3 class="peach-danger-card-title">Destroy vault</h3>
                </div>
                <p class="peach-danger-card-copy">
                  Permanently wipes every entry, setting, and license on this
                  device. There is no recovery.
                </p>
                <button
                  class="peach-danger-card-button"
                  onClick={() => props.onOpenPanic?.()}
                >
                  Begin destruction
                </button>
              </div>
            </Show>
          </Show>
        </div>
      </div>
    );
  }

  function renderSync() {
    return (
      <div class="peach-settings-body">
        <div class="peach-settings-group">
          <p class="peach-settings-sub-label" style="margin-top:0">SYNC STATUS</p>
          <Show when={trustDataCorrupted()}>
            <p class="peach-settings-value" role="alert" style="color:var(--peach-danger,#e5805c);line-height:1.5">
              Device trust data is damaged — re-pair your devices after updating
            </p>
          </Show>
          <div
            class="peach-settings-row peach-settings-row--meta"
            style="align-items:center;gap:8px"
            aria-label={syncLightLabel()}
            title={syncLightLabel()}
          >
            <span class={`stk-pip stk-pip--sync is-${syncLight()}`} aria-hidden="true" />
            <span class="peach-settings-value" style="color:var(--peach-t2);line-height:1.5;flex:1;min-width:0;overflow-wrap:anywhere">
              {syncFlash() ?? lastSyncLine()}
            </span>
            {/* The transfer counts already ride in the status line, so this row
                was an empty flex sibling in every other case: it read as a dead
                gap and held the button away from the status it belongs to. */}
            <Show when={pairedDevices().length > 0}>
              <button
                class="peach-btn peach-btn--subtle peach-btn--sm"
                aria-label="Sync this vault now"
                disabled={syncStatus() === "syncing"}
                onClick={() => void syncNow()}
              >{syncStatus() === "syncing" ? "syncing…" : "sync now"}</button>
            </Show>
          </div>

          {/* §11: this panel is a migration call to action, not a permanent
              label. On the settled new generation there is nothing left to do
              here, so it goes away entirely — Android applies the same rule. */}
          <Show when={generation()?.state && generation()?.state !== "V2_ACTIVE"}>
            <p class="peach-settings-sub-label">SECURE SYNC RESET</p>
            <div class="peach-settings-row peach-settings-row--top">
              <div class="peach-settings-row-main">
                <span class="peach-settings-value" style="color:var(--peach-t1)">
                  {secureResetHeadline(generation()?.state)}
                </span>
                <span class="peach-settings-value" style="font-size:11px;line-height:1.5;color:var(--peach-t2)">
                  {secureResetDetail(generation()?.state)}
                </span>
              </div>
              <Show
                when={
                  generation()?.state === "LEGACY_ACTIVE" ||
                  generation()?.state === "RESET_REQUIRED" ||
                  generation()?.state === "RESET_CONFIRMED"
                }
              >
                <button
                  class="peach-btn peach-btn--subtle peach-btn--sm"
                  onClick={() => {
                    setResetError(null);
                    setResetPassword("");
                    setResetOpen(true);
                  }}
                >reset sync</button>
              </Show>
            </div>
            <Show when={resetError()}>
              <p
                class="peach-settings-value"
                role="alert"
                style="color:var(--peach-danger,#e5805c);font-size:11px;line-height:1.5"
              >{resetError()}</p>
            </Show>
            <Show when={resetOpen()}>
              <div class="peach-settings-stack" style="padding: 4px 0 2px; gap: 6px;">
                <p class="peach-settings-value" style="font-size:11px;line-height:1.5;color:var(--peach-t2)">
                  {SECURE_RESET_DISCLOSURE}
                </p>
                <input
                  class="peach-settings-input"
                  type="password"
                  placeholder="master password"
                  value={resetPassword()}
                  onInput={(e) => setResetPassword((e.target as HTMLInputElement).value)}
                  autocomplete="current-password"
                />
                <div style="display:flex;gap:4px">
                  <button
                    class="peach-btn peach-btn--subtle peach-btn--sm"
                    disabled={resetting()}
                    onClick={() => void runSecureReset()}
                  >{resetting() ? "resetting…" : "reset"}</button>
                  <button
                    class="peach-btn peach-btn--subtle peach-btn--sm"
                    disabled={resetting()}
                    onClick={() => setResetOpen(false)}
                  >cancel</button>
                </div>
              </div>
            </Show>
          </Show>

          <Show when={pairedDevices().length > 0}>
            <p class="peach-settings-sub-label">PAIRED DEVICES</p>
            <For each={pairedDevices()}>
              {(d) => (
                <div class="peach-settings-row peach-settings-row--top">
                  <div class="peach-settings-row-main">
                    <Show
                      when={renameDeviceId() === d.deviceId}
                      fallback={<span>{d.localAlias ?? d.deviceName ?? "Unnamed device"}</span>}
                    >
                      <input
                        class="peach-settings-input"
                        aria-label={`Rename ${d.localAlias ?? d.deviceName ?? "device"}`}
                        maxlength={64}
                        value={renameDraft()}
                        onInput={(event) => setRenameDraft(event.currentTarget.value)}
                        onKeyDown={(event) => {
                          if (event.key === "Enter") void renameDevice(d.deviceId);
                          if (event.key === "Escape") setRenameDeviceId(null);
                        }}
                      />
                    </Show>
                    <span class="peach-settings-value" style="font-size:11px;line-height:1.5;color:var(--peach-t2)">
                      {deviceTypeLabel(d.deviceType)} · {syncRelativeTime(d.lastSyncedAt)}{isSyncStale(d) ? " · not seen recently" : ""}
                    </span>
                  </div>
                  <Show
                    when={confirmUnpair() === d.deviceId}
                    fallback={
                      <div style="display:flex;gap:4px;flex-shrink:0">
                        <Show
                          when={renameDeviceId() === d.deviceId}
                          fallback={
                            <button
                              class="peach-btn peach-btn--subtle peach-btn--sm"
                              onClick={() => {
                                setRenameDraft(d.localAlias ?? d.deviceName ?? "");
                                setRenameDeviceId(d.deviceId);
                              }}
                            >rename</button>
                          }
                        >
                          <button class="peach-btn peach-btn--subtle peach-btn--sm" onClick={() => setRenameDeviceId(null)}>cancel</button>
                          <button class="peach-btn peach-btn--subtle peach-btn--sm" disabled={!renameDraft().trim()} onClick={() => void renameDevice(d.deviceId)}>save</button>
                        </Show>
                        <button
                          class="peach-btn peach-btn--subtle peach-btn--sm"
                          onClick={() => {
                            setUnpairError(null);
                            setConfirmUnpair(d.deviceId);
                          }}
                        >remove</button>
                      </div>
                    }
                  >
                    {/* HOLE 4: revocation stops this device receiving future
                        changes. It does NOT secure the vault against it — that
                        device may already hold the recovery words, which are
                        master-password-equivalent and restore the whole vault
                        anywhere, forever, with no sync involved. Say so here,
                        rather than leaving the user falsely reassured. */}
                    <div class="peach-unpair-confirm">
                      <p class="peach-unpair-confirm-note">
                        Stops this device receiving future changes. It doesn't
                        lock it out of what it already has — if it's lost or
                        stolen, also change your master password and generate
                        new recovery words.
                      </p>
                      <div style="display:flex;gap:6px;justify-content:flex-end">
                        <button class="peach-btn peach-btn--subtle peach-btn--sm" onClick={() => setConfirmUnpair(null)}>cancel</button>
                        <button
                          class="peach-btn peach-btn--sm"
                          style="background:var(--peach-breach);border-color:var(--peach-breach)"
                          onClick={() => void unpairDevice(d.deviceId)}
                        >remove</button>
                      </div>
                    </div>
                      <Show when={unpairError()}>
                        <p class="peach-settings-value" role="alert" style="color:var(--peach-danger,#e5805c);font-size:11px;line-height:1.5">
                          {unpairError()}
                        </p>
                      </Show>
                  </Show>
                </div>
              )}
            </For>
          </Show>

          <Show when={pendingVouched().length > 0}>
            <p class="peach-settings-sub-label">
              PENDING DEVICES
              <span class="peach-pro-badge" style="background:#C8A840;color:#1a1a1a">{pendingVouched().length}</span>
            </p>
            <For each={pendingVouched()}>
              {(dev) => (
                <div class="peach-settings-row peach-settings-row--top">
                  <div class="peach-settings-row-main">
                    <span>{dev.deviceName}</span>
                    <span class="peach-settings-value" style="font-size:11px;line-height:1.5;color:var(--peach-t2)">
                      Key {dev.longTermPublicKeyHex.slice(0, 12).match(/.{4}/g)?.join(" ")} ·
                      requested {new Date(dev.receivedAt).toISOString().slice(0, 16).replace("T", " ")} UTC ·
                      vouched by device {dev.vouchedByDeviceId}. Allowing it can read
                      existing vault contents and all future changes.
                    </span>
                  </div>
                  <div style="display:flex;gap:6px;flex-shrink:0">
                    <button
                      class="peach-btn peach-btn--sm"
                      disabled={vouchedBusy() === dev.deviceId}
                      onClick={() => void confirmVouched(dev.deviceId)}
                    >Allow</button>
                    <button
                      class="peach-btn peach-btn--subtle peach-btn--sm"
                      disabled={vouchedBusy() === dev.deviceId}
                      onClick={() => void rejectVouched(dev.deviceId)}
                    >Reject</button>
                  </div>
                </div>
              )}
            </For>
          </Show>

          <p class="peach-settings-sub-label">ADD A DEVICE</p>
          <button
            class="peach-sync-pair-option"
            onClick={() => props.onOpenSyncPairing?.("code")}
          >
            <span class="peach-sync-pair-option-icon" aria-hidden="true">
              <svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round">
                <rect x="6" y="2.5" width="8" height="15" rx="1.6" />
                <path d="M9 15 L11 15" />
              </svg>
            </span>
            <span class="peach-sync-pair-option-main">
              <span class="peach-sync-pair-option-title">Show a code</span>
              <span class="peach-sync-pair-option-sub">Scan it with Peach on your phone, then confirm one 8-digit code</span>
            </span>
            <span class="peach-sync-pair-option-chevron" aria-hidden="true">›</span>
          </button>
          <Show when={!isPro()}>
            <p class="peach-settings-value" style="font-size:11px;line-height:1.5;color:var(--peach-t2);margin:8px 2px 0">
              At least one device needs Peach Pro — pair with a Pro device and it carries over to here.
            </p>
          </Show>

          <button
            class="peach-settings-advanced-toggle peach-sync-disclosure-toggle"
            onClick={() => setShowSyncConnection((value) => !value)}
            aria-expanded={showSyncConnection()}
            aria-controls="peach-sync-connection"
          >
            <span>
              <span class="peach-settings-sub-label" style="margin:0">CONNECTION</span>
              <span class="peach-sync-disclosure-summary">Relay and privacy choices</span>
            </span>
            <span class="peach-settings-advanced-chevron">
              {showSyncConnection() ? "▲" : "▼"}
            </span>
          </button>
          <Show when={showSyncConnection()}>
            <div id="peach-sync-connection" class="peach-sync-disclosure-content">
              <SyncModeSelector />
            </div>
          </Show>

          <button
            class="peach-settings-advanced-toggle peach-sync-disclosure-toggle"
            onClick={() => setShowSyncRecovery((value) => !value)}
            aria-expanded={showSyncRecovery()}
            aria-controls="peach-sync-recovery"
          >
            <span>
              <span class="peach-settings-sub-label" style="margin:0">RECOVERY &amp; SECURITY</span>
              <span class="peach-sync-disclosure-summary">For a lost or stolen device</span>
            </span>
            <span class="peach-settings-advanced-chevron">
              {showSyncRecovery() ? "▲" : "▼"}
            </span>
          </button>
          <Show when={showSyncRecovery()}>
            <div id="peach-sync-recovery" class="peach-sync-disclosure-content">
              <Show
                when={rotateConfirmOpen()}
                fallback={
                  <div class="peach-settings-row peach-settings-row--top">
                    <div class="peach-settings-row-main">
                      <span>Rotate sync identity</span>
                      <span class="peach-settings-value" style="font-size:11px;line-height:1.5;color:var(--peach-t2)">
                        Disconnects every device and replaces the keys used for sync.
                      </span>
                    </div>
                    <button
                      class="peach-btn peach-btn--subtle peach-btn--sm"
                      style="color:var(--peach-breach);border-color:color-mix(in srgb,var(--peach-breach) 40%,transparent)"
                      onClick={() => { setRotateError(null); setRotateConfirmOpen(true); }}
                    >rotate</button>
                  </div>
                }
              >
                <div class="peach-info-notice" style="margin-top:8px;border-color:color-mix(in srgb,var(--peach-breach) 40%,transparent)">
                  This disconnects every paired device and changes your 12 recovery words. You'll be shown the new words next.
                  <Show when={rotateError()}>
                    <div style="color:var(--peach-breach);margin-top:6px">{rotateError()}</div>
                  </Show>
                  <div style="display:flex;gap:6px;margin-top:10px">
                    <button
                      class="peach-btn peach-btn--subtle peach-btn--sm"
                      disabled={rotating()}
                      onClick={() => setRotateConfirmOpen(false)}
                    >Cancel</button>
                    <button
                      class="peach-btn peach-btn--sm"
                      style="background:var(--peach-breach);border-color:var(--peach-breach)"
                      disabled={rotating()}
                      onClick={() => void doRotateSyncIdentity()}
                    >{rotating() ? "Rotating…" : "Rotate sync identity"}</button>
                  </div>
                </div>
              </Show>
            </div>
          </Show>
        </div>
      </div>
    );
  }

  function renderAppearance() {
    const sizeOptions: Array<{ id: "medium" | "large"; label: string }> = [
      { id: "medium", label: "Default" },
      { id: "large", label: "Large" },
    ];
    return (
      <div class="peach-settings-body">
        <div class="peach-settings-group">
          <p class="peach-settings-sub-label">THEME</p>
          <div class="peach-settings-row peach-settings-row--meta">
            <span>Theme</span>
            <button
              class="peach-btn peach-btn--subtle peach-btn--sm"
              onClick={() =>
                props.onThemeChange(props.theme === "dark" ? "light" : "dark")
              }
            >
              {props.theme === "dark" ? "Switch to light" : "Switch to dark"}
            </button>
          </div>

          <p class="peach-settings-sub-label">ACCENT</p>
          <div class="peach-settings-row peach-settings-row--meta peach-settings-row--accent">
            <span>Accent</span>
            <div class="peach-accent-picker">
              <For each={ACCENT_COLORS}>
                {(color) => (
                  <button
                    class="peach-accent-swatch peach-swatch"
                    classList={{ "is-active": props.accentColor === color.name }}
                    style={{ background: color.hex }}
                    onClick={() => void props.onAccentChange(color.name)}
                    aria-label={color.name}
                    title={color.name}
                  />
                )}
              </For>
            </div>
          </div>

          <p class="peach-settings-sub-label">TEXT SIZE</p>
          <div class="peach-settings-row peach-settings-row--meta">
            <span>Size</span>
            <div class="peach-pill-group">
              <For each={sizeOptions}>
                {(opt) => (
                  <button
                    class="peach-btn peach-btn--ghost peach-btn--sm"
                    classList={{ "is-active": props.textSize === opt.id }}
                    onClick={() => void props.onTextSizeChange(opt.id)}
                  >
                    {opt.label}
                  </button>
                )}
              </For>
            </div>
          </div>

          <p class="peach-settings-sub-label">MOTION</p>
          <div class="peach-settings-row peach-settings-row--meta">
            <span>Reduce motion</span>
            <button
              class="peach-btn peach-btn--subtle peach-btn--sm"
              onClick={() => void props.onReduceMotionChange(!props.reduceMotion)}
            >
              {props.reduceMotion ? "On" : "Off"}
            </button>
          </div>
        </div>
      </div>
    );
  }

  function renderShortcuts() {
    const [capturingAction, setCapturingAction] = createSignal<ShortcutAction | null>(null);
    const [conflictMsg, setConflictMsg] = createSignal<string | null>(null);

    function startCapture(action: ShortcutAction) {
      setConflictMsg(null);
      setCapturingAction(action);
    }
    function cancelCapture() {
      setCapturingAction(null);
      setConflictMsg(null);
    }
    function commitBinding(action: ShortcutAction, binding: Keybinding) {
      const conflict = findConflict(props.shortcuts, binding, action);
      if (conflict) {
        const other = SHORTCUT_DESCRIPTORS.find((d) => d.action === conflict);
        setConflictMsg(`Already bound to "${other?.label ?? conflict}"`);
        return;
      }
      const next = { ...props.shortcuts, [action]: binding };
      setCapturingAction(null);
      setConflictMsg(null);
      void props.onShortcutsChange(next);
    }
    function resetAction(action: ShortcutAction) {
      const next = { ...props.shortcuts, [action]: DEFAULT_BINDINGS[action] };
      void props.onShortcutsChange(next);
    }
    function resetAll() {
      void props.onShortcutsChange({ ...DEFAULT_BINDINGS });
    }

    // Capture-mode key handler — wired via ref onto the chip element so it
    // catches the next non-modifier keypress and ignores other bindings.
    function handleCaptureKey(e: KeyboardEvent) {
      e.preventDefault();
      e.stopPropagation();
      if (e.key === "Escape") { cancelCapture(); return; }
      const binding = keybindingFromEvent(e);
      if (!binding) return; // bare modifier — keep waiting
      const action = capturingAction();
      if (action) commitBinding(action, binding);
    }

    return (
      <div class="peach-settings-body">
        <div class="peach-settings-group peach-shortcuts-group">
          <p class="peach-settings-sub-label">ENTRY VIEW</p>
          <For each={SHORTCUT_DESCRIPTORS.filter((d) => d.scope === "entry")}>
            {(desc) => renderRow(desc, capturingAction, startCapture, cancelCapture, resetAction, handleCaptureKey)}
          </For>
        </div>

        <div class="peach-settings-group peach-shortcuts-group">
          <p class="peach-settings-sub-label">ANYWHERE IN POPUP</p>
          <For each={SHORTCUT_DESCRIPTORS.filter((d) => d.scope === "global")}>
            {(desc) => renderRow(desc, capturingAction, startCapture, cancelCapture, resetAction, handleCaptureKey)}
          </For>
        </div>

        <Show when={conflictMsg()}>
          <div class="peach-shortcuts-conflict">{conflictMsg()}</div>
        </Show>

        <div class="peach-settings-group" style="display:flex;flex-direction:column;gap:8px">
          <div class="peach-settings-row peach-settings-row--meta">
            <span>Inline autofill on page</span>
            <a
              class="peach-settings-link"
              href="chrome://extensions/shortcuts"
              onClick={(e) => {
                e.preventDefault();
                chrome.tabs.create({ url: "chrome://extensions/shortcuts" });
              }}
            >
              ⌘⇧P — customize ↗
            </a>
          </div>
          <button
            class="peach-btn peach-btn--subtle peach-btn--sm"
            style="align-self:flex-start"
            onClick={resetAll}
          >
            Reset all to defaults
          </button>
        </div>
      </div>
    );

    function renderRow(
      desc: typeof SHORTCUT_DESCRIPTORS[number],
      capturing: () => ShortcutAction | null,
      onStart: (a: ShortcutAction) => void,
      onCancel: () => void,
      onReset: (a: ShortcutAction) => void,
      onKey: (e: KeyboardEvent) => void,
    ) {
      const isActive = () => capturing() === desc.action;
      const binding = () => props.shortcuts[desc.action];
      const isCustom = () => {
        const b = binding();
        const d = DEFAULT_BINDINGS[desc.action];
        return b.key !== d.key
          || Boolean(b.ctrl)  !== Boolean(d.ctrl)
          || Boolean(b.meta)  !== Boolean(d.meta)
          || Boolean(b.shift) !== Boolean(d.shift)
          || Boolean(b.alt)   !== Boolean(d.alt);
      };
      return (
        <div class="peach-shortcut-row">
          <span class="peach-shortcut-row-label">{desc.label}</span>
          <button
            class="peach-shortcut-chip"
            classList={{ "is-capturing": isActive(), "is-custom": isCustom() }}
            onClick={() => isActive() ? onCancel() : onStart(desc.action)}
            onKeyDown={(e) => { if (isActive()) onKey(e); }}
            ref={(el) => {
              // Auto-focus when entering capture mode so the keydown listener catches the next press.
              if (el) {
                queueMicrotask(() => { if (isActive()) el.focus(); });
              }
            }}
          >
            {isActive() ? "Press a key…" : formatKeybinding(binding())}
          </button>
          <Show when={isCustom() && !isActive()}>
            <button
              class="peach-shortcut-reset"
              title="Reset to default"
              onClick={() => onReset(desc.action)}
            >
              ↺
            </button>
          </Show>
        </div>
      );
    }
  }

  const PRO_FEATURES: Array<{
    feature: ProFeature;
    name: string;
    desc: string;
  }> = [
    { feature: "sync", name: "Peach Sync", desc: "Encrypted · peer-to-peer" },
    { feature: "codex", name: "Peach Codex", desc: "Restore from paper" },
    { feature: "passkeys", name: "Passkeys", desc: "Zero-knowledge WebAuthn" },
    { feature: "advanced_health", name: "Advanced Vault Health", desc: "Reuse · age · exposure" },
  ];

  const PRO_SECURITY_FEATURES: Array<{
    feature: ProFeature;
    name: string;
    desc: string;
  }> = [
    { feature: "canary_entry", name: "Canary entries", desc: "Detects vault compromise" },
    { feature: "duress_vault", name: "Duress vault", desc: "Decoy under coercion" },
  ];

  const [licenseKey, setLicenseKey] = createSignal<string | null>(null);
  const [showKey, setShowKey] = createSignal(false);

  const [deactivating, setDeactivating] = createSignal(false);

  async function handleDeactivateLicense() {
    setDeactivating(true);
    await sendMessage({ type: "DEACTIVATE_LICENSE" });
    setLicenseInfo(null);
    await props.onLicenseChange?.();
    setDeactivating(false);
  }

  async function handleTestCanary(entry: {id: string; title: string; canary: Canary}) {
    setCanaryTestingId(entry.id);
    setCanaryTestResult(null);
    const res = await sendMessage({
      type: "FIRE_CANARY_PING",
      payload: { webhookUrl: entry.canary.webhookUrl, entryTitle: entry.title, trigger: "test" },
    }) as { ok: boolean };
    setCanaryTestResult({ id: entry.id, ok: res.ok });
    setCanaryTestingId(null);
    setTimeout(() => setCanaryTestResult((r) => r?.id === entry.id ? null : r), 3000);
  }

  function renderLicense() {
    async function onActivate() {
      await handleActivateLicense();
      if ((licenseInfo()?.valid ?? false) && licenseInfo()?.plan === "pro") {
        await props.onLicenseChange?.();
      }
    }

    return (
      <div class="peach-settings-body">
        <Show
          when={isPro()}
          fallback={
                <div class="peach-pro-upgrade">
                  <p class="peach-pro-eyebrow">PEACH PRO · ONE-TIME</p>

                  <h2 class="peach-pro-headline">
                    Every<em>thing,</em><br />every<em>where.</em>
                  </h2>

                  <p class="peach-pro-subtitle">
                    One key unlocks every Pro feature — for the lifetime of the app.
                  </p>

                  <div class="peach-pro-grid">
                    <For each={PRO_FEATURES}>
                      {(item, i) => (
                        <div
                          class="peach-pro-grid-item"
                          classList={{ "is-highlighted": props.upgradeHighlight === item.feature }}
                        >
                          <span class="peach-pro-grid-num">{String(i() + 1).padStart(2, "0")}</span>
                          <span class="peach-pro-grid-name">{item.name}</span>
                          <span class="peach-pro-grid-desc">{item.desc}</span>
                        </div>
                      )}
                    </For>
                  </div>

                  <p class="peach-pro-section-label">ADVANCED SECURITY</p>
                  <div class="peach-pro-grid">
                    <For each={PRO_SECURITY_FEATURES}>
                      {(item, i) => (
                        <div
                          class="peach-pro-grid-item"
                          classList={{ "is-highlighted": props.upgradeHighlight === item.feature }}
                        >
                          <span class="peach-pro-grid-num">{String(PRO_FEATURES.length + i() + 1).padStart(2, "0")}</span>
                          <span class="peach-pro-grid-name">{item.name}</span>
                          <span class="peach-pro-grid-desc">{item.desc}</span>
                        </div>
                      )}
                    </For>
                  </div>

                  <div class="peach-pro-upgrade-actions">
                    <p class="peach-pro-pricing">
                      $39 <span class="peach-pro-pricing-sub">once · yours forever</span>
                    </p>
                    <a
                      href="https://buy.polar.sh/polar_cl_IXSFIPojx67rcOTksn8LkH5mnU3osPHtYqBIl1eyuIz"
                      target="_blank"
                      rel="noopener noreferrer"
                      class="peach-pro-upgrade-cta"
                    >
                      Get Peach Pro
                    </a>
                    <div class="peach-pro-key-divider"><span>ALREADY HAVE A KEY</span></div>
                    <div class="peach-pro-key-inline">
                      <input
                        class="peach-pro-key-inline-input"
                        type="text"
                        placeholder="PEACH-XXXX-XXXX-XXXX"
                        value={licenseKeyInput()}
                        onInput={(e) => setLicenseKeyInput(e.currentTarget.value)}
                        onKeyDown={(e) => { if (e.key === "Enter") void onActivate(); }}
                        autocomplete="off"
                        spellcheck={false}
                      />
                      <button
                        class="peach-pro-key-apply"
                        onClick={() => void onActivate()}
                        disabled={activatingLicense() || !licenseKeyInput().trim()}
                      >
                        {activatingLicense() ? "…" : "APPLY"}
                      </button>
                    </div>
                    <Show when={licenseError()}>
                      <p class="peach-pro-key-error">{licenseError()}</p>
                    </Show>
                  </div>
                </div>
          }
        >
          <div class="peach-pro-active">
            <div class="peach-pro-active-hero">
              <button
                class="peach-pro-active-mark-wrap"
                type="button"
                aria-label="Celebrate"
                onClick={handleProCelebrationClick}
              >
                <PeachMark class="peach-pro-active-mark" />
                <Show when={justActivated()}>
                  <div class="peach-pro-sparks" aria-hidden="true">
                    <span class="peach-pro-spark" style="--spark-x:0px;--spark-y:-54px;--spark-delay:0ms">✦</span>
                    <span class="peach-pro-spark" style="--spark-x:38px;--spark-y:-38px;--spark-delay:50ms">✦</span>
                    <span class="peach-pro-spark" style="--spark-x:54px;--spark-y:0px;--spark-delay:110ms">·</span>
                    <span class="peach-pro-spark" style="--spark-x:38px;--spark-y:38px;--spark-delay:30ms">✦</span>
                    <span class="peach-pro-spark" style="--spark-x:0px;--spark-y:54px;--spark-delay:80ms">·</span>
                    <span class="peach-pro-spark" style="--spark-x:-38px;--spark-y:38px;--spark-delay:130ms">✦</span>
                    <span class="peach-pro-spark" style="--spark-x:-54px;--spark-y:0px;--spark-delay:55ms">·</span>
                    <span class="peach-pro-spark" style="--spark-x:-38px;--spark-y:-38px;--spark-delay:95ms">✦</span>
                  </div>
                </Show>
              </button>
              <h2 class="peach-pro-active-title">Peach Pro</h2>
              <p class="peach-pro-active-since">{formatActivatedSince(licenseInfo()?.issued)}</p>
              <Show when={justActivated()}>
                <p class="peach-pro-thankyou-text" aria-live="polite">thank you ✦</p>
              </Show>
            </div>

            <Show when={licenseKey()}>
              <div class="peach-settings-license">
                <span class="peach-settings-label">LICENSE KEY</span>
                <div class="peach-settings-license-row">
                  <Show
                    when={showKey()}
                    fallback={
                      <span class="peach-settings-license-key peach-settings-license-key--masked" aria-label="License key hidden">
                        ••••••••••••••••••••••••••••
                      </span>
                    }
                  >
                    <span class="peach-settings-license-key">{licenseKey()!}</span>
                  </Show>
                  <div class="peach-settings-license-actions">
                    <button
                      class="peach-settings-license-copy"
                      title="Copy license key"
                      onClick={() => copyLicenseKey(licenseKey()!)}
                    >
                      {copied() ? "✓" : "copy"}
                    </button>
                    <button
                      class="peach-settings-license-toggle"
                      aria-label={showKey() ? "Hide license key" : "Reveal license key"}
                      title={showKey() ? "Hide" : "Reveal"}
                      onClick={() => setShowKey(v => !v)}
                    >
                      <Show
                        when={showKey()}
                        fallback={
                          <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                            <ellipse cx="7" cy="7" rx="5.5" ry="3.5" />
                            <circle cx="7" cy="7" r="1.5" fill="currentColor" stroke="none" />
                          </svg>
                        }
                      >
                        <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                          <ellipse cx="7" cy="7" rx="5.5" ry="3.5" />
                          <circle cx="7" cy="7" r="1.5" fill="currentColor" stroke="none" />
                          <line x1="2" y1="2" x2="12" y2="12" />
                        </svg>
                      </Show>
                    </button>
                  </div>
                </div>
              </div>
            </Show>

            <div class="peach-pro-active-features">
              <For each={[...PRO_FEATURES, ...PRO_SECURITY_FEATURES]}>
                {(item) => (
                  <div class="peach-pro-active-feature">
                    <span class="peach-pro-active-feature-mark">✦</span>
                    <span class="peach-pro-active-feature-name">{item.name}</span>
                  </div>
                )}
              </For>
            </div>

            <button
              class="peach-pro-deactivate"
              onClick={() => void handleDeactivateLicense()}
              disabled={deactivating()}
            >
              {deactivating() ? "Deactivating…" : "Deactivate"}
            </button>
          </div>
        </Show>
      </div>
    );
  }

  function renderFeedback() {
    return (
      <div class="peach-settings-body">
        <div class="peach-settings-group peach-feedback-group">
          <Show
            when={feedbackState() === 'sent'}
            fallback={
              <>
                <p class="peach-feedback-intro">
                  Help us improve Peach. Every report goes directly to our inbox.
                </p>

                <p class="peach-settings-sub-label">TYPE</p>
                <div class="peach-feedback-chips">
                  <For each={FEEDBACK_CATEGORIES}>
                    {(cat) => {
                      const selected = () => fbCategory() === cat;
                      return (
                        <button
                          type="button"
                          class={`peach-feedback-chip ${selected() ? "is-active" : ""}`}
                          aria-pressed={selected()}
                          onClick={() => setFbCategory(cat)}
                        >
                          {cat}
                        </button>
                      );
                    }}
                  </For>
                </div>

                <p class="peach-settings-sub-label">MESSAGE</p>
                <textarea
                  class="peach-feedback-textarea"
                  placeholder="Describe the issue or idea..."
                  maxLength={MAX_FEEDBACK_MESSAGE_LENGTH}
                  value={fbMessage()}
                  onInput={(e) => setFbMessage(e.currentTarget.value)}
                />

                <p class="peach-feedback-meta">
                  Version {version} · will be included automatically
                </p>

                <button
                  type="button"
                  class="peach-btn peach-btn--accent peach-btn--sm peach-feedback-submit"
                  disabled={!fbMessage().trim() || feedbackState() === 'sending'}
                  onClick={() => void handleSubmitFeedback()}
                >
                  <Switch>
                    <Match when={feedbackState() === 'idle'}>Send</Match>
                    <Match when={feedbackState() === 'sending'}>Sending...</Match>
                    <Match when={feedbackState() === 'error'}>Failed - try again</Match>
                  </Switch>
                </button>

                <p class="peach-feedback-anon">
                  Sent anonymously · no account required
                </p>
              </>
            }
          >
            <div class="peach-feedback-thanks" role="status" aria-live="polite">
              <p class="peach-feedback-thanks-title">Thank you</p>
              <p>
                Your note is in the queue. Someone will process it soon.
              </p>
            </div>
          </Show>
        </div>
      </div>
    );
  }

  const bodies: StackBodies = {
    protection: renderSecurity(),
    vault: renderVault(),
    sync: renderSync(),
    appearance: renderAppearance(),
    shortcuts: renderShortcuts(),
    pro: renderLicense(),
    feedback: renderFeedback(),
  };

  return (
    <Show
      when={showWhatsNew()}
      fallback={
    <Show
      when={showNewRecoveryWords()}
      fallback={
        <div
          class="peach-overlay-view peach-settings-overlay"
          classList={{ "ov-enter-right": !props.isExiting, "ov-exit-right": !!props.isExiting }}
          style="display:flex;flex-direction:column"
        >
          <StackDeck
            active={activeCard()}
            onActiveChange={setActiveCard}
            onBack={props.onBack}
            cards={cards()}
            bodies={bodies}
            version={version}
            isFanning={isFanning()}
            celebratingCardId={justActivated() ? "pro" : null}
            isPro={isPro()}
          />
        </div>
      }
    >
      <RecoveryWordDisplayView onDone={() => setShowNewRecoveryWords(false)} />
    </Show>
      }
    >
      <div class="peach-overlay-view peach-settings-overlay">
        <WhatsNewView mode="history" onContinue={() => setShowWhatsNew(false)} />
      </div>
    </Show>
  );
}