import {
  DEFAULT_GENERATION_EXPECTED_DURATION_MS,
  useSmoothedProgress,
  type ProgressSource,
} from "../../hooks/useSmoothedProgress";
import { canvasGenerationProgressStyle } from "./canvasUtils";

type NodeGenStatus = "submitting" | "running" | "success" | "error";

interface CanvasSmoothedProgressRingProps {
  progress: number;
  status: NodeGenStatus;
  message?: string;
  progressSource?: ProgressSource;
  startedAt?: number | string | Date | null;
  expectedDurationMs?: number | null;
}

export function CanvasSmoothedProgressRing({
  progress,
  status,
  message,
  progressSource = "estimated",
  startedAt,
  expectedDurationMs = DEFAULT_GENERATION_EXPECTED_DURATION_MS,
}: CanvasSmoothedProgressRingProps) {
  const smoothed = useSmoothedProgress(progress, status, {
    progressSource,
    startedAt,
    expectedDurationMs,
  });
  return (
    <div
      className="studio-canvas-node-generation-progress"
      role="status"
      aria-live="polite"
      style={canvasGenerationProgressStyle(smoothed)}
    >
      <span
        className="studio-canvas-node-generation-progress__ring"
        aria-hidden="true"
      />
      <strong>{message}</strong>
      <em>{smoothed}%</em>
    </div>
  );
}
