import { cn } from '@/lib/utils';

interface Props {
  phase: string;
  progress: number;
  currentItem?: number;
  totalItems?: number;
  status?: string;
}

export function PipelineProgress({ phase, progress, currentItem, totalItems, status }: Props) {
  const phaseLabel: Record<string, string> = {
    images: '生成图片',
    upload: '上传素材',
    videos: '生成视频',
    tts: '配音',
    assemble: '成片组装',
  };

  return (
    <div className="bg-gradient-to-br from-zinc-900 to-zinc-800 border border-zinc-700/50 rounded-xl p-3.5 my-2 shadow-lg shadow-zinc-900/20">
      <div className="flex items-center justify-between mb-2">
        <span className="text-xs text-zinc-400 font-medium">
          {phaseLabel[phase] || phase}
          {currentItem && totalItems ? ` (${currentItem}/${totalItems})` : ''}
        </span>
        <span className="text-xs font-mono text-zinc-500">{progress}%</span>
      </div>
      <div className="w-full h-1.5 bg-zinc-700/50 rounded-full overflow-hidden">
        <div
          className={cn(
            'h-full rounded-full transition-all duration-700 ease-out',
            progress < 100 ? 'bg-gradient-to-r from-blue-500 to-indigo-400' : 'bg-gradient-to-r from-emerald-500 to-green-400'
          )}
          style={{ width: `${progress}%` }}
        />
      </div>
      {status && <p className="text-xs text-zinc-500 mt-1.5">{status}</p>}
    </div>
  );
}
