import { createEffect, createMemo, createSignal, For, onCleanup, Show } from "solid-js";
import type { VaultEntry } from "../../shared/types";
import { isPasskeyOnly } from "../../shared/types";
import { detectBrowser } from "../../shared/browser";
import { getDisplayDomain } from "../../shared/domain";
import { faviconUrl } 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";

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

interface EntryProps {
  entry: VaultEntry | null;
  /**
   * Current active tab's full URL (https only). Empty string when unavailable
   * — Capacitor, 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;
}

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 [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 [faviconSrc, setFaviconSrc] = createSignal<string | null>(null);
  const [noteEditorEl, setNoteEditorEl] = createSignal<HTMLDivElement | null>(null);
  // Auto-open advanced when entry already has passkey or canary configured
  const [showAdvanced, setShowAdvanced] = createSignal(false);
  let lastSavedNote: string | null = null;

  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 interval = window.setInterval(() => setTotpTick((n) => n + 1), 1000);
  onCleanup(() => window.clearInterval(interval));

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

  createEffect(() => {
    const domain = displayDomain();
    setFaviconSrc(domain ? faviconUrl(domain) : null);
  });

  // Reset transient prompts (trash confirmation, inline edits, advanced panel)
  // when the selected entry changes so they don't carry over between entries.
  createEffect(() => {
    void props.entry?.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);
  });

  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);
    setShowGenerator(false);
    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);
      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);
  }

  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;

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

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

  async function savePassword(password: string) {
    const entry = props.entry;
    if (!entry) return;
    setSaving(true);
    try {
      await sendMessage({
        type: "UPDATE_ENTRY",
        payload: { id: entry.id, patch: { password } },
      });
      triggerRing();
      setShowGenerator(false);
      await props.onFieldSaved();
    } catch {
      // silent
    } finally {
      setSaving(false);
    }
  }

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

  async function copyField(text: string, label: string, button?: HTMLButtonElement) {
    const ok = await popupCopy(text, label);
    if (ok) {
      const entry = props.entry;
      if (entry?.canary?.webhookUrl) {
        const trigger =
          label === "password"
            ? "password_copied"
            : label === "username"
              ? "username_copied"
              : undefined;
        if (trigger) {
          void sendMessage({
            type: "FIRE_CANARY_PING",
            payload: { webhookUrl: entry.canary.webhookUrl, entryTitle: entry.title, trigger },
          });
        }
      }
      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);
    }
  }

  // ── Keyboard shortcuts ────────────────────────────────────────────

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

  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:0.03;pointer-events:none;line-height:1;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>
                  <button
                    class="peach-btn peach-btn--sm peach-btn--accent peach-breach-action"
                    onClick={() => { startEdit("password", entry().password ?? ""); setShowGenerator(true); }}
                  >
                    Change password
                  </button>
                </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 ?? "")}
                      >
                        <Show when={faviconSrc()}>
                          <img
                            src={faviconSrc()!}
                            width="16"
                            height="16"
                            alt=""
                            style="border-radius:3px;margin-right:5px;flex-shrink:0;"
                            onError={(e) => { (e.currentTarget as HTMLImageElement).style.display = "none"; }}
                          />
                        </Show>
                        <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>
                      <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 — shown when set, or as the only identity field when neither is set */}
                  <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("@") ? "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={onEditKeyDown}
                            ref={autoFocus}
                            disabled={saving()}
                            autocomplete="off"
                          />
                          <InlineSaveCancelRow onSave={saveField} onCancel={cancelEdit} saving={saving()} />
                          <Show when={!entry().email}>
                            <button
                              class="peach-add-field-btn"
                              type="button"
                              onMouseDown={(e) => e.preventDefault()}
                              onClick={() => startEdit("email", "")}
                            >
                              + add email
                            </button>
                          </Show>
                        </div>
                      </Show>
                    </div>
                  </Show>

                  {/* Email — shown when set, or when actively being added */}
                  <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>
                            <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>
                          </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={onEditKeyDown}
                            ref={autoFocus}
                            disabled={saving()}
                            autocomplete="email"
                          />
                          <InlineSaveCancelRow onSave={saveField} onCancel={cancelEdit} saving={saving()} />
                          <Show when={!entry().username}>
                            <button
                              class="peach-add-field-btn"
                              type="button"
                              onMouseDown={(e) => e.preventDefault()}
                              onClick={() => startEdit("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()} />
                        <button
                          class="peach-generate-toggle-link"
                          type="button"
                          onClick={() => setShowGenerator(!showGenerator())}
                        >
                          <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>
                        <Show when={showGenerator()}>
                          <GeneratorDrawer
                            open={true}
                            compact={true}
                            onUse={(pw) => { setDraft(pw); setShowGenerator(false); }}
                          />
                        </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" && !isPasskeyOnly(entry())}>
                <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={() => void copyField(state().code.replace(" ", ""), "totp")}
                                onDblClick={() => 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 === "login"}>
                <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} />
                  </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 ChevronGlyph(props: { open: boolean }) {
  return (
    <svg
      width="8"
      height="8"
      viewBox="0 0 8 8"
      fill="none"
      stroke="currentColor"
      stroke-width="1.3"
      stroke-linecap="round"
      stroke-linejoin="round"
      style={`transform: rotate(${props.open ? 90 : 0}deg); transition: transform 160ms ease;`}
    >
      <path d="M2 1L6 4L2 7" />
    </svg>
  );
}

function CanarySection(props: { entry: VaultEntry; onSaved: () => void | Promise<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);

  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</span>
        <button
          class={`peach-toggle ${enabled() ? "is-on" : ""}`}
          onClick={() => { setEnabled(!enabled()); void save(); }}
          aria-label="Toggle canary"
        >
          <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()}
          />
          <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>
  );
}