import { createEffect, createMemo, createSignal, lazy, onCleanup, onMount, Show, Suspense } from "solid-js";
import type { PasskeyEntry, PendingPasskeyRequest, VaultEntry } from "../shared/types";
import { LockView } from "./views/Lock";
import { VaultView, type SortOrder } from "./views/Vault";
import { EntryView } from "./views/Entry";
import { AddView } from "./views/Add";
import { PeachWordmark } from "./components/PeachMark";
import { PasskeyApprovalView } from "./views/PasskeyApproval";
import { PasskeyEntryView } from "./views/PasskeyEntry";
import { extractDomain } from "../shared/domain";

const ImportView    = lazy(() => import("./views/Import").then(m => ({ default: m.ImportView })));
const ExportView    = lazy(() => import("./views/Export").then(m => ({ default: m.ExportView })));
const CJKExport     = lazy(() => import("./views/CJKExport").then(m => ({ default: m.CJKExportView })));
const CJKImport     = lazy(() => import("./views/CJKImport").then(m => ({ default: m.CJKImportView })));
const SettingsView  = lazy(() => import("./views/Settings").then(m => ({ default: m.SettingsView })));
const HealthView    = lazy(() => import("./views/Health").then(m => ({ default: m.HealthView })));
const TrashView     = lazy(() => import("./views/TrashView").then(m => ({ default: m.TrashView })));

type View =
  | "lock"
  | "entry"
  | "list"
  | "add"
  | "settings"
  | "import"
  | "export"
  | "health"
  | "trash";
type BootState = "loading" | "ready";

const canarySuppressMap = new Map<string, boolean>();
let shellRingAnimation: Animation | null = null;
let totpRingResetTimer: number | null = null;

export function isCanarySuppressed(entryId: string): boolean {
  return canarySuppressMap.get(entryId) ?? false;
}

export function setCanarySuppressed(entryId: string, suppressed: boolean): void {
  canarySuppressMap.set(entryId, suppressed);
}

export function clearCanarySuppressions(): void {
  canarySuppressMap.clear();
}

export function triggerRing() {
  const shell = document.getElementById("hd-shell");
  if (!shell) return;

  shellRingAnimation?.cancel();
  shell.dataset.glowing = "true";
  const animation = shell.animate(
    [
      { offset: 0, boxShadow: "var(--copy-shadow)" },
      {
        offset: 0.3,
        boxShadow:
          "0 2px 8px rgba(0,0,0,0.5), 0 14px 48px rgba(0,0,0,0.6), 0 0 0 1.5px rgba(217,104,48,0.58), 0 0 22px rgba(217,104,48,0.18)",
      },
      { offset: 1, boxShadow: "var(--copy-shadow)" },
    ],
    {
      duration: 720,
      easing: "cubic-bezier(0.4, 0, 0.2, 1)",
      fill: "none",
    }
  );
  shellRingAnimation = animation;
  const clearGlow = () => {
    if (shellRingAnimation !== animation) return;
    shellRingAnimation = null;
    delete shell.dataset.glowing;
  };
  animation.onfinish = clearGlow;
  animation.oncancel = clearGlow;
}

export function triggerTotpRing() {
  const shell = document.getElementById("hd-shell");
  if (!shell) return;

  shell.classList.remove("peach-shell--totp-ring");
  void shell.offsetWidth;
  shell.classList.add("peach-shell--totp-ring");

  if (totpRingResetTimer !== null) {
    window.clearTimeout(totpRingResetTimer);
  }

  totpRingResetTimer = window.setTimeout(() => {
    shell.classList.remove("peach-shell--totp-ring");
    totpRingResetTimer = null;
  }, 920);
}

export function triggerPipPulse() {
  const pip = document.querySelector(".peach-status-pip, .pip");
  if (pip) {
    pip.classList.remove("pulse");
    void (pip as HTMLElement).offsetWidth;
    pip.classList.add("pulse");
  }
}

function humanizeError(error: string | undefined): string | undefined {
  if (!error) return error;
  if (error === "STORAGE_QUOTA_EXCEEDED") {
    return "Peach has run out of browser storage. Delete some entries or clear browser storage to continue.";
  }
  return error;
}

async function sendMessage(msg: any): Promise<any> {
  const MESSAGE_TIMEOUT_MS = 5000;

  return new Promise((resolve) => {
    let settled = false;
    const timeoutId = window.setTimeout(() => {
      if (settled) return;
      settled = true;
      resolve({ ok: false, error: "SERVICE_WORKER_UNAVAILABLE" });
    }, MESSAGE_TIMEOUT_MS);

    try {
      chrome.runtime.sendMessage(msg, (response) => {
        if (settled) return;
        settled = true;
        window.clearTimeout(timeoutId);

        if (chrome.runtime.lastError) {
          resolve({
            ok: false,
            error:
              chrome.runtime.lastError.message ?? "SERVICE_WORKER_UNAVAILABLE",
          });
          return;
        }

        if (response === undefined) {
          resolve({ ok: false, error: "SERVICE_WORKER_UNAVAILABLE" });
          return;
        }

        if (response && response.ok === false) {
          response.error = humanizeError(response.error);
        }
        resolve(response);
      });
    } catch (error) {
      if (settled) return;
      settled = true;
      window.clearTimeout(timeoutId);
      resolve({
        ok: false,
        error:
          error instanceof Error ? error.message : "SERVICE_WORKER_UNAVAILABLE",
      });
    }
  });
}

export { sendMessage };

const ENTRY_TRANSITION_EXIT_MS = 95;
const ENTRY_TRANSITION_SETTLE_MS = 135;

export default function App() {
  const [bootState, setBootState] = createSignal<BootState>("loading");
  const [view, setView] = createSignal<View>("lock");
  const [contentPhase, setContentPhase] = createSignal<"enter" | "exit" | "idle">(
    "enter"
  );
  const [contentTransitioning, setContentTransitioning] = createSignal(false);
  const [hasVault, setHasVault] = createSignal(false);
  const [entries, setEntries] = createSignal<VaultEntry[]>([]);
  const [selectedEntry, setSelectedEntry] = createSignal<VaultEntry | null>(null);
  const [editEntry, setEditEntry] = createSignal<VaultEntry | undefined>(undefined);
  const [accentColor, setAccentColor] = createSignal("#D96830");
  const [theme, setTheme] = createSignal<"dark" | "light">("dark");
  const [lockOnClose, setLockOnClose] = createSignal(true);
  const [autoLockMinutes, setAutoLockMinutes] = createSignal(5);
  const [breachMonitoring, setBreachMonitoring] = createSignal(true);
  const [trashRetentionDays, setTrashRetentionDays] = createSignal(30);
  const [restoreView, setRestoreView] = createSignal<"cjk" | "file" | null>(null);
  const [pendingPasskey, setPendingPasskey] = createSignal<PendingPasskeyRequest | null>(null);
  const [currentTabDomain, setCurrentTabDomain] = createSignal<string>("");
  const [sortOrder, setSortOrder] = createSignal<SortOrder>("url-first");

  let contentPhaseTimer: number | undefined;

  createEffect(() => {
    document.documentElement.style.setProperty("--ac", accentColor());
  });

  createEffect(() => {
    document.documentElement.classList.toggle("light", theme() === "light");
    document.body.classList.toggle("light", theme() === "light");
  });

  const selectedIndex = createMemo(() => {
    const currentId = selectedEntry()?.id;
    if (!currentId) return entries().length > 0 ? 0 : -1;
    return entries().findIndex((entry) => entry.id === currentId);
  });

  async function applyTheme(t: "dark" | "light") {
    setTheme(t);
    await sendMessage({ type: "UPDATE_SETTINGS", payload: { theme: t } });
  }

  async function applyLockOnClose(enabled: boolean) {
    setLockOnClose(enabled);
    await sendMessage({
      type: "UPDATE_SETTINGS",
      payload: { lockOnClose: enabled },
    });
  }

  async function applyAutoLockMinutes(minutes: number) {
    setAutoLockMinutes(minutes);
    await sendMessage({
      type: "UPDATE_SETTINGS",
      payload: { autoLockMinutes: minutes },
    });
  }

  async function applyBreachMonitoring(enabled: boolean) {
    setBreachMonitoring(enabled);
    await sendMessage({
      type: "UPDATE_SETTINGS",
      payload: { breachMonitoring: enabled },
    });
  }

  onMount(async () => {
    const [unlockResponse, vaultResponse] = await Promise.all([
      sendMessage({ type: "IS_UNLOCKED" }),
      sendMessage({ type: "HAS_VAULT" }),
    ]);
    const unlocked = Boolean(
      (unlockResponse as { ok: boolean; data?: boolean }).data
    );
    const vaultExists = Boolean(
      (vaultResponse as { ok: boolean; data?: boolean }).data
    );
    setHasVault(vaultExists);
    await restoreSettings();

    if (unlocked && vaultExists) {
      await openVault();
    }

    await refreshPendingPasskey();
    await refreshCurrentTab();

    // Track tab changes so smart sort stays current
    const handleTabActivated = () => { void refreshCurrentTab(); };
    const handleTabUpdated = (_tabId: number, changeInfo: { url?: string; status?: string }) => {
      if (changeInfo.url || changeInfo.status === "complete") void refreshCurrentTab();
    };
    try {
      chrome.tabs.onActivated.addListener(handleTabActivated);
      chrome.tabs.onUpdated.addListener(handleTabUpdated);
      onCleanup(() => {
        chrome.tabs.onActivated.removeListener(handleTabActivated);
        chrome.tabs.onUpdated.removeListener(handleTabUpdated);
      });
    } catch {
      // tabs permission may not be available in all contexts
    }

    setBootState("ready");
    document.getElementById("pre-lock")?.setAttribute("hidden", "true");

    // Warm the lazy-module cache so the Suspense fallback never shows for
    // locally-bundled extension views. Without this, the first navigation to
    // Settings/Import/Export/etc can briefly mount `.peach-loading`, which
    // covers the shell and absorbs clicks on the header.
    void Promise.all([
      import("./views/Settings").catch(() => {}),
      import("./views/Import").catch(() => {}),
      import("./views/Export").catch(() => {}),
      import("./views/Health").catch(() => {}),
      import("./views/TrashView").catch(() => {}),
      import("./views/CJKExport").catch(() => {}),
      import("./views/CJKImport").catch(() => {}),
    ]);

    const handlePageHide = () => {
      if (!lockOnClose() || view() === "lock") return;
      chrome.runtime.sendMessage({ type: "LOCK" });
    };

    window.addEventListener("pagehide", handlePageHide);
    onCleanup(() => window.removeEventListener("pagehide", handlePageHide));

    // Background auto-lock broadcasts VAULT_LOCKED so the popup drops stale
    // entries instead of waiting for the next GET_ENTRIES round-trip.
    const handleRuntimeMessage = (msg: { type?: string }) => {
      if (msg?.type === "VAULT_LOCKED" && view() !== "lock") handleLock();
    };
    chrome.runtime.onMessage.addListener(handleRuntimeMessage);
    onCleanup(() => chrome.runtime.onMessage.removeListener(handleRuntimeMessage));

    const handleGlobalKeydown = (e: KeyboardEvent) => {
      const v = view();
      const inInput = (e.target as HTMLElement)?.tagName === "INPUT"
        || (e.target as HTMLElement)?.tagName === "TEXTAREA"
        || (e.target as HTMLElement)?.isContentEditable;

      // ── Escape ────────────────────────────────────────────────
      if (e.key === "Escape") {
        if (v === "list") { setView("entry"); return; }
        if (v === "settings" || v === "import" || v === "export" || v === "add" || v === "health") { handleBack(); return; }
      }

      // ── Focus search ─────────────────────────────────────────
      if ((e.key === "/" || (e.ctrlKey && e.key === "f")) && !inInput) {
        e.preventDefault();
        openList();
        return;
      }

      // ── Lock ──────────────────────────────────────────────────
      if (e.ctrlKey && e.key === "l") {
        e.preventDefault();
        void handleHeaderLock();
        return;
      }

      // ── Entry-view shortcuts (not in input fields) ────────────
      if (v === "entry" && !inInput) {
        // c → copy password, u → copy username
        if (e.key === "c") {
          e.preventDefault();
          const entry = selectedEntry();
          if (entry?.password) {
            void sendMessage({ type: "COPY", payload: { text: entry.password, label: "Password" } })
              .then(() => triggerRing());
          }
          return;
        }
        if (e.key === "u") {
          e.preventDefault();
          const entry = selectedEntry();
          if (entry?.username) {
            void sendMessage({ type: "COPY", payload: { text: entry.username, label: "Username" } })
              .then(() => triggerRing());
          }
          return;
        }
        // n → new entry
        if (e.key === "n") {
          e.preventDefault();
          handleAdd();
          return;
        }
        // Arrow keys → navigate entries
        if (e.key === "ArrowLeft" || e.key === "ArrowUp") {
          e.preventDefault();
          navigate(-1);
          return;
        }
        if (e.key === "ArrowRight" || e.key === "ArrowDown") {
          e.preventDefault();
          navigate(1);
          return;
        }
      }
    };
    window.addEventListener("keydown", handleGlobalKeydown);
    onCleanup(() => window.removeEventListener("keydown", handleGlobalKeydown));

    const handleStorageChanged = (
      changes: Record<string, chrome.storage.StorageChange>,
      areaName: string
    ) => {
      if (areaName !== "session") return;
      if (!Object.keys(changes).some((key) => key.startsWith("passkey_pending_"))) {
        return;
      }
      void refreshPendingPasskey();
    };

    chrome.storage.onChanged.addListener(handleStorageChanged);
    onCleanup(() => chrome.storage.onChanged.removeListener(handleStorageChanged));
  });

  async function refreshCurrentTab() {
    try {
      const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
      const url = tab?.url ?? tab?.pendingUrl ?? "";
      setCurrentTabDomain(url ? (extractDomain(url) ?? "") : "");
    } catch {
      setCurrentTabDomain("");
    }
  }

  async function refreshPendingPasskey() {
    const res = await sendMessage({ type: "GET_PENDING_PASSKEY" });
    setPendingPasskey((res as { ok: boolean; data?: PendingPasskeyRequest | null }).data ?? null);
  }

  async function restoreSettings() {
    const res = await sendMessage({ type: "GET_SETTINGS" });
    const s = (res as { ok: boolean; data?: any }).data ?? {};
    if (s.accentColor) setAccentColor(s.accentColor);
    setTheme(s.theme === "light" ? "light" : "dark");
    setLockOnClose(s.lockOnClose !== false);
    setAutoLockMinutes(typeof s.autoLockMinutes === "number" ? s.autoLockMinutes : 5);
    setBreachMonitoring(s.breachMonitoring !== false);
    setTrashRetentionDays(typeof s.trashRetentionDays === "number" ? s.trashRetentionDays : 30);
  }

  async function applyTrashRetention(days: number) {
    setTrashRetentionDays(days);
    await sendMessage({ type: "UPDATE_SETTINGS", payload: { trashRetentionDays: days } });
  }

  // Returns null when it detected a dead service worker and triggered handleLock().
  // Callers that need to abort (e.g. openVault) check for null rather than relying
  // on view() state, which may already be "lock" during normal startup flows.
  async function loadEntries(): Promise<VaultEntry[] | null> {
    const response = await sendMessage({ type: "GET_ENTRIES" });
    const res = response as { ok: boolean; data?: VaultEntry[]; error?: string };

    // If the service worker was killed and restarted (MV3 workers sleep), the
    // vault will be locked again — or the worker may not respond at all.
    // In either case, send the user to the lock screen rather than silently
    // showing an empty vault (which looks like data loss).
    if (!res.ok) {
      if (
        res.error === "vault locked" ||
        res.error === "SERVICE_WORKER_UNAVAILABLE" ||
        (typeof res.error === "string" && res.error.includes("locked"))
      ) {
        handleLock();
        return null; // signal emergency lock to callers
      }
      return [];
    }

    const loadedEntries = res.data ?? [];
    setEntries(loadedEntries);

    const currentId = selectedEntry()?.id;
    if (currentId) {
      setSelectedEntry(
        loadedEntries.find((entry) => entry.id === currentId) ?? loadedEntries[0] ?? null
      );
    }

    return loadedEntries;
  }

  async function openVault(preferredEntryId?: string) {
    // Purge expired trash entries on each vault open
    const retDays = trashRetentionDays();
    if (retDays > 0) {
      void sendMessage({
        type: "PURGE_EXPIRED_TRASH",
        payload: { retentionMs: retDays * 86_400_000 },
      });
    }

    const loadedEntries = await loadEntries();

    // null means loadEntries() triggered an emergency lock (service worker died).
    // Don't override it by setting view back to "entry" with an empty vault.
    if (loadedEntries === null) return;

    // Smart selection: prefer explicitly requested ID, then a domain match, then first entry
    let nextSelectedEntry: VaultEntry | null = null;
    if (preferredEntryId) {
      nextSelectedEntry = loadedEntries.find((e) => e.id === preferredEntryId) ?? null;
    }
    if (!nextSelectedEntry) {
      const tabDomain = currentTabDomain();
      if (tabDomain) {
        nextSelectedEntry = loadedEntries.find((e) => {
          if (e.type === "login" && e.url) return (extractDomain(e.url) ?? "") === tabDomain;
          if (e.type === "passkey" && e.rpId) return e.rpId === tabDomain;
          return false;
        }) ?? null;
      }
    }
    nextSelectedEntry ??= loadedEntries[0] ?? null;

    setSelectedEntry(nextSelectedEntry);
    setEditEntry(undefined);
    setContentTransitioning(false);
    setContentPhase("enter");
    queueContentIdle();
    setView("entry");
  }

  async function handleUnlock() {
    setHasVault(true);
    triggerPipPulse();
    await restoreSettings();
    await openVault();
  }

  function handleSelectEntry(entry: VaultEntry) {
    setSelectedEntry(entry);
    setContentTransitioning(false);
    setContentPhase("enter");
    queueContentIdle();
    setView("entry");
  }

  function handleAdd() {
    setEditEntry(undefined);
    setView("add");
  }

  async function handleDelete() {
    const entry = selectedEntry();
    if (!entry) return;
    await sendMessage({ type: "DELETE_ENTRY", payload: { id: entry.id } });
    const loadedEntries = await loadEntries() ?? [];
    setSelectedEntry(loadedEntries[0] ?? null);
    setView("entry");
  }

  async function handleDeleteMany(ids: string[]) {
    for (const id of ids) {
      await sendMessage({ type: "DELETE_ENTRY", payload: { id } });
    }
    const loadedEntries = await loadEntries() ?? [];
    // If the currently selected entry was among the deleted, move to first
    const stillExists = loadedEntries.find(e => e.id === selectedEntry()?.id);
    if (!stillExists) setSelectedEntry(loadedEntries[0] ?? null);
  }

  async function handleSave(savedEntry?: VaultEntry) {
    await openVault(savedEntry?.id);
  }

  function handleBack() {
    setEditEntry(undefined);
    setView("entry");
  }

  function handleLock() {
    clearCanarySuppressions();
    setEntries([]);
    setSelectedEntry(null);
    setEditEntry(undefined);
    setContentPhase("idle");
    setView("lock");
  }

  function handleHeaderLock() {
    // Lock the UI immediately — do not wait for the service worker. If the SW
    // is dead or slow, the 5s sendMessage timeout would create a dead-click
    // window. The SW will lock on its next wake regardless.
    handleLock();
    void sendMessage({ type: "LOCK" });
  }

  function navigate(dir: number) {
    const allEntries = entries();
    if (allEntries.length === 0) return;
    const currentIndex = selectedIndex();
    const baseIndex = currentIndex >= 0 ? currentIndex : 0;
    const nextIndex = (baseIndex + dir + allEntries.length) % allEntries.length;
    setSelectedEntry(allEntries[nextIndex]);
    setContentPhase("enter");
    queueContentIdle();
  }

  function openList() {
    setView("list");
  }

  function openHealth() {
    setEditEntry(undefined);
    setView("health");
  }

  function handleOpenCJKImport() {
    setRestoreView("cjk");
  }

  function handleOpenFileImport() {
    setRestoreView("file");
  }

  const isShellOverlayOpen = () => view() !== "entry" || restoreView() !== null;

  function handleFixEntry(entry: VaultEntry) {
    if (entry.type === "passkey") {
      setSelectedEntry(entry);
      setView("entry");
      return;
    }
    setEditEntry(entry);
    setView("add");
  }

  const isLockedView = () => view() === "lock";
  const selectedPasskeyEntry = createMemo(() =>
    selectedEntry()?.type === "passkey" ? (selectedEntry() as PasskeyEntry) : null
  );

  async function handleApprovePendingPasskey() {
    const pending = pendingPasskey();
    if (!pending) return;
    await sendMessage({ type: "APPROVE_PASSKEY", payload: { requestId: pending.requestId } });
    setPendingPasskey(null);
  }

  async function handleDenyPendingPasskey() {
    const pending = pendingPasskey();
    if (!pending) return;
    await sendMessage({ type: "DENY_PASSKEY", payload: { requestId: pending.requestId } });
    setPendingPasskey(null);
  }

  function queueContentIdle(after?: () => void) {
    if (contentPhaseTimer) window.clearTimeout(contentPhaseTimer);
    contentPhaseTimer = window.setTimeout(() => {
      setContentPhase("idle");
      after?.();
    }, ENTRY_TRANSITION_SETTLE_MS);
  }

  return (
    <div class="popup-root peach-theme">
      <Show when={bootState() === "ready"}>
        <Show
          when={!pendingPasskey()}
          fallback={
            <PasskeyApprovalView
              type={pendingPasskey()!.type}
              rpName={pendingPasskey()!.rpName}
              rpId={pendingPasskey()!.rpId}
              userName={pendingPasskey()!.userName}
              userDisplayName={pendingPasskey()!.userDisplayName}
              onApprove={handleApprovePendingPasskey}
              onDeny={handleDenyPendingPasskey}
            />
          }
        >
          <Show
            when={!isLockedView()}
            fallback={
              <LockView
                hasVault={hasVault()}
                ready={bootState() === "ready"}
                onUnlock={handleUnlock}
              />
            }
          >
            <section
              id="hd-shell"
              class="peach-shell peach-theme"
              data-surface="extension"
            >
            <header class="peach-chrome" classList={{ "is-hidden-for-overlay": isShellOverlayOpen() }}>
              <PeachWordmark unlocked />
              <div class="peach-chrome-actions">
                <button
                  class="peach-btn peach-btn--ghost peach-btn--sm peach-icon-btn"
                  onClick={() => setView("settings")}
                  aria-label="Settings"
                >
                  <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
                    <path
                      d="M5.91 1.11C6.38-.02 7.62-.02 8.09 1.11L8.31 1.64C8.48 2.05 8.91 2.27 9.34 2.17L9.9 2.04C11.1 1.76 11.98 2.64 11.7 3.84L11.57 4.4C11.47 4.83 11.69 5.26 12.1 5.43L12.63 5.65C13.76 6.12 13.76 7.36 12.63 7.83L12.1 8.05C11.69 8.22 11.47 8.65 11.57 9.08L11.7 9.64C11.98 10.84 11.1 11.72 9.9 11.44L9.34 11.31C8.91 11.21 8.48 11.43 8.31 11.84L8.09 12.37C7.62 13.5 6.38 13.5 5.91 12.37L5.69 11.84C5.52 11.43 5.09 11.21 4.66 11.31L4.1 11.44C2.9 11.72 2.02 10.84 2.3 9.64L2.43 9.08C2.53 8.65 2.31 8.22 1.9 8.05L1.37 7.83C.24 7.36.24 6.12 1.37 5.65L1.9 5.43C2.31 5.26 2.53 4.83 2.43 4.4L2.3 3.84C2.02 2.64 2.9 1.76 4.1 2.04L4.66 2.17C5.09 2.27 5.52 2.05 5.69 1.64L5.91 1.11Z"
                      stroke="currentColor"
                      stroke-width="0.9"
                    />
                    <circle cx="7" cy="7" r="2.1" stroke="currentColor" stroke-width="0.9" />
                  </svg>
                </button>
                <button
                  class="peach-btn peach-btn--ghost peach-btn--sm peach-icon-btn"
                  onClick={handleAdd}
                  aria-label="New entry"
                >
                  <svg width="11" height="11" viewBox="0 0 11 11" fill="none" stroke="currentColor" stroke-width="1.1" stroke-linecap="round">
                    <path d="M5.5 1v9M1 5.5h9" />
                  </svg>
                </button>
                <button
                  class="peach-btn peach-btn--ghost peach-btn--sm peach-icon-btn peach-lock-btn"
                  onClick={() => void handleHeaderLock()}
                  aria-label="Lock vault"
                >
                  <svg class="peach-lock-icon" width="14" height="16" viewBox="0 0 14 16" fill="none">
                    <path
                      d="M3.75 6V4.75C3.75 2.96 5.21 1.5 7 1.5C8.79 1.5 10.25 2.96 10.25 4.75V6"
                      stroke="currentColor"
                      stroke-width="1"
                      stroke-linecap="round"
                    />
                    <rect x="1.5" y="6" width="11" height="8.5" rx="2.2" stroke="currentColor" stroke-width="1" />
                    <circle cx="7" cy="10.25" r="1" fill="currentColor" />
                  </svg>
                </button>
              </div>
            </header>

            <div class="peach-shell-body">
              <div class="peach-shell-veil"></div>
              <div class="peach-content-frame" data-content-phase={contentPhase()} classList={{ navigating: contentTransitioning() }}>
                <Show
                  when={selectedPasskeyEntry()}
                  fallback={
                    <EntryView
                      entry={selectedEntry()}
                      onDelete={handleDelete}
                      onFieldSaved={() => void loadEntries()}
                      onEscape={() => { setView("list"); }}
                    />
                  }
                >
                  <PasskeyEntryView entry={selectedPasskeyEntry()} onDelete={handleDelete} />
                </Show>
              </div>

              <section class="peach-search-wrap" classList={{ "is-hidden-for-overlay": isShellOverlayOpen() }}>
                <div class="peach-search-bar">
                  <span class="peach-search-icon">
                    <svg width="13" height="13" viewBox="0 0 13 13" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round">
                      <circle cx="5.5" cy="5.5" r="3.75" />
                      <path d="M8.75 8.75L11.5 11.5" />
                    </svg>
                  </span>
                  <input
                    class="peach-search-input"
                    placeholder="search vault..."
                    autocomplete="off"
                    aria-label="Search vault entries"
                    onClick={openList}
                    onFocus={openList}
                    readOnly
                  />
                  <div class="peach-search-meta">
                    <span class="peach-search-counter">
                      {entries().length > 0
                        ? `${selectedIndex() + 1} / ${entries().length}`
                        : "0 entries"}
                    </span>
                    <span class="peach-divider"></span>
                    <button
                      class="peach-btn peach-btn--ghost peach-btn--sm peach-icon-btn"
                      onClick={() => navigate(-1)}
                      aria-label="Previous entry"
                      disabled={entries().length === 0}
                    >
                      <svg width="6" height="11" viewBox="0 0 6 11" fill="none" stroke="currentColor" stroke-width="1.1" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M5 1L1 5.5L5 10" />
                      </svg>
                    </button>
                    <button
                      class="peach-btn peach-btn--ghost peach-btn--sm peach-icon-btn"
                      onClick={() => navigate(1)}
                      aria-label="Next entry"
                      disabled={entries().length === 0}
                    >
                      <svg width="6" height="11" viewBox="0 0 6 11" fill="none" stroke="currentColor" stroke-width="1.1" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M1 1L5 5.5L1 10" />
                      </svg>
                    </button>
                  </div>
                </div>
              </section>
            </div>

            <Show when={view() === "list"}>
              <VaultView
                entries={entries()}
                selectedEntryId={selectedEntry()?.id}
                currentTabDomain={currentTabDomain()}
                sortOrder={sortOrder()}
                onSelectEntry={handleSelectEntry}
                onSortOrderChange={setSortOrder}
                onAdd={handleAdd}
                onClose={() => setView("entry")}
                onOpenTrash={() => setView("trash")}
                onDeleteMany={handleDeleteMany}
              />
            </Show>
            <Show when={view() === "settings"}>
              <Suspense fallback={<div class="peach-loading"><PeachWordmark /></div>}>
                <SettingsView
                  entriesCount={entries().length}
                  breachMonitoring={breachMonitoring()}
                  lockOnClose={lockOnClose()}
                  autoLockMinutes={autoLockMinutes()}
                  trashRetentionDays={trashRetentionDays()}
                  theme={theme()}
                  onBreachMonitoringChange={applyBreachMonitoring}
                  onLockOnCloseChange={applyLockOnClose}
                  onAutoLockMinutesChange={applyAutoLockMinutes}
                  onTrashRetentionChange={applyTrashRetention}
                  onThemeChange={applyTheme}
                  onBack={handleBack}
                  onImport={() => setView("import")}
                  onExport={() => setView("export")}
                  onBreachCheckDone={loadEntries}
                  onOpenHealth={openHealth}
                  onOpenCJKImport={handleOpenCJKImport}
                  onOpenFileImport={handleOpenFileImport}
                />
              </Suspense>
            </Show>
            <Show when={view() === "add"}>
              <AddView
                entry={editEntry()}
                entries={entries()}
                onBack={handleBack}
                onSave={handleSave}
              />
            </Show>
            <Show when={view() === "import"}>
              <Suspense fallback={<div class="peach-loading"><PeachWordmark /></div>}>
                <ImportView onBack={handleBack} onImport={handleSave} />
              </Suspense>
            </Show>
            <Show when={view() === "export"}>
              <Suspense fallback={<div class="peach-loading"><PeachWordmark /></div>}>
                <ExportView onBack={handleBack} onRequiresUnlock={handleLock} />
              </Suspense>
            </Show>
            <Show when={view() === "health"}>
              <Suspense fallback={<div class="peach-loading"><PeachWordmark /></div>}>
                <HealthView
                  entries={entries()}
                  onFixEntry={handleFixEntry}
                  onBack={() => setView("settings")}
                  onRefresh={loadEntries}
                />
              </Suspense>
            </Show>
            <Show when={view() === "trash"}>
              <Suspense fallback={<div class="peach-loading"><PeachWordmark /></div>}>
                <TrashView
                  onBack={() => setView("list")}
                  onRestored={() => void loadEntries()}
                />
              </Suspense>
            </Show>
            <Show when={restoreView() === "cjk"}>
              <CJKImport
                mode="onboarding"
                onBack={() => setRestoreView(null)}
                onDone={async () => {
                  setRestoreView(null);
                  await handleUnlock();
                }}
              />
            </Show>
            <Show when={restoreView() === "file"}>
              <Suspense fallback={<div class="peach-loading"><PeachWordmark /></div>}>
                <ImportView
                  mode="onboarding"
                  replacesExistingVault={true}
                  onBack={() => setRestoreView(null)}
                  onImport={async () => {
                    setRestoreView(null);
                    await handleUnlock();
                  }}
                />
              </Suspense>
            </Show>
            </section>
          </Show>
        </Show>
      </Show>
    </div>
  );
}