'use client';

import Link from 'next/link';
import { useRouter } from 'next/navigation';
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { ArrowUpRight, Clock, Search, TrendingUp, X } from 'lucide-react';
import { cn } from '@/lib/format';

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

const RECENT_KEY = 'ri-recent-searches';
const TRENDING = ['1999 Charizard PSA 10', 'Rolex Daytona 116500LN', 'LEGO 10179', 'Black Lotus Alpha', 'Blue-Eyes White Dragon LOB', 'Super Mario 64 sealed', 'Amazing Spider-Man 300', 'Patek Philippe Nautilus 5711'];
const GROUP_LABEL: Record<string, string> = { asset: 'Assets', set: 'Sets & releases', category: 'Categories', brand: 'Brands', source: 'Sources', index: 'Indices' };
const GROUP_ORDER = ['asset', 'set', 'category', 'brand', 'index', 'source'];

function readRecent(): string[] {
  try {
    const raw = localStorage.getItem(RECENT_KEY);
    const arr = raw ? (JSON.parse(raw) as unknown) : [];
    return Array.isArray(arr) ? arr.filter((x): x is string => typeof x === 'string').slice(0, 8) : [];
  } catch {
    return [];
  }
}
export function pushRecent(q: string) {
  try {
    const next = [q, ...readRecent().filter((x) => x.toLowerCase() !== q.toLowerCase())].slice(0, 8);
    localStorage.setItem(RECENT_KEY, JSON.stringify(next));
  } catch {
    /* ignore */
  }
}

/** Highlight query tokens inside a label (case-insensitive, word-agnostic). */
export function Highlight({ text, q }: { text: string; q: string }) {
  const tokens = q.toLowerCase().split(/\s+/).filter((t) => t.length >= 2);
  if (!tokens.length) return <>{text}</>;
  const re = new RegExp(`(${tokens.map((t) => t.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')).join('|')})`, 'ig');
  const parts = text.split(re);
  return (
    <>
      {parts.map((p, i) => (re.test(p) ? <mark key={i} className="rounded-[2px] bg-index-bg text-fg">{p}</mark> : <span key={i}>{p}</span>))}
    </>
  );
}

/**
 * Full-screen search sheet (mobile) / command palette (desktop, ⌘K). Grouped instant results from
 * /api/search/suggest, recent searches (localStorage), trending prompts and keyboard navigation.
 */
export function SearchSheet({ open, onClose, initialQuery = '' }: { open: boolean; onClose: () => void; initialQuery?: string }) {
  const router = useRouter();
  const [q, setQ] = useState(initialQuery);
  const [items, setItems] = useState<Suggestion[]>([]);
  const [loading, setLoading] = useState(false);
  const [active, setActive] = useState(-1);
  const inputRef = useRef<HTMLInputElement>(null);
  // Only rendered client-side once opened (SSR renders nothing), so reading localStorage here is safe.
  const recent = useMemo(() => (open && typeof window !== 'undefined' ? readRecent() : []), [open]);

  useEffect(() => {
    if (!open) return;
    const t = setTimeout(() => inputRef.current?.focus(), 30);
    document.body.style.overflow = 'hidden';
    const onKey = (e: KeyboardEvent) => e.key === 'Escape' && onClose();
    window.addEventListener('keydown', onKey);
    return () => {
      clearTimeout(t);
      document.body.style.overflow = '';
      window.removeEventListener('keydown', onKey);
    };
  }, [open, onClose]);

  useEffect(() => {
    if (!open) return;
    const query = q.trim();
    if (query.length < 2) return;
    const ctrl = new AbortController();
    const t = setTimeout(() => {
      setLoading(true);
      fetch(`/api/search/suggest?q=${encodeURIComponent(query)}`, { signal: ctrl.signal })
        .then((r) => r.json())
        .then((d: { items: Suggestion[] }) => {
          setItems(d.items ?? []);
          setActive(-1);
        })
        .catch(() => {})
        .finally(() => setLoading(false));
    }, 110);
    return () => {
      clearTimeout(t);
      ctrl.abort();
    };
  }, [q, open]);

  const groups = useMemo(() => {
    const m = new Map<string, Suggestion[]>();
    for (const it of items) (m.get(it.type) ?? m.set(it.type, []).get(it.type)!).push(it);
    return [...m.entries()].sort((a, b) => GROUP_ORDER.indexOf(a[0]) - GROUP_ORDER.indexOf(b[0]));
  }, [items]);
  const flat = useMemo(() => groups.flatMap(([, g]) => g), [groups]);

  const go = useCallback(
    (href: string, label?: string) => {
      if (label) pushRecent(label);
      onClose();
      router.push(href);
    },
    [onClose, router],
  );
  const submit = () => {
    const query = q.trim();
    if (active >= 0 && flat[active]) return go(flat[active]!.href, query || flat[active]!.label);
    if (query) go(`/search?q=${encodeURIComponent(query)}`, query);
  };

  if (!open) return null;
  const showIdle = q.trim().length < 2;
  return (
    <div className="fixed inset-0 z-[70]" role="dialog" aria-modal="true" aria-label="Search">
      <div className="absolute inset-0 bg-black/45 backdrop-blur-[2px]" onClick={onClose} />
      <div className="sheet-in absolute inset-x-0 top-0 mx-auto flex h-[100dvh] w-full flex-col bg-elevated shadow-pop md:top-[8vh] md:h-auto md:max-h-[76vh] md:max-w-2xl md:rounded-xl md:border md:border-border">
        <form
          role="search"
          className="flex items-center gap-2 border-b border-border px-3 py-2 md:px-4"
          onSubmit={(e) => {
            e.preventDefault();
            submit();
          }}
        >
          <Search className="h-5 w-5 shrink-0 text-subtle" />
          <input
            ref={inputRef}
            value={q}
            onChange={(e) => {
              setQ(e.target.value);
              if (e.target.value.trim().length < 2) {
                setItems([]);
                setActive(-1);
              }
            }}
            onKeyDown={(e) => {
              if (e.key === 'ArrowDown') {
                e.preventDefault();
                setActive((a) => Math.min(flat.length - 1, a + 1));
              } else if (e.key === 'ArrowUp') {
                e.preventDefault();
                setActive((a) => Math.max(-1, a - 1));
              }
            }}
            type="search"
            enterKeyHint="search"
            autoComplete="off"
            autoCapitalize="off"
            spellCheck={false}
            placeholder="Search cards, watches, games, sneakers, LEGO, art…"
            aria-label="Search collectibles"
            aria-autocomplete="list"
            aria-controls="search-sheet-list"
            className="h-12 min-w-0 flex-1 bg-transparent text-[16px] text-fg placeholder:text-subtle focus:outline-none md:h-11 md:text-[15px]"
          />
          {q ? (
            <button type="button" onClick={() => setQ('')} className="inline-flex h-9 w-9 items-center justify-center rounded-md text-muted hover:bg-inset" aria-label="Clear">
              <X className="h-4 w-4" />
            </button>
          ) : null}
          <button type="button" onClick={onClose} className="inline-flex h-10 items-center rounded-md border border-border px-2.5 text-[12px] font-medium text-muted hover:bg-inset md:h-8">
            <span className="md:hidden">Cancel</span>
            <span className="hidden md:inline">Esc</span>
          </button>
        </form>

        <div id="search-sheet-list" className="flex-1 overflow-y-auto overscroll-contain safe-bottom" role="listbox">
          {showIdle ? (
            <div className="px-3 py-3 md:px-4">
              {recent.length ? (
                <section className="mb-4">
                  <p className="t-label mb-1.5 flex items-center gap-1.5">
                    <Clock className="h-3 w-3" /> Recent
                  </p>
                  <ul className="flex flex-wrap gap-1.5">
                    {recent.map((r) => (
                      <li key={r}>
                        <button type="button" onClick={() => go(`/search?q=${encodeURIComponent(r)}`, r)} className="chip">
                          {r}
                        </button>
                      </li>
                    ))}
                  </ul>
                </section>
              ) : null}
              <section>
                <p className="t-label mb-1.5 flex items-center gap-1.5">
                  <TrendingUp className="h-3 w-3" /> Try
                </p>
                <ul className="divide-y divide-border">
                  {TRENDING.map((t) => (
                    <li key={t}>
                      <button type="button" onClick={() => go(`/search?q=${encodeURIComponent(t)}`, t)} className="flex min-h-[44px] w-full items-center justify-between gap-3 px-1 text-left text-[14px] text-fg hover:bg-sunken">
                        <span>{t}</span>
                        <ArrowUpRight className="h-4 w-4 text-subtle" />
                      </button>
                    </li>
                  ))}
                </ul>
              </section>
              <p className="mt-4 text-[11px] leading-relaxed text-subtle">Understands graders and grades (“PSA 10”), years, price bounds (“under $5,000”), conditions (“sealed”, “CIB”) and set codes (“LOB-001”, “116500LN”).</p>
            </div>
          ) : (
            <div className="py-1">
              {groups.map(([type, g]) => (
                <section key={type} className="pb-1">
                  <p className="t-label px-4 pb-1 pt-2">{GROUP_LABEL[type] ?? type}</p>
                  <ul>
                    {g.map((it) => {
                      const idx = flat.indexOf(it);
                      return (
                        <li key={`${it.type}-${it.href}`} role="option" aria-selected={idx === active}>
                          <button type="button" onMouseEnter={() => setActive(idx)} onClick={() => go(it.href, q.trim())} className={cn('flex min-h-[44px] w-full items-center justify-between gap-3 px-4 py-1.5 text-left', idx === active ? 'bg-inset' : 'hover:bg-sunken')}>
                            <span className="min-w-0">
                              <span className="block truncate text-[14px] text-fg">
                                <Highlight text={it.label} q={q} />
                              </span>
                              {it.sublabel ? <span className="block truncate text-[11px] text-muted">{it.sublabel}</span> : null}
                            </span>
                            <ArrowUpRight className="h-4 w-4 shrink-0 text-subtle" />
                          </button>
                        </li>
                      );
                    })}
                  </ul>
                </section>
              ))}
              {!loading && !flat.length ? <p className="px-4 py-6 text-center text-[13px] text-muted">No instant matches. Press Enter to run a full search.</p> : null}
              <button type="button" onClick={submit} className="mt-1 flex min-h-[48px] w-full items-center justify-between border-t border-border px-4 text-left text-[13px] text-muted hover:bg-sunken">
                <span>
                  Search all results for <span className="font-medium text-fg">“{q.trim()}”</span>
                </span>
                <kbd className="rounded-sm border border-border px-1.5 text-[10px] text-subtle">↵</kbd>
              </button>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

/** Icon/button trigger that opens the sheet; global ⌘K / Ctrl+K shortcut. */
export function SearchTrigger({ variant = 'icon', className, initialQuery }: { variant?: 'icon' | 'field' | 'hero'; className?: string; initialQuery?: string }) {
  const [open, setOpen] = useState(false);
  const close = useCallback(() => setOpen(false), []);
  useEffect(() => {
    const onKey = (e: KeyboardEvent) => {
      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'k') {
        e.preventDefault();
        setOpen(true);
      }
    };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, []);
  return (
    <>
      {variant === 'icon' ? (
        <button type="button" onClick={() => setOpen(true)} className={cn('inline-flex h-10 w-10 items-center justify-center rounded-md text-fg hover:bg-inset md:h-8 md:w-8', className)} aria-label="Search">
          <Search className="h-5 w-5" />
        </button>
      ) : variant === 'field' ? (
        <button type="button" onClick={() => setOpen(true)} className={cn('group flex h-8 w-64 items-center gap-2 rounded-md border border-border bg-sunken px-2.5 text-left text-[13px] text-subtle hover:border-border-strong xl:w-80', className)} aria-label="Search (⌘K)">
          <Search className="h-3.5 w-3.5" />
          <span className="flex-1 truncate">Search cards, watches, games…</span>
          <kbd className="rounded-sm border border-border bg-elevated px-1 text-[10px] text-subtle">⌘K</kbd>
        </button>
      ) : (
        <button type="button" onClick={() => setOpen(true)} className={cn('flex h-13 w-full items-center gap-3 rounded-lg border border-border bg-elevated px-4 text-left shadow-card hover:border-border-strong', className)} aria-label="Search collectibles">
          <Search className="h-5 w-5 text-subtle" />
          <span className="flex-1 truncate text-[16px] text-subtle">Search cards, watches, games, sneakers, LEGO, art…</span>
          <span className="btn-primary btn-sm hidden h-8 sm:inline-flex">Search</span>
        </button>
      )}
      <SearchSheet open={open} onClose={close} initialQuery={initialQuery} />
    </>
  );
}

/** Non-JS friendly hero search: a real form that submits to /search; enhanced with the sheet on focus. */
export function HeroSearch({ chips }: { chips: string[] }) {
  const [open, setOpen] = useState(false);
  const close = useCallback(() => setOpen(false), []);
  return (
    <div className="mx-auto w-full max-w-2xl">
      <form action="/search" role="search" className="relative flex items-center">
        <Search className="pointer-events-none absolute left-4 h-5 w-5 text-subtle" />
        <input
          name="q"
          type="search"
          autoComplete="off"
          enterKeyHint="search"
          placeholder="Search cards, watches, games, sneakers, LEGO, art…"
          aria-label="Search collectibles"
          onFocus={(e) => {
            // Use the rich sheet when JS is available; keep the plain form as the fallback.
            e.currentTarget.blur();
            setOpen(true);
          }}
          className="h-13 w-full rounded-lg border border-border bg-elevated pl-12 pr-24 text-[16px] text-fg shadow-card placeholder:text-subtle focus:border-border-strong focus:outline-none"
        />
        <button type="submit" className="btn-primary absolute right-1.5 h-10 px-4 text-[13px]">
          Search
        </button>
      </form>
      <ul className="mt-3 flex flex-wrap items-center justify-center gap-1.5">
        {chips.map((c) => (
          <li key={c}>
            <Link href={`/search?q=${encodeURIComponent(c)}`} className="chip" onClick={() => pushRecent(c)}>
              {c}
            </Link>
          </li>
        ))}
      </ul>
      <SearchSheet open={open} onClose={close} />
    </div>
  );
}