'use client';

import { useEffect, useRef, useState } from 'react';
import { useRouter } from 'next/navigation';
import { Search, X, Plus } from 'lucide-react';

interface Hit {
  type: string;
  id: string;
  title: string;
  subtitle?: string | null;
  href: string;
  match: string;
}

/**
 * Compare picker: adds/removes cancers by slug; the selection lives in the URL (?ids=a,b,c) so a comparison
 * is shareable. Uses the existing /api/search route (database-backed) and keeps only cancer hits.
 */
export function ComparePicker({ selected, max, min }: { selected: Array<{ slug: string; name: string }>; max: number; min: number }) {
  const router = useRouter();
  const [q, setQ] = useState('');
  const [hits, setHits] = useState<Hit[]>([]);
  const [loading, setLoading] = useState(false);
  const [open, setOpen] = useState(false);
  const box = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const term = q.trim();
    if (term.length < 2) {
      setHits([]);
      return;
    }
    const ctrl = new AbortController();
    const t = setTimeout(async () => {
      setLoading(true);
      try {
        const r = await fetch(`/api/search?q=${encodeURIComponent(term)}&limit=20`, { signal: ctrl.signal });
        const j = (await r.json()) as { data: Hit[] };
        const chosen = new Set(selected.map((s) => s.slug));
        setHits((j.data ?? []).filter((h) => h.type === 'cancer' && !chosen.has(h.href.replace(/^\/cancer\//, ''))).slice(0, 8));
        setOpen(true);
      } catch {
        /* aborted */
      } finally {
        setLoading(false);
      }
    }, 150);
    return () => {
      clearTimeout(t);
      ctrl.abort();
    };
  }, [q, selected]);

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

  const navigate = (slugs: string[]) => {
    router.push(slugs.length ? `/compare?ids=${slugs.map(encodeURIComponent).join(',')}` : '/compare');
  };
  const add = (href: string) => {
    const slug = href.replace(/^\/cancer\//, '');
    if (!slug || selected.some((s) => s.slug === slug) || selected.length >= max) return;
    setQ('');
    setHits([]);
    setOpen(false);
    navigate([...selected.map((s) => s.slug), slug]);
  };
  const remove = (slug: string) => navigate(selected.filter((s) => s.slug !== slug).map((s) => s.slug));
  const full = selected.length >= max;

  return (
    <div className="border border-rule bg-paper-2 p-3">
      <div className="flex flex-wrap items-center gap-2">
        {selected.map((s) => (
          <span key={s.slug} className="inline-flex items-center gap-1 border border-rule-strong bg-paper px-2 py-1 text-[13px]">
            {s.name}
            <button type="button" onClick={() => remove(s.slug)} aria-label={`Remove ${s.name} from the comparison`} className="ml-0.5 text-ink-3 hover:text-danger">
              <X className="h-3.5 w-3.5" aria-hidden />
            </button>
          </span>
        ))}
        {selected.length === 0 ? <span className="text-[13px] text-ink-3">No cancer selected yet.</span> : null}
      </div>
      <div ref={box} className="relative mt-2">
        <label className="sr-only" htmlFor="compare-picker-input">
          Add a cancer to the comparison
        </label>
        <div className={`flex items-center gap-2 border bg-paper px-2.5 ${full ? 'border-rule text-ink-4' : 'border-rule-strong focus-within:border-accent'}`}>
          {full ? <Plus className="h-4 w-4 shrink-0" aria-hidden /> : <Search className="h-4 w-4 shrink-0 text-ink-3" aria-hidden />}
          <input
            id="compare-picker-input"
            value={q}
            onChange={(e) => setQ(e.target.value)}
            onFocus={() => hits.length && setOpen(true)}
            onKeyDown={(e) => {
              if (e.key === 'Enter' && hits[0]) {
                e.preventDefault();
                add(hits[0].href);
              } else if (e.key === 'Escape') setOpen(false);
            }}
            disabled={full}
            placeholder={full ? `Maximum ${max} cancers — remove one to add another` : `Add a cancer (${selected.length}/${max}) — e.g. glioblastoma, pancreatic, KRAS…`}
            className="w-full bg-transparent py-2 text-[14px] outline-none placeholder:text-ink-4 disabled:cursor-not-allowed"
            autoComplete="off"
            spellCheck={false}
            role="combobox"
            aria-expanded={open && hits.length > 0}
            aria-controls="compare-picker-results"
          />
        </div>
        {open && q.trim().length >= 2 ? (
          <ul id="compare-picker-results" role="listbox" className="absolute left-0 right-0 z-20 mt-1 max-h-72 overflow-y-auto border border-rule-strong bg-paper shadow-lg">
            {hits.map((h) => (
              <li key={h.id} role="option" aria-selected={false}>
                <button type="button" onClick={() => add(h.href)} className="flex w-full items-baseline justify-between gap-2 px-3 py-2 text-left text-[13.5px] hover:bg-accent-soft">
                  <span className="min-w-0 truncate">{h.title}</span>
                  {h.subtitle ? <span className="shrink-0 text-[11.5px] text-ink-3">{h.subtitle}</span> : null}
                </button>
              </li>
            ))}
            {!loading && hits.length === 0 ? <li className="px-3 py-2 text-[13px] text-ink-3">No matching cancer entity.</li> : null}
            {loading ? <li className="px-3 py-2 text-[13px] text-ink-3">Searching…</li> : null}
          </ul>
        ) : null}
      </div>
      <p className="mt-1.5 text-[11.5px] text-ink-3">
        Compare {min} to {max} cancers. The selection is in the URL — copy it to share this comparison.
      </p>
    </div>
  );
}