import { createSignal, For, Match, onMount, Show, Switch } from "solid-js";
import { sendMessage } from "../App";
import { PeachMark } from "../components/PeachMark";
import { LockRuneCanvas } from "../components/LockRuneCanvas";
import { RecoveryWordDisplayView } from "./RecoveryWordDisplay";
import type { Canary } from "../../shared/types";
import { ACCENT_COLORS } from "../../shared/types";
import type {
  AccentColorName,
  PasskeyProviderState,
  ProFeature,
  VaultSnapshot,
} from "../../shared/types";
import {
  DEFAULT_BINDINGS,
  findConflict,
  formatKeybinding,
  keybindingFromEvent,
  SHORTCUT_DESCRIPTORS,
  type Keybinding,
  type ShortcutAction,
} from "../../shared/shortcuts";
import { isNativePlatform, nativePlugin } from "../../shared/native";

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>;
  onBack: () => void;
  onImport: () => void;
  onExport: () => void;
  onBreachCheckDone: () => void;
  onOpenHealth?: () => void;
  onOpenSyncPairing?: () => void;
  onOpenFileImport?: () => void;
  onOpenPanic?: () => void;
  onOpenCodexGenerate?: () => void;
  onOpenCodexRestore?: () => void;
}

type SectionName =
  | "security"
  | "vault"
  | "appearance"
  | "shortcuts"
  | "license"
  | "feedback";

const FEEDBACK_CATEGORIES = ["Bug report", "Feature request", "Question", "Other"];

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 isSectionName(value: string): value is SectionName {
  return (
    value === "security" ||
    value === "vault" ||
    value === "appearance" ||
    value === "shortcuts" ||
    value === "license" ||
    value === "feedback"
  );
}

export function SettingsView(props: SettingsProps) {
  const manifest = chrome.runtime.getManifest();
  const version = manifest.version;
  const isAndroid = (manifest as any).version_name === 'mobile';
  const initial = props.initialSection;
  const [activeSection, setActiveSection] = createSignal<SectionName | null>(
    initial && isSectionName(initial) ? (initial as SectionName) : null
  );

  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 [biometricSupported, setBiometricSupported] = createSignal(false);
  const [biometricStored, setBiometricStored] = createSignal(false);
  const [biometricBusy, setBiometricBusy] = createSignal(false);
  const [biometricError, setBiometricError] = createSignal<string | null>(null);
  const [passkeyState, setPasskeyState] = createSignal<PasskeyProviderState | null>(null);
  const [passkeySaving, setPasskeySaving] = createSignal(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);

  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 [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 [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("");
  const [fbSubmitting, setFbSubmitting] = createSignal(false);
  const [fbResult, setFbResult] = createSignal<"success" | "error" | null>(null);

  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();

    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[] } }).data;
      setDeclinedCardCount(sData?.declinedCardFingerprints?.length ?? 0);
    }

    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! }))
      );
    }


    if (isNativePlatform()) {
      const biometric = nativePlugin<{ isAvailable: () => Promise<{ available: boolean }> }>("BiometricPlugin");
      const keystore = nativePlugin<{ hasMasterKey: () => Promise<{ exists: boolean }> }>("KeystorePlugin");
      try {
        if (biometric) {
          const a = await biometric.isAvailable();
          setBiometricSupported(a.available);
        }
        if (keystore) {
          const k = await keystore.hasMasterKey();
          setBiometricStored(k.exists);
        }
      } catch { /* missing plugins — leave defaults */ }
    }
  });

  async function handleEnableBiometrics() {
    setBiometricBusy(true);
    setBiometricError(null);
    try {
      const keyRes = (await sendMessage({ type: "GET_DERIVED_KEY" })) as {
        ok: boolean;
        data?: { masterKeyHex: string };
        error?: string;
      };
      if (!keyRes.ok || !keyRes.data?.masterKeyHex) {
        setBiometricError(keyRes.error === "vault_locked"
          ? "unlock the vault first"
          : "couldn't read derived key");
        return;
      }
      const keystore = nativePlugin<{ storeMasterKey: (p: { masterKeyHex: string }) => Promise<void> }>("KeystorePlugin");
      if (!keystore) {
        setBiometricError("biometric plugin unavailable");
        return;
      }
      await keystore.storeMasterKey({ masterKeyHex: keyRes.data.masterKeyHex });
      await sendMessage({ type: "UPDATE_SETTINGS", payload: { biometricsEnabled: true } });
      setBiometricStored(true);
    } catch (e) {
      setBiometricError(e instanceof Error ? e.message : "failed to enable biometrics");
    } finally {
      setBiometricBusy(false);
    }
  }

  async function handleDisableBiometrics() {
    setBiometricBusy(true);
    setBiometricError(null);
    try {
      const keystore = nativePlugin<{ clearMasterKey: () => Promise<void> }>("KeystorePlugin");
      if (keystore) await keystore.clearMasterKey();
      await sendMessage({ type: "UPDATE_SETTINGS", payload: { biometricsEnabled: false } });
      setBiometricStored(false);
    } catch (e) {
      setBiometricError(e instanceof Error ? e.message : "failed to disable biometrics");
    } finally {
      setBiometricBusy(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);
      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 ?? "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() {
    if (!fbMessage().trim() || fbSubmitting()) return;
    setFbSubmitting(true);
    setFbResult(null);
    const res = await sendMessage({
      type: "SUBMIT_FEEDBACK",
      payload: {
        category: fbCategory(),
        message: fbMessage().trim(),
        version,
        browser: navigator.userAgent,
      },
    }) as { ok: boolean; error?: string };
    setFbSubmitting(false);
    if (res.ok) {
      setFbResult("success");
      setFbMessage("");
      setTimeout(() => setFbResult(null), 4000);
    } else {
      setFbResult("error");
    }
  }

  function handleHeaderBack() {
    if (activeSection() !== null) {
      setActiveSection(null);
    } else {
      props.onBack();
    }
  }

  function currentTitle(): string {
    const s = activeSection();
    if (s === null) return "settings";
    if (s === "license") return "account";
    return s;
  }

  function renderCatRow(opts: {
    section: SectionName;
    name: string;
    desc: string;
    icon: () => any;
    pro?: boolean;
  }) {
    return (
      <button
        class="peach-settings-cat-row"
        onClick={() => setActiveSection(opts.section)}
      >
        <div class="peach-settings-cat-icon">{opts.icon()}</div>
        <div class="peach-settings-cat-content">
          <span class="peach-settings-cat-name">
            {opts.name}
            <Show when={opts.pro && !isPro()}>
              <span class="peach-pro-mark" aria-label="Pro feature">✦</span>
            </Show>
          </span>
          <span class="peach-settings-cat-desc">{opts.desc}</span>
        </div>
        <svg
          class="peach-settings-cat-chevron"
          width="6" height="10" viewBox="0 0 6 10" fill="none"
          stroke="currentColor" stroke-width="1.1"
          stroke-linecap="round" stroke-linejoin="round"
        >
          <path d="M1 1l4 4-4 4" />
        </svg>
      </button>
    );
  }

  const iconShield = () => (
    <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round">
      <path d="M8 2L3 4.5V8c0 3 2.5 5 5 6 2.5-1 5-3 5-6V4.5L8 2z"/>
    </svg>
  );
  const iconKey = () => (
    <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round">
      <path d="M4 10a3 3 0 100-6 3 3 0 000 6zm3-3h6m-2-2v4"/>
    </svg>
  );
  const iconLock = () => (
    <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round">
      <rect x="3" y="7" width="10" height="7" rx="1.5"/>
      <path d="M6 7V5a3 3 0 016 0v2"/>
    </svg>
  );
  const iconSync = () => (
    <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round">
      <path d="M4 8a4 4 0 014-4m4 4a4 4 0 01-4 4"/>
      <path d="M14 6l-2 2-2-2"/>
      <path d="M2 10l2-2 2 2"/>
    </svg>
  );
  const iconSun = () => (
    <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round">
      <circle cx="8" cy="8" r="3"/>
      <path d="M8 2v1m0 10v1M2 8h1m10 0h1m-2.1-4.1-.7.7M4.8 11.3l-.7.7m0-7.7.7.7m6.5 6.3-.7.7"/>
    </svg>
  );
  const iconKeys = () => (
    <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round">
      <rect x="2" y="5" width="5" height="4" rx="1"/>
      <rect x="9" y="7" width="5" height="4" rx="1"/>
      <path d="M7 7h2m-2 2h2"/>
    </svg>
  );
  const iconBubble = () => (
    <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round">
      <path d="M3 4h10a1 1 0 011 1v6a1 1 0 01-1 1H5l-3 2V5a1 1 0 011-1z"/>
    </svg>
  );

  function renderHome() {
    return (
      <div class="peach-settings-body">
        <p class="peach-settings-nav-label">PROTECTION</p>
        {renderCatRow({ section: "security", name: "Security", desc: "Locking, breach monitoring, passkeys", icon: iconShield })}
        {renderCatRow({ section: "license", name: "Peach Pro", desc: isPro() ? "Active · manage your license" : "Upgrade · $39 · yours forever", icon: iconKey })}

        <p class="peach-settings-nav-label">VAULT</p>
        {renderCatRow({ section: "vault", name: "Vault", desc: "Entries, health, import & export", icon: iconLock })}
        <button class="peach-settings-cat-row" onClick={() => props.onOpenSyncPairing?.()}>
          <div class="peach-settings-cat-icon">{iconSync()}</div>
          <div class="peach-settings-cat-content">
            <span class="peach-settings-cat-name">Sync</span>
            <span class="peach-settings-cat-desc">Pair and sync across devices</span>
          </div>
          <svg class="peach-settings-cat-chevron" width="6" height="10" viewBox="0 0 6 10" fill="none" stroke="currentColor" stroke-width="1.1" stroke-linecap="round" stroke-linejoin="round">
            <path d="M1 1l4 4-4 4" />
          </svg>
        </button>

        <p class="peach-settings-nav-label">PREFERENCES</p>
        {renderCatRow({ section: "appearance", name: "Appearance", desc: "Theme & accent color", icon: iconSun })}
        {renderCatRow({ section: "shortcuts", name: "Shortcuts", desc: "Keyboard reference", icon: iconKeys })}

        <p class="peach-settings-nav-label">SUPPORT</p>
        {renderCatRow({ section: "feedback", name: "Feedback", desc: "Report issues, suggest features", icon: iconBubble })}

        <div class="peach-settings-footer">
          <span>Peach {version}</span>
          <span class="peach-divider"></span>
          <span>{isAndroid ? 'Android app' : 'Browser extension'}</span>
        </div>
      </div>
    );
  }

  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>

          <Show when={isNativePlatform() && biometricSupported()}>
            <p class="peach-settings-sub-label">BIOMETRICS</p>
            <div class="peach-settings-row">
              <span>Unlock with biometrics</span>
              <button
                class={`peach-toggle ${biometricStored() ? "is-on" : ""}`}
                onClick={() => void (biometricStored() ? handleDisableBiometrics() : handleEnableBiometrics())}
                disabled={biometricBusy()}
                aria-label="Toggle biometric unlock"
              >
                <span class="peach-toggle-knob"></span>
              </button>
            </div>
            <Show when={biometricError()}>
              <div class="peach-settings-row peach-settings-row--meta">
                <span class="peach-hint peach-hint-error">{biometricError()}</span>
              </div>
            </Show>
          </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>

          <p class="peach-settings-sub-label">DURESS PASSWORD</p>
          <div class="peach-settings-row peach-settings-row--top">
            <div class="peach-settings-row-main">
              <span>Duress password</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={() => { 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</p>
          <div class="peach-settings-row peach-settings-row--top">
            <div class="peach-settings-row-main">
              <span>Canary entries</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>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>

          <p class="peach-settings-sub-label">VAULT HISTORY</p>
          <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()}>
                {(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
                            ? `${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>
            <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 renderAppearance() {
    const sizeOptions: Array<{ id: "small" | "medium" | "large"; label: string }> = [
      { id: "small", label: "Small" },
      { 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"
                    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: "ios_app", name: "Mobile apps", desc: "Android · iOS soon" },
    { feature: "advanced_health", name: "Vault health", desc: "Reuse · age · exposure" },
    { feature: "smart_password_change", name: "Smart reset", desc: "Guided password change" },
  ];

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

  const [showKeyEntry, setShowKeyEntry] = 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>

                  <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://peachpasswords.com/#pricing"
                      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">
              <div class="peach-pro-active-mark-wrap">
                <PeachMark class="peach-pro-active-mark" />
              </div>
              <h2 class="peach-pro-active-title">Peach Pro</h2>
              <p class="peach-pro-active-since">{formatActivatedSince(licenseInfo()?.issued)}</p>
            </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}>
                {(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">
          <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) => (
                <button
                  class={`peach-feedback-chip ${fbCategory() === cat ? "is-active" : ""}`}
                  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..."
            value={fbMessage()}
            onInput={(e) => setFbMessage(e.currentTarget.value)}
          />

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

          <Show when={fbResult() === "success"}>
            <p class="peach-feedback-result peach-feedback-result--ok">
              Sent — thank you
            </p>
          </Show>
          <Show when={fbResult() === "error"}>
            <p class="peach-feedback-result peach-feedback-result--err">
              Failed to send — try again
            </p>
          </Show>

          <button
            class="peach-btn peach-btn--accent peach-btn--sm peach-feedback-submit"
            onClick={() => void handleSubmitFeedback()}
            disabled={fbSubmitting() || !fbMessage().trim()}
          >
            {fbSubmitting() ? "Sending..." : "Send feedback"}
          </button>

          <p class="peach-feedback-anon">
            Sent anonymously · no account required
          </p>
        </div>
      </div>
    );
  }

  return (
    <Show
      when={showNewRecoveryWords()}
      fallback={
        <div class="peach-overlay-view ov-enter-right" style="display:flex">
          <div class="peach-overlay-header">
            <button
              class="peach-btn peach-btn--ghost peach-btn--sm peach-icon-btn"
              onClick={handleHeaderBack}
              aria-label="Back"
            >
              <svg width="7" height="12" viewBox="0 0 7 12" fill="none" stroke="currentColor" stroke-width="1.1" stroke-linecap="round" stroke-linejoin="round">
                <path d="M6 1L1 6L6 11" />
              </svg>
            </button>
            <span class="peach-overlay-title">{currentTitle()}</span>
            <div class="peach-overlay-spacer"></div>
          </div>

          <Switch fallback={renderHome()}>
            <Match when={activeSection() === "security"}>{renderSecurity()}</Match>
            <Match when={activeSection() === "vault"}>{renderVault()}</Match>
            <Match when={activeSection() === "appearance"}>{renderAppearance()}</Match>
            <Match when={activeSection() === "shortcuts"}>{renderShortcuts()}</Match>
            <Match when={activeSection() === "license"}>{renderLicense()}</Match>
            <Match when={activeSection() === "feedback"}>{renderFeedback()}</Match>
          </Switch>
        </div>
      }
    >
      <RecoveryWordDisplayView onDone={() => setShowNewRecoveryWords(false)} />
    </Show>
  );
}