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 { Skeleton } from '@/components/ui/primitives';
import { SalesTable } from '@/components/market/sales-table';
import { listSales, listSaleSources } from '@/lib/queries/market-lists';
import { CATEGORIES, GRADERS } from '@rareindex/taxonomy';
import { pick, sp1, spEnum, spInt, spNum, type SP } from '@/lib/search-params';

export const metadata: Metadata = { title: 'Sales', description: 'Latest verified collectible transactions across marketplaces and auction houses, with grade, source attribution and native currency.' };

const KEYS = ['category', 'source', 'grader', 'min', 'max', 'days', 'type', 'q', 'sort'];

export default async function SalesPage({ searchParams }: { searchParams: Promise<SP> }) {
  const sp = await searchParams;
  const sources = await listSaleSources();
  const filters = { category: sp1(sp, 'category') ?? null, source: sp1(sp, 'source') ?? null, grader: sp1(sp, 'grader') ?? null, minUsd: spNum(sp, 'min'), maxUsd: spNum(sp, 'max'), days: spNum(sp, 'days'), saleType: sp1(sp, 'type') ?? null, q: sp1(sp, 'q') ?? null, sort: spEnum(sp, 'sort', ['date', 'price'] as const, 'date'), page: spInt(sp, 'page'), pageSize: 50 };
  return (
    <div>
      <PageHeader kicker="Transactions" title="Sales" description="Observed transactions only — never asking prices. Each row links to its source; prices show USD at the historical exchange rate of the sale date, with the native amount beneath." compact />
      <Suspense>
        <FilterBar
          className="mb-3"
          fields={[
            { name: 'q', label: 'Search', type: 'text', placeholder: 'asset or title…', width: 'w-44' },
            { name: 'category', label: 'Category', type: 'select', options: CATEGORIES.map((c) => ({ value: c.slug, label: `${c.level ? '↳ ' : ''}${c.name}` })), width: 'w-48' },
            { name: 'source', label: 'Source', type: 'select', options: sources.map((s) => ({ value: s.id, label: `${s.name} (${s.sales.toLocaleString('en-US')})` })), width: 'w-44' },
            { name: 'grader', label: 'Grader', type: 'select', options: GRADERS.map((g) => ({ value: g.slug, label: g.name })), width: 'w-28' },
            { name: 'type', label: 'Type', type: 'select', options: ['auction', 'fixed_price', 'best_offer', 'private', 'dealer'].map((t) => ({ value: t, label: t.replace('_', ' ') })), width: 'w-28' },
            { name: 'min', label: 'Min $', type: 'number', width: 'w-24' },
            { name: 'max', label: 'Max $', type: 'number', width: 'w-24' },
            { name: 'days', label: 'Last N days', type: 'number', placeholder: 'all', width: 'w-24' },
            { name: 'sort', label: 'Sort', type: 'select', options: [{ value: 'date', label: 'Newest' }, { value: 'price', label: 'Highest price' }], placeholder: 'Newest', width: 'w-32' },
          ]}
        />
      </Suspense>
      <Suspense fallback={<Skeleton className="h-96" />}>
        <Results filters={filters} params={pick(sp, KEYS)} />
      </Suspense>
    </div>
  );
}

async function Results({ filters, params }: { filters: Parameters<typeof listSales>[0]; params: Record<string, string | undefined> }) {
  const res = await listSales(filters);
  return (
    <>
      <p className="mb-2 num text-[11px] text-subtle">{res.total.toLocaleString('en-US')} sales</p>
      <div className="card overflow-hidden">
        <SalesTable items={res.items} />
      </div>
      <Pagination page={res.page} pageSize={res.pageSize} total={res.total} basePath="/sales" params={params} />
    </>
  );
}