import type { Metadata } from 'next';
import Link from 'next/link';
import { Suspense } from 'react';
import { searchAssets, searchSets } from '@rareindex/search';
import { Thumb } from '@/components/market/bits';
import { fmtNum } from '@/lib/format';
import { PageHeader } from '@/components/ui/page-header';
import { Card, CardHeader, EmptyState, Badge, Skeleton } from '@/components/ui/primitives';
import { Pagination } from '@/components/ui/pagination';
import { AssetList } from '@/components/market/asset-list';
import { attachGuidePrices, getAssetsBySlugs } from '@/lib/queries/assets';
import { rows, sql } from '@/lib/queries/_util';
import { CATEGORIES, INDICES, getGrader } from '@rareindex/taxonomy';
import { catName } from '@/lib/taxonomy';
import { sp1, spInt, type SP } from '@/lib/search-params';

export const metadata: Metadata = { title: 'Search', description: 'Search collectible assets, sets, categories, brands and sources with natural-language filters.' };

export default async function SearchPage({ searchParams }: { searchParams: Promise<SP> }) {
  const sp = await searchParams;
  const q = sp1(sp, 'q') ?? '';
  const category = sp1(sp, 'category') ?? null;
  const page = spInt(sp, 'page');
  return (
    <div>
      <PageHeader kicker="Search" title={q ? <span>Results for “{q}”</span> : 'Search'} description="Hybrid search: lexical + trigram + popularity, with structured filters parsed from your words (grader, grade, year, price bounds, condition, edition)." compact />
      <form action="/search" role="search" className="mb-4 flex max-w-2xl gap-2">
        <input name="q" defaultValue={q} type="search" placeholder="1999 Charizard PSA 10, Rolex Daytona under $20,000, sealed Mario 64…" className="h-10 flex-1 rounded-md border border-border bg-elevated px-3 text-[14px] text-fg placeholder:text-subtle focus:border-border-strong focus:outline-none" aria-label="Search" />
        {category ? <input type="hidden" name="category" value={category} /> : null}
        <button type="submit" className="h-10 rounded-md bg-accent px-4 text-sm font-medium text-accent-fg">
          Search
        </button>
      </form>
      {q ? (
        <Suspense key={`${q}-${category}-${page}`} fallback={<Skeleton className="h-96" />}>
          <Results q={q} category={category} page={page} />
        </Suspense>
      ) : (
        <Card>
          <EmptyState title="Type anything collectible" description="Card, watch, game, sneaker, LEGO set, comic, coin… Filters like “PSA 10”, “under $5,000”, “sealed” or a year are understood." />
        </Card>
      )}
    </div>
  );
}

async function Results({ q, category, page }: { q: string; category: string | null; page: number }) {
  const pageSize = 24;
  const [res, setHits] = await Promise.all([searchAssets(q, { limit: pageSize, offset: (page - 1) * pageSize, categorySlug: category }), searchSets(q, 8)]);
  const items = await attachGuidePrices(await getAssetsBySlugs(res.hits.map((h) => h.slug)));
  const p = res.parsed;
  const lower = q.toLowerCase();
  const matchedCats = CATEGORIES.filter((c) => c.name.toLowerCase().includes(lower) || p.categorySlugs.includes(c.slug)).slice(0, 6);
  const matchedIdx = INDICES.filter((i) => i.ticker.toLowerCase().includes(lower) || i.name.toLowerCase().includes(lower)).slice(0, 3);
  const brands = (await rows<{ brand: string; n: number }>(sql`SELECT brand, count(*) AS n FROM assets WHERE brand ILIKE ${'%' + q + '%'} GROUP BY brand ORDER BY n DESC LIMIT 6`)).map((b) => ({ ...b }));
  const sources = (await rows<{ id: string; name: string }>(sql`SELECT id, name FROM sources WHERE name ILIKE ${'%' + q + '%'} LIMIT 4`)).map((s) => ({ ...s }));
  const chips = [
    p.grader ? `${getGrader(p.grader)?.name ?? p.grader.toUpperCase()}${p.grade ? ` ${p.grade}` : ''}` : null,
    p.year ? `year ${p.year}` : null,
    p.priceMin != null ? `≥ $${p.priceMin.toLocaleString('en-US')}` : null,
    p.priceMax != null ? `≤ $${p.priceMax.toLocaleString('en-US')}` : null,
    ...p.conditions,
    ...p.editions,
    ...p.categorySlugs.map((c) => catName(c)),
  ].filter(Boolean) as string[];
  return (
    <div className="grid gap-4 lg:grid-cols-[1fr_280px]">
      <div>
        <div className="mb-2 flex flex-wrap items-center gap-1.5 text-[11px] text-muted">
          <span className="num">
            {res.total.toLocaleString('en-US')} assets · {res.tookMs} ms
          </span>
          {chips.length ? <span>· understood:</span> : null}
          {chips.map((c) => (
            <Badge key={c} tone="index">
              {c}
            </Badge>
          ))}
          {p.text && p.text !== q ? <span>· text “{p.text}”</span> : null}
        </div>
        {setHits.length ? (
          <Card className="mb-3">
            <CardHeader title="Sets & releases" subtitle="Matching releases — open one to browse every card or item in it" />
            <ul className="grid grid-cols-1 text-[12px] sm:grid-cols-2">
              {setHits.map((s) => (
                <li key={s.slug} className="border-b border-border">
                  <Link href={`/set/${s.slug}`} className="flex items-center gap-2 px-4 py-1.5 hover:bg-sunken">
                    <Thumb src={s.thumb} alt="" size={28} />
                    <span className="min-w-0 flex-1 truncate font-medium text-fg">
                      {s.name}
                      {s.code ? <span className="ml-1 text-subtle">{s.code}</span> : null}
                      {s.releaseYear ? <span className="ml-1 text-subtle">{s.releaseYear}</span> : null}
                    </span>
                    <span className="num shrink-0 text-muted">
                      {catName(s.categorySlug)} · {fmtNum(s.assets)} assets
                    </span>
                  </Link>
                </li>
              ))}
            </ul>
          </Card>
        ) : null}
        <Card className="overflow-hidden">
          <CardHeader title="Assets" subtitle={res.total ? `${res.total.toLocaleString('en-US')} matching canonical assets · guide prices labelled, RIV when available` : undefined} />
          <AssetList items={items} rank startRank={(page - 1) * pageSize + 1} columns={['riv', 'latestSale', 'change30d', 'sales', 'listings']} emptyTitle="No matching assets" emptyDescription="Try fewer words, a set name or a collector number (e.g. “base set”, “LOB-001”, “116500LN”), or browse the category pages. New assets are added continuously by the connectors." />
        </Card>
        <Pagination page={page} pageSize={pageSize} total={res.total} basePath="/search" params={{ q, category: category ?? undefined }} />
      </div>
      <aside className="grid gap-3 self-start">
        {res.categories.length ? (
          <Card>
            <CardHeader title="Narrow by category" />
            <ul className="divide-y divide-border text-[12px]">
              {res.categories.map((c) => (
                <li key={c.slug}>
                  <Link href={`/search?q=${encodeURIComponent(q)}&category=${c.slug}`} className={`flex items-center justify-between px-4 py-1.5 hover:bg-sunken ${category === c.slug ? 'font-medium text-fg' : 'text-muted'}`}>
                    {c.name}
                    <span className="num">{c.count}</span>
                  </Link>
                </li>
              ))}
              {category ? (
                <li>
                  <Link href={`/search?q=${encodeURIComponent(q)}`} className="block px-4 py-1.5 text-muted hover:text-fg">
                    Clear category
                  </Link>
                </li>
              ) : null}
            </ul>
          </Card>
        ) : null}
        {matchedCats.length || matchedIdx.length ? (
          <Card>
            <CardHeader title="Markets & indices" />
            <ul className="divide-y divide-border text-[12px]">
              {matchedCats.map((c) => (
                <li key={c.slug}>
                  <Link href={`/markets/${c.slug}`} className="block px-4 py-1.5 text-fg hover:bg-sunken">
                    {c.name} <span className="text-subtle">market</span>
                  </Link>
                </li>
              ))}
              {matchedIdx.map((i) => (
                <li key={i.ticker}>
                  <Link href={`/rareindex/${i.ticker}`} className="block px-4 py-1.5 text-fg hover:bg-sunken">
                    {i.ticker} <span className="text-subtle">index</span>
                  </Link>
                </li>
              ))}
            </ul>
          </Card>
        ) : null}
        {brands.length ? (
          <Card>
            <CardHeader title="Brands" />
            <ul className="divide-y divide-border text-[12px]">
              {brands.map((b) => (
                <li key={b.brand}>
                  <Link href={`/brand/${encodeURIComponent(b.brand)}`} className="flex justify-between px-4 py-1.5 text-fg hover:bg-sunken">
                    {b.brand} <span className="num text-subtle">{Number(b.n)}</span>
                  </Link>
                </li>
              ))}
            </ul>
          </Card>
        ) : null}
        {sources.length ? (
          <Card>
            <CardHeader title="Sources" />
            <ul className="divide-y divide-border text-[12px]">
              {sources.map((s) => (
                <li key={s.id}>
                  <Link href={`/sales?source=${s.id}`} className="block px-4 py-1.5 text-fg hover:bg-sunken">
                    {s.name} <span className="text-subtle">sales</span>
                  </Link>
                </li>
              ))}
            </ul>
          </Card>
        ) : null}
      </aside>
    </div>
  );
}