import Link from 'next/link';
import { HistoryChart } from '@/components/charts/HistoryChart';
import { Gauge } from '@/components/gauge/Gauge';
import { Clock } from '@/components/home/Clock';
import { ComponentRows } from '@/components/home/ComponentRows';
import { Fronts } from '@/components/home/Fronts';
import { IncidentsList } from '@/components/home/IncidentsList';
import { ProbeStrip } from '@/components/home/ProbeStrip';
import { RegionsTable } from '@/components/home/RegionsTable';
import { Ticker } from '@/components/home/Ticker';
import { MapIsland } from '@/components/map/MapIsland';
import { Section } from '@/components/ui/primitives';
import { apiTry } from '@/lib/api';
import { TAGLINE } from '@/lib/site';
import type { Country, Front, GlobalPressure, History, IncidentList, Latency, Probe, Region, Ticker as TickerT } from '@/lib/types';

export const dynamic = 'force-dynamic';

export default async function HomePage() {
  const [global, ticker, regions, countries, fronts, incidents, probes, history, latency] = await Promise.all([
    apiTry<GlobalPressure>('/api/v1/pressure/global'),
    apiTry<TickerT>('/api/v1/ticker'),
    apiTry<{ regions: Region[] }>('/api/v1/pressure/regions'),
    apiTry<{ countries: Country[] }>('/api/v1/pressure/countries'),
    apiTry<{ fronts: Front[] }>('/api/v1/fronts'),
    apiTry<IncidentList>('/api/v1/incidents?status=active&limit=20'),
    apiTry<{ probes: Probe[] }>('/api/v1/probes'),
    apiTry<History>('/api/v1/pressure/history?scope_type=global&range=24h'),
    apiTry<Latency>('/api/v1/latency'),
  ]);

  return (
    <div className="pb-8">
      {/* ---- above the fold */}
      <div className="grid-texture absolute inset-x-0 top-[var(--header-h)] -z-10 h-[520px]" aria-hidden="true" />
      <section className="grid grid-cols-[minmax(0,1fr)] gap-8 pt-6 lg:grid-cols-[minmax(0,7fr)_minmax(0,5fr)] lg:gap-12 lg:pt-8">
        <div className="min-w-0">
          <p className="mb-6 text-[12.5px] text-ink-2">
            <span className="text-ink">InternetPressure.io</span> — {TAGLINE}.
          </p>
          <Gauge initial={global} />
        </div>
        <div className="min-w-0 lg:pt-8">
          <p className="label mb-2">Components</p>
          <ComponentRows initial={global} />
          <p className="mt-2 text-[11px] text-ink-3">
            Score 0–100 per component, weighted into the index. Every row decomposes into signals in the{' '}
            <Link href="/methodology" className="text-accent hover:underline">
              methodology
            </Link>
            .
          </p>
        </div>
      </section>

      <Section
        label="Live map"
        right={
          <>
            {countries?.countries.length ?? 0} countries observed · {probes?.probes.length ?? 0} probes · {fronts?.fronts.length ?? 0} fronts
          </>
        }
        className="mt-6"
      >
        <MapIsland initial={{ regions: regions?.regions ?? null, countries: countries?.countries ?? null, probes: probes?.probes ?? null, fronts: fronts?.fronts ?? null, incidents: incidents?.incidents ?? null, matrix: latency?.matrix ?? null }} />
      </Section>

      <div className="grid grid-cols-[minmax(0,1fr)] gap-x-10 lg:grid-cols-2">
        <Section label="Active Pressure Fronts" right={<Link href="/methodology#fronts" className="hover:text-ink">what is a front?</Link>} className="min-w-0">
          <Fronts initial={fronts?.fronts ?? null} />
        </Section>
        <Section label="Active incidents" right={<Link href="/incidents" className="hover:text-ink">all incidents →</Link>} className="min-w-0">
          <IncidentsList initial={incidents?.incidents ?? null} />
        </Section>
      </div>

      <Section label="Live ticker">
        <Ticker initial={ticker} />
      </Section>

      <Section label="Global Internet Clock">
        <Clock initial={ticker} />
      </Section>

      <Section label="Regions" right={<span>source view (from probes) blended with destination view (toward anchored targets)</span>}>
        <RegionsTable initial={regions?.regions ?? null} />
      </Section>

      <Section label="24 h history" right={<Link href="/history" className="hover:text-ink">history explorer →</Link>}>
        <HistoryChart initial={history} scopeType="global" height={300} />
      </Section>

      <Section label="Probe network" right={<Link href="/probes" className="hover:text-ink">all probes →</Link>}>
        <ProbeStrip probes={probes?.probes ?? null} />
      </Section>
    </div>
  );
}