import { formatClock, type RoomState } from '@two-keys/shared';
import { useNow } from '../lib/hooks';

/** Elapsed time plus penalties, or a countdown when the game has a time limit. Runs locally between server updates. */
export function Timer({ timer, receivedAt }: { timer: RoomState['timer']; receivedAt: number }) {
  const now = useNow(1000);
  if (timer.startedAt === null) return null;
  const serverNow = timer.serverNow + (now - receivedAt);
  const elapsed = ((timer.finishedAt ?? serverNow) - timer.startedAt) / 1000;

  if (timer.limitSeconds !== null) {
    const used = elapsed + timer.penaltySeconds;
    const left = Math.max(0, timer.limitSeconds - used);
    const label = timer.limitLabel ?? 'Time left';
    return (
      <div className="flex shrink-0 flex-col items-end" role="timer" aria-label={`${label}: ${formatClock(left)} left`}>
        <div className="flex items-baseline gap-1.5">
          <span className="max-w-[7.5rem] truncate text-[10px] font-semibold uppercase tracking-wider text-stone-400">{label}</span>
          <span className={`font-mono text-base font-bold tabular-nums ${left <= 300 ? 'text-red-300' : ''}`}>
            {formatClock(left)}
          </span>
        </div>
        {/* Fills up as the time (and every hint penalty) runs out. */}
        <div className="mt-0.5 h-1 w-28 overflow-hidden rounded-full bg-white/10" aria-hidden>
          <div
            className={`h-full ${left <= 300 ? 'bg-red-400' : 'bg-accent'}`}
            style={{ width: `${Math.min(100, (used / timer.limitSeconds) * 100)}%` }}
          />
        </div>
      </div>
    );
  }

  return (
    <div
      className="flex items-baseline gap-1.5 font-mono tabular-nums"
      role="timer"
      aria-label={`Time ${formatClock(elapsed + timer.penaltySeconds)}`}
    >
      <span className="text-base font-bold">{formatClock(elapsed + timer.penaltySeconds)}</span>
      {timer.penaltySeconds > 0 && (
        <span className="text-[11px] text-red-300" title="Penalty time from hints and traps">
          +{formatClock(timer.penaltySeconds)}
        </span>
      )}
    </div>
  );
}