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

function FaviconIcon(props: { domain: string; isNote: boolean; isPasskey: boolean }) {
  const src = props.domain && !props.isNote && !props.isPasskey
    ? faviconUrl(props.domain)
    : null;
  return (
    <Show when={src} fallback={props.isPasskey ? PASSKEY_ICON : props.isNote ? NOTE_ICON : LOGIN_ICON}>
      <img src={src!} width="16" height="16" alt="" style="border-radius:3px;" />
    </Show>
  );
}

const LOGIN_ICON = (
  <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 PASSKEY_ICON = (
  <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 NOTE_ICON = (
  <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);

  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.type === "passkey" && entry.rpId) return entry.rpId;
    return "";
  }

  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) {
      result = result
        .filter((entry) => {
          const searchable = entry.type === "note"
            ? `${entry.title} ${entry.notes ?? ""}`
            : entry.type === "passkey"
              ? `${entry.title} ${entry.rpId ?? ""} ${entry.userName ?? ""} ${entry.userDisplayName ?? ""}`
            : `${entry.title} ${entry.url ?? ""} ${entry.username ?? ""}`;
          return fuzzyMatch(q, searchable);
        })
        .sort((a, b) => {
          const aSearchable = a.type === "note"
            ? `${a.title} ${a.notes ?? ""}`.toLowerCase()
            : a.type === "passkey"
              ? `${a.title} ${a.rpId ?? ""} ${a.userName ?? ""}`.toLowerCase()
            : `${a.title} ${a.url ?? ""} ${a.username ?? ""}`.toLowerCase();
          const bSearchable = b.type === "note"
            ? `${b.title} ${b.notes ?? ""}`.toLowerCase()
            : b.type === "passkey"
              ? `${b.title} ${b.rpId ?? ""} ${b.userName ?? ""}`.toLowerCase()
            : `${b.title} ${b.url ?? ""} ${b.username ?? ""}`.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 = entryDomain(a) === tabDomain ? 0 : 1;
        const bMatch = entryDomain(b) === tabDomain ? 0 : 1;
        return aMatch - bMatch;
      });
    }
    return result;
  });

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

  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"
              >
                {NOTE_ICON}
              </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={listRef}
        onKeyDown={handleListKeydown}
      >
        <Show
          when={filteredEntries().length > 0}
          fallback={
            <div class="peach-list-empty">
              <span>no entries yet</span>
            </div>
          }
        >
          <For each={filteredEntries()}>
            {(entry, index) => {
              const isNote = entry.type === "note";
              const isPasskey = entry.type === "passkey";
              const domain = entry.type === "note"
                ? (entry.notes?.slice(0, 40) ?? "note")
                : entry.type === "passkey"
                  ? entry.rpId ?? "passkey"
                : entry.url
                  ? getDisplayDomain(entry.url)
                  : "saved entry";
              const isTabMatch = () =>
                props.currentTabDomain !== undefined &&
                props.currentTabDomain !== "" &&
                entryDomain(entry) === props.currentTabDomain;
              const isSelected = () => selectedIds().has(entry.id);

              return (
                <button
                  class={`peach-entry-row${!selecting() && props.selectedEntryId === entry.id ? " is-active" : ""}${!selecting() && isTabMatch() ? " is-tab-match" : ""}${selecting() && isSelected() ? " is-selected" : ""}`}
                  style={{ "animation-delay": `${Math.min(index(), 24) * 20}ms` }}
                  onClick={() => {
                    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) : ""}
                          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>
      </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>
    </div>
  );
}