"use client";

import type { SearchHit, SearchResponse } from "@dci/core";
import { ArrowRight, Clock, CornerDownLeft, Map as MapIcon, Search, X } from "lucide-react";
import { useRouter } from "next/navigation";
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import { createPortal } from "react-dom";
import { cn } from "@/components/ui/cn";
import { Kbd } from "@/components/ui/kbd";
import { apiGet, clientApiBase } from "@/lib/api";
import { fmtMw } from "@/lib/format";
import { useDebounced, useLocalStorage } from "@/lib/hooks";
import { SEARCH_GROUP_LABEL } from "@/lib/labels";
import { routes } from "@/lib/routes";

const OPEN_EVENT = "dci:palette:open";
export function openPalette(query?: string) {
  window.dispatchEvent(new CustomEvent(OPEN_EVENT, { detail: { query } }));
}

const GROUP_ORDER: SearchHit["type"][] = ["facility", "operator", "country", "metro", "city", "cloud_region", "project", "ixp"];

interface Row {
  kind: "hit" | "action" | "recent";
  id: string;
  title: string;
  subtitle?: string | null;
  href: string;
  group: string;
  meta?: Record<string, unknown>;
}

export function CommandPalette() {
  const router = useRouter();
  const [open, setOpen] = useState(false);
  const [q, setQ] = useState("");
  const dq = useDebounced(q.trim(), 160);
  const [result, setResult] = useState<{ q: string; data: SearchResponse | null; error: string | null } | null>(null);
  const res = result && result.q === dq ? result.data : null;
  const error = result && result.q === dq ? result.error : null;
  const loading = open && dq.length >= 2 && result?.q !== dq;
  const [idx, setIdx] = useState(0);
  const [recent, setRecent] = useLocalStorage<string[]>("dci:recent-searches", []);
  const inputRef = useRef<HTMLInputElement>(null);
  const listRef = useRef<HTMLUListElement>(null);
  const abortRef = useRef<AbortController | null>(null);

  useEffect(() => {
    const onOpen = (e: Event) => {
      const d = (e as CustomEvent<{ query?: string }>).detail;
      if (d?.query) setQ(d.query);
      setOpen(true);
    };
    const onKey = (e: KeyboardEvent) => {
      const target = e.target as HTMLElement | null;
      const typing = target && (target.tagName === "INPUT" || target.tagName === "TEXTAREA" || target.isContentEditable);
      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k") {
        e.preventDefault();
        setOpen((o) => !o);
      } else if (e.key === "/" && !typing && !e.metaKey && !e.ctrlKey) {
        e.preventDefault();
        setOpen(true);
      }
    };
    window.addEventListener(OPEN_EVENT, onOpen);
    document.addEventListener("keydown", onKey);
    return () => {
      window.removeEventListener(OPEN_EVENT, onOpen);
      document.removeEventListener("keydown", onKey);
    };
  }, []);

  useEffect(() => {
    if (!open) return;
    const prev = document.body.style.overflow;
    document.body.style.overflow = "hidden";
    setTimeout(() => inputRef.current?.focus(), 10);
    return () => {
      document.body.style.overflow = prev;
    };
  }, [open]);

  useEffect(() => {
    if (!open || dq.length < 2) return;
    abortRef.current?.abort();
    const ctrl = new AbortController();
    abortRef.current = ctrl;
    apiGet<SearchResponse>("/search", { q: dq }, { base: clientApiBase(), signal: ctrl.signal, timeoutMs: 6000 }).then((r) => {
      if (ctrl.signal.aborted) return;
      setResult(r.ok ? { q: dq, data: r.data, error: null } : { q: dq, data: null, error: r.error });
    });
    return () => ctrl.abort();
  }, [dq, open]);

  const rows = useMemo<Row[]>(() => {
    const out: Row[] = [];
    const term = q.trim();
    if (term.length >= 1) {
      out.push({ kind: "action", id: "a-search", title: `Search “${term}”`, subtitle: "All results", href: routes.search(term), group: "Actions" });
      out.push({ kind: "action", id: "a-map", title: `Show “${term}” on the map`, subtitle: "Filtered map", href: routes.map(`q=${encodeURIComponent(term)}`), group: "Actions" });
    }
    if (dq.length >= 2 && res?.hits?.length) {
      const sorted = [...res.hits].sort((a, b) => GROUP_ORDER.indexOf(a.type) - GROUP_ORDER.indexOf(b.type) || b.score - a.score);
      for (const h of sorted) out.push({ kind: "hit", id: `${h.type}:${h.id}`, title: h.title, subtitle: h.subtitle, href: h.href || routes.search(h.title), group: SEARCH_GROUP_LABEL[h.type] ?? h.type, meta: h.meta });
    }
    if (!term && recent.length) for (const r of recent.slice(0, 6)) out.push({ kind: "recent", id: `r-${r}`, title: r, href: routes.search(r), group: "Recent searches" });
    if (!term) {
      out.push({ kind: "action", id: "a-live", title: "Live changes", subtitle: "Latest detected updates", href: routes.live(), group: "Go to" });
      out.push({ kind: "action", id: "a-map0", title: "Global map", subtitle: "All indexed facilities", href: routes.map(), group: "Go to" });
      out.push({ kind: "action", id: "a-dc", title: "Data centers", subtitle: "Filterable index", href: routes.datacenters(), group: "Go to" });
      out.push({ kind: "action", id: "a-rank", title: "Rankings", subtitle: "Countries, markets, operators", href: routes.rankings(), group: "Go to" });
    }
    return out;
  }, [q, dq, res, recent]);

  const rowsKey = `${rows.length}:${dq}`;
  const [prevRowsKey, setPrevRowsKey] = useState(rowsKey);
  if (prevRowsKey !== rowsKey) {
    setPrevRowsKey(rowsKey);
    setIdx(0);
  }

  const go = useCallback(
    (row: Row) => {
      const term = q.trim();
      if (term) setRecent((p) => [term, ...p.filter((x) => x !== term)].slice(0, 8));
      setOpen(false);
      setQ("");
      router.push(row.href);
    },
    [q, router, setRecent],
  );

  const onKeyDown = (e: React.KeyboardEvent) => {
    if (e.key === "ArrowDown") {
      e.preventDefault();
      setIdx((i) => Math.min(rows.length - 1, i + 1));
    } else if (e.key === "ArrowUp") {
      e.preventDefault();
      setIdx((i) => Math.max(0, i - 1));
    } else if (e.key === "Enter") {
      e.preventDefault();
      const r = rows[idx];
      if (r) go(r);
    } else if (e.key === "Escape") {
      e.preventDefault();
      setOpen(false);
    }
  };

  useEffect(() => {
    const el = listRef.current?.querySelector<HTMLElement>(`[data-idx="${idx}"]`);
    el?.scrollIntoView({ block: "nearest" });
  }, [idx]);

  if (!open || typeof document === "undefined") return null;

  let lastGroup = "";
  return createPortal(
    <div className="fixed inset-0 z-[100] flex flex-col bg-paper sm:items-center sm:bg-ink/30 sm:px-4 sm:pt-[10vh] sm:backdrop-blur-[1px] dark:sm:bg-black/50" role="presentation" onMouseDown={(e) => e.target === e.currentTarget && setOpen(false)}>
      <div role="dialog" aria-modal="true" aria-label="Search the index" className="flex h-full w-full flex-col bg-paper sm:h-auto sm:max-h-[70vh] sm:max-w-[640px] sm:rounded-md sm:border sm:border-hair-2 sm:bg-surface animate-fade-in">
        <div className="flex h-14 items-center gap-2 border-b border-hair px-3">
          <Search className={cn("size-[18px] shrink-0 text-ink-3", loading && "animate-pulse-soft")} strokeWidth={1.75} />
          <input
            ref={inputRef}
            value={q}
            onChange={(e) => setQ(e.target.value)}
            onKeyDown={onKeyDown}
            role="combobox"
            aria-expanded
            aria-controls="palette-list"
            aria-activedescendant={rows[idx] ? `palette-${rows[idx].id}` : undefined}
            aria-autocomplete="list"
            placeholder="Search data centers, operators, markets, countries…"
            className="h-full min-w-0 flex-1 bg-transparent text-[15px] outline-none placeholder:text-ink-4"
            autoComplete="off"
            spellCheck={false}
          />
          <button type="button" onClick={() => setOpen(false)} aria-label="Close search" className="inline-flex size-9 items-center justify-center rounded-sm text-ink-3 hover:text-ink sm:hidden">
            <X className="size-5" />
          </button>
          <Kbd className="hidden sm:inline-flex">esc</Kbd>
        </div>
        <ul ref={listRef} id="palette-list" role="listbox" className="min-h-0 flex-1 overflow-y-auto overscroll-contain py-1">
          {rows.length === 0 && (
            <li className="px-4 py-8 text-center text-[13px] text-ink-3">
              {error ? "Search is unavailable right now." : loading ? "Searching…" : dq.length >= 2 ? "No matches." : "Type to search."}
            </li>
          )}
          {rows.map((r, i) => {
            const header = r.group !== lastGroup;
            lastGroup = r.group;
            const active = i === idx;
            const mw = r.meta && typeof r.meta.mw === "number" ? fmtMw(r.meta.mw) : null;
            return (
              <li key={r.id} role="presentation">
                {header && <div className="label-caps px-4 pb-1 pt-3">{r.group}</div>}
                <button
                  type="button"
                  id={`palette-${r.id}`}
                  role="option"
                  aria-selected={active}
                  data-idx={i}
                  onMouseEnter={() => setIdx(i)}
                  onClick={() => go(r)}
                  className={cn("flex min-h-11 w-full items-center gap-3 px-4 py-1.5 text-left", active ? "bg-surface-2" : "hover:bg-surface-2/60")}
                >
                  <span className="text-ink-4">{r.kind === "recent" ? <Clock className="size-4" strokeWidth={1.75} /> : r.id === "a-map" || r.id === "a-map0" ? <MapIcon className="size-4" strokeWidth={1.75} /> : r.kind === "action" ? <ArrowRight className="size-4" strokeWidth={1.75} /> : <span className="inline-block size-2 rounded-full bg-ink-3" />}</span>
                  <span className="min-w-0 flex-1">
                    <span className="block truncate text-[13.5px] text-ink">{r.title}</span>
                    {r.subtitle && <span className="block truncate text-[11.5px] text-ink-3">{r.subtitle}</span>}
                  </span>
                  {mw && <span className="figure text-[12px] text-ink-3">{mw}</span>}
                  {active && <CornerDownLeft className="hidden size-3.5 text-ink-4 sm:block" />}
                </button>
              </li>
            );
          })}
        </ul>
        <div className="hidden items-center gap-3 border-t border-hair px-4 py-2 text-[11px] text-ink-3 sm:flex">
          <span className="inline-flex items-center gap-1">
            <Kbd>↑</Kbd>
            <Kbd>↓</Kbd> navigate
          </span>
          <span className="inline-flex items-center gap-1">
            <Kbd>↵</Kbd> open
          </span>
          <span className="ml-auto">Tip: try “hyperscale in Ireland” or “&gt; 100 MW under construction”</span>
        </div>
      </div>
    </div>,
    document.body,
  );
}