import { cn } from '@/lib/utils';
import type { TranslationKey } from '@/lib/i18n';

interface ProgressData {
  progress: number;
  message: string;
}

interface DeployProgressProps {
  t: (key: TranslationKey) => string;
  stackName: string;
  deploymentUrl: string;
  progressData: ProgressData;
  logs: string[];
}

export function DeployProgress({ t, stackName, deploymentUrl, progressData, logs }: DeployProgressProps) {
  return (
    <div className="backdrop-blur-md bg-black/20 rounded-2xl p-10 border border-white/10 shadow-2xl animate-fadeIn">
      <div className="flex items-center justify-between mb-6">
        <h2 className="text-2xl font-bold text-white">{t('deploying')}</h2>
        <div className="w-6 h-6 border-3 border-white/10 border-t-white rounded-full animate-spin" />
      </div>

      <div className="bg-white/5 p-4 rounded-xl mb-6 border border-white/10">
        <p className="text-[0.95rem] mb-2 text-gray-300">
          {t('stack')}: <strong className="text-white">{stackName}</strong>
        </p>
        <p className="text-[0.95rem] text-gray-300">
          URL: <strong className="text-white">{deploymentUrl}</strong>
        </p>
      </div>

      <div className="flex items-center gap-4 mb-8">
        <div className="flex-1 h-1 bg-white/10 rounded overflow-hidden">
          <div
            className="h-full bg-white transition-all duration-300 rounded"
            style={{ width: `${progressData.progress}%` }}
          />
        </div>
        <span className="font-medium text-gray-400 min-w-[3rem] text-right text-sm">
          {progressData.progress}%
        </span>
      </div>

      <div className="flex flex-col gap-4">
        <div className={cn(
          'flex items-center gap-4 p-3 rounded-lg',
          'bg-white/5 border-l-[3px] border-white'
        )}>
          <span className="text-2xl">⚙️</span>
          <span className="flex-1 text-[0.95rem] text-gray-300">{progressData.message}</span>
        </div>
      </div>

      {logs.length > 0 && (
        <div className="mt-6 p-4 bg-black/50 border border-white/10 rounded-lg font-mono text-sm text-gray-400 max-h-[200px] overflow-y-auto">
          {logs.map((log, i) => (
            <div key={i} className="animate-fadeInUp">
              {log}
            </div>
          ))}
        </div>
      )}
    </div>
  );
}