'use client';

import { AnimatedNumber } from '@/components/ui/AnimatedNumber';
import { fmt, fmtInt, fmtRatio } from '@/lib/format';
import { useLive } from '@/lib/live';
import { Time } from '@/lib/time';
import type { BgpStats } from '@/lib/types';

export function BgpLive({ initial }: { initial: BgpStats }) {
  const live = useLive((s) => s.bgp);
  const updates = useLive((s) => s.updates);
  const cur = live ?? initial;
  const ratioColor = (r: number) => (r >= 3 ? 'var(--p-high)' : r >= 1.5 ? 'var(--p-elevated)' : 'var(--ink)');
  return (
    <div>
      <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">
        {[
          ['updates / s', cur.updates_per_s, 1, undefined],
          ['announcements / s', cur.announcements_per_s, 1, `baseline ${fmt(initial.baseline.announcements_per_s, 0)}`],
          ['withdrawals / s', cur.withdrawals_per_s, 1, `baseline ${fmt(initial.baseline.withdrawals_per_s, 1)}`],
          ['unique prefixes / min', initial.unique_prefixes_1m, 0, undefined],
          ['unique origins / min', initial.unique_origins_1m, 0, undefined],
          ['origin changes / min', initial.origin_changes_1m, 0, undefined],
        ].map(([label, v, d, sub]) => (
          <div key={label as string} className="bg-panel px-3 py-2.5">
            <dt className="label truncate">{label as string}</dt>
            <dd className="num mt-0.5 text-[22px] leading-none text-ink">
              <AnimatedNumber value={v as number} digits={d as number} duration={updates ? 500 : 0} />
            </dd>
            {sub ? <dd className="num mt-0.5 text-[10.5px] text-ink-3">{sub as string}</dd> : null}
          </div>
        ))}
      </dl>
      <div className="mt-3 flex flex-wrap items-center gap-x-6 gap-y-1 text-[12.5px] text-ink-2">
        <span>
          announcements vs baseline <span className="num" style={{ color: ratioColor(cur.ratio.announcements) }}>{fmtRatio(cur.ratio.announcements)}</span>
        </span>
        <span>
          withdrawals vs baseline <span className="num" style={{ color: ratioColor(cur.ratio.withdrawals) }}>{fmtRatio(cur.ratio.withdrawals)}</span>
        </span>
        <span className={cur.fresh ? 'text-ok' : 'text-warn'}>{cur.fresh ? 'feed fresh' : 'feed stale — routing component frozen'}</span>
        <span className="num text-ink-3">
          {fmtInt(initial.peers)} peers · <Time ts={cur.ts} style="time" />
        </span>
      </div>
    </div>
  );
}