/**
 * Analysis Status Component
 * Shows real-time analysis progress
 */

interface AnalysisStatusProps {
  status: 'uploading' | 'processing';
  progress: number;
  message: string;
}

export function AnalysisStatus({ status, progress, message }: AnalysisStatusProps) {
  const stages = [
    { name: 'PDF Extraction', progress: 0.2 },
    { name: 'Classification', progress: 0.4 },
    { name: 'Model Routing', progress: 0.5 },
    { name: 'Specialized Analysis', progress: 0.8 },
    { name: 'Result Synthesis', progress: 1.0 }
  ];

  const currentStage = stages.findIndex(s => progress < s.progress) || stages.length - 1;

  return (
    <div className="bg-white rounded-xl shadow-lg p-8 max-w-3xl mx-auto">
      <div className="text-center mb-8">
        <div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4 animate-pulse">
          <svg className="w-8 h-8 text-blue-600 animate-spin" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
          </svg>
        </div>
        <h2 className="text-2xl font-bold text-gray-900 mb-2">
          {status === 'uploading' ? 'Uploading Document' : 'Analyzing Document'}
        </h2>
        <p className="text-gray-600">{message}</p>
      </div>

      {/* Progress Bar */}
      <div className="mb-8">
        <div className="flex justify-between text-sm text-gray-600 mb-2">
          <span>Progress</span>
          <span>{Math.round(progress * 100)}%</span>
        </div>
        <div className="h-3 bg-gray-200 rounded-full overflow-hidden">
          <div
            className="h-full bg-gradient-to-r from-blue-500 to-purple-600 transition-all duration-500 ease-out"
            style={{ width: `${progress * 100}%` }}
          />
        </div>
      </div>

      {/* Pipeline Stages */}
      <div className="space-y-3">
        <h3 className="text-sm font-semibold text-gray-700 mb-3">Processing Pipeline</h3>
        {stages.map((stage, index) => {
          const isComplete = progress >= stage.progress;
          const isCurrent = index === currentStage;

          return (
            <div
              key={stage.name}
              className={`flex items-center gap-3 p-3 rounded-lg transition-all ${
                isCurrent ? 'bg-blue-50 border border-blue-200' : 'bg-gray-50'
              }`}
            >
              <div className={`w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0 ${
                isComplete 
                  ? 'bg-green-500' 
                  : isCurrent 
                  ? 'bg-blue-500 animate-pulse' 
                  : 'bg-gray-300'
              }`}>
                {isComplete ? (
                  <svg className="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
                  </svg>
                ) : isCurrent ? (
                  <svg className="w-5 h-5 text-white animate-spin" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
                  </svg>
                ) : (
                  <span className="text-white text-xs">{index + 1}</span>
                )}
              </div>
              <div className="flex-1">
                <p className={`font-medium ${
                  isCurrent ? 'text-blue-900' : isComplete ? 'text-green-900' : 'text-gray-600'
                }`}>
                  {stage.name}
                </p>
              </div>
            </div>
          );
        })}
      </div>

      <div className="mt-6 p-4 bg-blue-50 border border-blue-200 rounded-lg">
        <p className="text-sm text-blue-900 flex items-start gap-2">
          <svg className="w-5 h-5 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
          </svg>
          <span>
            Your document is being analyzed by multiple specialized AI models across different medical domains.
            This process may take 30-60 seconds depending on document complexity.
          </span>
        </p>
      </div>
    </div>
  );
}