import { createEffect, createMemo, createSignal, For, Show } from "solid-js";
import type { VaultEntry } from "../../shared/types";
import { getDisplayDomain } from "../../shared/domain";
import { faviconUrl, faviconImgSig, globeFaviconSig, titleInitials, titleBackground } from "../../shared/favicon";
import { popupCopy } from "../copy";
import {
  filterAndSortVaultEntries,
  entryMatchesDomain,
  VAULT_SORT_OPTIONS,
  type SortOrder,
} from "./vault-search";

export type { SortOrder } from "./vault-search";

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
    ? faviconUrl(props.domain)
    : null;
  const [isReal, setIsReal] = createSignal(false);

  // Show InitialsChip (or note icon) first — no globe flash. Passkeys use the
  // same coloured initials / real favicon as logins; the row's "passkey" text
  // badge still distinguishes them.
  // Load the favicon invisibly in the background; switch to it only after
  // confirming it differs from Chrome's default "no favicon" globe image.
  return (
    <Show
      when={isReal()}
      fallback={
        <>
          {props.isNote
            ? <NoteIcon />
            : <InitialsChip title={props.title ?? props.domain ?? ""} />}
          {src && (
            <img
              src={src}
              style="display:none"
              onError={() => {}}
              onLoad={async (e) => {
                const img = e.currentTarget as HTMLImageElement;
                // Old Chrome returns the globe at native 16×16 even when
                // size=32 is requested — treat as no favicon.
                if (img.naturalWidth <= 16) return;
                // New Chrome returns the globe scaled to the requested size.
                // Compare pixel data against the known "no favicon" reference.
                const sig = faviconImgSig(img);
                if (sig !== null) {
                  const gSig = await globeFaviconSig();
                  if (gSig !== null && sig === gSig) return;
                }
                setIsReal(true);
              }}
            />
          )}
        </>
      }
    >
      <img src={src!} width="16" height="16" alt="" style="border-radius:3px;" />
    </Show>
  );
}


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


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

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;
      // Touch-and-hold = multi-select. Pre-select the row so the action bar
      // lights up immediately. The context menu still opens on desktop
      // right-click (and on mobile if the browser synthesises its own long-
      // press contextmenu event — that path is filtered by `touchStart` so
      // both don't fire on a single gesture).
      enterSelectMode();
      setSelectedIds(new Set([entry.id]));
      vibrate(20);
      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);
  }

  const filteredEntries = createMemo(() => {
    return filterAndSortVaultEntries(props.entries, {
      notesOnly: notesOnly(),
      selectedTags: selectedTags(),
      query: search(),
      searchScope: "both",
      sortOrder: props.sortOrder,
      currentTabDomain: props.currentTabDomain,
    });
  });

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

  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={VAULT_SORT_OPTIONS}>
                {({ 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();
                    // A real touch long-press already entered multi-select
                    // via the 500ms timer; the browser's synthesised
                    // contextmenu event would otherwise reopen the menu and
                    // undo the gesture. Desktop right-click has no `touchStart`
                    // to consume, so it still opens the menu.
                    if (touchStart !== null) { touchStart = null; return; }
                    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.type === "note" ? "" : (entry.url ? getDisplayDomain(entry.url) : entry.passkey?.rpId ?? "")}
                          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>
  );
}