'use client';
import { useEffect, useState } from 'react';
import { cn } from '@/lib/cn';
import { DASH, fmtAgo, fmtDateTime } from '@/lib/format';

/** Green live dot with optional pulse ring. */
export function Dot({ pulse = false, className, tone = 'live' }: { pulse?: boolean; className?: string; tone?: 'live' | 'warning' | 'danger' | 'muted' }) {
  return <span className={cn('dot', pulse && 'pulse', tone === 'warning' && 'bg-warning', tone === 'danger' && 'bg-danger', tone === 'muted' && 'bg-ink-3', className)} aria-hidden />;
}

/**
 * "17 sec ago" that ticks every second for the first minutes, then every 30 s. Server renders the absolute UTC time
 * (identical on both sides); the relative label is applied after mount (`suppressHydrationWarning`).
 */
export function LiveAgo({ at, prefix = '', className, absoluteFallback = true, tick = 1000 }: { at: string | null | undefined; prefix?: string; className?: string; absoluteFallback?: boolean; tick?: number }) {
  const [now, setNow] = useState<number | null>(null);
  useEffect(() => {
    setNow(Date.now());
    const t = setInterval(() => setNow(Date.now()), tick);
    return () => clearInterval(t);
  }, [tick]);
  const label = now === null ? (absoluteFallback ? fmtDateTime(at) : DASH) : fmtAgo(at, now);
  return (
    <time dateTime={at ?? undefined} title={at ? fmtDateTime(at) : undefined} className={cn('tnum', className)} suppressHydrationWarning>
      {prefix}
      {label}
    </time>
  );
}

/** "Live · updated 12 s ago" status line for panels fed by SSE/polling. */
export function LiveStatus({ updatedAt, connected = true, className }: { updatedAt: number | string | null; connected?: boolean; className?: string }) {
  const [now, setNow] = useState<number | null>(null);
  useEffect(() => {
    setNow(Date.now());
    const t = setInterval(() => setNow(Date.now()), 1000);
    return () => clearInterval(t);
  }, []);
  const ts = typeof updatedAt === 'number' ? updatedAt : updatedAt ? new Date(updatedAt).getTime() : null;
  const s = ts && now ? Math.max(0, Math.round((now - ts) / 1000)) : null;
  return (
    <span className={cn('inline-flex items-center gap-1.5 text-xs text-ink-3', className)} suppressHydrationWarning>
      <Dot pulse={connected} tone={connected ? 'live' : 'muted'} />
      <span className={cn('font-medium', connected ? 'text-positive' : 'text-ink-3')}>{connected ? 'Live' : 'Paused'}</span>
      {s !== null && <span className="tnum">· updated {s < 1 ? 'now' : `${s} s ago`}</span>}
    </span>
  );
}