'use client';

import { AnimatedNumber } from '@/components/ui/AnimatedNumber';
import { fmt } from '@/lib/format';
import { useDegraded, useLive } from '@/lib/live';
import { Time } from '@/lib/time';
import type { Ticker as TickerT } from '@/lib/types';

interface Cell {
  key: keyof TickerT;
  label: string;
  digits?: number;
  unit?: string;
  color?: (t: TickerT) => string | undefined;
}
const CELLS: Cell[] = [
  { key: 'bgp_updates_per_s', label: 'BGP updates/s', digits: 1 },
  { key: 'bgp_withdrawals_per_s', label: 'withdrawals/s', digits: 1, color: (t) => (t.bgp_withdrawals_per_s > 30 ? 'var(--p-stressed)' : undefined) },
  { key: 'probes_active', label: 'probes active', digits: 0, color: (t) => (t.probes_active < t.probes_total ? 'var(--warn)' : undefined) },
  { key: 'measurements_per_s', label: 'measurements/s', digits: 1 },
  { key: 'targets_degraded', label: 'targets degraded', digits: 0, color: (t) => (t.targets_degraded > 0 ? 'var(--p-elevated)' : undefined) },
  { key: 'regions_elevated', label: 'regions elevated', digits: 0, color: (t) => (t.regions_elevated > 0 ? 'var(--p-elevated)' : undefined) },
  { key: 'regions_severe', label: 'regions severe', digits: 0, color: (t) => (t.regions_severe > 0 ? 'var(--p-severe)' : undefined) },
  { key: 'dns_failures_per_min', label: 'DNS failures/min', digits: 0 },
  { key: 'median_global_rtt_ms', label: 'median RTT', digits: 1, unit: 'ms' },
  { key: 'route_changes_per_min', label: 'route changes/min', digits: 1 },
  { key: 'active_incidents', label: 'active incidents', digits: 0, color: (t) => (t.active_incidents > 0 ? 'var(--p-high)' : undefined) },
  { key: 'bgp_updates_per_min', label: 'BGP updates/min', digits: 0 },
];

/** Live ticker — a dense grid that updates in place (no marquee). Every value is a real counter (spec §66). */
export function Ticker({ initial }: { initial: TickerT | null }) {
  const live = useLive((s) => s.ticker);
  const updates = useLive((s) => s.updates);
  const { degraded } = useDegraded();
  const t = live ?? initial;
  if (!t) return <p className="text-xs text-ink-3">Ticker unavailable.</p>;
  return (
    <div className={degraded ? 'opacity-50 saturate-50' : ''}>
      <dl className="grid grid-cols-2 gap-px overflow-hidden rounded-[4px] border border-line bg-line sm:grid-cols-3 lg:grid-cols-6">
        {CELLS.map((c) => {
          const v = t[c.key] as number;
          return (
            <div key={c.key} className="bg-panel px-3 py-2.5">
              <dt className="label truncate">{c.label}</dt>
              <dd className="num mt-0.5 text-[20px] leading-none" style={{ color: c.color?.(t) ?? 'var(--ink)' }}>
                <AnimatedNumber value={v} digits={c.digits ?? 1} duration={updates ? 500 : 0} />
                {c.unit && <span className="ml-1 text-[11px] text-ink-3">{c.unit}</span>}
                {c.key === 'probes_active' && <span className="text-[12px] text-ink-3">/{fmt(t.probes_total, 0)}</span>}
                {c.key === 'targets_degraded' && <span className="text-[12px] text-ink-3">/{fmt(t.targets_total, 0)}</span>}
              </dd>
            </div>
          );
        })}
      </dl>
      <p className="num mt-1.5 text-[10.5px] text-ink-3">
        counters at <Time ts={t.ts} style="time" /> · {fmt(t.regions_normal, 0)} regions normal
      </p>
    </div>
  );
}