export const FORGE_INITIAL_STAGE = 'Initializing forge...';

interface Props {
  building: boolean;
  stage: string;
  progress: number;
}

/** True while waiting for the first server-reported forge stage. */
export function isForgeProgressIndeterminate(stage: string, progress: number): boolean {
  return progress === 0 && (stage === '' || stage === FORGE_INITIAL_STAGE);
}

export default function ForgeProgressBar({ building, stage, progress }: Props) {
  if (!building) return null;

  const indeterminate = isForgeProgressIndeterminate(stage, progress);
  const displayStage = stage || 'Initializing...';
  const pctLabel = indeterminate ? '…' : `${Math.round(progress)}%`;

  return (
    <div className="forge-progress-wrap" aria-live="polite">
      <div className="forge-progress-header">
        <span className="forge-progress-icon">⚙</span>
        <span className="forge-progress-stage">{displayStage}</span>
        <span className="forge-progress-pct">{pctLabel}</span>
      </div>
      <div
        className={`forge-progress-track${indeterminate ? ' indeterminate' : ''}`}
        role="progressbar"
        aria-valuemin={0}
        aria-valuemax={100}
        aria-valuenow={indeterminate ? undefined : Math.round(progress)}
        aria-busy={indeterminate}
        aria-label={displayStage}
      >
        <div
          className="forge-progress-fill"
          style={indeterminate ? undefined : { width: `${progress}%` }}
        />
        {!indeterminate && (
          <div className="forge-progress-glow" style={{ left: `${progress}%` }} />
        )}
      </div>
    </div>
  );
}