import * as React from 'react';
import { cn } from '../utils/cn';

export interface GenerationProgressProps extends React.HTMLAttributes<HTMLDivElement> {
  /** Optional: 0-100. When provided, shows determinate progress. Otherwise indeterminate. */
  percent?: number;
}

const GenerationProgress = React.forwardRef<HTMLDivElement, GenerationProgressProps>(
  ({ percent, className, ...props }, ref) => {
    const isDeterminate = percent != null && percent > 0;
    const clampedPercent = isDeterminate ? Math.max(0, Math.min(100, percent)) : 0;

    return (
      <div
        ref={ref}
        className={cn('relative h-1 rounded-full bg-[var(--surface-200)] overflow-hidden', className)}
        role="progressbar"
        aria-valuenow={isDeterminate ? clampedPercent : undefined}
        aria-valuemin={0}
        aria-valuemax={100}
        {...props}
      >
        {isDeterminate ? (
          <div
            className="absolute inset-y-0 left-0 rounded-full bg-[var(--accent)] transition-all duration-300 ease-out"
            style={{ width: `${clampedPercent}%` }}
          />
        ) : (
          <div className="absolute inset-y-0 w-1/3 rounded-full bg-[var(--accent)] animate-[indeterminate_1.4s_ease-in-out_infinite]" />
        )}

        <style>{`
          @keyframes indeterminate {
            0% { left: -33%; }
            100% { left: 100%; }
          }
        `}</style>
      </div>
    );
  }
);
GenerationProgress.displayName = 'GenerationProgress';

export { GenerationProgress };
