'use client';

import { useEffect, useRef, useState } from 'react';
import { Search, X } from 'lucide-react';
import { inputClass } from './form';
import { fmtMoney } from '@/lib/format';

export interface PickedAsset {
  id: string;
  title: string;
  categorySlug: string;
  year: number | null;
  heroImageUrl: string | null;
  rivUsd: number | null;
}
interface Variant {
  id: string;
  label: string;
  rivUsd: number | null;
}

/**
 * Typeahead over RareIndex assets (server search) + variant picker. Emits hidden inputs
 * `assetId` and `variantId` for the surrounding form.
 */
export function AssetPicker({ name = 'assetId', initial, error, withVariant = true, label = 'Asset' }: { name?: string; initial?: PickedAsset | null; error?: string | null; withVariant?: boolean; label?: string }) {
  const [q, setQ] = useState('');
  const [hits, setHits] = useState<PickedAsset[]>([]);
  const [open, setOpen] = useState(false);
  const [picked, setPicked] = useState<PickedAsset | null>(initial ?? null);
  const [variants, setVariants] = useState<Variant[]>([]);
  const [loading, setLoading] = useState(false);
  const box = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (q.trim().length < 2) return;
    const ctrl = new AbortController();
    const t = setTimeout(async () => {
      setLoading(true);
      try {
        const res = await fetch(`/api/account/assets/search?q=${encodeURIComponent(q.trim())}`, { signal: ctrl.signal });
        if (res.ok) setHits((await res.json()) as PickedAsset[]);
      } catch {
        /* aborted */
      } finally {
        setLoading(false);
      }
    }, 180);
    return () => {
      clearTimeout(t);
      ctrl.abort();
    };
  }, [q]);

  useEffect(() => {
    if (!picked || !withVariant) return;
    fetch(`/api/account/assets/${picked.id}/variants`)
      .then((r) => (r.ok ? r.json() : []))
      .then((v: Variant[]) => setVariants(v))
      .catch(() => setVariants([]));
  }, [picked, withVariant]);

  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);
  }, []);

  return (
    <div className="space-y-1.5" ref={box}>
      <label className="block text-xs font-medium text-muted">{label}</label>
      <input type="hidden" name={name} value={picked?.id ?? ''} />
      {picked ? (
        <div className="flex items-center gap-3 rounded-md border border-border bg-sunken px-3 py-2">
          {picked.heroImageUrl ? (
            // eslint-disable-next-line @next/next/no-img-element
            <img src={picked.heroImageUrl} alt="" className="h-10 w-10 rounded-sm object-cover" />
          ) : (
            <span className="h-10 w-10 rounded-sm bg-inset" />
          )}
          <div className="min-w-0 flex-1">
            <p className="truncate text-sm font-medium">{picked.title}</p>
            <p className="text-xs text-muted">
              {picked.categorySlug.replace(/_/g, ' ')}
              {picked.year ? ` · ${picked.year}` : ''}
              {picked.rivUsd ? ` · RIV ${fmtMoney(picked.rivUsd)}` : ' · no valuation yet'}
            </p>
          </div>
          <button type="button" aria-label="Change asset" className="text-subtle hover:text-fg" onClick={() => setPicked(null)}>
            <X className="h-4 w-4" />
          </button>
        </div>
      ) : (
        <div className="relative">
          <Search className="pointer-events-none absolute left-2.5 top-1/2 h-4 w-4 -translate-y-1/2 text-subtle" />
          <input value={q} onChange={(e) => { setQ(e.target.value); setOpen(true); if (e.target.value.trim().length < 2) setHits([]); }} onFocus={() => setOpen(true)} placeholder="Search RareIndex assets… e.g. 1999 Charizard, Rolex 116500LN, LEGO 75192" className={`${inputClass} pl-8`} autoComplete="off" aria-autocomplete="list" />
          {open && (hits.length > 0 || loading || q.trim().length >= 2) ? (
            <ul className="absolute z-20 mt-1 max-h-72 w-full overflow-auto rounded-md border border-border bg-elevated shadow-pop" role="listbox">
              {hits.map((h) => (
                <li key={h.id}>
                  <button type="button" className="flex w-full items-center gap-3 px-3 py-2 text-left hover:bg-inset" onClick={() => { setPicked(h); setOpen(false); setQ(''); }}>
                    {h.heroImageUrl ? (
                      // eslint-disable-next-line @next/next/no-img-element
                      <img src={h.heroImageUrl} alt="" className="h-9 w-9 rounded-sm object-cover" />
                    ) : (
                      <span className="h-9 w-9 rounded-sm bg-inset" />
                    )}
                    <span className="min-w-0 flex-1">
                      <span className="block truncate text-sm">{h.title}</span>
                      <span className="block text-xs text-muted">
                        {h.categorySlug.replace(/_/g, ' ')}
                        {h.year ? ` · ${h.year}` : ''}
                      </span>
                    </span>
                    <span className="num text-xs text-muted">{h.rivUsd ? fmtMoney(h.rivUsd) : '—'}</span>
                  </button>
                </li>
              ))}
              {!loading && hits.length === 0 && q.trim().length >= 2 ? <li className="px-3 py-3 text-xs text-muted">No asset matches yet. RareIndex adds assets as connectors ingest them; try a different spelling or set name.</li> : null}
              {loading ? <li className="px-3 py-2 text-xs text-subtle">Searching…</li> : null}
            </ul>
          ) : null}
        </div>
      )}
      {error ? <p className="text-xs text-loss">{error}</p> : null}
      {withVariant && picked ? (
        <div className="pt-1">
          <label className="block text-xs font-medium text-muted" htmlFor="variantId">
            Variant / grade
          </label>
          <select name="variantId" id="variantId" className={`${inputClass} mt-1.5`} defaultValue="">
            <option value="">Not specified — use grader/grade fields below</option>
            {variants.map((v) => (
              <option key={v.id} value={v.id}>
                {v.label}
                {v.rivUsd ? ` · RIV ${fmtMoney(v.rivUsd)}` : ''}
              </option>
            ))}
          </select>
        </div>
      ) : null}
    </div>
  );
}