import React from 'react';
import { CheckCircle, XCircle, Loader } from 'lucide-react';

const STEPS = [
  { key: 'downloading', label: '영상 다운로드' },
  { key: 'transcribing', label: '음성 인식 (Whisper)' },
  { key: 'translating', label: '한글 번역 (GPT)' },
  { key: 'processing', label: '영상 처리 (FFmpeg)' },
];

const STATUS_ORDER = ['pending', 'downloading', 'transcribing', 'translating', 'processing', 'completed'];

export default function ProcessingStatus({ status, progress, error }) {
  const currentIndex = STATUS_ORDER.indexOf(status);

  return (
    <div className="space-y-4">
      {/* Progress bar */}
      <div className="relative">
        <div className="h-2 bg-gray-800 rounded-full overflow-hidden">
          <div
            className={`h-full transition-all duration-500 ${
              status === 'failed' ? 'bg-red-500' : 'bg-red-500'
            }`}
            style={{ width: `${progress}%` }}
          />
        </div>
        <div className="mt-2 flex justify-between text-sm text-gray-500">
          <span>{progress}%</span>
          <span>
            {status === 'completed' && '완료!'}
            {status === 'failed' && '실패'}
            {!['completed', 'failed'].includes(status) && '처리 중...'}
          </span>
        </div>
      </div>

      {/* Steps */}
      <div className="space-y-3">
        {STEPS.map((step, index) => {
          const stepIndex = STATUS_ORDER.indexOf(step.key);
          const isComplete = currentIndex > stepIndex || status === 'completed';
          const isCurrent = status === step.key;
          const isFailed = status === 'failed' && isCurrent;

          return (
            <div
              key={step.key}
              className={`flex items-center gap-3 p-3 rounded-lg transition-colors ${
                isCurrent ? 'bg-gray-800' : ''
              }`}
            >
              <div className="flex-shrink-0">
                {isComplete ? (
                  <CheckCircle className="text-green-500" size={20} />
                ) : isFailed ? (
                  <XCircle className="text-red-500" size={20} />
                ) : isCurrent ? (
                  <Loader className="text-red-500 animate-spin" size={20} />
                ) : (
                  <div className="w-5 h-5 rounded-full border-2 border-gray-600" />
                )}
              </div>
              <span
                className={`${
                  isComplete
                    ? 'text-green-500'
                    : isFailed
                    ? 'text-red-500'
                    : isCurrent
                    ? 'text-white'
                    : 'text-gray-500'
                }`}
              >
                {step.label}
              </span>
              {isCurrent && !isFailed && (
                <span className="text-sm text-gray-500 ml-auto">진행 중...</span>
              )}
            </div>
          );
        })}
      </div>

      {/* Error message */}
      {error && (
        <div className="p-4 bg-red-900/30 border border-red-800 rounded-lg text-red-400">
          <strong>오류:</strong> {error}
        </div>
      )}
    </div>
  );
}
