'use client';

import { useRouter, useSearchParams } from 'next/navigation';
import { useEffect, useState } from 'react';
import { Check, Link2, Search, X } from 'lucide-react';

interface Suggestion {
  type: string;
  label: string;
  sublabel: string | null;
  href: string;
}

const SLOTS = ['a', 'b', 'c', 'd'] as const;

/** Four slot pickers with suggestions; values are asset slugs or index tickers, stored in the URL. */
export function CompareForm({ initial }: { initial: string[] }) {
  const router = useRouter();
  const params = useSearchParams();
  const [values, setValues] = useState<string[]>([...initial, '', '', '', ''].slice(0, 4));
  const [typing, setTyping] = useState<{ i: number; q: string } | null>(null);
  const [items, setItems] = useState<Suggestion[]>([]);

  useEffect(() => {
    if (!typing || typing.q.trim().length < 2) return;
    const ctrl = new AbortController();
    const t = setTimeout(() => {
      fetch(`/api/search/suggest?q=${encodeURIComponent(typing.q)}`, { signal: ctrl.signal })
        .then((r) => r.json())
        .then((d: { items: Suggestion[] }) => setItems((d.items ?? []).filter((x) => x.type === 'asset' || x.type === 'index').slice(0, 8)))
        .catch(() => {});
    }, 150);
    return () => {
      clearTimeout(t);
      ctrl.abort();
    };
  }, [typing]);

  const apply = (vals: string[]) => {
    const sp = new URLSearchParams();
    vals.forEach((v, i) => {
      if (v.trim()) sp.set(SLOTS[i]!, v.trim());
    });
    const w = params?.get('w');
    if (w) sp.set('w', w);
    router.push(`/compare?${sp.toString()}`);
  };

  return (
    <form
      className="card grid gap-2 p-3 sm:grid-cols-2 lg:grid-cols-4"
      onSubmit={(e) => {
        e.preventDefault();
        apply(values);
      }}
    >
      {SLOTS.map((s, i) => (
        <label key={s} className="relative flex flex-col gap-1 text-[10px] font-medium uppercase tracking-wider text-subtle">
          Slot {s.toUpperCase()}
          <span className="relative">
            <Search className="pointer-events-none absolute left-2.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-subtle" />
            <input
              value={values[i] ?? ''}
              onChange={(e) => {
                const v = [...values];
                v[i] = e.target.value;
                setValues(v);
                setTyping({ i, q: e.target.value });
                if (e.target.value.trim().length < 2) setItems([]);
              }}
              onBlur={() =>
                setTimeout(() => {
                  setTyping(null);
                  setItems([]);
                }, 150)
              }
              placeholder="Search an asset or RARE-TCG"
              autoComplete="off"
              className="h-10 w-full rounded-md border border-border bg-elevated pl-8 pr-8 text-base normal-case tracking-normal text-fg placeholder:text-subtle focus:border-border-strong focus:outline-none md:h-9 md:text-[13px]"
            />
            {values[i] ? (
              <button
                type="button"
                aria-label={`Clear slot ${s.toUpperCase()}`}
                onClick={() => {
                  const v = [...values];
                  v[i] = '';
                  setValues(v);
                  apply(v);
                }}
                className="absolute right-1.5 top-1/2 inline-flex h-7 w-7 -translate-y-1/2 items-center justify-center rounded-md text-subtle hover:bg-inset hover:text-fg"
              >
                <X className="h-3.5 w-3.5" />
              </button>
            ) : null}
          </span>
          {typing?.i === i && items.length ? (
            <ul className="absolute left-0 top-full z-20 mt-1 w-full overflow-hidden rounded-md border border-border bg-elevated text-[13px] normal-case tracking-normal shadow-pop">
              {items.map((it) => {
                const val = it.href.startsWith('/asset/') ? it.href.slice(7) : it.href.startsWith('/rareindex/') ? it.href.slice(11) : it.label;
                return (
                  <li key={it.href}>
                    <button
                      type="button"
                      onMouseDown={(e) => e.preventDefault()}
                      onClick={() => {
                        const v = [...values];
                        v[i] = val;
                        setValues(v);
                        setTyping(null);
                        apply(v);
                      }}
                      className="block w-full truncate px-2.5 py-2 text-left text-fg hover:bg-sunken"
                    >
                      {it.label} <span className="text-subtle">· {it.sublabel}</span>
                    </button>
                  </li>
                );
              })}
            </ul>
          ) : null}
        </label>
      ))}
      <div className="flex items-center justify-between gap-3 text-[11px] text-subtle sm:col-span-2 lg:col-span-4">
        <span className="hidden sm:inline">Tickers: RARE, RARE-TCG, RARE-SPORT, RARE-WATCH, RARE-SNEAKER, RARE-LEGO, RARE-COMIC, RARE-GAME…</span>
        <button type="submit" className="inline-flex h-10 items-center rounded-md bg-accent px-4 text-xs font-medium text-accent-fg md:h-9">
          Compare
        </button>
      </div>
    </form>
  );
}

export function ShareButton() {
  const [done, setDone] = useState(false);
  return (
    <button
      type="button"
      onClick={async () => {
        const url = window.location.href;
        try {
          if (navigator.share) await navigator.share({ title: 'RareIndex — Compare', url });
          else await navigator.clipboard.writeText(url);
          setDone(true);
          setTimeout(() => setDone(false), 1800);
        } catch {
          /* cancelled */
        }
      }}
      className="inline-flex h-9 items-center gap-1.5 rounded-md border border-border bg-elevated px-3 text-[12px] font-medium text-fg hover:bg-inset"
    >
      {done ? <Check className="h-3.5 w-3.5 text-gain" /> : <Link2 className="h-3.5 w-3.5" />}
      {done ? 'Link copied' : 'Share'}
    </button>
  );
}