import type { Metadata } from 'next';
import Link from 'next/link';
import { PageHeader } from '@/components/ui/page-header';
import { Card, CardHeader, Delta, EmptyState } from '@/components/ui/primitives';
import { AssetList } from '@/components/market/asset-list';
import { rankedAssets, categoryScope } from '@/lib/queries/assets';
import { getTrendingCategories } from '@/lib/queries/market-lists';
import { catName } from '@/lib/taxonomy';
import { sp1, type SP } from '@/lib/search-params';
import { FAMILIES } from '@rareindex/taxonomy';
import { fmtNum } from '@/lib/format';

export const metadata: Metadata = { title: 'Trending collectibles', description: 'What collectors are moving into: trending score from price, volume, listing, search and news momentum.' };
export const revalidate = 120;

export default async function TrendingPage({ searchParams }: { searchParams: Promise<SP> }) {
  const sp = await searchParams;
  const category = sp1(sp, 'category') ?? null;
  const scope = category ? categoryScope(category) : undefined;
  const [trending, cats, gainers7, gainers30] = await Promise.all([rankedAssets('trending', { scope, limit: 60 }), getTrendingCategories(12), rankedAssets('gainers', { scope, limit: 12, window: '7d' }), rankedAssets('gainers', { scope, limit: 12, window: '30d' })]);
  return (
    <div>
      <PageHeader kicker="Momentum"
        title="Trending"
        description="Trending = price momentum × volume momentum × search momentum × listing momentum × news momentum, each normalised (§152). Scores are computed by the pipeline from observed data only."
        meta={
          <>
            <Link href="/trending" className={!category ? 'font-medium text-fg' : 'hover:text-fg'}>
              All
            </Link>
            {FAMILIES.filter((f) => f.phase === 1).map((f) => (
              <Link key={f.slug} href={`/trending?category=${f.slug}`} className={category === f.slug ? 'font-medium text-fg' : 'hover:text-fg'}>
                {f.name}
              </Link>
            ))}
          </>
        }
      />
      <section className="grid gap-4 lg:grid-cols-[3fr_1fr]">
        <Card className="overflow-hidden">
          <CardHeader title="Trending assets" subtitle="Ranked by trending score; momentum breakdown per horizon" />
          <AssetList items={trending} rank columns={['riv', 'trending', 'change1d', 'change7d', 'change30d', 'sales30d', 'listings', 'liquidity']} metric="trending" emptyTitle="No trending scores yet" emptyDescription="Trending needs several days of valuations, sales and listing history." />
        </Card>
        <Card>
          <CardHeader title="Trending categories" subtitle="Average trending score" />
          {cats.length ? (
            <ul className="divide-y divide-border text-[12px]">
              {cats.map((c) => (
                <li key={c.categorySlug}>
                  <Link href={`/markets/${c.categorySlug}`} className="flex items-center justify-between px-4 py-2 hover:bg-sunken">
                    <span className="font-medium text-fg">{catName(c.categorySlug)}</span>
                    <span className="num flex items-center gap-2 text-muted">
                      {c.trending.toFixed(1)} · {fmtNum(c.assets)} <Delta value={c.momentum} />
                    </span>
                  </Link>
                </li>
              ))}
            </ul>
          ) : (
            <EmptyState title="No data yet" className="py-8" />
          )}
        </Card>
      </section>
      <section className="mt-4 grid gap-4 lg:grid-cols-2">
        <Card className="overflow-hidden">
          <CardHeader title="Top gainers · 7D" />
          <AssetList items={gainers7} columns={['riv', 'change7d', 'sales30d']} emptyTitle="No 7-day movers" emptyDescription="Requires ≥3 sales per asset and a week of history." />
        </Card>
        <Card className="overflow-hidden">
          <CardHeader title="Top gainers · 30D" />
          <AssetList items={gainers30} columns={['riv', 'change30d', 'sales30d']} emptyTitle="No 30-day movers" emptyDescription="Requires ≥3 sales per asset and a month of history." />
        </Card>
      </section>
    </div>
  );
}