import type { Metadata } from 'next';
import { Suspense } from 'react';
import { PageHeader } from '@/components/ui/page-header';
import { FilterBar } from '@/components/ui/filter-bar';
import { Pagination } from '@/components/ui/pagination';
import { Segmented } from '@/components/ui/tabs';
import { AssetCard, AssetList } from '@/components/market/asset-list';
import { Skeleton } from '@/components/ui/primitives';
import { attachGuidePrices, exploreAssets, getScopeCounts, categoryScope, type ExploreSort, type HasFilter } from '@/lib/queries/assets';
import { fmtNum } from '@/lib/format';
import { CATEGORIES, FAMILIES, GRADERS } from '@rareindex/taxonomy';
import { pick, sp1, spEnum, spInt, spNum, withParams, type SP } from '@/lib/search-params';

export const metadata: Metadata = { title: 'Explore collectibles', description: 'Browse tracked collectible assets across every category, filtered by grade, price, liquidity, rarity and momentum.' };

const SORTS: ExploreSort[] = ['relevance', 'riv', 'change7d', 'change30d', 'sales', 'liquidity', 'rarity', 'trending', 'newest', 'latest_sale', 'opportunity', 'name'];
const HAS_OPTIONS: Array<{ id: HasFilter | ''; label: string }> = [{ id: '', label: 'All' }, { id: 'sales', label: 'With sales' }, { id: 'valuation', label: 'With valuation' }, { id: 'listings', label: 'With listings' }, { id: 'observations', label: 'With guide price' }, { id: 'images', label: 'With image' }];
const SORT_LABEL: Record<ExploreSort, string> = { relevance: 'Most data', name: 'Name', number: 'Set · number', riv: 'Valuation', change7d: '7D change', change30d: '30D change', sales: 'Sales', liquidity: 'Liquidity', rarity: 'Rarity', trending: 'Trending', newest: 'Newest', latest_sale: 'Last sale', opportunity: 'Value opportunity' };
const KEYS = ['category', 'grader', 'grade', 'min', 'max', 'liq', 'rar', 'mom', 'from', 'to', 'brand', 'set', 'q', 'sort', 'view', 'has'];

export default async function ExplorePage({ searchParams }: { searchParams: Promise<SP> }) {
  const sp = await searchParams;
  const sort = spEnum(sp, 'sort', SORTS, 'relevance');
  const has = spEnum<HasFilter | ''>(sp, 'has', ['', 'sales', 'valuation', 'listings', 'observations', 'images'] as const, '');
  const view = spEnum(sp, 'view', ['table', 'grid'] as const, 'table');
  const page = spInt(sp, 'page');
  const filters = {
    category: sp1(sp, 'category') ?? null,
    grader: sp1(sp, 'grader') ?? null,
    grade: sp1(sp, 'grade') ?? null,
    priceMin: spNum(sp, 'min'),
    priceMax: spNum(sp, 'max'),
    liquidityMin: spNum(sp, 'liq'),
    rarityMin: spNum(sp, 'rar'),
    momentumMin: spNum(sp, 'mom'),
    yearFrom: spNum(sp, 'from'),
    yearTo: spNum(sp, 'to'),
    brand: sp1(sp, 'brand') ?? null,
    set: sp1(sp, 'set') ?? null,
    q: sp1(sp, 'q') ?? null,
    has: has || null,
    sort,
    page,
    pageSize: 48,
  };
  const categoryOptions = CATEGORIES.map((c) => ({ value: c.slug, label: `${'  '.repeat(c.level)}${c.level ? '↳ ' : ''}${c.name}` }));
  const params = pick(sp, KEYS);
  return (
    <div>
      <PageHeader kicker="Browse" title="Explore" description="Every tracked collectible asset — priced or not — sortable by data richness, RareIndex Valuation, momentum, liquidity or rarity. Filters are reflected in the URL." compact />
      <div className="mb-3 flex flex-col gap-2">
        <div className="rail sm:mx-0 sm:flex-wrap sm:px-0 sm:[&>*]:flex-initial">
          {HAS_OPTIONS.map((h) => (
            <a key={h.id || 'all'} href={withParams('/explore', { ...pick(sp, KEYS), has: h.id || null, page: null })} className={`chip ${has === h.id ? 'chip-active' : ''}`}>
              {h.label}
            </a>
          ))}
        </div>
        <div className="flex flex-wrap items-end justify-between gap-2">
          <Suspense>
            <FilterBar
              fields={[
                { name: 'q', label: 'Search', type: 'text', placeholder: 'title contains…', width: 'w-44' },
                { name: 'category', label: 'Category', type: 'select', options: categoryOptions, width: 'w-52' },
                { name: 'grader', label: 'Grader', type: 'select', options: GRADERS.filter((g) => g.slug !== 'raw').map((g) => ({ value: g.slug, label: g.name })), width: 'w-32' },
                { name: 'grade', label: 'Grade', type: 'text', placeholder: 'e.g. 10', width: 'w-20' },
                { name: 'min', label: 'Min RIV $', type: 'number', placeholder: '0', width: 'w-24' },
                { name: 'max', label: 'Max RIV $', type: 'number', placeholder: '∞', width: 'w-24' },
                { name: 'liq', label: 'Liquidity ≥', type: 'number', placeholder: '0–100', width: 'w-20' },
                { name: 'rar', label: 'Rarity ≥', type: 'number', placeholder: '0–100', width: 'w-20' },
                { name: 'from', label: 'Year from', type: 'number', placeholder: '1900', width: 'w-20' },
                { name: 'to', label: 'Year to', type: 'number', placeholder: '2026', width: 'w-20' },
              ]}
            />
          </Suspense>
          <div className="flex items-center gap-2">
            <SortMenu current={sort} params={params} />
            <Segmented active={view} options={[{ id: 'table', label: 'Table', href: withParams('/explore', { ...params, view: 'table', page: null }) }, { id: 'grid', label: 'Cards', href: withParams('/explore', { ...params, view: 'grid', page: null }) }]} />
          </div>
        </div>
      </div>
      <Suspense fallback={<Skeleton className="h-96" />}>
        <Results filters={filters} view={view} params={params} />
      </Suspense>
      <div className="mt-3 flex flex-wrap gap-1.5 text-[11px] text-muted">
        <span>Families:</span>
        {FAMILIES.filter((f) => f.phase === 1).map((f) => (
          <a key={f.slug} href={withParams('/explore', { ...params, category: f.slug, page: null })} className="rounded-full border border-border px-2 py-0.5 hover:border-border-strong hover:text-fg">
            {f.name}
          </a>
        ))}
      </div>
    </div>
  );
}

function SortMenu({ current, params }: { current: ExploreSort; params: Record<string, string | undefined> }) {
  return (
    <details className="relative">
      <summary className="plain btn btn-sm h-8 cursor-pointer gap-1.5 text-[12px]">
        <span className="text-subtle">Sort</span>
        <span className="font-medium text-fg">{SORT_LABEL[current]}</span>
        <span aria-hidden className="text-subtle">▾</span>
      </summary>
      <div className="absolute right-0 top-full z-30 mt-1 w-56 overflow-hidden rounded-md border border-border bg-elevated py-1 shadow-pop">
        {SORTS.map((s) => (
          <a key={s} href={withParams('/explore', { ...params, sort: s, page: null })} className={`flex min-h-[40px] items-center px-3 text-[13px] hover:bg-sunken md:min-h-[32px] ${s === current ? 'font-medium text-fg' : 'text-muted'}`} aria-current={s === current ? 'true' : undefined}>
            {SORT_LABEL[s]}
          </a>
        ))}
      </div>
    </details>
  );
}

async function Results({ filters, view, params }: { filters: Parameters<typeof exploreAssets>[0]; view: 'table' | 'grid'; params: Record<string, string | undefined> }) {
  const [res, counts] = await Promise.all([exploreAssets(filters), getScopeCounts({ scope: filters.category ? categoryScope(filters.category) : null, set: filters.set ?? null, brand: filters.brand ?? null })]);
  await attachGuidePrices(res.items);
  const columns = filters.sort === 'rarity' || filters.sort === 'trending' || filters.sort === 'opportunity' ? (['riv', 'change30d', 'sales', 'liquidity', 'rarity', 'trending', 'opportunity'] as const) : (['riv', 'change1d', 'change7d', 'change30d', 'latestSale', 'sales', 'listings', 'liquidity'] as const);
  return (
    <>
      <p className="mb-2 num text-[11px] text-subtle">
        {res.total.toLocaleString('en-US')} assets match · {fmtNum(counts.priced)} of {fmtNum(counts.assets)} in scope have a valuation
        {counts.withObservations ? ` · ${fmtNum(counts.withObservations)} carry guide prices` : ''}
        {counts.assets > counts.priced ? ' · valuations publish as verified sales accrue' : ''}
      </p>
      {view === 'grid' ? (
        <div className="grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
          {res.items.map((a) => (
            <AssetCard key={a.id} a={a} />
          ))}
          {!res.items.length ? <div className="col-span-full"><AssetList items={[]} /></div> : null}
        </div>
      ) : (
        <div className="card overflow-hidden">
          <AssetList items={res.items} columns={[...columns]} rank startRank={(res.page - 1) * res.pageSize + 1} />
        </div>
      )}
      <Pagination page={res.page} pageSize={res.pageSize} total={res.total} basePath="/explore" params={params} />
    </>
  );
}