import React from 'react';
import { useShadeRuntimeTheme } from '../../ShadeRuntimeProvider.js';

export interface ETAReadoutProps {
  /** ETA in seconds. Undefined → unknown. */
  seconds: number | undefined;
  className?: string;
  style?: React.CSSProperties;
}

export function ETAReadout({
  seconds,
  className,
  style,
}: ETAReadoutProps): React.ReactElement {
  const theme = useShadeRuntimeTheme();
  return (
    <span
      className={className}
      style={{
        fontFamily: theme.fontMono,
        fontSize: 12,
        color: theme.textMuted,
        ...style,
      }}
    >
      {formatEta(seconds)}
    </span>
  );
}

export function formatEta(seconds: number | undefined): string {
  if (seconds === undefined || !Number.isFinite(seconds)) return 'ETA —';
  if (seconds < 1) return 'ETA <1s';
  if (seconds < 60) return `ETA ${Math.round(seconds)}s`;
  const minutes = Math.floor(seconds / 60);
  const remSeconds = Math.round(seconds % 60);
  if (minutes < 60) return `ETA ${minutes}m ${remSeconds}s`;
  const hours = Math.floor(minutes / 60);
  const remMinutes = minutes % 60;
  return `ETA ${hours}h ${remMinutes}m`;
}
