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 { ListingsTable } from '@/components/market/sales-table';
import { listListings, listListingSources } 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: 'Listings', description: 'Live asking prices across marketplaces, compared with the RareIndex Valuation to surface value opportunities.' };

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

export default async function ListingsPage({ searchParams }: { searchParams: Promise<SP> }) {
  const sp = await searchParams;
  const sources = await listListingSources();
  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'), minDiscount: spNum(sp, 'disc') === null ? null : spNum(sp, 'disc')! / 100, listingType: sp1(sp, 'type') ?? null, q: sp1(sp, 'q') ?? null, sort: spEnum(sp, 'sort', ['newest', 'price_asc', 'price_desc', 'discount', 'ending'] as const, 'newest'), page: spInt(sp, 'page'), pageSize: 50 };
  return (
    <div>
      <PageHeader kicker="Marketplaces" title="Listings" description="Current asks observed on public marketplaces. A listing price is not a market value; the “vs RIV” column shows the discount or premium to the RareIndex Valuation with its confidence — analytical data, not investment advice (§123)." 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: 'Marketplace', type: 'select', options: sources.map((s) => ({ value: s.id, label: `${s.name} (${s.listings.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: ['fixed_price', 'auction', 'best_offer', 'ask'].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: 'disc', label: 'Discount ≥ %', type: 'number', placeholder: 'e.g. 15', width: 'w-24' },
            { name: 'sort', label: 'Sort', type: 'select', options: [{ value: 'newest', label: 'Newest' }, { value: 'discount', label: 'Biggest discount' }, { value: 'price_asc', label: 'Price ↑' }, { value: 'price_desc', label: 'Price ↓' }, { value: 'ending', label: 'Ending soon' }], placeholder: 'Newest', width: 'w-36' },
          ]}
        />
      </Suspense>
      <Suspense fallback={<Skeleton className="h-96" />}>
        <Results filters={filters} params={pick(sp, KEYS)} />
      </Suspense>
    </div>
  );
}

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