'use client';

import { useDegraded, useLive, useNow } from '@/lib/live';

/** "LIVE • updated 3 s ago" — the text ticks every second from the last real event; the data does not move. */
export function LiveIndicator({ className = '', compact = false }: { className?: string; compact?: boolean }) {
  const { lastEventAt, connection } = useLive((s) => ({ lastEventAt: s.lastEventAt, connection: s.connection }));
  const { degraded } = useDegraded();
  const now = useNow(1000);
  const ago = lastEventAt ? Math.max(0, Math.round((now - lastEventAt) / 1000)) : null;
  const live = connection === 'open' && !degraded;
  const color = degraded ? 'var(--warn)' : connection === 'open' ? 'var(--ok)' : 'var(--ink-3)';
  const word = degraded ? 'DEGRADED' : connection === 'open' ? 'LIVE' : connection === 'reconnecting' ? 'RECONNECTING' : connection === 'connecting' ? 'CONNECTING' : 'OFFLINE';
  return (
    <span className={`inline-flex items-center gap-2 text-[11px] tracking-[0.1em] ${className}`} aria-live="off" suppressHydrationWarning>
      <span className="relative inline-flex size-1.5">
        <span className="size-1.5 rounded-full" style={{ background: color }} />
        {live && ago != null && ago < 2 && <span className="absolute inset-0 rounded-full opacity-60" style={{ background: color, transform: 'scale(2)', transition: 'transform 0.4s, opacity 0.4s', opacity: 0 }} />}
      </span>
      <span style={{ color }}>{word}</span>
      {!compact && ago != null && (
        <span className="num text-ink-3">
          · updated {ago < 60 ? `${ago} s` : `${Math.floor(ago / 60)} min`} ago
        </span>
      )}
    </span>
  );
}