"use client";

import type { SearchHit, SearchResponse } from "@dci/core";
import { Plus, X } from "lucide-react";
import { useRouter } from "next/navigation";
import { useEffect, useRef, useState } from "react";
import { Button } from "@/components/ui/button";
import { cn } from "@/components/ui/cn";
import { SearchInput } from "@/components/ui/search-input";
import { apiGet, clientApiBase } from "@/lib/api";
import { useDebounced } from "@/lib/hooks";
import { routes } from "@/lib/routes";

export const MAX_OPERATORS = 5;

/**
 * Pick 2–5 operators: search /search?type=operator, chips for the current selection, URL is the state
 * (`?slugs=a,b,c`, router.replace so the server re-renders the comparison).
 */
export function OperatorPicker({ slugs, names }: { slugs: string[]; names: Record<string, string> }) {
  const router = useRouter();
  const [q, setQ] = useState("");
  const dq = useDebounced(q.trim(), 200);
  // results keyed by the query they answer: hits for another query are never shown (derived, no setState-in-effect)
  const [result, setResult] = useState<{ q: string; hits: SearchHit[] }>({ q: "", hits: [] });
  const hits = result.q === dq ? result.hits.filter((h) => !slugs.includes(h.slug)) : [];
  const loading = dq.length >= 2 && result.q !== dq;
  const [open, setOpen] = useState(false);
  const boxRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (dq.length < 2) return;
    const ctrl = new AbortController();
    void apiGet<SearchResponse>("/search", { q: dq, type: "operator" }, { base: clientApiBase(), signal: ctrl.signal, timeoutMs: 6000 }).then((r) => {
      if (ctrl.signal.aborted) return;
      setResult({ q: dq, hits: r.ok ? r.data.hits.filter((h) => h.type === "operator").slice(0, 10) : [] });
    });
    return () => ctrl.abort();
  }, [dq]);

  useEffect(() => {
    const onDoc = (e: MouseEvent) => {
      if (!boxRef.current?.contains(e.target as Node)) setOpen(false);
    };
    document.addEventListener("mousedown", onDoc);
    return () => document.removeEventListener("mousedown", onDoc);
  }, []);

  const apply = (next: string[]) => {
    router.replace(routes.compareOperators(next), { scroll: false });
  };
  const add = (slug: string) => {
    if (slugs.includes(slug) || slugs.length >= MAX_OPERATORS) return;
    setQ("");
    setOpen(false);
    apply([...slugs, slug]);
  };
  const remove = (slug: string) => apply(slugs.filter((s) => s !== slug));
  const full = slugs.length >= MAX_OPERATORS;

  return (
    <div className="flex flex-col gap-2">
      <div className="flex flex-wrap items-center gap-1.5">
        {slugs.map((s) => (
          <span key={s} className="inline-flex h-10 items-center gap-1 rounded-sm border border-ink bg-ink pl-2.5 pr-1 text-[12.5px] font-medium text-paper sm:h-8">
            {names[s] ?? s}
            <button type="button" onClick={() => remove(s)} aria-label={`Remove ${names[s] ?? s}`} className="inline-flex size-10 items-center justify-center rounded-xs hover:bg-paper/15 sm:size-6">
              <X className="size-3.5" />
            </button>
          </span>
        ))}
        {slugs.length > 0 && (
          <Button size="xs" variant="ghost" onClick={() => apply([])}>
            Clear
          </Button>
        )}
      </div>
      <div ref={boxRef} className="relative max-w-md">
        <SearchInput
          value={q}
          onChange={(v) => {
            setQ(v);
            setOpen(true);
          }}
          onFocus={() => setOpen(true)}
          placeholder={full ? `Maximum ${MAX_OPERATORS} operators` : slugs.length ? "Add an operator…" : "Search an operator (e.g. Equinix)"}
          disabled={full}
          loading={loading}
          aria-label="Search operators to compare"
          aria-expanded={open && hits.length > 0}
          aria-controls="compare-operator-results"
          role="combobox"
        />
        {open && dq.length >= 2 && (
          <ul id="compare-operator-results" role="listbox" className="absolute left-0 right-0 top-full z-[20] mt-1 max-h-72 overflow-y-auto rounded-sm border border-hair-2 bg-surface py-1">
            {hits.length === 0 && !loading && <li className="px-3 py-2 text-[12.5px] text-ink-3">No operator matches “{dq}”.</li>}
            {hits.map((h) => (
              <li key={h.id} role="option" aria-selected={false}>
                <button type="button" onClick={() => add(h.slug)} className={cn("flex min-h-10 w-full items-center gap-2 px-3 py-1.5 text-left text-[13px] hover:bg-surface-2")}>
                  <Plus className="size-3.5 shrink-0 text-ink-3" aria-hidden />
                  <span className="min-w-0 flex-1 truncate text-ink">{h.title}</span>
                  {h.subtitle && <span className="shrink-0 truncate text-[11.5px] text-ink-3">{h.subtitle}</span>}
                </button>
              </li>
            ))}
          </ul>
        )}
      </div>
      <p className="text-[11.5px] text-ink-4">
        {slugs.length < 2 ? `Pick at least 2 operators (up to ${MAX_OPERATORS}). ` : `${slugs.length} of ${MAX_OPERATORS} operators. `}
        The URL holds the selection — copy it to share the comparison.
      </p>
    </div>
  );
}