import { createSignal, For, Show } from "solid-js";
import type { VaultEntry } from "../../shared/types";
import { sendMessage } from "../../shared/bridge";
import { NoteRow } from "../components/NoteRow";

interface NotesTOCProps {
  notes: VaultEntry[];
  onBack: () => void;
  onOpenNote: (note: VaultEntry, rowEl: HTMLElement) => void;
  onNewNote: () => void;
  onRefresh: () => void;
  /** Note being expanded — other rows should fade away */
  expandingNoteId?: string | null;
}

export function NotesTOC(props: NotesTOCProps) {
  const [searchVisible, setSearchVisible] = createSignal(false);
  const [searchQuery, setSearchQuery] = createSignal("");

  let searchInputRef!: HTMLInputElement;

  function filteredNotes() {
    const q = searchQuery().trim().toLowerCase();
    if (!q) return props.notes;
    return props.notes.filter((n) =>
      (n.title ?? "").toLowerCase().includes(q) ||
      (n.notes ?? "").toLowerCase().includes(q)
    );
  }

  function showSearch() {
    setSearchVisible(true);
    setTimeout(() => searchInputRef?.focus(), 50);
  }

  function clearSearch() {
    setSearchQuery("");
    setSearchVisible(false);
  }

  async function handleDelete(note: VaultEntry) {
    await sendMessage({ type: "DELETE_NOTE", payload: { id: note.id } });
    props.onRefresh();
  }

  async function handleArchive(note: VaultEntry) {
    // Archive = soft delete with a tag — for now just delete to trash
    await sendMessage({ type: "DELETE_ENTRY", payload: { id: note.id } });
    props.onRefresh();
  }

  return (
    <div class="peach-notes-toc">
      {/* Header */}
      <div class="peach-notes-header">
        <Show
          when={!searchVisible()}
          fallback={
            <>
              <input
                ref={searchInputRef}
                class="peach-notes-search-input"
                placeholder="search notes…"
                value={searchQuery()}
                onInput={(e) => setSearchQuery((e.target as HTMLInputElement).value)}
                aria-label="Search notes"
              />
              <button class="peach-notes-header-btn" onClick={clearSearch} aria-label="Clear search">✕</button>
            </>
          }
        >
          <button class="peach-notes-back" onClick={props.onBack} aria-label="Back to vault">‹</button>
          <span class="peach-notes-header-title">notes.</span>
          <button
            class="peach-notes-header-btn peach-notes-new-btn-icon"
            onClick={props.onNewNote}
            aria-label="New note"
            title="New note"
          >+</button>
          <button class="peach-notes-header-btn peach-notes-search-btn" onClick={showSearch} aria-label="Search">
            <svg width="15" height="15" viewBox="0 0 15 15" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round">
              <circle cx="6.5" cy="6.5" r="4.25" />
              <path d="M10 10L13 13" />
            </svg>
          </button>
        </Show>
      </div>

      {/* Note list */}
      <div class="peach-notes-list-container">
        <Show
          when={filteredNotes().length > 0}
          fallback={
            <div class="peach-notes-empty">
              <p class="peach-notes-empty-text">
                {searchQuery() ? "No notes match." : "No notes yet.\nStart writing."}
              </p>
            </div>
          }
        >
          <For each={filteredNotes()}>
            {(note) => {
              // Permanent index from the unfiltered list — never changes during search
              const permanentIndex = () => props.notes.findIndex((n) => n.id === note.id);
              const expandingIdx = () => props.notes.findIndex((n) => n.id === props.expandingNoteId);
              const expanding = () => props.expandingNoteId && props.expandingNoteId !== note.id;
              const expandingNote = () => props.expandingNoteId === note.id;
              return (
                <NoteRow
                  note={note}
                  index={permanentIndex()}
                  searchQuery={searchQuery()}
                  onTap={(n, el) => props.onOpenNote(n, el)}
                  onDelete={handleDelete}
                  onArchive={handleArchive}
                  fadingClass={
                    expanding()
                      ? (permanentIndex() < expandingIdx()
                          ? "is-expanding-away is-expanding-away-up"
                          : "is-expanding-away is-expanding-away-down")
                      : expandingNote()
                        ? "is-expanding-target"
                        : undefined
                  }
                />
              );
            }}
          </For>
        </Show>
      </div>
    </div>
  );
}