"use client";

/**
 * FindInPage — in-page text search for long reading pages (transcripts etc.).
 *
 * Renders a "Find in page" trigger for a page header; while open, a floating
 * find bar with a query input, match counter, and prev/next navigation.
 * Matches are highlighted by wrapping text nodes in <mark data-find> directly
 * in the DOM, so it works against server-rendered content (including
 * dangerouslySetInnerHTML blocks) without needing the text as props.
 *
 * Matching is case- AND diacritic-insensitive — "krsna" finds "Kṛṣṇa",
 * "sanjaya" finds "Sañjaya" — essential for IAST transliteration content
 * that users can't easily type.
 *
 * The bar is portaled to <body>: the sticky PageHeader animates with a
 * transform when it collapses on scroll, which would hijack any
 * position:fixed descendant and drag the bar off-screen with it.
 */

import { useCallback, useEffect, useRef, useState } from "react";
import { createPortal } from "react-dom";
import { ChevronDown, ChevronUp, Search, X } from "lucide-react";
import { cn } from "@/lib/utils";

const MIN_QUERY = 2;
const DEBOUNCE_MS = 250;
const HIT_CLASS = "bg-primary/20 text-inherit rounded-[2px]";
const CURRENT_CLASS = "bg-primary text-primary-foreground rounded-[2px]";

/** Case + diacritic fold: "Kṛṣṇa" → "krsna". */
function fold(s: string): string {
  return s
    .normalize("NFD")
    .replace(/[\u0300-\u036f]/g, "")
    .toLowerCase();
}

/**
 * Fold a string keeping a map from each folded char back to the index of
 * the original char it came from, so match offsets translate back.
 */
function foldWithMap(s: string): { folded: string; map: number[] } {
  let folded = "";
  const map: number[] = [];
  for (let i = 0; i < s.length; i++) {
    const f = fold(s[i]);
    for (let j = 0; j < f.length; j++) {
      folded += f[j];
      map.push(i);
    }
  }
  return { folded, map };
}

/** Unwrap every mark this component added and re-merge the text nodes. */
function clearHighlights(container: HTMLElement) {
  container.querySelectorAll("mark[data-find]").forEach((mark) => {
    const parent = mark.parentNode;
    if (!parent) return;
    parent.replaceChild(
      document.createTextNode(mark.textContent ?? ""),
      mark,
    );
    parent.normalize();
  });
}

/**
 * Highlight every occurrence of `query` inside `container`, returning the
 * created marks in document order. Searches each text node independently
 * (matches spanning inline-tag boundaries are not found — acceptable for
 * prose where emphasis runs are whole words/phrases).
 */
function applyHighlights(container: HTMLElement, query: string): HTMLElement[] {
  const foldedQuery = fold(query);
  if (!foldedQuery) return [];

  // Snapshot the nodes first — wrapping mutates the tree under the walker.
  const walker = document.createTreeWalker(container, NodeFilter.SHOW_TEXT);
  const textNodes: Text[] = [];
  for (let n = walker.nextNode(); n; n = walker.nextNode()) {
    textNodes.push(n as Text);
  }

  const marks: HTMLElement[] = [];
  for (const node of textNodes) {
    const text = node.textContent ?? "";
    if (!text.trim()) continue;
    const { folded, map } = foldWithMap(text);

    // Collect match ranges in original-string coordinates.
    const ranges: Array<[number, number]> = [];
    let from = 0;
    for (;;) {
      const at = folded.indexOf(foldedQuery, from);
      if (at === -1) break;
      const endFolded = at + foldedQuery.length;
      const start = map[at];
      const end = endFolded < map.length ? map[endFolded] : text.length;
      if (end > start) ranges.push([start, end]);
      from = endFolded;
    }
    if (ranges.length === 0) continue;

    // Rebuild the node as text/mark fragments.
    const frag = document.createDocumentFragment();
    let cursor = 0;
    for (const [start, end] of ranges) {
      if (start > cursor) {
        frag.appendChild(document.createTextNode(text.slice(cursor, start)));
      }
      const mark = document.createElement("mark");
      mark.setAttribute("data-find", "");
      mark.className = HIT_CLASS;
      mark.textContent = text.slice(start, end);
      frag.appendChild(mark);
      marks.push(mark);
      cursor = end;
    }
    if (cursor < text.length) {
      frag.appendChild(document.createTextNode(text.slice(cursor)));
    }
    node.parentNode?.replaceChild(frag, node);
  }
  return marks;
}

/** Style the active mark and bring it into view. */
function focusMark(marks: HTMLElement[], index: number) {
  marks.forEach((m, i) => {
    m.className = i === index ? CURRENT_CLASS : HIT_CLASS;
  });
  marks[index]?.scrollIntoView({ block: "center", behavior: "smooth" });
}

export function FindInPage({
  targetId,
  className,
}: {
  /** id of the element whose text content is searched. */
  targetId: string;
  className?: string;
}) {
  const [open, setOpen] = useState(false);
  const [query, setQuery] = useState("");
  const [count, setCount] = useState(0);
  const [current, setCurrent] = useState(0);
  const marksRef = useRef<HTMLElement[]>([]);
  const inputRef = useRef<HTMLInputElement>(null);

  const close = useCallback(() => {
    const el = document.getElementById(targetId);
    if (el) clearHighlights(el);
    marksRef.current = [];
    setOpen(false);
    setQuery("");
    setCount(0);
    setCurrent(0);
  }, [targetId]);

  // Debounced (re)search on every query change while open.
  useEffect(() => {
    if (!open) return;
    const id = window.setTimeout(() => {
      const el = document.getElementById(targetId);
      if (!el) return;
      clearHighlights(el);
      const q = query.trim();
      const marks = q.length >= MIN_QUERY ? applyHighlights(el, q) : [];
      marksRef.current = marks;
      setCount(marks.length);
      setCurrent(0);
      if (marks.length > 0) focusMark(marks, 0);
    }, DEBOUNCE_MS);
    return () => window.clearTimeout(id);
  }, [query, open, targetId]);

  // Focus the input when the bar opens.
  useEffect(() => {
    if (open) inputRef.current?.focus();
  }, [open]);

  // Drop any leftover highlights if the component unmounts mid-search.
  useEffect(() => {
    return () => {
      const el = document.getElementById(targetId);
      if (el) clearHighlights(el);
    };
  }, [targetId]);

  const step = useCallback(
    (dir: 1 | -1) => {
      const marks = marksRef.current;
      if (marks.length === 0) return;
      setCurrent((c) => {
        const next = (c + dir + marks.length) % marks.length;
        focusMark(marks, next);
        return next;
      });
    },
    [],
  );

  return (
    <>
      <button
        type="button"
        onClick={() => setOpen(true)}
        aria-label="Find in page"
        className={cn(
          "inline-flex h-8 items-center gap-1.5 rounded-md border border-border bg-background px-2.5 text-sm text-muted-foreground hover:text-foreground hover:bg-muted transition-colors",
          className,
        )}
      >
        <Search className="size-4" />
        <span className="hidden sm:inline">Find in page</span>
      </button>

      {open &&
        createPortal(
          <div className="fixed top-14 sm:top-16 inset-x-0 z-30 flex justify-center px-4 pointer-events-none">
            <div className="pointer-events-auto flex w-full max-w-md items-center gap-1 rounded-xl border border-border bg-card px-2 py-1.5 shadow-lg">
              <Search className="ml-1 size-4 shrink-0 text-muted-foreground" />
              <input
                ref={inputRef}
                value={query}
                onChange={(e) => setQuery(e.target.value)}
                onKeyDown={(e) => {
                  if (e.key === "Enter") {
                    e.preventDefault();
                    step(e.shiftKey ? -1 : 1);
                  } else if (e.key === "Escape") {
                    e.preventDefault();
                    close();
                  }
                }}
                placeholder="Find in page…"
                aria-label="Find in page"
                // text-base (16px), not text-sm: iOS/iPadOS Safari auto-zooms
                // the page when focusing an input with a font-size below 16px.
                className="min-w-0 flex-1 bg-transparent py-1 text-base outline-none placeholder:text-muted-foreground"
              />
              <span
                aria-live="polite"
                className="shrink-0 select-none text-xs tabular-nums text-muted-foreground"
              >
                {count > 0
                  ? `${current + 1}/${count}`
                  : query.trim().length >= MIN_QUERY
                    ? "0 results"
                    : ""}
              </span>
              <button
                type="button"
                onClick={() => step(-1)}
                disabled={count === 0}
                aria-label="Previous match"
                className="inline-flex size-7 shrink-0 items-center justify-center rounded-md text-muted-foreground hover:bg-muted hover:text-foreground transition-colors disabled:opacity-40 disabled:pointer-events-none"
              >
                <ChevronUp className="size-4" />
              </button>
              <button
                type="button"
                onClick={() => step(1)}
                disabled={count === 0}
                aria-label="Next match"
                className="inline-flex size-7 shrink-0 items-center justify-center rounded-md text-muted-foreground hover:bg-muted hover:text-foreground transition-colors disabled:opacity-40 disabled:pointer-events-none"
              >
                <ChevronDown className="size-4" />
              </button>
              <button
                type="button"
                onClick={close}
                aria-label="Close find bar"
                className="inline-flex size-7 shrink-0 items-center justify-center rounded-md text-muted-foreground hover:bg-muted hover:text-foreground transition-colors"
              >
                <X className="size-4" />
              </button>
            </div>
          </div>,
          document.body,
        )}
    </>
  );
}