import { Suspense } from 'react';
import Link from 'next/link';
import { Hero } from '@/components/home/hero';
import { IndexTape } from '@/components/market/index-strip';
import { AssetRail, LatestTransactions, LotsRail, MarketInsights, RadarRail, SalesRail } from '@/components/home/sections';
import { CategoryGrid } from '@/components/market/category-grid';
import { attachGuidePrices, getCategoryThumbnails, getLatestObservationsFeed } from '@/lib/queries/assets';
import { fmtNum } from '@/lib/format';
import { Skeleton } from '@/components/ui/primitives';
import { getLatestSales, getSiteStats } from '@/lib/queries/site';
import { listIndices } from '@/lib/queries/indices';
import { rankedAssets } from '@/lib/queries/assets';
import { getMarketRows } from '@/lib/queries/markets';
import { getTopSales, listLots, listRadar } from '@/lib/queries/market-lists';
import { LineChart } from '@/components/charts/line-chart';
import { getIndexSeries } from '@/lib/queries/indices';

export const revalidate = 120;

export default async function HomePage() {
  const [stats, indices] = await Promise.all([getSiteStats(), listIndices()]);
  return (
    <div className="-mx-4 sm:-mx-6">
      <div className="px-4 sm:px-6">
        <Hero stats={stats} />
      </div>
      <div className="mt-8">
        <IndexTape indices={indices} />
      </div>
      <div className="px-4 pt-6 sm:px-6">
        <Suspense fallback={<Skeleton className="h-64 w-full" />}>
          <FlagshipPanel />
        </Suspense>
        <Suspense fallback={<div className="mt-4 grid gap-4 md:grid-cols-2 xl:grid-cols-3">{Array.from({ length: 6 }).map((_, i) => <Skeleton key={i} className="h-72" />)}</div>}>
          <Discovery />
        </Suspense>
        <Suspense fallback={<Skeleton className="mt-4 h-48" />}>
          <Latest />
        </Suspense>
      </div>
    </div>
  );
}

async function FlagshipPanel() {
  const indices = await listIndices();
  const rare = indices.find((i) => i.isFlagship);
  const subs = indices.filter((i) => !i.isFlagship && i.latest);
  const series = rare ? await getIndexSeries(rare.id, 365) : [];
  return (
    <section className="grid gap-4 lg:grid-cols-[2fr_1fr]">
      <div className="card p-4">
        <div className="flex items-baseline justify-between gap-3">
          <div>
            <h2 className="text-sm font-semibold text-fg">RARE · RareIndex Global Collectibles Index</h2>
            <p className="text-xs text-muted">Chain-linked, equal-weighted across subindices · base 1,000 on 2024-01-01</p>
          </div>
          <Link href="/rareindex/RARE" className="text-xs font-medium text-muted hover:text-fg">
            Index detail →
          </Link>
        </div>
        <div className="mt-3">
          <LineChart ariaLabel="RARE index over the last year" height={220} series={[{ id: 'rare', label: 'RARE', kind: 'area', points: series.map((p) => ({ x: p.date, y: p.value })) }]} emptyLabel={rare ? `Index building — publishes once ${rare.minConstituents} priced constituents exist (${rare.pricedAssets} today)` : 'Index not configured'} />
        </div>
      </div>
      <div className="card p-4">
        <h2 className="text-sm font-semibold text-fg">Subindices</h2>
        <p className="text-xs text-muted">Daily change · latest published value</p>
        {subs.length ? (
          <ul className="mt-2 divide-y divide-border">
            {subs.slice(0, 10).map((i) => (
              <li key={i.ticker}>
                <Link href={`/rareindex/${i.ticker}`} className="flex items-center justify-between py-1.5 text-[12px] hover:bg-sunken">
                  <span className="flex items-center gap-2">
                    <span className="inline-block h-2 w-2 rounded-full" style={{ background: i.color ?? 'var(--ri-index)' }} />
                    <span className="font-medium text-fg">{i.ticker}</span>
                  </span>
                  <span className="num flex items-center gap-3">
                    <span className="text-muted">{i.latest!.value.toFixed(2)}</span>
                    <span className={i.change1d === null ? 'text-subtle' : i.change1d >= 0 ? 'text-gain' : 'text-loss'}>{i.change1d === null ? '—' : `${i.change1d >= 0 ? '+' : ''}${(i.change1d * 100).toFixed(2)}%`}</span>
                  </span>
                </Link>
              </li>
            ))}
          </ul>
        ) : (
          <p className="mt-6 text-center text-xs text-subtle">
            No subindex has reached its minimum constituent count yet.
            <br />
            <Link href="/rareindex" className="underline hover:text-fg">
              See build progress
            </Link>
          </p>
        )}
      </div>
    </section>
  );
}

async function Discovery() {
  const [trending, movers, losers, records, radar, lots, watched, newest, markets, opportunities, newestPriced, documented, withSales] = await Promise.all([
    rankedAssets('trending', { limit: 8 }),
    rankedAssets('gainers', { limit: 8, window: '7d' }),
    rankedAssets('losers', { limit: 8, window: '7d' }),
    getTopSales(8),
    listRadar({ limit: 8 }),
    listLots({ endingWithinHours: 72, status: null, limit: 8 }),
    rankedAssets('watched', { limit: 8 }),
    rankedAssets('newest', { limit: 8 }),
    getMarketRows(),
    rankedAssets('opportunity', { limit: 8 }),
    rankedAssets('newest_priced', { limit: 8 }),
    rankedAssets('documented', { limit: 8 }),
    rankedAssets('with_sales', { limit: 8 }),
  ]);
  await Promise.all([attachGuidePrices(newest), attachGuidePrices(documented)]);
  const families = markets.filter((r) => r.counts.assets > 0);
  const thumbs = await getCategoryThumbnails(markets.map((r) => r.node.slug));
  // Honest fallbacks while valuations are still being computed: each rail states what it shows.
  const trendingRail = trending.length
    ? { title: 'Trending Now', subtitle: 'Price × volume × listing momentum', items: trending, metric: 'trending' as const, href: '/trending' }
    : newestPriced.length
      ? { title: 'Recently valued', subtitle: 'Newest RareIndex Valuations (trending needs momentum history)', items: newestPriced, metric: 'riv' as const, href: '/explore?has=valuation&sort=riv' }
      : { title: 'Best-documented assets', subtitle: 'Images plus sales or guide prices — trending publishes once momentum history exists', items: documented, metric: 'guide' as const, href: '/explore?has=observations' };
  const moversItems = movers.length ? movers : losers;
  const moversRail = moversItems.length
    ? { title: 'Biggest Movers', subtitle: '7-day change in RareIndex Valuation', items: moversItems, metric: 'change7d' as const, href: '/explore?sort=change7d' }
    : withSales.length
      ? { title: 'Latest sold assets', subtitle: 'Most recent verified sale per asset — movers need a 7-day valuation history', items: withSales, metric: 'riv' as const, href: '/sales' }
      : null;
  return (
    <>
      <section className="mt-6">
        <div className="mb-2 flex items-baseline justify-between">
          <h2 className="text-base font-semibold tracking-tight text-fg">Browse by category</h2>
          <span className="num text-[11px] text-muted">
            {fmtNum(families.length)} families with data ·{' '}
            <Link href="/categories" className="hover:text-fg">
              all {fmtNum(markets.length)} →
            </Link>
          </span>
        </div>
        <CategoryGrid rows={markets} thumbs={thumbs} limit={12} />
      </section>
      <section className="mt-6 grid gap-4 md:grid-cols-2 xl:grid-cols-3">
        <AssetRail title={trendingRail.title} subtitle={trendingRail.subtitle} href={trendingRail.href} items={trendingRail.items} metric={trendingRail.metric} />
        {moversRail ? <AssetRail title={moversRail.title} subtitle={moversRail.subtitle} href={moversRail.href} items={moversRail.items} metric={moversRail.metric} /> : null}
        <SalesRail title="Record Sales" subtitle="Highest verified transactions" href="/records" items={records} hideWhenEmpty />
        <RadarRail items={radar} hideWhenEmpty />
        <LotsRail items={lots} hideWhenEmpty />
        <AssetRail title="Newly Added" subtitle="Latest canonical assets — guide prices labelled, RIV when available" href="/explore?sort=newest" items={newest} metric="guide" />
        <MarketInsights rows={markets} />
        {watched.length ? <AssetRail title="Most Watched" subtitle="Assets on the most watchlists" href="/explore?sort=trending" items={watched} metric="watchers" /> : null}
        {opportunities.length ? <AssetRail title="Value Opportunities" subtitle="Listings materially below RIV (analytical, not advice)" href="/listings?sort=discount" items={opportunities} metric="opportunity" /> : null}
      </section>
    </>
  );
}

async function Latest() {
  const items = await getLatestSales(12);
  const observations = items.length ? [] : await getLatestObservationsFeed(12);
  return (
    <section className="mt-6">
      <LatestTransactions items={items} observations={observations} />
    </section>
  );
}