'use client';
import { Search, X } from 'lucide-react';
import Link from 'next/link';
import { usePathname, useRouter } from 'next/navigation';
import { useEffect, useRef, useState } from 'react';
import { EntityBadge } from '@/components/ui/badges';
import { clientApi } from '@/lib/client-api';
import { cn } from '@/lib/cn';
import { typeLabel } from '@/lib/site';
import type { Suggestion } from '@/lib/types';
import { COMPARE_MAX, COMPARE_MIN, compareHref, type TrayItem, trayType, useCompareTray } from './compare-store';

/**
 * Compare picker + tray for /compare. Suggestions come from /search/suggest; once the tray holds an item, only
 * entities of the same (normalised) type are selectable — the API compares 2–6 entities of one type.
 * `initial` (from `?ids=` resolved server-side) seeds the tray on load; tray changes are mirrored into `?ids=`.
 */
export function ComparePicker({ initial, exampleHref }: { initial: TrayItem[]; exampleHref?: string | null }) {
  const tray = useCompareTray();
  const router = useRouter();
  const pathname = usePathname();
  const [q, setQ] = useState('');
  const [items, setItems] = useState<Suggestion[]>([]);
  const [loading, setLoading] = useState(false);
  const [failed, setFailed] = useState(false);
  const seeded = useRef(false);
  /** Slugs the tray must show before we start mirroring it into the URL (avoids stripping ?ids= during the seed commit). */
  const awaiting = useRef<string | null>(null);
  const inputRef = useRef<HTMLInputElement>(null);

  // Seed the tray from the URL once hydrated (URL wins over localStorage when present).
  useEffect(() => {
    if (!tray.ready || seeded.current) return;
    seeded.current = true;
    if (initial.length) {
      const same = initial.every((i) => trayType(i.entity_type) === trayType(initial[0]!.entity_type));
      const want = initial.map((i) => i.slug).join(',');
      const current = tray.items.map((i) => i.slug).join(',');
      if (same && current !== want) {
        awaiting.current = want;
        tray.replace(initial);
      }
    }
  }, [tray.ready, tray.items, tray.replace, initial]);

  // Mirror the tray into ?ids= (no scroll, replace) — only once the seeded items are in state.
  useEffect(() => {
    if (!tray.ready || !seeded.current) return;
    const ids = tray.items.map((i) => i.slug);
    if (awaiting.current !== null) {
      if (ids.join(',') !== awaiting.current) return;
      awaiting.current = null;
    }
    const url = new URL(window.location.href);
    const cur = url.searchParams.get('ids') ?? '';
    const next = ids.length >= COMPARE_MIN ? ids.join(',') : '';
    if (cur === next) return;
    if (next) url.searchParams.set('ids', next);
    else url.searchParams.delete('ids');
    router.replace(`${pathname}${url.search}`, { scroll: false });
  }, [tray.items, tray.ready, router, pathname]);

  useEffect(() => {
    const term = q.trim();
    if (term.length < 1) {
      setItems([]);
      return;
    }
    const ctrl = new AbortController();
    const t = setTimeout(async () => {
      setLoading(true);
      try {
        const res = await clientApi.suggest(term, ctrl.signal);
        setItems(res.items ?? []);
        setFailed(false);
      } catch (e) {
        if ((e as Error).name !== 'AbortError') setFailed(true);
      } finally {
        setLoading(false);
      }
    }, 120);
    return () => {
      clearTimeout(t);
      ctrl.abort();
    };
  }, [q]);

  const type = tray.type;
  const full = tray.full;
  const pick = (s: Suggestion) => {
    tray.add({ slug: s.slug, name: s.name, entity_type: s.entity_type, organization: s.organization_name });
    setQ('');
    setItems([]);
    inputRef.current?.focus();
  };
  const term = q.trim();
  const selectable = items.filter((s) => !tray.has(s.slug));
  const matching = type ? selectable.filter((s) => trayType(s.entity_type) === type) : selectable;
  const others = type ? selectable.filter((s) => trayType(s.entity_type) !== type) : [];

  return (
    <div className="mt-6 grid gap-6 lg:grid-cols-[minmax(0,1fr)_minmax(0,1fr)]">
      {/* ---------------------------------------------------------------------------------------------- search */}
      <div className="min-w-0">
        <label htmlFor="compare-q" className="eyebrow block pb-1">
          {type ? `Add another ${typeLabel(type).toLowerCase()}` : 'Add an entity'}
        </label>
        <div className={cn('flex items-center gap-2 border border-rule-strong bg-surface px-3 focus-within:border-accent', full && 'opacity-60')}>
          <Search className="size-4 shrink-0 text-ink-3" aria-hidden />
          <input
            id="compare-q"
            ref={inputRef}
            value={q}
            onChange={(e) => setQ(e.target.value)}
            disabled={full}
            placeholder={full ? `Tray full (${COMPARE_MAX}) — remove one to add another` : type ? `Search ${typeLabel(type, true).toLowerCase()}…` : 'Search models, providers, hardware, companies…'}
            className="h-11 min-w-0 flex-1 bg-transparent text-[16px] text-ink placeholder:text-ink-3 focus:outline-none"
            autoComplete="off"
            spellCheck={false}
            aria-autocomplete="list"
            aria-controls="compare-suggestions"
          />
          {q && (
            <button type="button" onClick={() => setQ('')} className="flex size-9 items-center justify-center text-ink-3 hover:text-ink" aria-label="Clear">
              <X className="size-4" aria-hidden />
            </button>
          )}
        </div>
        {type && <p className="mt-1.5 text-xs text-ink-3">Comparing {typeLabel(type, true).toLowerCase()} — pick another {typeLabel(type).toLowerCase()}. Entities of another type would start a new comparison.</p>}
        {term && (
          <ul id="compare-suggestions" role="listbox" className="mt-1 border border-rule bg-surface">
            {failed && <li className="px-3 py-2 text-xs text-warning">Suggestions unavailable — try again in a moment.</li>}
            {!loading && !failed && matching.length === 0 && others.length === 0 && <li className="px-3 py-3 text-sm text-ink-3">{selectable.length === 0 && items.length > 0 ? 'Already in the tray.' : 'No match.'}</li>}
            {matching.map((s) => (
              <li key={s.id} role="option" aria-selected={false}>
                <button type="button" onClick={() => pick(s)} className="flex min-h-[46px] w-full items-center gap-3 px-3 py-2 text-left hover:bg-surface-2">
                  <EntityBadge type={s.entity_type} small />
                  <span className="min-w-0 flex-1 truncate text-[15px] text-ink">{s.name}</span>
                  {s.organization_name && <span className="hidden truncate text-xs text-ink-3 sm:block">{s.organization_name}</span>}
                </button>
              </li>
            ))}
            {others.length > 0 && (
              <li className="border-t border-rule px-3 py-1.5 text-[11px] text-ink-3">
                Other types (selecting one starts a new {' '}comparison)
              </li>
            )}
            {others.map((s) => (
              <li key={s.id} role="option" aria-selected={false}>
                <button type="button" onClick={() => pick(s)} className="flex min-h-[46px] w-full items-center gap-3 px-3 py-2 text-left text-ink-3 hover:bg-surface-2">
                  <EntityBadge type={s.entity_type} small className="opacity-70" />
                  <span className="min-w-0 flex-1 truncate text-[15px]">{s.name}</span>
                  {s.organization_name && <span className="hidden truncate text-xs sm:block">{s.organization_name}</span>}
                </button>
              </li>
            ))}
          </ul>
        )}
      </div>

      {/* ---------------------------------------------------------------------------------------------- tray */}
      <div className="min-w-0">
        <p className="eyebrow pb-1">
          Tray <span className="tnum text-ink-3">{tray.ready ? tray.items.length : initial.length} / {COMPARE_MAX}</span>
        </p>
        <CompareTray items={tray.ready ? tray.items : initial} onRemove={tray.remove} onClear={tray.clear} ready={tray.ready} exampleHref={exampleHref} />
      </div>
    </div>
  );
}

export function CompareTray({ items, onRemove, onClear, ready, exampleHref }: { items: TrayItem[]; onRemove: (slug: string) => void; onClear: () => void; ready: boolean; exampleHref?: string | null }) {
  const can = items.length >= COMPARE_MIN;
  return (
    <div className="border-t border-rule">
      {items.length === 0 ? (
        <p className="py-3 text-sm text-ink-3">
          Nothing selected yet. Use the search on the left, or the “Compare” buttons on listings and entity pages.
          {exampleHref && (
            <>
              {' '}
              Example: <Link href={exampleHref} className="link">two well-documented models</Link>.
            </>
          )}
        </p>
      ) : (
        <ul className="divide-y divide-rule">
          {items.map((it) => (
            <li key={it.slug} className="flex min-h-11 items-center gap-2 py-1.5">
              <EntityBadge type={it.entity_type} small />
              <span className="min-w-0 flex-1 truncate text-sm text-ink">
                {it.name}
                {it.organization && <span className="ml-2 text-xs text-ink-3">{it.organization}</span>}
              </span>
              <button type="button" onClick={() => onRemove(it.slug)} disabled={!ready} className="flex size-9 shrink-0 items-center justify-center text-ink-3 hover:text-danger" aria-label={`Remove ${it.name}`}>
                <X className="size-4" aria-hidden />
              </button>
            </li>
          ))}
        </ul>
      )}
      <div className="mt-3 flex flex-wrap items-center gap-2">
        {can ? (
          <Link href={compareHref(items)} className="inline-flex h-10 items-center bg-ink px-4 text-sm font-medium text-canvas hover:opacity-90">
            Compare {items.length} →
          </Link>
        ) : (
          <span className="inline-flex h-10 items-center border border-rule px-4 text-sm text-ink-3">Pick at least {COMPARE_MIN}</span>
        )}
        {items.length > 0 && (
          <button type="button" onClick={onClear} disabled={!ready} className="inline-flex h-10 items-center border border-rule px-3 text-sm text-ink-2 hover:text-ink">
            Clear
          </button>
        )}
      </div>
    </div>
  );
}