'use client';
import { Plus, X } from 'lucide-react';
import { useRouter } from 'next/navigation';
import { useEffect, useState } from 'react';
import { clientApi } from '@/lib/client-api';
import { routes } from '@/lib/site';
import type { Suggestion } from '@/lib/types';

/** Add/remove companies on /company/compare via `/search/suggest` (2–6 slugs in the URL). */
export function ComparePicker({ slugs, names }: { slugs: string[]; names: Record<string, string> }) {
  const router = useRouter();
  const [q, setQ] = useState('');
  const [items, setItems] = useState<Suggestion[]>([]);
  useEffect(() => {
    if (q.trim().length < 1) {
      setItems([]);
      return;
    }
    const ctrl = new AbortController();
    const t = setTimeout(() => {
      clientApi
        .suggest(q.trim(), ctrl.signal)
        .then((r) => setItems(r.items.filter((s) => s.kind === 'company')))
        .catch(() => setItems([]));
    }, 120);
    return () => {
      clearTimeout(t);
      ctrl.abort();
    };
  }, [q]);
  const slugOf = (href: string) => href.replace(/^\/company\//, '').split('?')[0] ?? '';
  const add = (s: string) => {
    if (!s || slugs.includes(s) || slugs.length >= 6) return;
    router.push(routes.compare([...slugs, s]));
    setQ('');
    setItems([]);
  };
  const remove = (s: string) => router.push(routes.compare(slugs.filter((x) => x !== s)));
  return (
    <div className="flex flex-wrap items-center gap-2" data-compare-picker>
      {slugs.map((s) => (
        <span key={s} className="inline-flex h-10 items-center gap-1 border border-rule bg-surface pl-2.5 pr-0.5 text-sm">
          {names[s] ?? s}
          <button type="button" onClick={() => remove(s)} className="flex size-10 items-center justify-center text-ink-3 hover:text-danger" aria-label={`Remove ${names[s] ?? s}`}>
            <X className="size-3.5" aria-hidden />
          </button>
        </span>
      ))}
      {slugs.length < 6 && (
        <div className="relative">
          <label className="sr-only" htmlFor="compare-add">
            Add a company
          </label>
          <span className="flex min-h-10 items-center gap-1 border border-rule-strong bg-surface px-2">
            <Plus className="size-4 text-ink-3" aria-hidden />
            <input id="compare-add" value={q} onChange={(e) => setQ(e.target.value)} placeholder="Add company…" className="h-10 w-40 bg-transparent text-sm focus:outline-none" autoComplete="off" data-compare-input onKeyDown={(e) => e.key === 'Enter' && items[0] && add(slugOf(items[0].href))} />
          </span>
          {items.length > 0 && (
            <ul className="panel absolute left-0 top-full z-20 mt-1 w-64 py-1 shadow-lg" role="listbox">
              {items.slice(0, 8).map((s) => (
                <li key={s.href}>
                  <button type="button" onClick={() => add(slugOf(s.href))} className="flex w-full items-center gap-2 px-3 py-2 text-left text-sm hover:bg-surface-2" role="option" aria-selected={false}>
                    <span className="flex-1 truncate">{s.label}</span>
                    <span className="truncate text-xs text-ink-3">{s.sublabel}</span>
                  </button>
                </li>
              ))}
            </ul>
          )}
        </div>
      )}
    </div>
  );
}