"use client";

import Link from "next/link";
import { useEffect, useRef, useState } from "react";
import type { Stats } from "@/lib/api";
import { fmtInt, relTime } from "@/lib/format";
import { publicFetch } from "@/lib/owner";

/**
 * Live system strip (spec §65): SOURCES · SENSORS · CHECKS/MIN · EVENTS 24H · BREAKING · SILENT · STATUS.
 * Server-rendered with real values, then refreshed every 10 s. Numbers tick when they change.
 */
export function LiveStrip({ initial }: { initial: Stats }) {
  const [s, setS] = useState<Stats>(initial);
  const [now, setNow] = useState(() => Date.now());
  useEffect(() => {
    const tick = (): void => {
      publicFetch<Stats>("/api/v1/stats").then(setS).catch(() => undefined);
      setNow(Date.now());
    };
    const t = setInterval(tick, 10_000);
    const n = setInterval(() => setNow(Date.now()), 1000);
    return () => {
      clearInterval(t);
      clearInterval(n);
    };
  }, []);
  const lastCheckAge = s.last_check_at ? now - new Date(s.last_check_at).getTime() : Infinity;
  const live = lastCheckAge < 120_000;
  // `now` differs between server and client renders; the status word is re-rendered right after mount.
  const items: { label: string; value: number | undefined; href?: string; tone?: string; hint?: string }[] = [
    { label: "Sources", value: s.sources, href: "/sources", hint: `${fmtInt(s.sources_first_party)} first-party` },
    { label: "Sensors", value: s.sensors, href: "/health", hint: s.sensors_degraded ? `${fmtInt(s.sensors_degraded)} degraded` : "all healthy" },
    { label: "Checks / min", value: s.checks_per_min, href: "/health", hint: s.not_modified_ratio_5m !== null && s.not_modified_ratio_5m !== undefined ? `${Math.round(s.not_modified_ratio_5m * 100)}% 304` : undefined },
    { label: "Events 24h", value: s.events_24h, href: "/live", hint: s.events_per_min !== undefined ? `${s.events_per_min}/min` : undefined },
    { label: "Breaking", value: s.breaking_now ?? s.breaking_24h, href: "/breaking", tone: "text-hot", hint: s.developing_now ? `${s.developing_now} developing` : undefined },
    { label: "Silent 24h", value: s.silent_24h, href: "/silent", tone: "text-silent" },
  ];
  return (
    <div className="panel mb-4 flex items-stretch overflow-x-auto no-scrollbar" role="region" aria-label="Live system status">
      {items.map((it) => (
        <Cell key={it.label} {...it} />
      ))}
      <div className="ml-auto flex min-w-[7.5rem] flex-col justify-center gap-0.5 border-l border-line px-3 py-2">
        <span className="label">Status</span>
        <span className="inline-flex items-center gap-1.5 font-mono text-[12px] font-semibold tracking-wider" suppressHydrationWarning>
          <span className={`inline-block size-2 rounded-full ${live ? "bg-signal animate-pulse-dot" : "bg-warn"}`} />
          {live ? "LIVE" : "STALE"}
        </span>
        <span className="truncate text-[10.5px] text-fg-subtle" suppressHydrationWarning>{s.last_check_at ? `last check ${relTime(s.last_check_at, now)}` : "—"}</span>
      </div>
    </div>
  );
}

function Cell({ label, value, href, tone, hint }: { label: string; value: number | undefined; href?: string; tone?: string; hint?: string }) {
  const prev = useRef(value);
  const [tick, setTick] = useState(false);
  useEffect(() => {
    if (prev.current !== value) {
      prev.current = value;
      setTick(true);
      const t = setTimeout(() => setTick(false), 600);
      return () => clearTimeout(t);
    }
  }, [value]);
  const body = (
    <>
      <span className="label">{label}</span>
      <span className={`font-mono text-lg font-semibold leading-tight tabular ${tone ?? ""} ${tick ? "animate-tick" : ""}`}>{fmtInt(value)}</span>
      {hint && <span className="truncate text-[10.5px] text-fg-subtle">{hint}</span>}
    </>
  );
  const cls = "flex min-w-[7.25rem] flex-col gap-0.5 border-r border-line px-3 py-2 last:border-r-0";
  return href ? <Link href={href} className={`${cls} hover:bg-panel-2/60`}>{body}</Link> : <div className={cls}>{body}</div>;
}