"use client";

import { Search, X } from "lucide-react";
import { useRouter } from "next/navigation";
import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState, type ReactNode } from "react";
import { clientApi } from "@/lib/client-api";
import { ASSET_CLASS_LABEL, cx, formatPercent, formatQuoteValue, instrumentHref } from "@/lib/format";
import type { SearchResult } from "@/lib/types";

const Ctx = createContext<{ open: () => void }>({ open: () => {} });
export const useSearch = () => useContext(Ctx);

interface Hit {
  group: string;
  href: string;
  title: string;
  subtitle: string;
  right?: string;
  rightTone?: "pos" | "neg" | "neutral";
}

function toHits(r: SearchResult): Hit[] {
  return r.results.map(({ group, item }) => {
    const it = item as Record<string, any>;
    if (group === "EXCHANGE") return { group, href: `/exchanges/${it.id}`, title: it.name, subtitle: `${it.mic ?? ""} · ${it.country} · ${String(it.status).toLowerCase()}`, right: "" };
    if (group === "COUNTRY") return { group, href: `/countries/${it.code}`, title: it.name, subtitle: it.region, right: "" };
    const q = it.quote as Record<string, any> | null;
    const pct = q?.change_percent as number | null | undefined;
    return {
      group,
      href: instrumentHref(it.id),
      title: it.symbol,
      subtitle: `${it.name} · ${ASSET_CLASS_LABEL[it.asset_class] ?? it.asset_class}${it.exchange_id ? ` · ${String(it.exchange_id).toUpperCase()}` : ""}`,
      right: q?.price != null ? `${formatQuoteValue(q.price, it.asset_class, q.currency)}  ${formatPercent(pct)}` : "",
      rightTone: pct == null ? "neutral" : pct > 0 ? "pos" : pct < 0 ? "neg" : "neutral",
    };
  });
}

export function SearchProvider({ children }: { children: ReactNode }) {
  const [open, setOpen] = useState(false);
  const [q, setQ] = useState("");
  const [hits, setHits] = useState<Hit[]>([]);
  const [idx, setIdx] = useState(0);
  const [loading, setLoading] = useState(false);
  const router = useRouter();
  const inputRef = useRef<HTMLInputElement>(null);
  const seq = useRef(0);

  useEffect(() => {
    const onKey = (e: KeyboardEvent) => {
      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k") {
        e.preventDefault();
        setOpen((o) => !o);
      } else if (e.key === "Escape") setOpen(false);
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, []);

  useEffect(() => {
    if (!open) return;
    setTimeout(() => inputRef.current?.focus(), 20);
  }, [open]);

  useEffect(() => {
    if (!open) return;
    const term = q.trim();
    if (!term) {
      setHits([]);
      return;
    }
    const my = ++seq.current;
    setLoading(true);
    const t = setTimeout(() => {
      clientApi<SearchResult>(`/v1/search?q=${encodeURIComponent(term)}&limit=14`)
        .then((r) => {
          if (my !== seq.current) return;
          setHits(toHits(r));
          setIdx(0);
        })
        .catch(() => {})
        .finally(() => my === seq.current && setLoading(false));
    }, 140);
    return () => clearTimeout(t);
  }, [q, open]);

  const go = useCallback(
    (h: Hit | undefined) => {
      if (!h) {
        if (q.trim()) router.push(`/search?q=${encodeURIComponent(q.trim())}`);
      } else router.push(h.href);
      setOpen(false);
      setQ("");
    },
    [router, q],
  );

  const ctx = useMemo(() => ({ open: () => setOpen(true) }), []);
  return (
    <Ctx.Provider value={ctx}>
      {children}
      {open && (
        <div role="dialog" aria-modal="true" aria-label="Search" data-palette className="fixed inset-0 z-[150] flex items-start justify-center bg-black/40 p-3 pt-[10vh] backdrop-blur-[2px]" onClick={() => setOpen(false)}>
          <div className="panel w-full max-w-xl overflow-hidden shadow-2xl" onClick={(e) => e.stopPropagation()}>
            <div className="flex items-center gap-2 border-b border-rule px-3">
              <Search size={16} className="text-ink-3" />
              <input
                ref={inputRef}
                value={q}
                onChange={(e) => setQ(e.target.value)}
                onKeyDown={(e) => {
                  if (e.key === "ArrowDown") {
                    e.preventDefault();
                    setIdx((i) => Math.min(hits.length - 1, i + 1));
                  } else if (e.key === "ArrowUp") {
                    e.preventDefault();
                    setIdx((i) => Math.max(0, i - 1));
                  } else if (e.key === "Enter") go(hits[idx]);
                }}
                placeholder="Search AAPL, Bitcoin, S&P 500, Toronto Stock Exchange, US 10Y…"
                className="h-12 flex-1 bg-transparent text-[15px] outline-none placeholder:text-ink-3"
                autoComplete="off"
              />
              <button type="button" onClick={() => setOpen(false)} aria-label="Close" className="flex h-11 w-11 items-center justify-center text-ink-3 hover:text-ink">
                <X size={16} />
              </button>
            </div>
            <div className="max-h-[60vh] overflow-y-auto">
              {!q.trim() && (
                <div className="px-4 py-3 text-xs text-ink-3">
                  Type a symbol, company, index, currency pair, exchange or country. <kbd className="mono rounded border border-rule px-1">↑↓</kbd> to move, <kbd className="mono rounded border border-rule px-1">↵</kbd> to open.
                </div>
              )}
              {q.trim() && !hits.length && !loading && <div className="px-4 py-6 text-center text-sm text-ink-3">No results for “{q}”.</div>}
              {hits.map((h, i) => (
                <button key={h.href + i} type="button" onMouseEnter={() => setIdx(i)} onClick={() => go(h)} className={cx("flex w-full items-center gap-3 px-4 py-2.5 text-left", i === idx ? "bg-accent-soft" : "hover:bg-surface-2")}>
                  <span className="mono w-16 shrink-0 text-[10px] uppercase tracking-wide text-ink-3">{ASSET_CLASS_LABEL[h.group] ?? h.group.toLowerCase()}</span>
                  <span className="min-w-0 flex-1">
                    <span className="block truncate text-sm font-medium">{h.title}</span>
                    <span className="block truncate text-xs text-ink-3">{h.subtitle}</span>
                  </span>
                  {h.right && <span className={cx("mono whitespace-pre text-xs", h.rightTone === "pos" ? "text-positive" : h.rightTone === "neg" ? "text-negative" : "text-ink-2")}>{h.right}</span>}
                </button>
              ))}
              {q.trim() && (
                <button type="button" onClick={() => go(undefined)} className="w-full border-t border-rule px-4 py-2.5 text-left text-xs text-accent hover:bg-surface-2">
                  See all results for “{q}” →
                </button>
              )}
            </div>
          </div>
        </div>
      )}
    </Ctx.Provider>
  );
}

export function SearchButton({ className, compact }: { className?: string; compact?: boolean }) {
  const { open } = useSearch();
  return (
    <button type="button" onClick={open} className={cx("inline-flex h-11 items-center gap-2 rounded-md border border-rule bg-surface px-3 text-sm text-ink-3 hover:border-rule-strong hover:text-ink", className)} aria-label="Search">
      <Search size={15} />
      {!compact && (
        <>
          <span className="hidden sm:inline">Search markets</span>
          <kbd className="mono ml-2 hidden rounded border border-rule px-1 text-[10px] sm:inline">⌘K</kbd>
        </>
      )}
    </button>
  );
}