import { createEffect, createMemo, createSignal, For, Show } from "solid-js";
import type { VaultEntry } from "../../shared/types";
import { extractDomain, getDisplayDomain } from "../../shared/domain";
import { faviconUrl } from "../../shared/favicon";
import { popupCopy } from "../copy";

function vibrate(ms: number) {
  try { navigator.vibrate?.(ms); } catch { /* unsupported */ }
}

function FaviconIcon(props: { domain: string; title?: string; isNote: boolean; isPasskey: boolean }) {
  const src = props.domain && !props.isNote && !props.isPasskey
    ? faviconUrl(props.domain)
    : null;
  // Note/passkey entries keep their semantic glyphs. Login entries get a
  // colored-initials chip when the real favicon hasn't loaded — better than
  // a black square on freshly-imported entries the browser hasn't visited
  // yet (Chrome's `_favicon/` cache is empty for unvisited domains).
  const fallback = props.isPasskey
    ? <PasskeyIcon />
    : props.isNote
      ? <NoteIcon />
      : <InitialsChip title={props.title ?? props.domain ?? ""} />;
  const [failed, setFailed] = createSignal(false);
  return (
    <Show when={src && !failed()} fallback={fallback}>
      <img
        src={src!}
        width="16"
        height="16"
        alt=""
        style="border-radius:3px;"
        onError={() => setFailed(true)}
      />
    </Show>
  );
}

/**
 * Title → "PM"-style initials. First letters of the first two words,
 * falling back to the first two characters of a single-word title. Empty
 * titles get a small dot. Deterministic so the same entry always renders
 * the same chip.
 */
function titleInitials(source: string): string {
  const cleaned = source.replace(/^https?:\/\//, "").replace(/^www\./, "").trim();
  if (!cleaned) return "·";
  const words = cleaned.split(/[\s.\-_/]+/).filter(Boolean);
  if (words.length >= 2 && words[0]![0] && words[1]![0]) {
    return (words[0]![0]! + words[1]![0]!).toUpperCase();
  }
  const single = words[0] ?? cleaned;
  return single.slice(0, 2).toUpperCase();
}

/**
 * Hash a string to an HSL background. Fixed saturation + lightness so the
 * palette stays muted and dark enough that white initials read clearly on
 * top, while still giving each entry a recognisable colour signature.
 */
function titleBackground(source: string): string {
  let hash = 0;
  for (let i = 0; i < source.length; i++) {
    hash = ((hash << 5) - hash + source.charCodeAt(i)) | 0;
  }
  const hue = ((hash % 360) + 360) % 360;
  return `hsl(${hue}, 32%, 26%)`;
}

function InitialsChip(props: { title: string }) {
  return (
    <span
      class="peach-favicon-initials"
      style={{ background: titleBackground(props.title) }}
      aria-hidden="true"
    >
      {titleInitials(props.title)}
    </span>
  );
}

const LoginIcon = () => (
  <svg width="11" height="12" viewBox="0 0 11 12" fill="none" stroke="currentColor" stroke-width="0.9" stroke-linecap="round" aria-hidden="true">
    <rect x="2" y="5" width="7" height="5" rx="1.2" />
    <path d="M3.5 5V3.75A2 2 0 0 1 5.5 1.75A2 2 0 0 1 7.5 3.75V5" />
  </svg>
);

const PasskeyIcon = () => (
  <svg width="11" height="12" viewBox="0 0 11 12" fill="none" stroke="currentColor" stroke-width="0.9" stroke-linecap="round" aria-hidden="true">
    <circle cx="4" cy="4.5" r="3" />
    <path d="M6.5 7l3.5 3.5M8.5 8.5L10 10" />
  </svg>
);

const NoteIcon = () => (
  <svg width="11" height="12" viewBox="0 0 11 12" fill="none" stroke="currentColor" stroke-width="0.9" stroke-linecap="round" aria-hidden="true">
    <rect x="1.5" y="1.5" width="8" height="9" rx="1.5" />
    <path d="M3.5 4.5h4M3.5 6.5h4M3.5 8.5h2" />
  </svg>
);

export type SortOrder = "url-first" | "az" | "za" | "recent";

interface VaultProps {
  entries: VaultEntry[];
  selectedEntryId?: string;
  currentTabDomain?: string;
  sortOrder: SortOrder;
  searchSeed?: string;
  searchSeedNonce?: number;
  onSelectEntry: (entry: VaultEntry) => void;
  onSortOrderChange: (order: SortOrder) => void;
  onAdd: () => void;
  onClose: () => void;
  onOpenTrash?: () => void;
  onDeleteMany?: (ids: string[]) => Promise<void>;
}

export function VaultView(props: VaultProps) {
  const [search, setSearch] = createSignal("");
  const [selectedTags, setSelectedTags] = createSignal<Set<string>>(new Set());
  const [notesOnly, setNotesOnly] = createSignal(false);
  const [selecting, setSelecting] = createSignal(false);
  const [selectedIds, setSelectedIds] = createSignal<Set<string>>(new Set());
  const [deleting, setDeleting] = createSignal(false);
  const [contextEntry, setContextEntry] = createSignal<VaultEntry | null>(null);
  const [flashId, setFlashId] = createSignal<string | null>(null);
  const [scrollTop, setScrollTop] = createSignal(0);
  const [viewportHeight, setViewportHeight] = createSignal(600);
  let longPressTimer: number | null = null;
  let touchStart: { x: number; y: number; t: number } | null = null;
  let suppressNextClick = false;

  function clearLongPressTimer() {
    if (longPressTimer !== null) {
      window.clearTimeout(longPressTimer);
      longPressTimer = null;
    }
  }

  function handleRowTouchStart(entry: VaultEntry, e: TouchEvent) {
    if (selecting()) return;
    const t = e.touches[0];
    if (!t) return;
    touchStart = { x: t.clientX, y: t.clientY, t: Date.now() };
    clearLongPressTimer();
    longPressTimer = window.setTimeout(() => {
      suppressNextClick = true;
      vibrate(20);
      setContextEntry(entry);
      longPressTimer = null;
    }, 500);
  }

  function handleRowTouchMove(e: TouchEvent) {
    if (!touchStart) return;
    const t = e.touches[0];
    if (!t) return;
    const dx = Math.abs(t.clientX - touchStart.x);
    const dy = Math.abs(t.clientY - touchStart.y);
    if (dx > 8 || dy > 8) clearLongPressTimer();
  }

  async function handleRowTouchEnd(entry: VaultEntry, e: TouchEvent) {
    clearLongPressTimer();
    if (!touchStart) return;
    const t = e.changedTouches[0];
    if (!t) { touchStart = null; return; }
    const dx = t.clientX - touchStart.x;
    const dy = Math.abs(t.clientY - touchStart.y);
    const dt = Date.now() - touchStart.t;
    touchStart = null;
    // Right-swipe-to-copy: only on compact + login entries with a password
    const isCompact = !document.body.classList.contains("layout-medium")
      && !document.body.classList.contains("layout-expanded");
    if (
      isCompact
      && !selecting()
      && dx > 80
      && dy < 30
      && dt < 400
      && entry.type === "login"
      && entry.password
    ) {
      suppressNextClick = true;
      vibrate(15);
      setFlashId(entry.id);
      window.setTimeout(() => setFlashId((id) => id === entry.id ? null : id), 600);
      await popupCopy(entry.password, "password");
    }
  }

  let searchRef: HTMLInputElement | undefined;
  let listRef: HTMLDivElement | undefined;

  const focusSearch = (el: HTMLInputElement) => {
    searchRef = el;
    setTimeout(() => el.focus(), 50);
  };

  createEffect(() => {
    void props.searchSeedNonce;
    const seed = props.searchSeed;
    if (!seed) return;
    setSearch(seed);
    requestAnimationFrame(() => {
      searchRef?.focus();
      searchRef?.setSelectionRange(seed.length, seed.length);
    });
  });

  function enterSelectMode() {
    setSelecting(true);
    setSelectedIds(new Set<string>());
  }

  function exitSelectMode() {
    setSelecting(false);
    setSelectedIds(new Set<string>());
  }

  function toggleId(id: string) {
    const s = new Set<string>(selectedIds());
    if (s.has(id)) s.delete(id); else s.add(id);
    setSelectedIds(s);
  }

  const allTags = createMemo(() => {
    const tagSet = new Set<string>();
    for (const entry of props.entries) {
      for (const tag of entry.tags ?? []) {
        tagSet.add(tag);
      }
    }
    return Array.from(tagSet).sort();
  });

  const hasTags = createMemo(() => allTags().length > 0);

  function toggleTag(tag: string) {
    const current = new Set(selectedTags());
    if (current.has(tag)) {
      current.delete(tag);
    } else {
      current.add(tag);
    }
    setSelectedTags(current);
  }

  function fuzzyMatch(query: string, target: string): boolean {
    query = query.toLowerCase();
    target = target.toLowerCase();
    let qi = 0;
    for (let i = 0; i < target.length && qi < query.length; i++) {
      if (target[i] === query[qi]) qi++;
    }
    return qi === query.length;
  }

  function isExactPrefix(query: string, target: string): boolean {
    return target.toLowerCase().startsWith(query.toLowerCase());
  }

  function entryDomain(entry: VaultEntry): string {
    if (entry.type === "login" && entry.url) return getDisplayDomain(entry.url);
    if (entry.passkey?.rpId) return entry.passkey.rpId;
    return "";
  }

  function entryMatchesDomain(entry: VaultEntry, domain: string): boolean {
    if (!domain) return false;
    if (entry.passkey?.rpId === domain) return true;
    if (entry.type !== "login") return false;
    // Tab domain is the eTLD+1 from extractDomain — compare against eTLD+1 of
    // each entry URL too so subdomain entries also match.
    if (entry.url && extractDomain(entry.url) === domain) return true;
    for (const extra of entry.additionalUrls ?? []) {
      if (extractDomain(extra) === domain) return true;
    }
    return false;
  }

  const filteredEntries = createMemo(() => {
    let result = props.entries;

    if (notesOnly()) {
      result = result.filter(entry => entry.type === "note");
    }

    if (selectedTags().size > 0) {
      result = result.filter(entry =>
        Array.from(selectedTags()).every(tag => entry.tags?.includes(tag))
      );
    }

    const q = search().trim();
    if (q) {
      const searchableFor = (e: VaultEntry): string => {
        if (e.type === "note") return `${e.title} ${e.notes ?? ""}`;
        const passkeyText = e.passkey
          ? ` ${e.passkey.rpId} ${e.passkey.userName} ${e.passkey.userDisplayName}`
          : "";
        return `${e.title} ${e.url ?? ""} ${e.username ?? ""}${passkeyText}`;
      };
      result = result
        .filter((entry) => fuzzyMatch(q, searchableFor(entry)))
        .sort((a, b) => {
          const aSearchable = searchableFor(a).toLowerCase();
          const bSearchable = searchableFor(b).toLowerCase();
          const qLower = q.toLowerCase();
          const aExact = isExactPrefix(qLower, aSearchable);
          const bExact = isExactPrefix(qLower, bSearchable);
          if (aExact && !bExact) return -1;
          if (!aExact && bExact) return 1;
          return 0;
        });
      return result;
    }

    const tabDomain = props.currentTabDomain ?? "";
    const order = props.sortOrder;

    if (order === "az") {
      return [...result].sort((a, b) => a.title.localeCompare(b.title));
    }
    if (order === "za") {
      return [...result].sort((a, b) => b.title.localeCompare(a.title));
    }
    if (order === "recent") {
      return [...result].sort((a, b) => (b.createdAt ?? 0) - (a.createdAt ?? 0));
    }
    if (tabDomain) {
      return [...result].sort((a, b) => {
        const aMatch = entryMatchesDomain(a, tabDomain) ? 0 : 1;
        const bMatch = entryMatchesDomain(b, tabDomain) ? 0 : 1;
        return aMatch - bMatch;
      });
    }
    return result;
  });

  // Declaration order matters: `allVisibleIds` and `allSelected` read
  // `filteredEntries` eagerly on component mount via createMemo. Moving
  // `filteredEntries` below them throws ReferenceError under the production
  // minifier and freezes the vault list on mount (v1.4.34 regression).
  const allVisibleIds = createMemo(() => filteredEntries().map(e => e.id));
  const allSelected = createMemo(() =>
    allVisibleIds().length > 0 && allVisibleIds().every(id => selectedIds().has(id))
  );

  function toggleSelectAll() {
    if (allSelected()) {
      setSelectedIds(new Set<string>());
    } else {
      setSelectedIds(new Set<string>(allVisibleIds()));
    }
  }

  async function handleDeleteSelected() {
    const ids = Array.from(selectedIds());
    if (!ids.length || !props.onDeleteMany) return;
    setDeleting(true);
    await props.onDeleteMany(ids);
    setDeleting(false);
    exitSelectMode();
  }

  // Virtualization: under VIRTUAL_THRESHOLD entries we render the full list.
  // Above it, we render only a window around the visible viewport plus a
  // BUFFER_ROWS-tall buffer above and below so scroll never reveals empty
  // space. Row height is approximate (variable padding for badges) but
  // bounded — the buffer absorbs over/undershoot.
  const VIRTUAL_THRESHOLD = 100;
  const ROW_HEIGHT = 56;
  const BUFFER_ROWS = 20;

  const isVirtualized = createMemo(() => filteredEntries().length > VIRTUAL_THRESHOLD);

  const visibleRange = createMemo(() => {
    const total = filteredEntries().length;
    if (!isVirtualized()) return { start: 0, end: total };
    const start = Math.max(0, Math.floor(scrollTop() / ROW_HEIGHT) - BUFFER_ROWS);
    const end = Math.min(total, Math.ceil((scrollTop() + viewportHeight()) / ROW_HEIGHT) + BUFFER_ROWS);
    return { start, end };
  });

  const windowedEntries = createMemo(() => {
    const { start, end } = visibleRange();
    return filteredEntries().slice(start, end);
  });

  function handleListScroll(e: Event) {
    if (!isVirtualized()) return;
    const target = e.currentTarget as HTMLDivElement;
    setScrollTop(target.scrollTop);
    setViewportHeight(target.clientHeight);
  }

  function handleSearchKeydown(e: KeyboardEvent) {
    if (e.key === "ArrowDown") {
      e.preventDefault();
      const firstBtn = listRef?.querySelector<HTMLButtonElement>(".peach-entry-row");
      firstBtn?.focus();
    } else if (e.key === "ArrowUp") {
      e.preventDefault();
      const allBtns = listRef?.querySelectorAll<HTMLButtonElement>(".peach-entry-row");
      allBtns?.[allBtns.length - 1]?.focus();
    } else if (e.key === "Enter") {
      e.preventDefault();
      const firstEntry = filteredEntries()[0];
      if (firstEntry) props.onSelectEntry(firstEntry);
    } else if (e.key === "Escape" && selecting()) {
      exitSelectMode();
    }
  }

  function handleListKeydown(e: KeyboardEvent) {
    if (!listRef) return;
    const btns = Array.from(listRef.querySelectorAll<HTMLButtonElement>(".peach-entry-row"));
    const idx = btns.indexOf(document.activeElement as HTMLButtonElement);
    if (e.key === "ArrowDown") {
      e.preventDefault();
      if (idx < btns.length - 1) btns[idx + 1]?.focus();
    } else if (e.key === "ArrowUp") {
      e.preventDefault();
      if (idx === 0) { searchRef?.focus(); }
      else btns[idx - 1]?.focus();
    } else if (e.key === "Escape") {
      if (selecting()) exitSelectMode();
      else props.onClose();
    }
  }

  const sortLabels: { key: SortOrder; label: string }[] = [
    { key: "url-first", label: "smart" },
    { key: "az", label: "A–Z" },
    { key: "za", label: "Z–A" },
    { key: "recent", label: "newest" },
  ];

  return (
    <div class="peach-overlay-view ov-enter-up" style="display:flex">
      <div class="peach-list-top">
        <button
          class="peach-btn peach-btn--ghost peach-btn--sm peach-icon-btn"
          onClick={props.onClose}
          aria-label="Back"
        >
          <svg width="7" height="12" viewBox="0 0 7 12" fill="none" stroke="currentColor" stroke-width="1.1" stroke-linecap="round" stroke-linejoin="round">
            <path d="M6 1L1 6L6 11" />
          </svg>
        </button>
        <input
          class="peach-search-input"
          placeholder="search vault..."
          autocomplete="off"
          style="font-size:14px"
          ref={focusSearch}
          value={search()}
          onInput={(e) => setSearch((e.currentTarget as HTMLInputElement).value)}
          onKeyDown={handleSearchKeydown}
        />
        <span class="peach-search-counter peach-search-counter-list">
          {search() || selectedTags().size > 0
            ? `${filteredEntries().length} of ${props.entries.length}`
            : `${props.entries.length} entries`}
        </span>
      </div>

      {/* Sort bar — morphs into select-mode controls */}
      <div class="peach-sort-bar">
        <Show
          when={selecting()}
          fallback={
            <>
              <For each={sortLabels}>
                {({ key, label }) => (
                  <button
                    class={`peach-sort-btn${props.sortOrder === key ? " is-active" : ""}`}
                    onClick={() => props.onSortOrderChange(key)}
                  >
                    {label}
                  </button>
                )}
              </For>
              <span style="flex:1" />
              <button
                class={`peach-sort-trash-btn${notesOnly() ? " is-active" : ""}`}
                onClick={() => setNotesOnly(v => !v)}
                aria-label="Notes only"
                title="Show notes only"
              >
                <NoteIcon />
              </button>
              <Show when={props.onOpenTrash}>
                <button
                  class="peach-sort-trash-btn"
                  onClick={props.onOpenTrash}
                  aria-label="View trash"
                  title="View deleted entries"
                >
                  <svg width="11" height="12" 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" />
                  </svg>
                </button>
              </Show>
              <Show when={props.onDeleteMany}>
                <button
                  class="peach-sort-trash-btn"
                  onClick={enterSelectMode}
                  aria-label="Select entries"
                  title="Select entries"
                >
                  <svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round">
                    <circle cx="4" cy="4" r="2.5" />
                    <circle cx="9" cy="4" r="2.5" />
                    <circle cx="4" cy="9" r="2.5" />
                    <circle cx="9" cy="9" r="2.5" />
                  </svg>
                </button>
              </Show>
            </>
          }
        >
          {/* Select mode sort bar */}
          <button
            class="peach-select-cancel-btn"
            onClick={exitSelectMode}
          >
            cancel
          </button>
          <span class="peach-select-count-label">
            {selectedIds().size > 0 ? `${selectedIds().size} selected` : "select entries"}
          </span>
          <button
            class="peach-select-all-btn"
            onClick={toggleSelectAll}
          >
            {allSelected() ? "none" : "all"}
          </button>
        </Show>
      </div>

      <Show when={hasTags() && !selecting()}>
        <div class="peach-tag-filter-strip" style="display:flex;gap:6px;padding:4px 12px 6px;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none;">
          <For each={allTags()}>
            {(tag) => (
              <button
                class={`peach-tag-filter-chip ${selectedTags().has(tag) ? "is-selected" : ""}`}
                onClick={() => toggleTag(tag)}
              >
                {tag}
              </button>
            )}
          </For>
        </div>
      </Show>

      <div
        class={`peach-vault-list${selecting() ? " is-selecting" : ""}`}
        ref={(el) => { listRef = el; setViewportHeight(el.clientHeight); }}
        onKeyDown={handleListKeydown}
        onScroll={handleListScroll}
      >
        <Show
          when={filteredEntries().length > 0}
          fallback={
            <div class="peach-list-empty">
              <span>no entries yet</span>
            </div>
          }
        >
          <Show when={isVirtualized()}>
            <div style={{ height: `${visibleRange().start * ROW_HEIGHT}px` }} aria-hidden="true" />
          </Show>
          <For each={windowedEntries()}>
            {(entry, localIndex) => {
              const index = () => visibleRange().start + localIndex();
              const isNote = entry.type === "note";
              const isPasskey = entry.passkey !== undefined;
              const domain = entry.type === "note"
                ? (entry.notes?.slice(0, 40) ?? "note")
                : entry.url
                  ? getDisplayDomain(entry.url)
                  : entry.passkey?.rpId
                    ? entry.passkey.rpId
                  : "saved entry";
              const isTabMatch = () =>
                props.currentTabDomain !== undefined &&
                props.currentTabDomain !== "" &&
                entryMatchesDomain(entry, props.currentTabDomain);
              const isSelected = () => selectedIds().has(entry.id);

              const ariaLabel = (() => {
                const tag = isPasskey ? "passkey" : isNote ? "note" : "login";
                const sub = entry.username || domain || "";
                return sub
                  ? `${entry.title} — ${sub} (${tag})`
                  : `${entry.title} (${tag})`;
              })();
              return (
                <button
                  class={`peach-entry-row${!selecting() && props.selectedEntryId === entry.id ? " is-active" : ""}${!selecting() && isTabMatch() ? " is-tab-match" : ""}${selecting() && isSelected() ? " is-selected" : ""}${flashId() === entry.id ? " is-copy-flash" : ""}`}
                  style={isVirtualized()
                    ? { animation: "none" }
                    : { "animation-delay": `${Math.min(index(), 24) * 20}ms` }
                  }
                  aria-label={ariaLabel}
                  aria-pressed={selecting() ? isSelected() : undefined}
                  onTouchStart={(e) => handleRowTouchStart(entry, e)}
                  onTouchMove={handleRowTouchMove}
                  onTouchEnd={(e) => void handleRowTouchEnd(entry, e)}
                  onTouchCancel={() => { clearLongPressTimer(); touchStart = null; }}
                  onContextMenu={(e) => { e.preventDefault(); if (!selecting()) setContextEntry(entry); }}
                  onClick={() => {
                    if (suppressNextClick) { suppressNextClick = false; return; }
                    if (selecting()) {
                      toggleId(entry.id);
                    } else {
                      props.onSelectEntry(entry);
                    }
                  }}
                >
                  <div class={`peach-entry-row-icon${!selecting() && entry.breach ? " is-breach" : ""}${selecting() ? " is-select-icon" : ""}`}>
                    <Show
                      when={selecting()}
                      fallback={
                        <FaviconIcon
                          domain={entry.url ? getDisplayDomain(entry.url) : ""}
                          title={entry.title}
                          isNote={isNote}
                          isPasskey={isPasskey}
                        />
                      }
                    >
                      {/* Check indicator */}
                      <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
                        <circle
                          cx="8" cy="8" r="7"
                          stroke="currentColor"
                          stroke-width="1"
                          fill={isSelected() ? "var(--peach-accent)" : "transparent"}
                          opacity={isSelected() ? "1" : "0.3"}
                        />
                        <Show when={isSelected()}>
                          <path
                            d="M5 8.5L7 10.5L11 6"
                            stroke="white"
                            stroke-width="1.2"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                          />
                        </Show>
                      </svg>
                    </Show>
                  </div>
                  <div class="peach-entry-row-info">
                    <span class="peach-entry-row-name">
                      {entry.title}
                      <Show when={isPasskey && !selecting()}>
                        <span class="peach-passkey-badge">passkey</span>
                      </Show>
                      <Show when={isTabMatch() && !selecting()}>
                        <span class="peach-tab-match-badge" title="Matches current tab">●</span>
                      </Show>
                    </span>
                    <span class="peach-entry-row-meta">{domain}</span>
                  </div>
                  <Show when={entry.breach && !selecting()}>
                    <span class="peach-entry-row-dot" aria-label="breach"></span>
                  </Show>
                  <Show when={entry.canary && !selecting()}>
                    <span class="peach-entry-row-canary" title={`Canary: ${entry.canary?.label ?? "canary entry"}`}>🪤</span>
                  </Show>
                </button>
              );
            }}
          </For>
          <Show when={isVirtualized()}>
            <div
              style={{ height: `${(filteredEntries().length - visibleRange().end) * ROW_HEIGHT}px` }}
              aria-hidden="true"
            />
          </Show>
        </Show>
      </div>

      {/* Bottom bar — new entry normally, delete action in select mode */}
      <Show
        when={selecting()}
        fallback={
          <button class="peach-new-entry-row" onClick={props.onAdd}>
            <svg width="10" height="10" viewBox="0 0 10 10" fill="none" stroke="currentColor" stroke-width="1.1" stroke-linecap="round">
              <path d="M5 1v8M1 5h8" />
            </svg>
            new entry
          </button>
        }
      >
        <button
          class={`peach-select-action-bar${selectedIds().size === 0 ? " is-empty" : ""}`}
          disabled={selectedIds().size === 0 || deleting()}
          onClick={() => void handleDeleteSelected()}
        >
          <svg width="12" height="13" viewBox="0 0 12 13" fill="none" stroke="currentColor" stroke-width="1.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" />
          </svg>
          <Show
            when={selectedIds().size > 0}
            fallback={<span>select entries to delete</span>}
          >
            <span>
              {deleting()
                ? "moving to trash…"
                : `move ${selectedIds().size} to trash`}
            </span>
          </Show>
        </button>
      </Show>

      <Show when={contextEntry() !== null}>
        <div
          class="peach-context-menu-backdrop"
          onClick={() => setContextEntry(null)}
          role="presentation"
        >
          <div
            class="peach-context-menu"
            role="menu"
            aria-label="Entry actions"
            onClick={(e) => e.stopPropagation()}
          >
            <Show when={contextEntry()!.username}>
              <button
                role="menuitem"
                class="peach-context-menu-item"
                onClick={async () => {
                  const e = contextEntry();
                  if (!e?.username) return;
                  await popupCopy(e.username, "username");
                  setContextEntry(null);
                }}
              >
                Copy username
              </button>
            </Show>
            <Show when={contextEntry()!.password}>
              <button
                role="menuitem"
                class="peach-context-menu-item"
                onClick={async () => {
                  const e = contextEntry();
                  if (!e?.password) return;
                  await popupCopy(e.password, "password");
                  setContextEntry(null);
                }}
              >
                Copy password
              </button>
            </Show>
            <Show when={contextEntry()!.totp}>
              <button
                role="menuitem"
                class="peach-context-menu-item"
                onClick={async () => {
                  const e = contextEntry();
                  if (!e?.totp) return;
                  await popupCopy(e.totp, "TOTP secret");
                  setContextEntry(null);
                }}
              >
                Copy TOTP secret
              </button>
            </Show>
            <button
              role="menuitem"
              class="peach-context-menu-item"
              onClick={() => {
                const e = contextEntry();
                if (e) props.onSelectEntry(e);
                setContextEntry(null);
              }}
            >
              Open
            </button>
            <Show when={props.onDeleteMany}>
              <button
                role="menuitem"
                class="peach-context-menu-item peach-context-menu-item--danger"
                onClick={async () => {
                  const e = contextEntry();
                  if (!e) return;
                  setContextEntry(null);
                  await props.onDeleteMany?.([e.id]);
                }}
              >
                Move to trash
              </button>
            </Show>
            <button
              role="menuitem"
              class="peach-context-menu-item peach-context-menu-item--cancel"
              onClick={() => setContextEntry(null)}
            >
              Cancel
            </button>
          </div>
        </div>
      </Show>
    </div>
  );
}