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 { TileSkeleton } from '@/components/market/asset-tile';
import { attachGuidePrices, getCategoryThumbnails, getLatestObservationsFeed, rankedAssets } from '@/lib/queries/assets';
import { fmtNum } from '@/lib/format';
import { Card, Delta, Skeleton, TableSkeleton } from '@/components/ui/primitives';
import { getLatestSales, getSiteStats } from '@/lib/queries/site';
import { getIndexSeries, listIndices } from '@/lib/queries/indices';
import { getCategorySparklines, getMarketRows } from '@/lib/queries/markets';
import { getTopSales, listLots, listRadar } from '@/lib/queries/market-lists';
import { LineChart } from '@/components/charts/line-chart';

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>
      {/* §195 hierarchy: hero + search → live stats (in hero) → RARE tape → global index → market snapshot →
          trending → record sales → Rare Radar → value opportunities → ending auctions → latest sales → categories → long tail */}
      <div className="flex flex-col gap-10 px-4 pt-8 sm:px-6">
        <Suspense fallback={<Skeleton className="h-72 w-full" />}>
          <FlagshipPanel />
        </Suspense>
        <Suspense fallback={<TableSkeleton rows={8} />}>
          <Snapshot />
        </Suspense>
        <Suspense fallback={<RailFallback />}>
          <Discovery />
        </Suspense>
        <Suspense fallback={<TableSkeleton rows={10} />}>
          <Latest />
        </Suspense>
        <Suspense fallback={<Skeleton className="h-40" />}>
          <Categories />
        </Suspense>
        <Suspense fallback={<RailFallback />}>
          <LongTail />
        </Suspense>
      </div>
    </div>
  );
}

function RailFallback() {
  return (
    <div className="flex flex-col gap-10">
      {[0, 1].map((k) => (
        <div key={k}>
          <Skeleton className="mb-3 h-5 w-40" />
          <div className="rail lg:mx-0 lg:grid lg:grid-cols-4 lg:overflow-visible lg:px-0 xl:grid-cols-6 2xl:grid-cols-8 lg:[&>*]:w-auto">
            {Array.from({ length: 8 }).map((_, i) => (
              <TileSkeleton key={i} />
            ))}
          </div>
        </div>
      ))}
    </div>
  );
}

async function Categories() {
  const markets = await getMarketRows();
  const families = markets.filter((r) => r.counts.assets > 0);
  const [thumbs, sparklines] = await Promise.all([getCategoryThumbnails(markets.map((r) => r.node.slug)), getCategorySparklines(markets.map((r) => r.node.slug), 90)]);
  return (
    <section>
      <div className="mb-3 flex items-end justify-between gap-3">
        <div>
          <h2 className="t-title text-fg">Browse by category</h2>
          <p className="mt-0.5 text-xs text-muted">Live counts from the canonical tables · 90-day category index where published</p>
        </div>
        <Link href="/categories" className="num shrink-0 text-xs font-medium text-muted hover:text-fg">
          {fmtNum(families.length)} of {fmtNum(markets.length)} families with data →
        </Link>
      </div>
      <CategoryGrid rows={families} thumbs={thumbs} sparklines={sparklines} limit={12} mobileLimit={6} />
    </section>
  );
}

async function FlagshipPanel() {
  const indices = await listIndices();
  const rare = indices.find((i) => i.isFlagship);
  const subs = indices.filter((i) => !i.isFlagship);
  const published = subs.filter((i) => i.latest);
  const building = subs.filter((i) => !i.latest).sort((a, b) => b.pricedAssets / b.minConstituents - a.pricedAssets / a.minConstituents);
  const series = rare ? await getIndexSeries(rare.id, 365) : [];
  return (
    <section className="grid gap-4 lg:grid-cols-[3fr_2fr]">
      <Card className="p-4">
        <div className="flex flex-wrap items-baseline justify-between gap-3">
          <div>
            <p className="t-label">RARE · Global Collectibles Index</p>
            {rare?.latest ? (
              <p className="mt-1 flex flex-wrap items-baseline gap-x-2 gap-y-0.5">
                <span className="num text-2xl font-semibold text-fg">{rare.latest.value.toFixed(2)}</span>
                <Delta value={rare.change1d} arrow className="text-sm" />
                <span className="text-[11px] text-subtle">1D</span>
                <Delta value={rare.change30d} className="text-sm" />
                <span className="text-[11px] text-subtle">30D</span>
              </p>
            ) : (
              <p className="mt-1 text-sm text-muted">Transaction-weighted across published subindices · base 1,000 on 2024-01-01 · <Link href="/methodology#indices" className="underline-offset-4 hover:text-fg hover:underline">methodology</Link></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>
      </Card>
      <Card className="flex flex-col p-4">
        <div className="flex items-baseline justify-between">
          <p className="t-label">Subindices</p>
          <Link href="/rareindex" className="text-xs font-medium text-muted hover:text-fg">
            All indices →
          </Link>
        </div>
        {published.length ? (
          <ul className="mt-2 divide-y divide-border">
            {published.slice(0, 8).map((i) => (
              <li key={i.ticker}>
                <Link href={`/rareindex/${i.ticker}`} className="flex min-h-[40px] items-center justify-between gap-3 text-[12px] hover:bg-sunken">
                  <span className="flex min-w-0 items-center gap-2">
                    <span className="inline-block h-2 w-2 shrink-0 rounded-[2px]" style={{ background: i.color ?? 'var(--ri-index)' }} />
                    <span className="mono-num font-semibold text-fg">{i.ticker}</span>
                    <span className="truncate text-muted">{i.name.replace('RareIndex ', '')}</span>
                  </span>
                  <span className="num flex shrink-0 items-center gap-3">
                    <span className="text-muted">{i.latest!.value.toFixed(2)}</span>
                    <Delta value={i.change1d} arrow />
                  </span>
                </Link>
              </li>
            ))}
          </ul>
        ) : null}
        {building.length ? (
          <div className="mt-3 border-t border-border pt-3">
            <p className="t-caption mb-1.5 flex items-baseline justify-between"><span>In development · priced constituents vs. minimum</span><Link href="/methodology#indices" className="text-subtle hover:text-fg">Why →</Link></p>
            <ul className="grid grid-cols-2 gap-x-4 gap-y-1.5">
              {building.slice(0, 8).map((i) => {
                const pct = Math.min(100, Math.round((i.pricedAssets / Math.max(1, i.minConstituents)) * 100));
                return (
                  <li key={i.ticker} className="text-[11px]">
                    <span className="flex items-center justify-between">
                      <span className="mono-num text-muted">{i.ticker.replace('RARE-', '')}</span>
                      <span className="num text-subtle">
                        {i.pricedAssets}/{i.minConstituents}
                      </span>
                    </span>
                    <span className="mt-0.5 block h-1 w-full overflow-hidden rounded-full bg-inset">
                      <span className="block h-full rounded-full bg-index" style={{ width: `${pct}%` }} />
                    </span>
                  </li>
                );
              })}
            </ul>
          </div>
        ) : null}
      </Card>
    </section>
  );
}

/** Market snapshot (§195): the category table right under the global index. */
async function Snapshot() {
  const markets = await getMarketRows();
  return <MarketInsights rows={markets} />;
}

/** Long tail below the fold: catalogue additions and community signals. */
async function LongTail() {
  const [newest, watched] = await Promise.all([rankedAssets('newest', { limit: 8 }), rankedAssets('watched', { limit: 8 })]);
  await attachGuidePrices(newest);
  return (
    <>
      <AssetRail title="Newly Added" subtitle="Latest canonical assets — guide prices labelled, RIV when available" href="/explore?sort=newest" items={newest} metric="guide" />
      {watched.length ? <AssetRail title="Most Watched" subtitle="Assets on the most watchlists" href="/explore?sort=trending" items={watched} metric="watchers" /> : null}
    </>
  );
}

async function Discovery() {
  const [trending, movers, losers, records, radar, lots, 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('opportunity', { limit: 8 }),
    rankedAssets('newest_priced', { limit: 8 }),
    rankedAssets('documented', { limit: 8 }),
    rankedAssets('with_sales', { limit: 8 }),
  ]);
  await Promise.all([attachGuidePrices(documented), attachGuidePrices(trending), attachGuidePrices(newestPriced)]);
  // 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 publishes once momentum history exists', items: newestPriced, metric: 'riv' as const, href: '/explore?has=valuation&sort=riv' }
      : { title: 'Best-documented assets', subtitle: 'Images plus sales or guide prices', 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: 'latestSale' as const, href: '/sales' }
      : null;
  return (
    <>
      <AssetRail title={trendingRail.title} subtitle={trendingRail.subtitle} href={trendingRail.href} items={trendingRail.items} metric={trendingRail.metric} priority />
      {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 />
      {opportunities.length ? <AssetRail title="Value Opportunities" subtitle="Asks ≥ 10 % below a transaction-based RIV of the same variant (≥ 5 sales, medium+ confidence). Analytical data, not advice; implausible asks are held back as data anomalies." href="/listings?sort=discount&disc=10" items={opportunities} metric="opportunity" /> : null}
      <LotsRail items={lots} hideWhenEmpty />
    </>
  );
}

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