import Link from "next/link";
import { ChangesPanel } from "@/components/market/changes-panel";
import { HealthPanel } from "@/components/market/health-panel";
import { InstrumentTable } from "@/components/market/instrument-table";
import { LiveEvents } from "@/components/market/live-events";
import { PulseRow } from "@/components/market/pulse-grid";
import { RedundancyPanel } from "@/components/market/redundancy-panel";
import { LiveTape } from "@/components/market/tape";
import { TelemetryStrip } from "@/components/market/telemetry-strip";
import { WorldMap } from "@/components/market/world-map";
import { SearchButton } from "@/components/layout/search-dialog";
import { Section } from "@/components/ui/section";
import { api, apiOptional } from "@/lib/api";
import type { Changes, DataHealth, MarketEvent, MarketsOverview, Stats } from "@/lib/types";

export const dynamic = "force-dynamic";

export default async function HomePage() {
  const [stats, markets, events, health, changes] = await Promise.all([
    api<Stats>("/v1/stats"),
    api<MarketsOverview>("/v1/markets"),
    apiOptional<MarketEvent[]>("/v1/events?limit=30"),
    apiOptional<DataHealth>("/v1/data-health"),
    apiOptional<Changes>("/v1/changes?window=1h"),
  ]);
  const movers = [...markets.gainers.slice(0, 5), ...markets.losers.slice(0, 5)];
  return (
    <div className="mx-auto max-w-[1440px] px-3 sm:px-5">
      {/* Hero */}
      <section className="pb-6 pt-8 sm:pt-12">
        <p className="text-[11px] font-medium uppercase tracking-[0.14em] text-ink-3">Market Atlas</p>
        <h1 className="mt-2 max-w-3xl text-3xl font-semibold leading-[1.05] tracking-tight sm:text-5xl">The live map of global markets.</h1>
        <p className="mt-3 max-w-2xl text-[15px] text-ink-2 sm:text-base">
          Thousands of instruments. Independent sources compared in real time. One continuously updating, provenance-backed market graph — every quote carries its freshness, its sources and its confidence.
        </p>
        <div className="mt-5 flex flex-wrap items-center gap-2">
          <SearchButton className="h-12 !text-[15px] sm:min-w-[360px]" />
          <Link href="/live" className="inline-flex h-12 items-center gap-2 rounded-md bg-ink px-4 text-sm font-medium text-canvas hover:opacity-90">
            <span className="live-dot inline-block h-2 w-2 rounded-full bg-positive" /> Open the live feed
          </Link>
          <Link href="/methodology" className="inline-flex h-12 items-center px-3 text-sm text-ink-2 hover:text-ink">
            How prices are formed →
          </Link>
        </div>
        <TelemetryStrip initial={stats} className="mt-7" />
      </section>

      {/* Pulse */}
      <Section title="Global market pulse" hint="canonical quotes · live where sources allow, delayed or end-of-day otherwise" href="/markets">
        <PulseRow title="Indices" href="/indices" items={markets.indices} />
        <PulseRow title="Crypto" href="/crypto" items={markets.crypto} />
        <PulseRow title="Forex" href="/forex" items={markets.forex} />
        <PulseRow title="Rates & yields" href="/rates" items={markets.rates} />
        <PulseRow title="Commodities & futures" href="/commodities" items={markets.commodities} />
        <PulseRow title="Equities" href="/stocks" items={markets.equities} className="border-b-0" />
      </Section>

      {/* Source redundancy — the mesh is the product */}
      {stats.coverage && (
        <div className="mt-8 grid grid-cols-1 [&>*]:min-w-0 gap-6 lg:grid-cols-[1fr_1.1fr]">
          <RedundancyPanel coverage={stats.coverage} prominent className="!mt-0" />
          <div className="flex flex-col justify-center rounded-md border border-rule bg-surface p-4 text-sm text-ink-2">
            <h3 className="text-[11px] font-medium uppercase tracking-wide text-ink-3">One instrument → many observers → one canonical state</h3>
            <p className="mt-2">Market Atlas does not trust a quote. Each instrument is observed through independent paths — exchange feeds, official publishers, public quote pages — and only comparable observations are compared: a live trade is never measured against an official fixing or last week&apos;s close.</p>
            <p className="mt-2">Real markets <span className="font-medium text-ink">vote</span>; stablecoin markets and crosses <span className="font-medium text-ink">confirm</span>; restricted-rights sources <span className="font-medium text-ink">validate</span> without ever setting or showing a value. Sources that statistically mirror each other are counted as one family.</p>
            <p className="mt-3 text-xs text-ink-3">
              Targets: tier A majors ≥ 3 independent families and 5 observations · tier B ≥ 2 / 3 · tier C 1 / 2 · tier D one official source. <Link href="/coverage" className="text-accent hover:underline">See the expansion queue →</Link>
            </p>
          </div>
        </div>
      )}

      {/* Tape + events */}
      <div className="mt-8 grid grid-cols-1 [&>*]:min-w-0 gap-6 lg:grid-cols-[1.1fr_1fr]">
        <Section title="Live tape" hint="every canonical price change" className="!mt-0">
          <LiveTape />
        </Section>
        <Section title="Live events" hint="halts, filings, moves, source incidents" href="/events" className="!mt-0">
          <LiveEvents initial={events ?? []} max={18} dense className="max-h-[470px] overflow-y-auto" />
        </Section>
      </div>

      {/* Map */}
      <Section title="World market map" hint="venues by session state · hover a marker for local time" href="/exchanges" hrefLabel="All exchanges">
        <WorldMap exchanges={markets.exchanges} />
      </Section>

      {/* Movers + health + changes */}
      <div className="mt-8 grid grid-cols-1 [&>*]:min-w-0 gap-6 lg:grid-cols-[1.3fr_1fr]">
        <Section title="Largest moves · US equities" hint="Cboe delayed quotes, 15 min" href="/stocks" className="!mt-0">
          <InstrumentTable rows={movers} compact defaultSort="change" emptyText="No equity quotes yet — the US session has not produced observations." />
          {markets.breadth.instruments > 0 && (
            <p className="mt-2 text-xs text-ink-3">
              Breadth: <span className="text-positive">{markets.breadth.advancers} advancing</span> · <span className="text-negative">{markets.breadth.decliners} declining</span> · median {markets.breadth.median_change_percent?.toFixed(2)}% across {markets.breadth.instruments} quoted names.
            </p>
          )}
        </Section>
        <div className="space-y-4">
          {health && <HealthPanel health={health} />}
          {changes && <ChangesPanel changes={changes} />}
        </div>
      </div>

      <section className="mt-12 grid grid-cols-1 [&>*]:min-w-0 gap-6 border-t border-rule pt-8 text-sm text-ink-2 md:grid-cols-3">
        <div>
          <h3 className="font-semibold text-ink">Multi-source by design</h3>
          <p className="mt-1">Prices are a weighted median of comparable, independent observations — one vote per upstream family, proxies and validators as confirmations. Open “Why this price?” on any instrument to see the full source coverage matrix.</p>
        </div>
        <div>
          <h3 className="font-semibold text-ink">Honest freshness</h3>
          <p className="mt-1">Live, delayed, at-close, end-of-day or stale — every value is labelled with its status and the age of its newest observation. Nothing stale is ever shown as live.</p>
        </div>
        <div>
          <h3 className="font-semibold text-ink">A growing memory</h3>
          <p className="mt-1">Every observation, event and filing is recorded with its provenance. The historical dataset grows every second the atlas runs.</p>
        </div>
      </section>
    </div>
  );
}