import type { Metadata } from 'next';
import Link from 'next/link';
import { PageHeader } from '@/components/ui/page-header';
import { MarketTable } from '@/components/market/market-table';
import { CategoryGrid } from '@/components/market/category-grid';
import { Card, CardHeader } from '@/components/ui/primitives';
import { getCategorySparklines, getMarketRows } from '@/lib/queries/markets';
import { getCategoryThumbnails } from '@/lib/queries/assets';
import { listIndices } from '@/lib/queries/indices';
import { fmtMoney, fmtNum } from '@/lib/format';

export const metadata: Metadata = { title: 'Markets', description: 'Collectible category markets: index performance, sales, volume, listings, liquidity and market capitalization estimates.' };
export const revalidate = 300;

export default async function MarketsPage() {
  const [rows, indices] = await Promise.all([getMarketRows(), listIndices()]);
  const active = rows.filter((r) => r.counts.assets > 0);
  const [thumbs, sparklines] = await Promise.all([getCategoryThumbnails(active.map((r) => r.node.slug)), getCategorySparklines(active.map((r) => r.node.slug), 90)]);
  const totals = active.reduce((a, r) => ({ assets: a.assets + r.counts.assets, priced: a.priced + r.counts.priced, sales: a.sales + r.counts.sales, sales30d: a.sales30d + r.counts.sales30d, volume: a.volume + (r.counts.volume30dUsd ?? 0), listings: a.listings + r.counts.listings }), { assets: 0, priced: 0, sales: 0, sales30d: 0, volume: 0, listings: 0 });
  const published = indices.filter((i) => i.latest).length;
  return (
    <div>
      <PageHeader
        kicker="Markets"
        title="Category markets"
        description="One row per collectible family. Index and period changes come from category snapshots; counts come live from the canonical tables. Families without data are listed so coverage is transparent."
        meta={
          <>
            <Link href="/rareindex" className="hover:text-fg">
              {published}/{indices.length} indices published
            </Link>
            <span aria-hidden>·</span>
            <Link href="/market-map" className="hover:text-fg">
              Heatmap view →
            </Link>
            <span aria-hidden>·</span>
            <Link href="/categories" className="hover:text-fg">
              Full taxonomy →
            </Link>
          </>
        }
        stats={[
          { label: 'Families with data', value: fmtNum(active.length), sub: `of ${fmtNum(rows.length)}` },
          { label: 'Tracked assets', value: fmtNum(totals.assets), sub: `${fmtNum(totals.priced)} with valuation` },
          { label: 'Sales (all time)', value: fmtNum(totals.sales) },
          { label: 'Sales · 30D', value: fmtNum(totals.sales30d) },
          { label: 'Volume · 30D', value: totals.volume ? fmtMoney(totals.volume, 'USD', { compact: true }) : '—' },
          { label: 'Active listings', value: fmtNum(totals.listings) },
        ]}
      />
      <section className="mb-6">
        <CategoryGrid rows={active} thumbs={thumbs} sparklines={sparklines} mobileLimit={8} />
      </section>
      <Card className="overflow-hidden">
        <CardHeader title="All families" subtitle="Heat cells are period changes of the category index; grey means not yet computable" />
        <MarketTable rows={rows} />
      </Card>
      <p className="mt-3 text-[11px] leading-relaxed text-subtle">Market capitalization estimates multiply an estimated population by a representative value and are shown only with their confidence label; they are indicative, never precise (§124). Listing prices are not confirmed transactions.</p>
    </div>
  );
}