import Link from "next/link";
import { LiveFeed } from "@/components/live-feed";
import { LiveStrip } from "@/components/live-strip";
import { CoverageRail } from "@/components/coverage-rail";
import { AnomalyRail, BreakingRail, ClustersPanel, SilentRail, TrendingPanel } from "@/components/rail";
import { EventRow } from "@/components/event-row";
import { Empty, Panel } from "@/components/ui";
import { api } from "@/lib/api";
import { agoIso } from "@/lib/format";

export const dynamic = "force-dynamic";

/**
 * Homepage (spec §64, §94): hero line · live system strip · live feed · right rail (breaking now,
 * trending, anomalous) · lower area (clusters, silent changes, infrastructure pulse). One coherent
 * data surface; the product sells the product.
 */
export default async function HomePage() {
  const [stats, events, trending, clusters, breaking, explore, infra] = await Promise.all([
    api.stats(),
    api.events({ limit: 60 }),
    api.trending(24, 10),
    api.clusters(30, 48),
    api.breakingDesk(),
    api.explore(),
    api.events({ limit: 8, group: "reliability", after: agoIso(12 * 3600e3) }),
  ]);
  return (
    <>
      <div className="mb-3 flex flex-wrap items-baseline justify-between gap-2">
        <h1 className="text-[16px] font-semibold tracking-tight">
          The Web is changing. <span className="text-fg-muted">We are watching.</span>
        </h1>
        <p className="text-[12px] text-fg-subtle">WebSensor continuously watches the public web for meaningful changes, preserving evidence and connecting signals into real-world events.</p>
      </div>
      <LiveStrip initial={stats} />
      <div className="grid grid-cols-1 gap-4 xl:grid-cols-[1fr_340px] [&>*]:min-w-0">
        <LiveFeed initial={events.items} initialCursor={events.nextCursor} />
        <aside className="flex flex-col gap-4">
          <BreakingRail items={breaking?.breaking_now ?? []} developing={breaking?.developing ?? []} />
          <TrendingPanel items={trending.items} />
          <AnomalyRail items={explore?.unusual_activity ?? []} />
          <CoverageRail />
        </aside>
      </div>
      <div className="mt-4 grid grid-cols-1 gap-4 lg:grid-cols-3 [&>*]:min-w-0">
        <ClustersPanel items={clusters.items} title="Event clusters · 48 h" />
        <SilentRail items={explore?.silent_changes ?? []} />
        <Panel title="Infrastructure pulse · 12 h" dense action={<Link href="/live?group=reliability" className="text-[11px] text-fg-subtle hover:text-fg">live →</Link>}>
          {infra.items.length ? infra.items.slice(0, 6).map((e) => <EventRow key={e.id} ev={e} />) : <Empty>No outage, incident or maintenance signal in the last 12 h.</Empty>}
        </Panel>
      </div>
    </>
  );
}