import type { Metadata } from "next";
import Link from "next/link";
import { EventRow } from "@/components/event-row";
import { BreakingRail } from "@/components/rail";
import { Empty, PageHeader, Panel, Sparkline, Stat } from "@/components/ui";
import { api } from "@/lib/api";
import { fmtInt, GROUP_LABELS, relTime, CHANNELS } from "@/lib/format";

export const dynamic = "force-dynamic";
export const metadata: Metadata = { title: "Pulse", description: "What is changing on the Internet right now: global activity, breaking events, fastest-rising entities, cyber incidents, AI developments, market and government events, infrastructure incidents, silent changes." };

/** Real-time summary of the Internet (spec §39). */
export default async function PulsePage() {
  const p = await api.pulse();
  if (!p) return <Empty>Pulse is warming up.</Empty>;
  const activity = p.activity ?? [];
  const evSeries = activity.map((a) => Number(a.events));
  const chSeries = activity.map((a) => Number(a.changes));
  const groups = Object.entries(p.by_group_24h ?? {}).sort((a, b) => b[1] - a[1]);
  const maxG = Math.max(1, ...groups.map(([, n]) => n));
  const deskLabel = (d: string): string => CHANNELS.find((c) => c.key === d)?.label ?? d;
  return (
    <>
      <PageHeader compact kicker="Right now" title="Pulse" description="A live summary of what is changing on the public web — generated from real observations, refreshed every ten seconds." />
      <div className="panel mb-4 grid grid-cols-2 divide-x divide-y divide-line sm:grid-cols-3 lg:grid-cols-6 lg:divide-y-0">
        <Stat label="Events · 1 h" value={fmtInt(p.totals?.events_1h)} hint="meaningful signals" tone="signal" />
        <Stat label="Raw changes · 1 h" value={fmtInt(p.totals?.changes_1h)} hint="before noise filtering" />
        <Stat label="Checks · 5 min" value={fmtInt(p.totals?.checks_5m)} hint={`${Math.round(Number(p.totals?.checks_5m ?? 0) / 5)}/min`} />
        <Stat label="Active sources · 24 h" value={fmtInt(p.totals?.active_sources_24h)} />
        <Stat label="Countries · 24 h" value={fmtInt(p.totals?.active_countries_24h)} />
        <Stat label="Breaking / developing" value={`${p.breaking.filter((c) => c.state === "breaking").length} / ${p.breaking.filter((c) => c.state === "developing").length}`} tone="hot" />
      </div>
      <div className="grid grid-cols-1 gap-4 xl:grid-cols-[1fr_340px] [&>*]:min-w-0">
        <div className="flex flex-col gap-4">
          <Panel title="Global activity · last 6 h · 15-minute buckets">
            <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 [&>*]:min-w-0">
              <div>
                <div className="label mb-1">Events</div>
                <Sparkline values={evSeries} width={420} height={56} tone="signal" responsive />
              </div>
              <div>
                <div className="label mb-1">Raw changes</div>
                <Sparkline values={chSeries} width={420} height={56} tone="muted" responsive />
              </div>
            </div>
            <p className="mt-2 text-[11px] text-fg-subtle">The gap between raw changes and events is the noise WebSensor filtered out: timestamps, navigation churn, cookie banners, advertising, cosmetic edits.</p>
          </Panel>
          <div className="grid gap-4 md:grid-cols-2">
            {(p.desks ?? []).filter((d) => d.items.length).map((d) => (
              <Panel key={d.desk} title={`${deskLabel(d.desk)} · 12 h`} dense action={<Link href={`/category/${d.desk}`} className="text-[11px] text-fg-subtle hover:text-fg">desk →</Link>}>
                {d.items.map((e) => (
                  <EventRow key={e.id} ev={e} />
                ))}
              </Panel>
            ))}
          </div>
          <Panel title="Infrastructure incidents · 6 h" dense action={<Link href="/live?group=reliability" className="text-[11px] text-fg-subtle hover:text-fg">live →</Link>}>
            {p.infrastructure.length ? p.infrastructure.map((e) => <EventRow key={e.id} ev={e} />) : <Empty>No outage, incident or maintenance signal in the last 6 h.</Empty>}
          </Panel>
          <Panel title="Silent changes · 24 h" dense action={<Link href="/silent" className="text-[11px] text-fg-subtle hover:text-fg">all →</Link>}>
            {p.silent_changes.length ? p.silent_changes.map((e) => <EventRow key={e.id} ev={e} />) : <Empty>No silent change in the last 24 h.</Empty>}
          </Panel>
        </div>
        <aside className="flex flex-col gap-4">
          <BreakingRail items={p.breaking.filter((c) => c.state === "breaking")} developing={p.breaking.filter((c) => c.state === "developing")} />
          <Panel title="Fastest-rising entities · 3 h" dense>
            {p.rising_entities.length ? (
              <ol className="divide-y divide-line">
                {p.rising_entities.map((r, i) => (
                  <li key={r.id} className="grid grid-cols-[1.25rem_1fr_auto] items-center gap-2 px-3 py-1.5 text-[13px]">
                    <span className="font-mono text-[11px] text-fg-subtle tabular">{i + 1}</span>
                    <div className="min-w-0">
                      <Link href={`/entity/${r.id}`} className="block truncate font-medium hover:underline">{r.name}</Link>
                      <div className="text-[11px] text-fg-subtle">{r.events_3h} signals in 3 h · {r.events_prev_24h} in the prior 24 h</div>
                    </div>
                    <span className="font-mono text-[12px] font-semibold text-signal tabular">×{r.acceleration}</span>
                  </li>
                ))}
              </ol>
            ) : (
              <Empty>No entity is accelerating right now.</Empty>
            )}
          </Panel>
          <Panel title="Anomalous sources · 2 h" dense>
            {p.anomalies.length ? (
              <ul className="divide-y divide-line">
                {p.anomalies.map((s) => (
                  <li key={s.id} className="flex items-center gap-2 px-3 py-1.5 text-[13px]">
                    <Link href={`/source/${s.id}`} className="min-w-0 flex-1 truncate hover:underline">{s.name}</Link>
                    <span className="text-[11px] text-fg-subtle">{s.changes_2h} vs {s.baseline_per_day}/d</span>
                    <span className={`font-mono text-[12px] font-semibold tabular ${s.activity_score >= 70 ? "text-hot" : "text-high"}`}>{s.pct_vs_baseline !== null && s.pct_vs_baseline !== undefined ? `+${Math.min(9999, s.pct_vs_baseline)}%` : Math.round(s.activity_score)}</span>
                  </li>
                ))}
              </ul>
            ) : (
              <Empty>All sources within baseline.</Empty>
            )}
          </Panel>
          <Panel title="Events by group · 24 h">
            <ul className="space-y-1.5">
              {groups.map(([g, n]) => (
                <li key={g} className="grid grid-cols-[8rem_1fr_3rem] items-center gap-2 text-[12.5px]">
                  <Link href={`/live?group=${g}`} className="truncate hover:underline">{GROUP_LABELS[g] ?? g}</Link>
                  <div className="h-1 w-full overflow-hidden rounded-full bg-panel-2"><div className="h-full rounded-full bg-info" style={{ width: `${(n / maxG) * 100}%` }} /></div>
                  <span className="text-right font-mono text-fg-subtle tabular">{fmtInt(n)}</span>
                </li>
              ))}
            </ul>
          </Panel>
          <p className="text-[11px] text-fg-subtle">Generated {relTime(p.generated_at)} · all values come from stored observations; nothing is estimated.</p>
        </aside>
      </div>
    </>
  );
}