import { createEffect, createMemo, createSignal, For, onCleanup, Show } from "solid-js";
import type { ProFeature, VaultEntry } from "../../shared/types";
import { isPasskeyOnly } from "../../shared/types";
import { detectBrowser } from "../../shared/browser";
import { detectHomograph, getDisplayDomain } from "../../shared/domain";
import { faviconUrl, faviconImgSig, globeFaviconSig, titleInitials, titleBackground } from "../../shared/favicon";
import { generateTOTP, parseOtpauthURI } from "../../crypto/totp";
import { sendMessage, triggerPipPulse, triggerRing } from "../App";
import { popupCopy } from "../copy";
import { GeneratorDrawer } from "../components/GeneratorDrawer";
import { NoteEditorInline, Toolbar } from "./NoteEditor";
import { IdentitySuggestList } from "./Add";

type EditableField = "title" | "url" | "username" | "email" | "password" | "notes" | "totp" | null;

// Compact "time since" label for the password-history list. Coarse on purpose —
// the user wants "roughly when", not a precise duration.
function timeSince(when: number): string {
  const secs = Math.max(0, Math.floor((Date.now() - when) / 1000));
  if (secs < 60) return "just now";
  const mins = Math.floor(secs / 60);
  if (mins < 60) return `${mins}m ago`;
  const hours = Math.floor(mins / 60);
  if (hours < 24) return `${hours}h ago`;
  const days = Math.floor(hours / 24);
  if (days < 30) return `${days}d ago`;
  const months = Math.floor(days / 30);
  if (months < 12) return `${months}mo ago`;
  return `${Math.floor(months / 12)}y ago`;
}

interface EntryProps {
  entry: VaultEntry | null;
  /**
   * Current active tab's full URL (https only). Empty string when unavailable
   * — an extension page or a chrome:///about: URL. The URL editor uses this
   * to render an "add current site" shortcut.
   */
  currentTabUrl?: string;
  onDelete: () => void;
  /** Called after any inline save so App can reload entries */
  onFieldSaved: () => void | Promise<void>;
  onEscape?: () => void;
  entries?: VaultEntry[];
  /** Whether the user holds an active Peach Pro license. Drives Pro gates on
   *  canary entries (see CanarySection). */
  isPro?: boolean;
  /** Invoked when a Pro-gated control is tapped on free tier. App owns the
   *  upgrade navigation + highlight state. */
  onProGate?: (feature: ProFeature) => void;
}

// Inline 16×16 favicon for the domain row — shows coloured initials until a
// real favicon is confirmed (same globe-detection logic as the vault list).
function DomainFavicon(props: { domain: string; title: string }) {
  const src = props.domain ? faviconUrl(props.domain) : null;
  const [isReal, setIsReal] = createSignal(false);
  const label = () => titleInitials(props.title || props.domain);
  const bg = () => titleBackground(props.title || props.domain);
  const chipStyle = () =>
    `display:inline-flex;align-items:center;justify-content:center;` +
    `width:16px;height:16px;border-radius:3px;background:${bg()};` +
    `font-family:"IBM Plex Mono",monospace;font-size:0.4375rem;font-weight:600;` +
    `letter-spacing:0.04em;color:rgba(240,232,216,0.92);flex-shrink:0;margin-right:5px;`;
  return (
    <Show
      when={isReal()}
      fallback={
        <>
          <span style={chipStyle()} aria-hidden="true">{label()}</span>
          {src && (
            <img
              src={src}
              style="display:none"
              onError={() => {}}
              onLoad={async (e) => {
                const img = e.currentTarget as HTMLImageElement;
                if (img.naturalWidth <= 16) return;
                const sig = faviconImgSig(img);
                if (sig !== null) {
                  const gSig = await globeFaviconSig();
                  if (gSig !== null && sig === gSig) return;
                }
                setIsReal(true);
              }}
            />
          )}
        </>
      }
    >
      <img src={src!} width="16" height="16" alt="" style="border-radius:3px;margin-right:5px;flex-shrink:0;" />
    </Show>
  );
}

export function EntryView(props: EntryProps) {
  const [editingField, setEditingField] = createSignal<EditableField>(null);
  const [draft, setDraft] = createSignal("");
  const [saving, setSaving] = createSignal(false);
  const [showPassword, setShowPassword] = createSignal(false);
  const [showGenerator, setShowGenerator] = createSignal(false);
  const [showHistory, setShowHistory] = createSignal(false);
  const [revealedHistory, setRevealedHistory] = createSignal<Set<number>>(new Set());
  const [copied, setCopied] = createSignal<string | null>(null);
  // Local draft for the additional URLs list, edited only while the URL field
  // is in inline-edit mode. Saved alongside `url` when the user confirms.
  const [additionalUrlsDraft, setAdditionalUrlsDraft] = createSignal<string[]>([]);
  const [editingTags, setEditingTags] = createSignal(false);
  const [tagsDraft, setTagsDraft] = createSignal<string[]>([]);
  const [tagInput, setTagInput] = createSignal("");
  const [showCardNumber, setShowCardNumber] = createSignal(false);
  const [showCardCvc, setShowCardCvc] = createSignal(false);
  const [totpTick, setTotpTick] = createSignal(0);
  const [confirmDelete, setConfirmDelete] = createSignal(false);
  const [totpHot, setTotpHot] = createSignal(false);
  const [noteEditorEl, setNoteEditorEl] = createSignal<HTMLDivElement | null>(null);
  // Auto-open advanced when entry already has passkey or canary configured
  const [showAdvanced, setShowAdvanced] = createSignal(false);
  const [identityHelperSuppressed, setIdentityHelperSuppressed] = createSignal(false);
  let usernameInlineInput: HTMLInputElement | undefined;
  let emailInlineInput: HTMLInputElement | undefined;
  let usernameIdentityEl: HTMLDivElement | undefined;
  let emailIdentityEl: HTMLDivElement | undefined;
  let lastSavedNote: string | null = null;
  let totpClickTimer: ReturnType<typeof setTimeout> | null = null;
  onCleanup(() => { if (totpClickTimer) clearTimeout(totpClickTimer); });

  function noteExec(cmd: string, val?: string) {
    document.execCommand(cmd, false, val);
    noteEditorEl()?.focus();
  }

  async function saveNoteInline(html: string) {
    const entry = props.entry;
    if (!entry) return;
    const currentStored = entry.notes ?? "";
    if (html === currentStored) return;
    if (lastSavedNote !== null && html === lastSavedNote) return;
    lastSavedNote = html;
    setSaving(true);
    try {
      await sendMessage({
        type: "UPDATE_ENTRY",
        payload: { id: entry.id, patch: { notes: html } },
      });
      triggerRing();
      await props.onFieldSaved();
    } catch {
      lastSavedNote = null;
    } finally {
      setSaving(false);
    }
  }

  const allIdentities = createMemo(() => {
    const emailMap = new Map<string, number>();
    const usernameMap = new Map<string, number>();
    for (const e of props.entries ?? []) {
      const uname = e.username?.trim() ?? "";
      const em = e.email?.trim() ?? "";
      if (uname) {
        if (uname.includes("@")) emailMap.set(uname, (emailMap.get(uname) ?? 0) + 1);
        else usernameMap.set(uname, (usernameMap.get(uname) ?? 0) + 1);
      }
      if (em) emailMap.set(em, (emailMap.get(em) ?? 0) + 1);
    }
    const result: Array<{ value: string; count: number; type: "email" | "username" }> = [];
    const seen = new Set<string>();
    for (const v of new Set([...emailMap.keys(), ...usernameMap.keys()])) {
      if (seen.has(v)) continue;
      seen.add(v);
      const ec = emailMap.get(v) ?? 0;
      const uc = usernameMap.get(v) ?? 0;
      result.push({ value: v, count: Math.max(ec, uc), type: ec >= uc ? "email" : "username" });
    }
    return result.sort((a, b) => b.count - a.count);
  });

  const identitySuggestions = createMemo(() => {
    const field = editingField();
    if (field !== "username" && field !== "email") return [];
    return allIdentities()
      // Inline editing starts with the saved value selected. Keep the full
      // identity list visible so editing an existing value is a picker, not a
      // one-row exact-match result. AddView still filters while typing.
      .filter(s => s.type === field)
      .slice(0, 8);
  });

  const interval = window.setInterval(() => setTotpTick((n) => n + 1), 1000);
  onCleanup(() => window.clearInterval(interval));

  const displayDomain = createMemo(() =>
    props.entry?.url ? getDisplayDomain(props.entry.url) : ""
  );

  // Reset transient prompts (trash confirmation, inline edits, advanced panel)
  // when the selected entry changes so they don't carry over between entries.
  // Track the last id so a same-entry refresh (e.g. after saving a field)
  // doesn't blow away in-flight edit state — that race used to cancel
  // startEdit calls that ran right after onFieldSaved.
  let lastEntryId: string | null = null;
  createEffect(() => {
    const id = props.entry?.id ?? null;
    if (id === lastEntryId) return;
    lastEntryId = id;
    setConfirmDelete(false);
    setEditingField(null);
    setEditingTags(false);
    setShowAdvanced(false);
  });

  const totpState = createMemo(() => {
    void totpTick();
    if (!props.entry?.totp) return null;
    return generateTOTP(
      props.entry.totp,
      props.entry.totpAlgorithm,
      props.entry.totpDigits,
      props.entry.totpPeriod,
    );
  });

  let prevTotpCode: string | undefined;
  createEffect(() => {
    const state = totpState();
    if (!state) { prevTotpCode = undefined; return; }
    if (prevTotpCode !== undefined && state.code !== prevTotpCode) {
      setTotpHot(true);
      window.setTimeout(() => setTotpHot(false), 3000);
    }
    prevTotpCode = state.code;
  });

  const totpProgress = createMemo(() => {
    const state = totpState();
    if (!state) return 0;
    return ((state.remaining - 1) / 29) * 100;
  });

  createEffect(() => {
    const shell = document.getElementById("hd-shell");
    if (!shell) return;

    const state = totpState();
    if (!state) {
      delete shell.dataset.totpActive;
      shell.style.removeProperty("--peach-totp-progress");
      return;
    }

    shell.dataset.totpActive = "true";
    shell.style.setProperty(
      "--peach-totp-progress",
      `${Math.max(0, totpProgress())}%`
    );

    onCleanup(() => {
      delete shell.dataset.totpActive;
      shell.style.removeProperty("--peach-totp-progress");
    });
  });

  const titleSizeClass = createMemo(() => {
    const length = props.entry?.title.length ?? 0;
    if (length >= 28) return "peach-entry-name--xxl";
    if (length >= 20) return "peach-entry-name--xl";
    if (length >= 14) return "peach-entry-name--lg";
    return "";
  });
  const useAnimatedTitle = createMemo(() => (props.entry?.title.length ?? 0) <= 13);

  // ── Inline editing ────────────────────────────────────────────────

  function startEdit(field: EditableField, value: string) {
    setEditingField(field);
    setDraft(value);
    setIdentityHelperSuppressed(false);
    setShowGenerator(false);
    setShowHistory(false);
    setRevealedHistory(new Set<number>());
    setConfirmDelete(false);
    if (field === "url") {
      setAdditionalUrlsDraft([...(props.entry?.additionalUrls ?? [])]);
    }
  }

  // Compare URLs by string after trim — vault.ts has its own canonicalisation
  // when saving, so the dedupe here is a UX-level "don't show the button if
  // we'd just add a duplicate" rather than a security check.
  function urlMatchesAny(candidate: string, primary: string, others: string[]): boolean {
    const c = candidate.trim();
    if (!c) return true;
    if (primary.trim() === c) return true;
    return others.some((u) => u.trim() === c);
  }

  function addCurrentSite(url: string) {
    if (!url) return;
    if (!draft().trim()) {
      setDraft(url);
      return;
    }
    if (urlMatchesAny(url, draft(), additionalUrlsDraft())) return;
    setAdditionalUrlsDraft((arr) => [...arr, url]);
  }

  async function saveField() {
    const field = editingField();
    const entry = props.entry;
    if (!field || !entry) return;
    // Don't trim passwords — spaces may be intentional
    let value = field === "password" ? draft() : draft().trim();
    if (field === "totp" && value.startsWith("otpauth://")) {
      const parsed = parseOtpauthURI(value);
      value = parsed?.secret ?? value;
    }
    if (field === "password" && entry.type !== "note" && !value) {
      return;
    }
    setSaving(true);
    try {
      const patch: Partial<VaultEntry> = { [field]: value };
      if (field === "url") {
        // Sanitization layer in vault.ts trims, dedupes, and drops empties.
        patch.additionalUrls = additionalUrlsDraft();
      }
      await sendMessage({
        type: "UPDATE_ENTRY",
        payload: { id: entry.id, patch },
      });
      triggerRing();
      setEditingField(null);
      setShowGenerator(false);
      setShowHistory(false);
      setRevealedHistory(new Set<number>());
      await props.onFieldSaved();
    } catch {
      // silent — leave editing open
    } finally {
      setSaving(false);
    }
  }

  function startEditTags() {
    setTagsDraft([...(props.entry?.tags ?? [])]);
    setTagInput("");
    setEditingTags(true);
  }

  function addTag(value: string) {
    const n = value.toLowerCase().trim();
    if (!n || n.length > 32 || tagsDraft().includes(n) || tagsDraft().length >= 10) return;
    setTagsDraft([...tagsDraft(), n]);
    setTagInput("");
  }

  async function saveTags() {
    if (tagInput()) addTag(tagInput());
    const entry = props.entry;
    if (!entry) return;
    const next = tagsDraft().length > 0 ? tagsDraft() : undefined;
    setEditingTags(false);
    setSaving(true);
    try {
      await sendMessage({
        type: "UPDATE_ENTRY",
        payload: { id: entry.id, patch: { tags: next } },
      });
      triggerRing();
      await props.onFieldSaved();
    } catch {
      // silent
    } finally {
      setSaving(false);
    }
  }

  function cancelEdit() {
    setEditingField(null);
    setDraft("");
    setShowGenerator(false);
    setShowHistory(false);
    setRevealedHistory(new Set<number>());
  }

  // Switch from one identity slot to the other.
  //
  // Migration source is the SAVED entry value, never the live draft — using
  // the draft caused data loss when the user typed or cleared the input
  // before clicking +add (the migration would skip and a later Save would
  // overwrite the original email-shape value with whatever was in the input).
  //
  // Drafts only get committed when they are non-empty AND actually changed,
  // so an empty input never accidentally clears a saved field.
  async function addOtherIdentity(target: "username" | "email") {
    const entry = props.entry;
    if (!entry) return;
    const current = editingField();
    const draftValue = draft().trim();
    const savedUsername = entry.username ?? "";
    const savedEmail = entry.email ?? "";

    if (current === "username" && target === "username") {
      // Legacy fix-up: saved username is email-shaped and no separate email
      // exists yet. Move it to entry.email and free the username slot.
      if (savedUsername.includes("@") && !entry.email) {
        setSaving(true);
        try {
          await sendMessage({
            type: "UPDATE_ENTRY",
            payload: { id: entry.id, patch: { email: savedUsername, username: "" } },
          });
          await props.onFieldSaved();
        } finally {
          setSaving(false);
        }
      }
      startEdit("username", "");
      return;
    }

    if (current === "username" && target === "email") {
      if (draftValue && draftValue !== savedUsername) {
        setSaving(true);
        try {
          await sendMessage({
            type: "UPDATE_ENTRY",
            payload: { id: entry.id, patch: { username: draftValue } },
          });
          await props.onFieldSaved();
        } finally {
          setSaving(false);
        }
      }
      startEdit("email", "");
      return;
    }

    if (current === "email" && target === "username") {
      if (draftValue && draftValue !== savedEmail) {
        setSaving(true);
        try {
          await sendMessage({
            type: "UPDATE_ENTRY",
            payload: { id: entry.id, patch: { email: draftValue } },
          });
          await props.onFieldSaved();
        } finally {
          setSaving(false);
        }
      }
      startEdit("username", "");
      return;
    }
  }

  function fieldValue(entry: VaultEntry, field: Exclude<EditableField, null>): string {
    switch (field) {
      case "title":
        return entry.title;
      case "url":
        return entry.url ?? "";
      case "username":
        return entry.username ?? "";
      case "email":
        return entry.email ?? "";
      case "password":
        return entry.password ?? "";
      case "notes":
        return entry.notes ?? "";
      case "totp":
        return entry.totp ?? "";
    }
  }

  function handleEditorFocusOut(
    field: Exclude<EditableField, null>,
    event: FocusEvent & { currentTarget: HTMLElement; relatedTarget: EventTarget | null }
  ) {
    const nextTarget = event.relatedTarget;
    if (nextTarget instanceof Node && event.currentTarget.contains(nextTarget)) return;

    // addOtherIdentity / startEdit may have already switched editingField before
    // focusout fires (SolidJS removes the old editor node synchronously, which
    // triggers blur with relatedTarget=null). Don't cancel the new edit.
    if (editingField() !== field) return;

    const entry = props.entry;
    if (!entry) return;

    const currentValue = fieldValue(entry, field);
    const nextValue = field === "password" ? draft() : draft().trim();
    if (nextValue === currentValue) {
      cancelEdit();
    }
  }

  // ── Copy ─────────────────────────────────────────────────────────

  async function copyField(text: string, label: string, button?: HTMLButtonElement) {
    const entry = props.entry;
    const ok = await popupCopy(
      text,
      label,
      entry?.canary?.webhookUrl ? { webhookUrl: entry.canary.webhookUrl, entryTitle: entry.title } : undefined,
    );
    if (ok) {
      triggerRing();
      triggerPipPulse();
      setCopied(null);
      requestAnimationFrame(() => setCopied(label));
      if (button) {
        button.classList.remove("is-copied", "is-retreat");
        void button.offsetWidth;
        const drain = document.createElement("span");
        drain.className = "peach-copy-drain";
        const bar = document.createElement("span"); bar.className = "peach-copy-drain-bar";
        drain.appendChild(bar);
        button.appendChild(drain);
        window.setTimeout(() => {
          button.classList.remove("is-copied");
          button.classList.add("is-retreat");
          drain.remove();
          window.setTimeout(() => button.classList.remove("is-retreat"), 160);
        }, 1800);
      }
      window.setTimeout(() => setCopied(null), 1800);
    }
  }


  // The entry view owns its direct keyboard fallback; modified copy keys must
  // remain native clipboard shortcuts and never copy a password.
  createEffect(() => {
    if (!props.entry) return;
    const handler = (e: KeyboardEvent) => {
      const inInput = e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement || e.target instanceof HTMLSelectElement || (e.target as HTMLElement).isContentEditable;
      if (inInput || e.ctrlKey || e.metaKey || e.altKey) return;
      switch (e.key) {
        case "c": e.preventDefault();
          if (props.entry?.password) void copyField(props.entry.password, "password"); break;
        case "u": e.preventDefault();
          if (props.entry?.username) void copyField(props.entry.username, "username"); break;
        case "Escape": e.preventDefault(); props.onEscape?.(); break;
      }
    };
    window.addEventListener("keydown", handler);
    onCleanup(() => window.removeEventListener("keydown", handler));
  });

  // ── Input ref focus helper ────────────────────────────────────────

  function autoFocus(el: HTMLInputElement | HTMLTextAreaElement) {
    requestAnimationFrame(() => { el.focus(); el.select?.(); });
  }

  function onEditKeyDown(e: KeyboardEvent) {
    if (e.key === "Enter" && !(e.target instanceof HTMLTextAreaElement)) {
      e.preventDefault();
      void saveField();
    }
    if (e.key === "Escape") { e.preventDefault(); cancelEdit(); }
  }

  function identityKeyDown(e: KeyboardEvent, field: "username" | "email") {
    const listEl = field === "username" ? usernameIdentityEl : emailIdentityEl;
    if (e.key === "ArrowDown" && listEl) {
      e.preventDefault();
      listEl.querySelector<HTMLElement>(".peach-identity-suggestion")?.focus();
      return;
    }
    onEditKeyDown(e);
  }

  return (
    <>
      <div
        class="peach-ghost"
        aria-hidden="true"
        style="position:absolute;top:30px;left:12px;right:0;font-family:'Cormorant Garamond',Georgia,serif;font-size:150px;font-style:italic;font-weight:400;color:var(--t0);opacity:var(--peach-ghost-opacity,0.03);pointer-events:none;line-height:1.25;overflow:hidden;white-space:nowrap;z-index:0;"
      >
        {props.entry?.title || "empty"}
      </div>

      <div class="peach-stage" style="position:relative;">
        <Show when={props.entry} fallback={<EmptyVaultState />}>
          {(entry) => (
            <>
              {/* ── Breach strip ─────────────────────────────────── */}
              <Show when={entry().type !== "note" && entry().type !== "card" && (entry().breach ?? 0) > 0}>
                <div class="peach-breach-badge">
                  <svg width="10" height="10" viewBox="0 0 12 12" fill="none" stroke="var(--breach)" stroke-width="1.5" stroke-linecap="round">
                    <path d="M6 1L11 10H1L6 1z" />
                    <line x1="6" y1="5" x2="6" y2="7.5" />
                    <circle cx="6" cy="9" r="0.5" fill="var(--breach)" stroke="none" />
                  </svg>
                  <span style="flex:1">found in a known data breach</span>
                </div>
              </Show>

              {/* ── Title + trash ─────────────────────────────────── */}
              <div class="peach-entry-header">
                <div class="peach-entry-header-name">
                  <Show
                    when={editingField() === "title"}
                    fallback={
                      <button
                        class="peach-entry-name-button"
                        title="Click to edit title"
                        onClick={() => startEdit("title", entry().title)}
                      >
                        <h1 class={`peach-entry-name ${titleSizeClass()}`} aria-label={entry().title}>
                          <span class="peach-entry-name-text">
                            <Show
                              when={useAnimatedTitle()}
                              fallback={entry().title}
                            >
                              <For each={entry().title.split("")}>
                                {(ch, i) => (
                                  <span class="peach-entry-name-char" style={`--char-index:${i()}`}>
                                    {ch === " " ? "\u00A0" : ch}
                                  </span>
                                )}
                              </For>
                            </Show>
                          </span>
                        </h1>
                      </button>
                    }
                  >
                    <div
                      class="peach-inline-title-wrap"
                      onFocusOut={(event) => handleEditorFocusOut("title", event)}
                    >
                      <input
                        class="peach-inline-title-input"
                        value={draft()}
                        onInput={(e) => setDraft(e.currentTarget.value)}
                        onKeyDown={onEditKeyDown}
                        ref={autoFocus}
                        disabled={saving()}
                      />
                      <InlineSaveCancelRow onSave={saveField} onCancel={cancelEdit} saving={saving()} />
                    </div>
                  </Show>
                </div>

                {/* Subtle trash icon — hidden while editing title */}
                <Show when={editingField() !== "title"}>
                  <Show
                    when={confirmDelete()}
                    fallback={
                      <button
                        class="peach-entry-trash-btn"
                        onClick={() => setConfirmDelete(true)}
                        aria-label="Move to trash"
                        title="Delete entry"
                      >
                        <svg width="12" height="13" viewBox="0 0 12 13" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round">
                          <path d="M1 3h10M4 3V2h4v1M2 3l.7 8.5a1 1 0 0 0 1 .9h4.6a1 1 0 0 0 1-.9L10 3" />
                          <path d="M4.5 6l.3 3.5M7.5 6l-.3 3.5" />
                        </svg>
                      </button>
                    }
                  >
                    <div class="peach-entry-trash-confirm">
                      <span class="peach-entry-trash-confirm-label">trash?</span>
                      <button
                        class="peach-btn peach-btn--sm peach-btn--danger"
                        style="font-size:10px;padding:2px 8px;min-height:22px;"
                        onClick={() => { setConfirmDelete(false); props.onDelete(); }}
                      >
                        yes
                      </button>
                      <button
                        class="peach-btn peach-btn--ghost peach-btn--sm"
                        style="font-size:10px;padding:2px 8px;min-height:22px;"
                        onClick={() => setConfirmDelete(false)}
                      >
                        no
                      </button>
                    </div>
                  </Show>
                </Show>
              </div>

              {/* ── Domain / URL ─────────────────────────────────── */}
              <Show when={entry().type !== "note" && entry().type !== "card"}>
                <div class="peach-domain" style="position:relative;z-index:1;">
                  <Show
                    when={editingField() === "url"}
                    fallback={
                      <div
                        class="peach-domain-row peach-inline-clickable"
                        title="Click to edit URL"
                        onClick={() => startEdit("url", entry().url ?? "")}
                      >
                        <DomainFavicon domain={displayDomain()} title={entry().title ?? ""} />
                        <span class="peach-domain-value">
                          {displayDomain() || (entry().url ? entry().url : "add a website url")}
                        </span>
                        <span class="peach-inline-edit-hint">edit</span>
                      </div>
                    }
                  >
                    <div
                      class="peach-inline-field-wrap peach-inline-field-wrap--url"
                      onFocusOut={(event) => handleEditorFocusOut("url", event)}
                    >
                      <div class="peach-inline-field-row">
                        <input
                          class="peach-inline-input"
                          type="url"
                          placeholder="https://"
                          value={draft()}
                          onInput={(e) => setDraft(e.currentTarget.value)}
                          onKeyDown={onEditKeyDown}
                          ref={autoFocus}
                          disabled={saving()}
                        />
                        <InlineSaveCancelRow onSave={saveField} onCancel={cancelEdit} saving={saving()} />
                      </div>
                      <Show
                        when={
                          detectHomograph(draft()) ||
                          additionalUrlsDraft().some((u) => detectHomograph(u))
                        }
                      >
                        {/* UI-8 / LV-2: non-blocking homograph warning. */}
                        <p class="peach-homograph-warning">
                          ⚠ This URL contains non-ASCII or punycode characters.
                          Verify it&apos;s the site you intend.
                        </p>
                      </Show>
                      <div class="peach-additional-urls">
                        <Show when={additionalUrlsDraft().length > 0}>
                          <span class="peach-label peach-additional-urls-label">also matches</span>
                        </Show>
                        <For each={additionalUrlsDraft()}>
                          {(value, i) => (
                            <div class="peach-additional-url-row">
                              <input
                                class="peach-inline-input"
                                type="url"
                                placeholder="https://"
                                value={value}
                                onInput={(e) => setAdditionalUrlsDraft((arr) => {
                                  const next = [...arr];
                                  next[i()] = e.currentTarget.value;
                                  return next;
                                })}
                                disabled={saving()}
                              />
                              <button
                                class="peach-additional-url-remove"
                                type="button"
                                aria-label="Remove URL"
                                onMouseDown={(e) => e.preventDefault()}
                                onClick={() => setAdditionalUrlsDraft((arr) => arr.filter((_, idx) => idx !== i()))}
                                disabled={saving()}
                              >×</button>
                            </div>
                          )}
                        </For>
                        <button
                          class="peach-add-field-link peach-additional-urls-add"
                          type="button"
                          onMouseDown={(e) => e.preventDefault()}
                          onClick={() => setAdditionalUrlsDraft((arr) => [...arr, ""])}
                          disabled={saving()}
                        >
                          + add another url
                        </button>
                        <Show when={props.currentTabUrl && !urlMatchesAny(props.currentTabUrl!, draft(), additionalUrlsDraft())}>
                          <button
                            class="peach-add-field-link peach-additional-urls-add peach-additional-urls-add-current"
                            type="button"
                            title={props.currentTabUrl}
                            onMouseDown={(e) => e.preventDefault()}
                            onClick={() => addCurrentSite(props.currentTabUrl!)}
                            disabled={saving()}
                          >
                            + add current site
                          </button>
                        </Show>
                      </div>
                    </div>
                  </Show>
                </div>
              </Show>

              {/* ── Tags — read-only chips (editing state lives at bottom) */}
              <Show when={!editingTags() && entry().tags && entry().tags!.length > 0}>
                <div
                  style="display:flex;flex-wrap:wrap;gap:5px;margin:2px 0;position:relative;z-index:1;cursor:pointer;"
                  onClick={startEditTags}
                  title="Click to edit tags"
                >
                  <For each={entry().tags!}>
                    {(tag) => <span class="peach-tag-chip" style="font-size:10px;padding:2px 8px;">{tag}</span>}
                  </For>
                </div>
              </Show>

              {/* ── Note toolbar + inline editor ─────────────────── */}
              <Show when={entry().type === "note"}>
                <div class="peach-entry-note-toolbar-row">
                  <Toolbar exec={noteExec} class="peach-note-toolbar-inline" />
                </div>
                <section class="peach-fields peach-note-body" style="position:relative;z-index:1;">
                  <NoteEditorInline
                    entryKey={entry().id}
                    initialContent={entry().notes ?? ""}
                    onReady={(el) => { setNoteEditorEl(el); lastSavedNote = null; }}
                    onBlur={saveNoteInline}
                    autoFocus={false}
                  />
                </section>
              </Show>

              {/* ── Card detail view ─────────────────────────────── */}
              <Show when={entry().type === "card"}>
                <section class="peach-fields" style="position:relative;z-index:1;">
                  {/* Card subtitle: •••• last4 */}
                  <Show when={entry().last4}>
                    <div class="peach-field-card" style="padding-bottom:4px;">
                      <span class="peach-label">
                        <Show when={entry().network && entry().network !== "unknown"}>
                          <span class="peach-card-network-badge" style="margin-left:0;margin-right:6px;">{entry().network}</span>
                        </Show>
                        {entry().cardNickname || `•••• ${entry().last4}`}
                      </span>
                    </div>
                  </Show>

                  {/* Cardholder name */}
                  <div class="peach-field-card">
                    <span class="peach-label">cardholder name</span>
                    <div class="peach-field-value-row">
                      <span class="peach-field-value">{entry().cardholderName || "—"}</span>
                      <Show when={entry().cardholderName}>
                        <button
                          class={`peach-btn peach-btn--ghost peach-btn--sm peach-icon-btn peach-copy-btn ${copied() === "cardholderName" ? "is-copied" : ""}`}
                          onClick={(e) => void copyField(entry().cardholderName!, "cardholderName", e.currentTarget as HTMLButtonElement)}
                          aria-label="Copy cardholder name"
                        >
                          <CopyGlyph /><span class="peach-copy-sheen" />
                        </button>
                      </Show>
                    </div>
                  </div>

                  {/* Card number */}
                  <div class="peach-field-card">
                    <span class="peach-label">card number</span>
                    <div class="peach-field-value-row">
                      <span class={`peach-field-value peach-card-number`}>
                        <Show when={showCardNumber()} fallback={
                          <span>{`•••• •••• •••• ${entry().last4 ?? "••••"}`}</span>
                        }>
                          <span>{entry().cardNumber ?? ""}</span>
                        </Show>
                      </span>
                      <div class="peach-field-actions">
                        <button
                          class="peach-btn peach-btn--ghost peach-btn--sm peach-icon-btn"
                          onClick={() => setShowCardNumber(!showCardNumber())}
                          aria-label={showCardNumber() ? "Hide card number" : "Reveal card number"}
                        >
                          <Show when={showCardNumber()} fallback={<EyeOpenGlyph />}>
                            <EyeClosedGlyph />
                          </Show>
                        </button>
                        <Show when={entry().cardNumber}>
                          <button
                            class={`peach-btn peach-btn--ghost peach-btn--sm peach-icon-btn peach-copy-btn ${copied() === "cardNumber" ? "is-copied" : ""}`}
                            onClick={(e) => {
                              const cardNum = entry().cardNumber!;
                              if (entry().canary?.webhookUrl) {
                                void sendMessage({
                                  type: "FIRE_CANARY_PING",
                                  payload: { webhookUrl: entry().canary!.webhookUrl, entryTitle: entry().title, trigger: "password_copied" },
                                });
                              }
                              void copyField(cardNum, "cardNumber", e.currentTarget as HTMLButtonElement);
                            }}
                            aria-label="Copy card number"
                          >
                            <CopyGlyph /><span class="peach-copy-sheen" />
                          </button>
                        </Show>
                      </div>
                    </div>
                  </div>

                  {/* Expiry */}
                  <Show when={entry().expMonth || entry().expYear}>
                    <div class="peach-field-card">
                      <span class="peach-label">expiry</span>
                      <div class="peach-field-value-row">
                        <span class="peach-field-value">{entry().expMonth} / {entry().expYear}</span>
                        <button
                          class={`peach-btn peach-btn--ghost peach-btn--sm peach-icon-btn peach-copy-btn ${copied() === "expiry" ? "is-copied" : ""}`}
                          onClick={(e) => void copyField(`${entry().expMonth}/${entry().expYear}`, "expiry", e.currentTarget as HTMLButtonElement)}
                          aria-label="Copy expiry"
                        >
                          <CopyGlyph /><span class="peach-copy-sheen" />
                        </button>
                      </div>
                    </div>
                  </Show>

                  {/* CVC */}
                  <Show when={entry().cvc}>
                    <div class="peach-field-card">
                      <span class="peach-label">CVC</span>
                      <div class="peach-field-value-row">
                        <span class="peach-field-value">
                          <Show when={showCardCvc()} fallback={<span class="peach-password-mask">•••</span>}>
                            <span>{entry().cvc}</span>
                          </Show>
                        </span>
                        <div class="peach-field-actions">
                          <button
                            class="peach-btn peach-btn--ghost peach-btn--sm peach-icon-btn"
                            onClick={() => setShowCardCvc(!showCardCvc())}
                            aria-label={showCardCvc() ? "Hide CVC" : "Show CVC"}
                          >
                            <Show when={showCardCvc()} fallback={<EyeOpenGlyph />}>
                              <EyeClosedGlyph />
                            </Show>
                          </button>
                          <button
                            class={`peach-btn peach-btn--ghost peach-btn--sm peach-icon-btn peach-copy-btn ${copied() === "cvc" ? "is-copied" : ""}`}
                            onClick={(e) => void copyField(entry().cvc!, "cvc", e.currentTarget as HTMLButtonElement)}
                            aria-label="Copy CVC"
                          >
                            <CopyGlyph /><span class="peach-copy-sheen" />
                          </button>
                        </div>
                      </div>
                    </div>
                  </Show>
                </section>
              </Show>

              {/* ── Login fields ─────────────────────────────────── */}
              <Show when={entry().type !== "note" && entry().type !== "card" && !isPasskeyOnly(entry())}>
                <section class="peach-fields" style="position:relative;z-index:1;">

                  {/* Username — primary identity slot. Auto-labels as "email"
                      when the stored value is email-shaped and no separate
                      email field exists (legacy data path). */}
                  <Show when={entry().username || (!entry().username && !entry().email) || editingField() === "username"}>
                    <div class="peach-field-card" classList={{ "is-editing": editingField() === "username" }}>
                      <span class="peach-label">{entry().username?.includes("@") && !entry().email ? "email" : "username"}</span>
                      <Show
                        when={editingField() === "username"}
                        fallback={
                          <div class="peach-field-value-row">
                            <span
                              class="peach-field-value peach-inline-clickable"
                              title="Click to edit"
                              onClick={() => startEdit("username", entry().username ?? "")}
                            >
                              {entry().username || <span style="color:var(--t2);font-style:italic;">click to add username</span>}
                            </span>
                            <Show when={entry().username}>
                              <button
                                class={`peach-btn peach-btn--ghost peach-btn--sm peach-icon-btn peach-copy-btn ${copied() === "username" ? "is-copied" : ""}`}
                                onClick={(e) => void copyField(entry().username!, "username", e.currentTarget as HTMLButtonElement)}
                                aria-label="Copy username"
                              >
                                <CopyGlyph /><span class="peach-copy-sheen" />
                              </button>
                            </Show>
                          </div>
                        }
                      >
                        <div
                          class="peach-inline-field-wrap"
                          onFocusOut={(event) => handleEditorFocusOut("username", event)}
                        >
                          <input
                            class="peach-inline-input"
                            value={draft()}
                            onInput={(e) => setDraft(e.currentTarget.value)}
                            onKeyDown={(e) => identityKeyDown(e, "username")}
                            ref={(el) => { usernameInlineInput = el; autoFocus(el); }}
                            disabled={saving()}
                            autocomplete="off"
                          />
                          <InlineSaveCancelRow onSave={saveField} onCancel={cancelEdit} saving={saving()} />
                          <Show when={!identityHelperSuppressed() && identitySuggestions().length > 0 && editingField() === "username"}>
                            <IdentitySuggestList
                              listRef={(el) => (usernameIdentityEl = el)}
                              inputRef={() => usernameInlineInput}
                              suggestions={identitySuggestions()}
                              onPick={(v) => { setDraft(v); setIdentityHelperSuppressed(true); usernameInlineInput?.focus(); }}
                              onClose={() => { setIdentityHelperSuppressed(true); usernameInlineInput?.focus(); }}
                            />
                          </Show>
                          {/* +add the OTHER identity. If the slot is acting as
                              email (value has @, no separate email), offer
                              "+ add username" — clicking migrates the email
                              into entry.email. Otherwise offer "+ add email". */}
                          <Show when={!entry().email || !(entry().username && !entry().username?.includes("@"))}>
                            <button
                              class="peach-add-field-btn"
                              type="button"
                              onMouseDown={(e) => e.preventDefault()}
                              onClick={() => {
                                const isEmailShape = draft().includes("@") || (entry().username?.includes("@") ?? false);
                                const hasSeparateEmail = !!entry().email;
                                if (isEmailShape && !hasSeparateEmail) {
                                  void addOtherIdentity("username");
                                } else {
                                  void addOtherIdentity("email");
                                }
                              }}
                            >
                              {(() => {
                                const isEmailShape = draft().includes("@") || (entry().username?.includes("@") ?? false);
                                const hasSeparateEmail = !!entry().email;
                                return (isEmailShape && !hasSeparateEmail) || hasSeparateEmail ? "+ add username" : "+ add email";
                              })()}
                            </button>
                          </Show>
                        </div>
                      </Show>
                    </div>
                  </Show>

                  {/* Email — secondary identity slot. Visible whenever a
                      separate email field is set, or while it is being edited. */}
                  <Show when={entry().email || editingField() === "email"}>
                    <div class="peach-field-card" classList={{ "is-editing": editingField() === "email" }}>
                      <span class="peach-label">email</span>
                      <Show
                        when={editingField() === "email"}
                        fallback={
                          <div class="peach-field-value-row">
                            <span
                              class="peach-field-value peach-inline-clickable"
                              title="Click to edit"
                              onClick={() => startEdit("email", entry().email ?? "")}
                            >
                              {entry().email}
                            </span>
                            <Show when={entry().email}>
                              <button
                                class={`peach-btn peach-btn--ghost peach-btn--sm peach-icon-btn peach-copy-btn ${copied() === "email" ? "is-copied" : ""}`}
                                onClick={(e) => void copyField(entry().email!, "email", e.currentTarget as HTMLButtonElement)}
                                aria-label="Copy email"
                              >
                                <CopyGlyph /><span class="peach-copy-sheen" />
                              </button>
                            </Show>
                          </div>
                        }
                      >
                        <div
                          class="peach-inline-field-wrap"
                          onFocusOut={(event) => handleEditorFocusOut("email", event)}
                        >
                          <input
                            class="peach-inline-input"
                            value={draft()}
                            onInput={(e) => setDraft(e.currentTarget.value)}
                            onKeyDown={(e) => identityKeyDown(e, "email")}
                            ref={(el) => { emailInlineInput = el; autoFocus(el); }}
                            disabled={saving()}
                            autocomplete="email"
                            type="email"
                          />
                          <InlineSaveCancelRow onSave={saveField} onCancel={cancelEdit} saving={saving()} />
                          <Show when={!identityHelperSuppressed() && identitySuggestions().length > 0 && editingField() === "email"}>
                            <IdentitySuggestList
                              listRef={(el) => (emailIdentityEl = el)}
                              inputRef={() => emailInlineInput}
                              suggestions={identitySuggestions()}
                              onPick={(v) => { setDraft(v); setIdentityHelperSuppressed(true); emailInlineInput?.focus(); }}
                              onClose={() => { setIdentityHelperSuppressed(true); emailInlineInput?.focus(); }}
                            />
                          </Show>
                          <Show when={!entry().username || entry().username?.includes("@")}>
                            <button
                              class="peach-add-field-btn"
                              type="button"
                              onMouseDown={(e) => e.preventDefault()}
                              onClick={() => void addOtherIdentity("username")}
                            >
                              + add username
                            </button>
                          </Show>
                        </div>
                      </Show>
                    </div>
                  </Show>

                  {/* Password */}
                  <div class="peach-field-card" classList={{ "is-editing": editingField() === "password" }}>
                    <span class="peach-label">password</span>
                    <Show
                      when={editingField() === "password"}
                      fallback={
                        <div class="peach-field-value-row">
                          <span
                            class="peach-password-value"
                            classList={{ "is-revealed": showPassword(), "is-breached": (entry().breach ?? 0) > 0 }}
                            style="cursor:pointer;"
                            title="Click to edit password"
                            onClick={() => startEdit("password", entry().password ?? "")}
                          >
                            <Show
                              when={showPassword()}
                              fallback={<span class="peach-password-mask" aria-label="password hidden">••••••••••••••</span>}
                            >
                              <span class="peach-password-text">{entry().password ?? ""}</span>
                            </Show>
                          </span>
                          <div class="peach-field-actions">
                            <button
                              class="peach-btn peach-btn--ghost peach-btn--sm peach-icon-btn"
                              onClick={() => setShowPassword(!showPassword())}
                              aria-label="Reveal password"
                            >
                              <Show when={showPassword()} fallback={<EyeOpenGlyph />}>
                                <EyeClosedGlyph />
                              </Show>
                            </button>
                            <button
                              class={`peach-btn peach-btn--ghost peach-btn--sm peach-icon-btn peach-copy-btn ${copied() === "password" ? "is-copied" : ""}`}
                              onClick={(e) => { if (entry().password) void copyField(entry().password!, "password", e.currentTarget as HTMLButtonElement); }}
                              aria-label="Copy password"
                            >
                              <CopyGlyph /><span class="peach-copy-sheen" />
                            </button>
                          </div>
                        </div>
                      }
                    >
                      {/* ── Edit mode: type / paste / generate ── */}
                      <div
                        class="peach-inline-field-wrap"
                        onFocusOut={(event) => handleEditorFocusOut("password", event)}
                      >
                        <div class="peach-password-edit-row">
                          <input
                            class="peach-inline-input"
                            type={showPassword() ? "text" : "password"}
                            placeholder="paste or type a password"
                            value={draft()}
                            onInput={(e) => setDraft(e.currentTarget.value)}
                            onKeyDown={(e) => {
                              if (e.key === "Enter") { e.preventDefault(); void saveField(); }
                              if (e.key === "Escape") { e.preventDefault(); cancelEdit(); }
                            }}
                            ref={autoFocus}
                            disabled={saving()}
                            autocomplete="new-password"
                          />
                          <button
                            class="peach-btn peach-btn--ghost peach-btn--sm peach-icon-btn"
                            type="button"
                            onClick={() => setShowPassword(!showPassword())}
                            aria-label={showPassword() ? "Hide" : "Show"}
                          >
                            <Show when={showPassword()} fallback={<EyeOpenGlyph />}>
                              <EyeClosedGlyph />
                            </Show>
                          </button>
                        </div>
                        <InlineSaveCancelRow onSave={saveField} onCancel={cancelEdit} saving={saving()} />
                        <div class="peach-password-edit-links">
                          <button
                            class="peach-generate-toggle-link"
                            type="button"
                            onClick={() => { setShowGenerator(!showGenerator()); if (!showGenerator()) setShowHistory(false); }}
                          >
                            <svg width="10" height="10" viewBox="0 0 13 13" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round">
                              <path d="M11 2.5A5.5 5.5 0 1 0 12.5 7" />
                              <path d="M9.5 2.5H11V1" />
                            </svg>
                            {showGenerator() ? "hide generator" : "generate"}
                          </button>
                          <button
                            class="peach-generate-toggle-link"
                            type="button"
                            onClick={() => { setShowHistory(!showHistory()); if (!showHistory()) setShowGenerator(false); }}
                          >
                            <svg width="10" height="10" viewBox="0 0 13 13" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round">
                              <path d="M6.5 1a5.5 5.5 0 1 0 5.5 5.5" />
                              <path d="M6.5 3.5V6.5L8.5 8" />
                              <path d="M1 1.5V4H3.5" />
                            </svg>
                            {showHistory()
                              ? "hide history"
                              : (entry().passwordHistory?.length ? `history (${entry().passwordHistory!.length})` : "history")}
                          </button>
                        </div>
                        <Show when={showGenerator()}>
                          <GeneratorDrawer
                            open={true}
                            compact={true}
                            onUse={(pw) => { setDraft(pw); setShowGenerator(false); }}
                          />
                        </Show>
                        <Show when={showHistory()}>
                          <div class="peach-password-history">
                            <Show when={(entry().passwordHistory?.length ?? 0) === 0}>
                              <div class="peach-history-empty">
                                No earlier passwords yet. When you change this password, the old one is saved here so you can copy or restore it.
                              </div>
                            </Show>
                            <For each={entry().passwordHistory ?? []}>
                              {(item, i) => (
                                <div class="peach-history-row">
                                  <div class="peach-history-main">
                                    <span class="peach-history-pw" classList={{ "is-revealed": revealedHistory().has(i()) }}>
                                      <Show
                                        when={revealedHistory().has(i())}
                                        fallback={<span class="peach-password-mask">••••••••••••</span>}
                                      >
                                        {item.password}
                                      </Show>
                                    </span>
                                    <span class="peach-history-age">{timeSince(item.changedAt)}</span>
                                  </div>
                                  <div class="peach-history-actions">
                                    <button
                                      class="peach-btn peach-btn--ghost peach-btn--sm peach-icon-btn"
                                      type="button"
                                      title={revealedHistory().has(i()) ? "Hide" : "Reveal"}
                                      onClick={() => setRevealedHistory((prev) => {
                                        const next = new Set(prev);
                                        if (next.has(i())) next.delete(i()); else next.add(i());
                                        return next;
                                      })}
                                    >
                                      <Show when={revealedHistory().has(i())} fallback={<EyeOpenGlyph />}>
                                        <EyeClosedGlyph />
                                      </Show>
                                    </button>
                                    <button
                                      class={`peach-btn peach-btn--ghost peach-btn--sm peach-icon-btn peach-copy-btn ${copied() === `history-${i()}` ? "is-copied" : ""}`}
                                      type="button"
                                      title="Copy"
                                      onClick={(e) => void copyField(item.password, `history-${i()}`, e.currentTarget as HTMLButtonElement)}
                                    >
                                      <CopyGlyph /><span class="peach-copy-sheen" />
                                    </button>
                                    <button
                                      class="peach-btn peach-btn--ghost peach-btn--sm peach-history-use"
                                      type="button"
                                      title="Use this password again"
                                      onClick={() => { setDraft(item.password); setShowPassword(true); setShowHistory(false); }}
                                    >
                                      use
                                    </button>
                                  </div>
                                </div>
                              )}
                            </For>
                          </div>
                        </Show>
                      </div>
                    </Show>
                  </div>

                </section>
              </Show>

              {/* ── Notes (on login entries) ──────────────────────── */}
              <Show when={entry().type !== "note" && entry().type !== "card"}>
                <Show
                  when={entry().notes || editingField() === "notes"}
                  fallback={
                    <button
                      class="peach-add-field-link peach-entry-add-link"
                      onClick={() => startEdit("notes", "")}
                    >
                      + notes
                    </button>
                  }
                >
                  <div style="position:relative;z-index:1;margin-top:6px;">
                    <span class="peach-label" style="display:block;margin-bottom:4px;">notes</span>
                    <Show
                      when={editingField() === "notes"}
                      fallback={
                        <div
                          class="peach-note-content peach-inline-clickable"
                          style="cursor:text;white-space:pre-wrap;"
                          onClick={() => startEdit("notes", entry().notes ?? "")}
                        >
                          {entry().notes}
                        </div>
                      }
                    >
                      <div
                        class="peach-inline-field-wrap"
                        onFocusOut={(event) => handleEditorFocusOut("notes", event)}
                      >
                        <textarea
                          class="peach-inline-textarea"
                          value={draft()}
                          onInput={(e) => setDraft(e.currentTarget.value)}
                          onKeyDown={(e) => { if (e.key === "Escape") { e.preventDefault(); cancelEdit(); } }}
                          ref={(el) => requestAnimationFrame(() => el?.focus())}
                          rows={4}
                          disabled={saving()}
                        />
                        <InlineSaveCancelRow onSave={saveField} onCancel={cancelEdit} saving={saving()} />
                      </div>
                    </Show>
                  </div>
                </Show>
              </Show>

              {/* ── Tags editor / add-tags link (between notes and TOTP) ─── */}
              <Show
                when={editingTags()}
                fallback={
                  <Show when={!entry().tags || entry().tags!.length === 0}>
                    <button
                      class="peach-add-field-link peach-entry-add-link"
                      onClick={startEditTags}
                    >
                      + tags
                    </button>
                  </Show>
                }
              >
                <div
                  class="peach-inline-tag-editor"
                  onFocusOut={(e) => {
                    const next = e.relatedTarget;
                    if (next instanceof Node && e.currentTarget.contains(next)) return;
                    void saveTags();
                  }}
                >
                  <span class="peach-label">tags</span>
                  <div class="peach-tag-input-wrap">
                    <For each={tagsDraft()}>
                      {(tag) => (
                        <span class="peach-tag-chip">
                          {tag}
                          <button
                            class="peach-tag-chip-remove"
                            onMouseDown={(e) => e.preventDefault()}
                            onClick={() => setTagsDraft(tagsDraft().filter(t => t !== tag))}
                            aria-label={`Remove ${tag}`}
                          >×</button>
                        </span>
                      )}
                    </For>
                    <input
                      class="peach-tag-input"
                      placeholder={tagsDraft().length === 0 ? "type and press Enter…" : ""}
                      value={tagInput()}
                      onInput={(e) => setTagInput(e.currentTarget.value)}
                      onKeyDown={(e) => {
                        if (e.key === "Enter" || e.key === ",") {
                          e.preventDefault();
                          addTag(tagInput());
                        } else if (e.key === "Backspace" && !tagInput() && tagsDraft().length > 0) {
                          setTagsDraft(tagsDraft().slice(0, -1));
                        } else if (e.key === "Escape") {
                          e.preventDefault();
                          setEditingTags(false);
                          setTagInput("");
                        }
                      }}
                      ref={(el) => requestAnimationFrame(() => el?.focus())}
                      style="flex:1;min-width:80px;background:transparent;border:none;outline:none;color:var(--t1);font-size:12px;padding:2px;"
                    />
                  </div>
                </div>
              </Show>

              {/* ── TOTP ─────────────────────────────────────────── */}
              <Show when={entry().type === "login"}>
                <Show
                  when={totpState() || editingField() === "totp"}
                  fallback={
                    <button
                      class="peach-add-field-link peach-entry-add-link"
                      onClick={() => startEdit("totp", "")}
                    >
                      + 2FA
                    </button>
                  }
                >
                  <section class="peach-totp-band">
                    <Show
                      when={editingField() === "totp"}
                      fallback={
                        <Show when={totpState()}>
                          {(state) => (
                            <>
                              <div
                                class="peach-totp-main"
                                onClick={() => {
                                  // Delay copy so a double-click can cancel it before
                                  // it overwrites the clipboard the user wants to paste from.
                                  if (totpClickTimer) return;
                                  totpClickTimer = setTimeout(() => {
                                    totpClickTimer = null;
                                    void copyField(state().code.replace(" ", ""), "totp");
                                  }, 220);
                                }}
                                onDblClick={() => {
                                  if (totpClickTimer) { clearTimeout(totpClickTimer); totpClickTimer = null; }
                                  startEdit("totp", entry().totp ?? "");
                                }}
                                title="Click to copy · double-click to edit"
                              >
                                <span class="peach-label">2-factor</span>
                                <div class="peach-totp-code-row">
                                  <p class={`peach-totp-code${totpHot() ? " is-hot" : ""}${copied() === "totp" ? " is-copied" : ""}`}>
                                    <span class="peach-totp-code-text">
                                      {state().code.slice(0, 3)} {state().code.slice(3)}
                                    </span>
                                  </p>
                                </div>
                              </div>
                              <div class="peach-totp-meta">
                                <span class="peach-label">expires</span>
                                <div class="peach-totp-countdown">{state().remaining}s</div>
                                <svg class="peach-totp-ring" width="44" height="44" viewBox="0 0 44 44">
                                  <circle cx="22" cy="22" r="17" class="peach-totp-ring-track" />
                                  <circle cx="22" cy="22" r="17" class="peach-totp-ring-progress"
                                    stroke-dasharray="106.8"
                                    stroke-dashoffset={(1 - state().remaining / 30) * 106.8}
                                  />
                                </svg>
                              </div>
                            </>
                          )}
                        </Show>
                      }
                    >
                      <div
                        class="peach-inline-field-wrap peach-inline-field-wrap--totp"
                        onFocusOut={(event) => handleEditorFocusOut("totp", event)}
                      >
                        <span class="peach-label">2-factor</span>
                        <input
                          class="peach-inline-input"
                          value={draft()}
                          onInput={(e) => setDraft(e.currentTarget.value)}
                          onKeyDown={onEditKeyDown}
                          ref={autoFocus}
                          disabled={saving()}
                          placeholder="otpauth://... or base32 secret"
                          autocomplete="off"
                        />
                        <InlineSaveCancelRow onSave={saveField} onCancel={cancelEdit} saving={saving()} />
                      </div>
                    </Show>
                  </section>
                </Show>
              </Show>

              {/* ── Advanced (canary + passkey) ───────────────────── */}
              <Show when={entry().type !== "note" && entry().type !== "card"}>
                <button
                  class="peach-add-field-link peach-entry-add-link"
                  onClick={() => setShowAdvanced((v) => !v)}
                  aria-expanded={showAdvanced()}
                >
                  {showAdvanced() ? "− Advanced" : "+ Advanced"}
                </button>
                <Show when={showAdvanced()}>
                  <Show when={!isPasskeyOnly(entry())}>
                    <CanarySection entry={entry()} onSaved={props.onFieldSaved} isPro={props.isPro ?? false} onProGate={props.onProGate} />
                  </Show>

                  <Show when={entry().passkey}>
                    {(passkey) => {
                      const currentBrowser = detectBrowser();
                      const crossBrowser =
                        passkey().browser &&
                        currentBrowser !== "unknown" &&
                        passkey().browser !== currentBrowser;
                      const algorithmLabel =
                        passkey().algorithm === -8 ? "EdDSA (Ed25519)" : "ES256 (P-256)";
                      const formatDate = (ts?: number) =>
                        ts ? new Date(ts).toLocaleDateString() : "Never";
                      return (
                        <section
                          class="peach-fields peach-passkey-section"
                          style="position:relative;z-index:1;margin-top:6px;"
                        >
                          <div class="peach-field-card">
                            <span class="peach-label">passkey · {passkey().rpId}</span>
                            <div class="peach-field-value-row">
                              <span class="peach-field-value">{passkey().userName}</span>
                              <span class="peach-passkey-badge">passkey</span>
                            </div>
                          </div>

                          <div class="peach-field-card">
                            <span class="peach-label">algorithm</span>
                            <div class="peach-field-value-row">
                              <span class="peach-field-value">{algorithmLabel}</span>
                            </div>
                          </div>

                          <div class="peach-field-card">
                            <span class="peach-label">activity</span>
                            <div class="peach-field-value-row peach-passkey-activity">
                              <span class="peach-field-value">
                                used {passkey().signCount} time{passkey().signCount === 1 ? "" : "s"}
                              </span>
                              <span class="peach-passkey-meta">
                                created {formatDate(passkey().createdAt)}
                              </span>
                              <span class="peach-passkey-meta">
                                last used {formatDate(passkey().lastUsedAt)}
                              </span>
                            </div>
                          </div>

                          <Show when={crossBrowser}>
                            <div class="peach-info-notice peach-info-notice--warn">
                              {`This passkey was created on ${
                                passkey().browser === "chrome" ? "Chrome" : "Firefox"
                              }. To use it on ${
                                currentBrowser === "chrome" ? "Chrome" : "Firefox"
                              }, re-register it on this device.`}
                            </div>
                          </Show>

                          <div class="peach-info-notice">
                            {passkey().browser === "firefox"
                              ? "This passkey is held by your platform authenticator. Peach stores only the metadata."
                              : "The private key is stored encrypted in your Peach vault and is never shown in the UI."}
                          </div>

                          <button
                            class="peach-add-field-link peach-entry-add-link"
                            style="color:rgba(220,38,38,0.7);"
                            onClick={async () => {
                              const id = entry().id;
                              await sendMessage({
                                type: "UPDATE_ENTRY",
                                payload: { id, patch: { passkey: undefined } },
                              });
                              await props.onFieldSaved();
                            }}
                          >
                            − remove passkey
                          </button>
                        </section>
                      );
                    }}
                  </Show>
                </Show>
              </Show>

              {/* ── Bottom spacer ─────────────────────────────────── */}
              <div style="height:4px;" />
            </>
          )}
        </Show>
      </div>

    </>
  );
}

// ── Sub-components ────────────────────────────────────────────────────

function InlineSaveCancelRow(props: { onSave: () => void; onCancel: () => void; saving: boolean }) {
  return (
    <div class="peach-inline-actions">
      <button
        class="peach-inline-save-btn"
        onClick={props.onSave}
        disabled={props.saving}
        aria-label="Save"
        title="Save (Enter)"
      >
        <svg width="11" height="9" viewBox="0 0 11 9" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round">
          <path d="M1 4.5L4 7.5L10 1.5" />
        </svg>
      </button>
      <button
        class="peach-inline-cancel-btn"
        onClick={props.onCancel}
        disabled={props.saving}
        aria-label="Cancel"
        title="Cancel (Esc)"
      >
        <svg width="9" height="9" viewBox="0 0 9 9" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round">
          <path d="M1 1L8 8M8 1L1 8" />
        </svg>
      </button>
    </div>
  );
}

function EmptyVaultState() {
  return (
    <>
      <div class="peach-entry-name-wrap" style="position:relative;z-index:1;">
        <div class="peach-entry-name">
          <span class="peach-entry-name-text">
            <span class="peach-entry-name-char" style="--char-index:0">e</span>
            <span class="peach-entry-name-char" style="--char-index:1">m</span>
            <span class="peach-entry-name-char" style="--char-index:2">p</span>
            <span class="peach-entry-name-char" style="--char-index:3">t</span>
            <span class="peach-entry-name-char" style="--char-index:4">y</span>
          </span>
        </div>
      </div>
      <div class="peach-empty-copy">
        <span class="peach-label">vault</span>
        <p>Your vault is ready for its first entry.</p>
      </div>
    </>
  );
}

function CopyGlyph() {
  return (
    <span class="peach-copy-icon">
      <svg class="peach-copy-icon-svg" width="12" height="12" viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round">
        <rect x="4" y="4" width="8" height="9" rx="1.5" />
        <path d="M10 4V2.5A1.5 1.5 0 0 0 8.5 1h-6A1.5 1.5 0 0 0 1 2.5v7A1.5 1.5 0 0 0 2.5 11H4" />
      </svg>
    </span>
  );
}

function EyeClosedGlyph() {
  return (
    <svg width="14" height="10" viewBox="0 0 14 10" fill="none" stroke="currentColor" stroke-width="0.9" stroke-linecap="round">
      <path d="M1 2C3 4.5 5 6 7 6C9 6 11 4.5 13 2" />
      <path d="M3.5 5.5L2.5 7.5" />
      <path d="M7 6.5V8.5" />
      <path d="M10.5 5.5L11.5 7.5" />
    </svg>
  );
}

function EyeOpenGlyph() {
  return (
    <svg width="14" height="10" viewBox="0 0 14 10" fill="none" stroke="currentColor" stroke-width="0.9" stroke-linecap="round">
      <path d="M1 5C1 5 2.8 1 7 1C11.2 1 13 5 13 5C13 5 11.2 9 7 9C2.8 9 1 5 1 5Z" />
      <circle cx="7" cy="5" r="1.75" />
    </svg>
  );
}

function CanarySection(props: { entry: VaultEntry; onSaved: () => void | Promise<void>; isPro: boolean; onProGate?: (feature: ProFeature) => void }) {
  const [enabled, setEnabled] = createSignal(Boolean(props.entry.canary));
  const [webhookUrl, setWebhookUrl] = createSignal(props.entry.canary?.webhookUrl ?? "");
  const [label, setLabel] = createSignal(props.entry.canary?.label ?? "");
  const [testResult, setTestResult] = createSignal<string | null>(null);
  const [testing, setTesting] = createSignal(false);

  // Pro gate entry-point for canary creation. Free users cannot toggle the
  // canary on; the server-side UPDATE_ENTRY handler is the single hard
  // enforcement point, but this branch avoids the bad UX of letting the
  // toggle slip into "on" before the save rejects. Existing canary entries
  // (e.g. retained after a license deactivation, future-proofing) remain
  // togglable off — gating only applies to enabling a new canary.
  const isProGated = () => !props.isPro && !props.entry.canary;

  async function save() {
    const url = webhookUrl().trim();
    const nextLabel = label().trim() || undefined;
    const canary = enabled() && url
      ? {
          webhookUrl: url,
          label: nextLabel,
          lastPinged: props.entry.canary?.lastPinged,
          pingCount: props.entry.canary?.pingCount,
        }
      : undefined;
    await sendMessage({
      type: "UPDATE_ENTRY",
      payload: { id: props.entry.id, patch: { canary } },
    });
    await props.onSaved();
  }

  async function testPing() {
    const url = webhookUrl().trim();
    if (!url) return;
    setTesting(true);
    setTestResult(null);
    const res = await sendMessage({
      type: "FIRE_CANARY_PING",
      payload: { webhookUrl: url, entryTitle: props.entry.title, trigger: "test" },
    }) as { ok: boolean; error?: string };
    setTestResult(res.ok ? "sent ✓" : `failed — ${res.error ?? "check URL"}`);
    setTesting(false);
  }

  return (
    <div class="peach-canary-section">
      <div class="peach-field-value-row">
        <span class="peach-field-value" style="font-size:12px;">
          canary alert
          <Show when={isProGated()}>
            <span class="peach-pro-mark" aria-label="Pro feature" style="margin-left:6px">✦</span>
          </Show>
        </span>
        <button
          class={`peach-toggle ${enabled() ? "is-on" : ""}`}
          onClick={() => {
            if (isProGated()) {
              // Pro gate: tap on free tier navigates to the upgrade screen
              // with Canary Entries highlighted. The toggle never flips on
              // for a free user, regardless of click count.
              props.onProGate?.("canary_entry");
              return;
            }
            setEnabled(!enabled());
            void save();
          }}
          aria-label="Toggle canary"
          aria-disabled={isProGated() ? "true" : "false"}
        >
          <span class="peach-toggle-knob" />
        </button>
      </div>
      <p style="font-size:10px;color:var(--peach-t2);margin:4px 0 0;line-height:1.5;">
        Fires a silent webhook when this entry's password or username is copied. Great for honeypot credentials.
      </p>
      <Show when={enabled()}>
        <div class="peach-inline-field-wrap" style="margin-top:8px;">
          <input
            class="peach-inline-input"
            placeholder="https://hooks.zapier.com/..."
            value={webhookUrl()}
            onInput={(e) => setWebhookUrl(e.currentTarget.value)}
            onBlur={() => void save()}
          />
          <p style="font-size:10px;color:var(--peach-t2);margin:4px 0 0;line-height:1.5;">
            When triggered, the entry title is sent to this URL. Use an endpoint you control.
          </p>
          <input
            class="peach-inline-input"
            placeholder="label (optional, e.g. AWS decoy)"
            value={label()}
            onInput={(e) => setLabel(e.currentTarget.value)}
            onBlur={() => void save()}
          />
          <div style="display:flex;align-items:center;gap:8px;margin-top:4px;">
            <button
              class="peach-btn peach-btn--ghost peach-btn--sm"
              onClick={() => void testPing()}
              disabled={testing() || !webhookUrl().trim()}
            >
              {testing() ? "sending..." : "test ping"}
            </button>
            <Show when={testResult()}>
              <span style="font-size:10px;color:var(--peach-t2);font-family:var(--font-mono);">{testResult()}</span>
            </Show>
          </div>
          <Show when={props.entry.canary?.lastPinged}>
            <p style="font-size:10px;color:var(--peach-t2);margin-top:4px;">
              Last triggered: {new Date(props.entry.canary!.lastPinged!).toLocaleDateString()}
              {" · "}{props.entry.canary?.pingCount ?? 0} total alerts
            </p>
          </Show>
        </div>
      </Show>
    </div>
  );
}