"use client";

import { Fragment, useCallback, useEffect, useMemo, useRef, useState, type ReactNode } from "react";
import { createIndex, search } from "./bm25";
import type { AskAnswer, Citation, PortfolioDocument, SearchHit } from "./types";

export const ASK_EVENT = "agentic-search:ask";

/** Programmatically open the search in Ask mode with a question (e.g. from a CTA). */
export function askAgenticSearch(question: string) {
  if (typeof window === "undefined") return;
  window.dispatchEvent(new CustomEvent(ASK_EVENT, { detail: { question } }));
}

type Mode = "search" | "ask";

export interface AgenticPortfolioSearchProps {
  /** Corpus for zero-latency client-side instant search. */
  documents?: PortfolioDocument[];
  /** Used for instant search when `documents` is not provided. */
  searchEndpoint?: string;
  askEndpoint?: string;
  prompts?: string[];
  kicker?: string;
  title?: ReactNode;
  placeholder?: string;
  askPlaceholder?: string;
  defaultMode?: Mode;
  /** Render a link (e.g. wrap in a hover-preview component). */
  renderLink?: (target: Citation, children: ReactNode, className: string) => ReactNode;
  /** Slot under the panel (e.g. an open-source badge). */
  footer?: ReactNode;
  /** Global hotkey that focuses the input (default "/"; pass null to disable). */
  hotkey?: string | null;
  /** Read `?ask=` from the URL on mount and answer it (default true). */
  readAskParam?: boolean;
  id?: string;
  className?: string;
}

const host = (url?: string) => (url ? url.replace(/^https?:\/\//, "").replace(/\/$/, "") : "");

function defaultLink(target: Citation, children: ReactNode, className: string) {
  if (!target.url) return <span className={className}>{children}</span>;
  const external = /^https?:\/\//.test(target.url);
  return (
    <a href={target.url} className={className} target={external ? "_blank" : undefined} rel={external ? "noopener noreferrer" : undefined}>
      {children}
    </a>
  );
}

function withCitations(text: string, citations: Citation[], link: NonNullable<AgenticPortfolioSearchProps["renderLink"]>) {
  const parts = text.split(/(\[\d+\])/g);
  return parts.map((part, i) => {
    const m = part.match(/^\[(\d+)\]$/);
    const c = m ? citations[Number(m[1]) - 1] : undefined;
    if (!m || !c) return <Fragment key={i}>{part}</Fragment>;
    return <sup key={i}>{link(c, m[1], "aps-cite-ref")}</sup>;
  });
}

export function AgenticPortfolioSearch({
  documents,
  searchEndpoint = "/api/search",
  askEndpoint = "/api/ask",
  prompts = [],
  kicker = "Agentic Search",
  title,
  placeholder = "Search projects, roles, skills, writing…",
  askPlaceholder = "Ask a question — answers cite their sources",
  defaultMode = "search",
  renderLink = defaultLink,
  footer,
  hotkey = "/",
  readAskParam = true,
  id = "ask",
  className = "",
}: AgenticPortfolioSearchProps) {
  const [mode, setMode] = useState<Mode>(defaultMode);
  const [query, setQuery] = useState("");
  const [active, setActive] = useState(0);
  const [remoteHits, setRemoteHits] = useState<SearchHit[]>([]);
  const [ask, setAsk] = useState<{ status: "idle" | "loading" | "done" | "error"; data?: AskAnswer }>({ status: "idle" });
  const inputRef = useRef<HTMLInputElement>(null);
  const rootRef = useRef<HTMLElement>(null);
  const askSeq = useRef(0);

  const index = useMemo(() => (documents?.length ? createIndex(documents) : null), [documents]);
  const localHits = useMemo(() => (index && query.trim() ? search(index, query, { limit: 8 }) : []), [index, query]);
  const hits = index ? localHits : remoteHits;

  useEffect(() => {
    if (index || mode !== "search" || !query.trim()) return setRemoteHits([]);
    const ctrl = new AbortController();
    const t = setTimeout(() => {
      fetch(searchEndpoint, { method: "POST", signal: ctrl.signal, headers: { "content-type": "application/json" }, body: JSON.stringify({ query }) })
        .then((r) => r.json())
        .then((j: { hits?: SearchHit[] }) => setRemoteHits(j.hits || []))
        .catch(() => {});
    }, 90);
    return () => {
      clearTimeout(t);
      ctrl.abort();
    };
  }, [index, mode, query, searchEndpoint]);

  useEffect(() => setActive(0), [query, mode]);

  const runAsk = useCallback(
    async (question: string) => {
      const q = question.trim();
      if (!q) return;
      const seq = ++askSeq.current;
      setAsk({ status: "loading" });
      try {
        const res = await fetch(askEndpoint, { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify({ question: q }) });
        const data = (await res.json()) as AskAnswer;
        if (seq === askSeq.current) setAsk({ status: res.ok ? "done" : "error", data });
      } catch {
        if (seq === askSeq.current) setAsk({ status: "error" });
      }
    },
    [askEndpoint],
  );

  const askNow = useCallback(
    (q: string) => {
      setMode("ask");
      setQuery(q);
      void runAsk(q);
    },
    [runAsk],
  );

  // External triggers: CTA events + ?ask= deep links.
  useEffect(() => {
    const onAsk = (e: Event) => {
      const q = (e as CustomEvent<{ question?: string }>).detail?.question || "";
      rootRef.current?.scrollIntoView({ behavior: "smooth", block: "start" });
      askNow(q);
      window.setTimeout(() => inputRef.current?.focus({ preventScroll: true }), 350);
    };
    window.addEventListener(ASK_EVENT, onAsk);
    if (readAskParam) {
      const q = new URLSearchParams(window.location.search).get("ask");
      if (q) {
        askNow(q);
        window.setTimeout(() => rootRef.current?.scrollIntoView({ behavior: "smooth", block: "start" }), 120);
      }
    }
    return () => window.removeEventListener(ASK_EVENT, onAsk);
  }, [askNow, readAskParam]);

  // Global hotkey focuses the input.
  useEffect(() => {
    if (!hotkey) return;
    const onKey = (e: KeyboardEvent) => {
      if (e.key !== hotkey || e.metaKey || e.ctrlKey || e.altKey) return;
      const el = e.target as HTMLElement | null;
      if (el && (el.tagName === "INPUT" || el.tagName === "TEXTAREA" || el.isContentEditable)) return;
      e.preventDefault();
      inputRef.current?.focus();
      rootRef.current?.scrollIntoView({ behavior: "smooth", block: "center" });
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [hotkey]);

  const onKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
    if (e.key === "Escape") {
      if (query) setQuery("");
      else inputRef.current?.blur();
      setAsk({ status: "idle" });
      return;
    }
    if (e.key === "Enter" && (e.metaKey || e.ctrlKey || mode === "ask")) {
      e.preventDefault();
      askNow(query);
      return;
    }
    if (mode !== "search" || !hits.length) return;
    if (e.key === "ArrowDown") {
      e.preventDefault();
      setActive((a) => Math.min(hits.length - 1, a + 1));
    } else if (e.key === "ArrowUp") {
      e.preventDefault();
      setActive((a) => Math.max(0, a - 1));
    } else if (e.key === "Enter") {
      e.preventDefault();
      const url = hits[active]?.doc.url;
      if (url) window.open(url, /^https?:/.test(url) ? "_blank" : "_self", "noopener");
    }
  };

  const answer = ask.data;

  return (
    <section ref={rootRef} id={id} className={`aps ${className}`} data-mode={mode} aria-label={kicker}>
      <div className="aps-head">
        <span className="aps-kicker">{kicker}</span>
        <div className="aps-tabs" role="tablist" aria-label="Search mode">
          {(["search", "ask"] as const).map((m) => (
            <button
              key={m}
              type="button"
              role="tab"
              aria-selected={mode === m}
              data-active={mode === m}
              className="aps-tab"
              onClick={() => {
                setMode(m);
                inputRef.current?.focus();
              }}
            >
              {m === "search" ? "Instant Search" : "Ask AI"}
            </button>
          ))}
        </div>
      </div>
      {title ? <h2 className="aps-title">{title}</h2> : null}

      <form
        className="aps-bar"
        role="search"
        onSubmit={(e) => {
          e.preventDefault();
          if (mode === "ask") askNow(query);
        }}
      >
        <svg className="aps-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden>
          {mode === "ask" ? <path d="M12 3l1.9 5.6L19.5 10l-5.6 1.9L12 17.5l-1.9-5.6L4.5 10l5.6-1.4z" /> : <><circle cx="11" cy="11" r="7" /><path d="m20 20-3.5-3.5" /></>}
        </svg>
        <input
          ref={inputRef}
          className="aps-input"
          value={query}
          onChange={(e) => setQuery(e.target.value)}
          onKeyDown={onKeyDown}
          placeholder={mode === "ask" ? askPlaceholder : placeholder}
          aria-label={mode === "ask" ? "Ask a question" : "Search"}
          aria-controls={`${id}-results`}
          autoComplete="off"
          spellCheck={false}
          enterKeyHint={mode === "ask" ? "send" : "search"}
        />
        {mode === "ask" ? (
          <button type="submit" className="aps-submit" disabled={!query.trim() || ask.status === "loading"}>
            {ask.status === "loading" ? "Thinking…" : "Ask"}
          </button>
        ) : (
          <kbd className="aps-kbd" aria-hidden>
            {hotkey || "⏎"}
          </kbd>
        )}
      </form>

      {prompts.length ? (
        <div className="aps-chips" aria-label="Suggested questions">
          {prompts.map((p) => (
            <button key={p} type="button" className="aps-chip" onClick={() => askNow(p)}>
              {p}
            </button>
          ))}
        </div>
      ) : null}

      <div id={`${id}-results`} className="aps-results" aria-live="polite">
        {mode === "search" && query.trim() ? (
          hits.length ? (
            <ul className="aps-hits" role="listbox" aria-label="Results">
              {hits.map((h, i) => (
                <li key={h.doc.id} role="option" aria-selected={i === active} data-active={i === active} onMouseEnter={() => setActive(i)}>
                  {renderLink(
                    { id: h.doc.id, title: h.doc.title, url: h.doc.url, category: h.doc.category, previewKey: h.doc.previewKey },
                    <>
                      <span className="aps-hit-title">{h.doc.title}</span>
                      <span className="aps-hit-summary">{h.doc.summary}</span>
                      <span className="aps-hit-meta">
                        <span className="aps-badge">{h.doc.category}</span>
                        {host(h.doc.url) ? <span className="aps-host">{host(h.doc.url)}</span> : null}
                      </span>
                    </>,
                    "aps-hit",
                  )}
                </li>
              ))}
              <li className="aps-hint">
                ↑↓ to move · ⏎ to open ·{" "}
                <button type="button" className="aps-linkish" onClick={() => askNow(query)}>
                  Ask AI about “{query.trim()}” →
                </button>
              </li>
            </ul>
          ) : (
            <p className="aps-empty">
              No direct matches.{" "}
              <button type="button" className="aps-linkish" onClick={() => askNow(query)}>
                Ask AI instead →
              </button>
            </p>
          )
        ) : null}

        {mode === "ask" && ask.status === "loading" ? (
          <div className="aps-answer aps-loading" aria-busy="true">
            <span />
            <span />
            <span />
          </div>
        ) : null}

        {mode === "ask" && ask.status === "error" ? <p className="aps-empty">Couldn’t reach the answer service — try again.</p> : null}

        {mode === "ask" && ask.status === "done" && answer ? (
          <div className="aps-answer">
            <p className="aps-answer-text">{withCitations(answer.answer, answer.citations, renderLink)}</p>
            {answer.points.length ? (
              <ul className="aps-points">
                {answer.points.map((p) => (
                  <li key={p}>{withCitations(p, answer.citations, renderLink)}</li>
                ))}
              </ul>
            ) : null}
            {answer.citations.length ? (
              <ol className="aps-citations" aria-label="Sources">
                {answer.citations.map((c, i) => (
                  <li key={c.id}>
                    {renderLink(
                      c,
                      <>
                        <span className="aps-cite-n">{i + 1}</span>
                        <span className="aps-cite-body">
                          <span className="aps-cite-title">{c.title}</span>
                          <span className="aps-hit-meta">
                            <span className="aps-badge">{c.category}</span>
                            {host(c.url) ? <span className="aps-host">{host(c.url)}</span> : null}
                          </span>
                        </span>
                      </>,
                      "aps-cite",
                    )}
                  </li>
                ))}
              </ol>
            ) : null}
            <p className="aps-provenance">
              {answer.mode === "llm" ? `Grounded LLM answer (${answer.model})` : "Deterministic grounded answer · BM25 + verified facts"} ·{" "}
              {answer.tookMs}ms · cites only indexed sources
            </p>
          </div>
        ) : null}
      </div>
      {footer ? <div className="aps-footer">{footer}</div> : null}
    </section>
  );
}