import { useEffect, useState, type JSX } from 'react'

export function IdleTimer(props: {
  idle: { lastProgressAt: number; idleTimeoutMs: number; alive: boolean } | null
}): JSX.Element {
  const [nowMs, setNowMs] = useState(() => Date.now())

  useEffect(() => {
    if (!props.idle?.alive) return
    const timer = setInterval(() => setNowMs(Date.now()), 1_000)
    return () => clearInterval(timer)
  }, [props.idle])

  if (!props.idle) {
    return <span className="text-xs text-fg-subtle">idle signal needs A10</span>
  }
  if (!props.idle.alive) {
    return <span className="text-xs font-semibold text-fg-muted">Ended</span>
  }

  const idleForMs = Math.max(0, nowMs - props.idle.lastProgressAt)
  const label =
    idleForMs >= props.idle.idleTimeoutMs * 2
      ? 'Watchdog recovering'
      : idleForMs >= props.idle.idleTimeoutMs
        ? 'No progress'
        : 'Working'

  return <span className="text-xs font-semibold text-fg">{label}</span>
}