import { createSignal, onMount, Show } from "solid-js";
import { sendMessage } from "../App";
import type { PasskeyProviderState } from "../../shared/types";
import type { PairedDevice, TrustedNetwork, SyncStatus } from "../../shared/sync-types";

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

interface SettingsProps {
  entriesCount: number;
  breachMonitoring: boolean;
  lockOnClose: boolean;
  autoLockMinutes: number;
  trashRetentionDays: number;
  theme: "dark" | "light";
  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;
  onBack: () => void;
  onImport: () => void;
  onExport: () => void;
  onBreachCheckDone: () => void;
  onOpenHealth?: () => void;
  onOpenSyncPairing?: (mode: "initiate" | "accept") => void;
  onOpenCJKImport?: () => void;
  onOpenFileImport?: () => void;
}

export function SettingsView(props: SettingsProps) {
  const version = chrome.runtime.getManifest().version;
  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 [licenseSuccess, setLicenseSuccess] = createSignal<string | null>(null);
  const [activatingLicense, setActivatingLicense] = createSignal(false);

  const [pairedDevices, setPairedDevices] = createSignal<PairedDevice[]>([]);
  const [trustedNetworks, setTrustedNetworks] = createSignal<TrustedNetwork[]>([]);
  const [syncStatus, setSyncStatus] = createSignal<SyncStatus>("offline");
  const [lastSyncAt, setLastSyncAt] = createSignal<number | undefined>(undefined);
  const [isPro, setIsPro] = createSignal(false);
  const [syncingNow, setSyncingNow] = createSignal(false);
  const [passkeyState, setPasskeyState] = createSignal<PasskeyProviderState | null>(null);
  const [passkeySaving, setPasskeySaving] = createSignal(false);

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

  // Change master password state
  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, setChangePwSuccess] = createSignal(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) {
      setChangePwSuccess(true);
      setChangePwCurrent(""); setChangePwNew(""); setChangePwConfirm("");
      setTimeout(() => { setChangePwSuccess(false); setShowChangePw(false); }, 2200);
    } else {
      setChangePwError(res.error ?? "failed to change password");
    }
    setChangePwSaving(false);
  }

  // Duress password state
  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);

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

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

    if ((syncRes as { ok: boolean }).ok) {
      const data = syncRes as { ok: boolean; data?: {
        pairedDevices?: PairedDevice[];
        trustedNetworks?: TrustedNetwork[];
        status?: SyncStatus;
        lastSyncAt?: number;
        isPro?: boolean;
      }};
      if (data.data) {
        setPairedDevices(data.data.pairedDevices ?? []);
        setTrustedNetworks(data.data.trustedNetworks ?? []);
        setSyncStatus(data.data.status ?? "offline");
        setLastSyncAt(data.data.lastSyncAt);
        setIsPro(data.data.isPro ?? false);
      }
    }

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

    chrome.runtime.onMessage.addListener((msg) => {
      if (msg.type === "SYNC_STATE_UPDATE") {
        setPairedDevices(msg.pairedDevices ?? []);
        setTrustedNetworks(msg.trustedNetworks ?? []);
        setSyncStatus(msg.status ?? "offline");
        setLastSyncAt(msg.lastSyncAt);
        setIsPro(msg.isPro ?? false);
      }
    });
  });

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

  function maskLicenseKey(key: string): string {
    if (key.length < 10) return key.slice(0, 4) + "****";
    return key.slice(0, 6) + "****" + key.slice(-4);
  }

  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 handleSyncNow() {
    if (syncStatus() === "not_trusted") return;
    setSyncingNow(true);
    await sendMessage({ type: "TRIGGER_SYNC" });
    setTimeout(() => setSyncingNow(false), 3000);
  }

  async function handleRemoveDevice(deviceId: string) {
    await sendMessage({ type: "REMOVE_PAIRED_DEVICE", payload: { deviceId } });
  }

  async function handleRemoveNetwork(ssid?: string, bssid?: string, isTailscale?: boolean) {
    await sendMessage({ type: "REMOVE_TRUSTED_NETWORK", payload: { ssid, bssid, isTailscale } });
  }

  async function handleMarkNetworkTrusted() {
    await sendMessage({ type: "MARK_NETWORK_TRUSTED" });
  }

  function formatRelativeTime(timestamp?: number): string {
    if (!timestamp) return "Never";
    const diff = Date.now() - timestamp;
    const minutes = Math.floor(diff / 60000);
    const hours = Math.floor(diff / 3600000);
    const days = Math.floor(diff / 86400000);
    if (minutes < 1) return "Just now";
    if (minutes < 60) return `${minutes}m ago`;
    if (hours < 24) return `${hours}h ago`;
    return `${days}d ago`;
  }

  function getStatusColor(status: SyncStatus): string {
    switch (status) {
      case "synced": return "var(--peach-sync-ok)";
      case "syncing": return "var(--peach-sync-busy)";
      case "no_peers": return "var(--peach-sync-off)";
      case "not_trusted": return "var(--peach-sync-err)";
      case "offline": return "var(--peach-sync-off)";
      default: return "var(--peach-sync-off)";
    }
  }

  function getStatusLabel(status: SyncStatus): string {
    switch (status) {
      case "synced": return "Synced";
      case "syncing": return "Syncing";
      case "no_peers": return "No peers visible";
      case "not_trusted": return "Not on a trusted network";
      case "offline": return "Offline";
      default: return "Unknown";
    }
  }

  function isCurrentNetworkTrusted(): boolean {
    // Show the "mark trusted" button only if there are no trusted networks at all
    // (Tailscale is always trusted implicitly; any explicit networks count too)
    return trustedNetworks().length > 0;
  }

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

    // Verify main password first
    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 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");
    }
  }

  function renderSyncSection() {
    if (!isPro()) {
      return (
        <div class="peach-settings-group" style="position:relative">
          <p class="peach-settings-label">sync</p>
          <div class="peach-sync-pro-gate">
            <div class="peach-sync-pro-gate-blur">
              <div class="peach-settings-row">
                <span>Status</span>
                <span class="peach-settings-value peach-settings-value--status">
                  <span class="peach-sync-status-dot" style={{ background: getStatusColor(syncStatus()) }}></span>
                  {getStatusLabel(syncStatus())}
                </span>
              </div>
              <div class="peach-settings-row peach-settings-row--meta">
                <span>Last sync</span>
                <span class="peach-settings-value">{lastSyncAt() ? formatRelativeTime(lastSyncAt()) : "Never synced"}</span>
              </div>
            </div>
            <div class="peach-sync-pro-gate-overlay">
              <span class="peach-sync-pro-badge">Pro</span>
              <a href="https://peachpasswords.com/#pricing" target="_blank" rel="noopener noreferrer" class="peach-link" style="color:#D96830;font-size:13px;font-weight:500">
                Upgrade to Pro →
              </a>
            </div>
          </div>
        </div>
      );
    }

    return (
      <div class="peach-settings-group">
        <p class="peach-settings-label">sync</p>
        <div class="peach-settings-row">
          <span>Status</span>
          <span class="peach-settings-value peach-settings-value--status">
            <span class="peach-sync-status-dot" style={{ background: getStatusColor(syncStatus()) }}></span>
            {getStatusLabel(syncStatus())}
          </span>
        </div>
        <div class="peach-settings-row peach-settings-row--meta">
          <span>Last sync</span>
          <span class="peach-settings-value">{lastSyncAt() ? formatRelativeTime(lastSyncAt()) : "Never synced"}</span>
        </div>
        <div class="peach-settings-row peach-settings-row--meta">
          <button
            class="peach-btn peach-btn--subtle peach-btn--sm"
            onClick={() => void handleSyncNow()}
            disabled={syncStatus() === "not_trusted" || syncStatus() === "syncing"}
          >
            {syncingNow() ? "Syncing..." : "Sync now"}
          </button>
        </div>

        <div class="peach-settings-row peach-settings-row--meta peach-settings-row--stack">
          <span class="peach-sync-section-label">Paired devices ({pairedDevices().length})</span>
          {pairedDevices().map((device) => (
            <div class="peach-sync-device-row">
              <div class="peach-sync-device-info">
                <span class="peach-sync-device-name">{device.displayName}</span>
                <span class="peach-sync-device-meta">
                  Last seen: {formatRelativeTime(device.lastSeenAt)} · Last synced: {formatRelativeTime(device.lastSyncAt)}
                </span>
              </div>
              <button
                class="peach-btn peach-btn--ghost peach-btn--sm peach-sync-remove-btn"
                onClick={() => void handleRemoveDevice(device.deviceId)}
              >
                Remove
              </button>
            </div>
          ))}
          <div class="peach-settings-actions--row">
            <button
              class="peach-btn peach-btn--subtle peach-btn--sm"
              onClick={() => props.onOpenSyncPairing?.("initiate")}
            >
              Pair a new device
            </button>
            <button
              class="peach-btn peach-btn--subtle peach-btn--sm"
              onClick={() => props.onOpenSyncPairing?.("accept")}
            >
              Pair with another device
            </button>
          </div>
        </div>

        <div class="peach-settings-row peach-settings-row--meta peach-settings-row--stack">
          <span class="peach-sync-section-label">Trusted networks ({trustedNetworks().length})</span>
          {trustedNetworks().filter(n => !n.isTailscale).map((network) => (
            <div class="peach-sync-device-row">
              <span class="peach-sync-device-name">{network.ssid ?? "Unknown network"}</span>
              <button
                class="peach-btn peach-btn--ghost peach-btn--sm peach-sync-remove-btn"
                onClick={() => void handleRemoveNetwork(network.ssid, network.bssid, network.isTailscale)}
              >
                Remove
              </button>
            </div>
          ))}
          <div class="peach-settings-actions--row">
            {!isCurrentNetworkTrusted() && (
              <button
                class="peach-btn peach-btn--subtle peach-btn--sm"
                onClick={() => void handleMarkNetworkTrusted()}
              >
                Mark current network as trusted
              </button>
            )}
          </div>
          <span class="peach-sync-device-meta">
            Tailscale is always trusted
          </span>
        </div>
      </div>
    );
  }

  return (
    <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={props.onBack}
          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">settings</span>
        <div class="peach-overlay-spacer"></div>
      </div>

      <div class="peach-settings-body">
        <div class="peach-settings-group">
          <p class="peach-settings-label">security</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>
          <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>
          {breachResult() && (
            <div class="peach-settings-row peach-settings-row--meta">
              <span>Last check</span>
              <span class="peach-settings-value">{breachResult()}</span>
            </div>
          )}
          {/* ── Change master password ──────────────────────────────────── */}
          <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>
        </div>

        {/* ── Duress password ─────────────────────────────────────────────── */}
        <div class="peach-settings-group">
          <p class="peach-settings-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.
              </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>
        </div>

        <div class="peach-settings-group">
          <p class="peach-settings-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 ? " \u2713" : " (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>
          {passkeyState()?.conflict && (
            <div class="peach-settings-row peach-settings-row--meta">
              <span class="peach-settings-value" style="color:#e7b36b">{passkeyState()!.conflict}</span>
            </div>
          )}
        </div>

        {renderSyncSection()}

        <div class="peach-settings-group">
          <p class="peach-settings-label">vault</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>
          <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>
          <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>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>Vault Health</span>
            <button class="peach-btn peach-btn--subtle peach-btn--sm" onClick={props.onOpenHealth}>
              open
            </button>
          </div>
          <div class="peach-settings-row peach-settings-row--meta" style="flex-direction:column;align-items:stretch;gap:6px">
            <span>Replace vault from backup</span>
            <div class="peach-restore-warning" style="margin-top:2px">
              This will permanently replace your current vault with the backup.
            </div>
            <div style="display:flex;gap:6px">
              <button
                class="peach-btn peach-btn--subtle peach-btn--sm"
                onClick={() => props.onOpenCJKImport?.()}
              >
                CJK phrase
              </button>
              <button
                class="peach-btn peach-btn--subtle peach-btn--sm"
                onClick={() => props.onOpenFileImport?.()}
              >
                backup file
              </button>
            </div>
          </div>
        </div>

        <div class="peach-settings-group">
          <p class="peach-settings-label">license</p>
          {licenseInfo()?.valid && licenseInfo()?.plan === "pro" ? (
            <div class="peach-settings-row peach-settings-row--meta">
              <span>Peach Pro</span>
              <span class="peach-settings-value">
                activated {licenseInfo()?.issued ? new Date(licenseInfo()!.issued!).toLocaleDateString() : ""}
              </span>
            </div>
          ) : (
            <>
              <div class="peach-settings-row" style="flex-direction:column;align-items:stretch;gap:8px">
                <input
                  class="peach-underline-input"
                  type="text"
                  placeholder="PPK-XXXX-XXXX-XXXX-XXXX-XXXX"
                  value={licenseKeyInput()}
                  onInput={(e) => setLicenseKeyInput(e.currentTarget.value)}
                  style="width:100%;box-sizing:border-box"
                />
                <button
                  class="peach-btn peach-btn--subtle peach-btn--sm"
                  onClick={() => void handleActivateLicense()}
                  disabled={activatingLicense() || !licenseKeyInput().trim()}
                >
                  {activatingLicense() ? "activating..." : "Activate"}
                </button>
              </div>
              {licenseError() && (
                <div class="peach-settings-row peach-settings-row--meta">
                  <span class="peach-settings-value" style="color:#e55">{licenseError()}</span>
                </div>
              )}
              {licenseSuccess() && (
                <div class="peach-settings-row peach-settings-row--meta">
                  <span class="peach-settings-value" style="color:#5e5">{licenseSuccess()}</span>
                </div>
              )}
              <div class="peach-settings-row peach-settings-row--meta">
                <a
                  href="https://peachpasswords.com/#pricing"
                  target="_blank"
                  rel="noopener noreferrer"
                  class="peach-link"
                  style="color:#D96830"
                >
                  Purchase →
                </a>
              </div>
            </>
          )}
        </div>

        {/* ── Keyboard shortcuts ────────────────────────────────────── */}
        <div class="peach-settings-group">
          <p class="peach-settings-label">keyboard shortcuts</p>
          <div class="peach-shortcuts-grid">
            <span class="peach-shortcut-key">C</span><span class="peach-shortcut-desc">copy password</span>
            <span class="peach-shortcut-key">U</span><span class="peach-shortcut-desc">copy username</span>
            <span class="peach-shortcut-key">/</span><span class="peach-shortcut-desc">search vault</span>
            <span class="peach-shortcut-key">↑ ↓</span><span class="peach-shortcut-desc">navigate entries</span>
            <span class="peach-shortcut-key">Esc</span><span class="peach-shortcut-desc">back / close</span>
            <span class="peach-shortcut-key">⌘⇧P</span><span class="peach-shortcut-desc">autofill on page</span>
          </div>
        </div>

        <div class="peach-settings-footer">
          <span>Peach {version}</span>
          <span class="peach-divider"></span>
          <span>Browser extension</span>
        </div>
      </div>
    </div>
  );
}