import type { Metadata } from "next";
import Link from "next/link";
import { InstrumentTable } from "@/components/market/instrument-table";
import { Page, PageHeader, Section, Stat } from "@/components/ui/section";
import { api } from "@/lib/api";
import type { MarketsOverview } from "@/lib/types";

export const metadata: Metadata = { title: "Markets overview", description: "Indices, equities, crypto, forex, rates and commodities — one canonical, multi-source view.", alternates: { canonical: "/markets" } };
export const dynamic = "force-dynamic";

export default async function MarketsPage() {
  const m = await api<MarketsOverview>("/v1/markets");
  const open = m.exchanges.filter((e) => e.status.state === "OPEN");
  const b = m.breadth;
  return (
    <Page wide>
      <PageHeader kicker="Markets" title="Global overview" lead="Canonical quotes across asset classes. Each table streams live where a real-time source exists; otherwise values show their delayed, at-close or end-of-day status." />
      <div className="grid grid-cols-2 gap-4 rounded-md border border-rule bg-surface px-4 py-4 sm:grid-cols-4">
        <Stat label="Venues open now" value={`${open.length} / ${m.exchanges.length}`} sub={open.slice(0, 3).map((e) => e.name.split(" ")[0]).join(", ") || "none trading"} />
        <Stat label="US equity breadth" value={b.instruments ? `${b.advancers} ▲ ${b.decliners} ▼` : "—"} sub={b.instruments ? `${b.instruments} quoted · median ${b.median_change_percent?.toFixed(2)}%` : "no session data"} tone={b.advancers > b.decliners ? "pos" : b.decliners > b.advancers ? "neg" : undefined} />
        <Stat label="Session highs / lows" value={`${b.new_session_highs} / ${b.new_session_lows}`} sub="live instruments at extremes" />
        <Stat label="Sections" value="7" sub="indices · stocks · ETFs · crypto · FX · rates · commodities" />
      </div>
      <Section title="Indices" href="/indices" hint="15-min delayed (Cboe) · at close outside the session">
        <InstrumentTable rows={m.indices} compact showExchange={false} />
      </Section>
      <div className="grid grid-cols-1 [&>*]:min-w-0 gap-6 lg:grid-cols-2">
        <Section title="Top gainers · US equities" href="/stocks?sort=-change">
          <InstrumentTable rows={m.gainers} compact />
        </Section>
        <Section title="Top losers · US equities" href="/stocks?sort=change">
          <InstrumentTable rows={m.losers} compact defaultSort="change" />
        </Section>
      </div>
      <Section title="Crypto" href="/crypto" hint="real-time consensus of public venue feeds">
        <InstrumentTable rows={m.crypto} liveClass="CRYPTO" compact showExchange />
      </Section>
      <div className="grid grid-cols-1 [&>*]:min-w-0 gap-6 lg:grid-cols-2">
        <Section title="Forex" href="/forex" hint="official reference rates">
          <InstrumentTable rows={m.forex} compact showExchange={false} defaultSort="symbol" />
        </Section>
        <Section title="Rates & yields" href="/rates" hint="percent · end of day">
          <InstrumentTable rows={m.rates} compact showExchange={false} defaultSort="symbol" />
        </Section>
      </div>
      <Section title="Commodities & futures" href="/commodities" hint="continuous front month · settlement">
        <InstrumentTable rows={m.commodities} compact showExchange={false} defaultSort="symbol" />
      </Section>
      <p className="mt-6 text-xs text-ink-3">
        Prices are aggregations of independent observations. Read the <Link href="/methodology" className="text-accent hover:underline">methodology</Link> and the <Link href="/licensing" className="text-accent hover:underline">data rights</Link> page for what each status means.
      </p>
    </Page>
  );
}