import type { Metadata } from 'next';
import Link from 'next/link';
import { PageHeader } from '@/components/ui/page-header';
import { Card, CardHeader, EmptyState } from '@/components/ui/primitives';
import { SalesTable } from '@/components/market/sales-table';
import { Thumb, GradeBadge, SourceLink } from '@/components/market/bits';
import { getRecordSales, getTopSales } from '@/lib/queries/market-lists';
import { fmtDate, fmtMoney } from '@/lib/format';
import { catName } from '@/lib/taxonomy';

export const metadata: Metadata = { title: 'Record sales', description: 'The highest verified collectible sales tracked by RareIndex, overall and per category.' };
export const revalidate = 300;

export default async function RecordsPage() {
  const [records, top] = await Promise.all([getRecordSales(), getTopSales(100)]);
  return (
    <div>
      <PageHeader kicker="Records" title="Record sales" description="Highest verified transactions per collectible family (§154). Only sales with confidence ≥ 80% and a source link qualify; private treaty sales reported without documentation are excluded." />
      {records.length ? (
        <div className="grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
          {records.map((r) => (
            <Link key={r.id} href={r.assetSlug ? `/asset/${r.assetSlug}` : '/sales'} className="card flex gap-3 p-3 hover:border-border-strong">
              <Thumb src={r.heroImageUrl ?? r.imageUrls[0]} alt="" size={64} rounded="rounded-md" />
              <span className="min-w-0 flex-1">
                <span className="block text-[10px] font-semibold uppercase tracking-wider text-subtle">{catName(r.familySlug)}</span>
                <span className="block truncate text-[13px] font-medium text-fg">{r.assetTitle ?? r.rawTitle}</span>
                <span className="num block text-lg font-semibold text-fg">{fmtMoney(r.priceUsd)}</span>
                <span className="flex flex-wrap items-center gap-1.5 text-[11px] text-muted">
                  <GradeBadge grader={r.grader} grade={r.grade} />
                  {fmtDate(r.saleDate)} · <SourceLink name={r.sourceName} url={r.sourceUrl} />
                </span>
              </span>
            </Link>
          ))}
        </div>
      ) : (
        <Card>
          <EmptyState title="No verified record sales yet" description="Records populate as auction results and marketplace sales are ingested and matched." />
        </Card>
      )}
      <Card className="mt-6 overflow-hidden">
        <CardHeader title="Top 100 verified sales" subtitle="All categories, by USD at the historical exchange rate" />
        <SalesTable items={top} />
      </Card>
    </div>
  );
}