import React, { useEffect, useState } from 'react';
import { Icons } from '../constants';

interface ProcessingViewProps {
  fileName: string;
  usingRLM?: boolean;
}

const ProcessingView: React.FC<ProcessingViewProps> = ({ fileName, usingRLM = false }) => {
  const [stage, setStage] = useState(0);

  // Different stages for RLM vs standard processing
  const standardStages = [
    "Initializing AI Engine...",
    "Scanning document structure...",
    "Analyzing page by page...",
    "Extracting tabular data...",
    "Verifying data integrity...",
    "Formatting output..."
  ];

  const rlmStages = [
    "Initializing Deep Research (RLM)...",
    "Sampling document structure...",
    "Analyzing Table of Contents...",
    "Exploring data sections...",
    "Extracting Well Header data...",
    "Processing survey data...",
    "Scanning appendices...",
    "Building data tables...",
    "Finalizing extraction..."
  ];

  const stages = usingRLM ? rlmStages : standardStages;

  useEffect(() => {
    // Reset stage when usingRLM changes
    setStage(0);

    const interval = setInterval(() => {
      setStage(prev => (prev < stages.length - 1 ? prev + 1 : prev));
    }, usingRLM ? 4000 : 2500); // Slower for RLM since it takes longer

    return () => clearInterval(interval);
  }, [usingRLM, stages.length]);

  return (
    <div className={`flex flex-col items-center justify-center p-12 rounded-xl border shadow-2xl animate-pulse ${usingRLM
        ? 'bg-gradient-to-br from-industrial-900 via-industrial-900 to-amber-950/20 border-amber-800/30'
        : 'bg-industrial-900 border-industrial-800'
      }`}>
      <div className="relative mb-8">
        <div className={`absolute inset-0 blur-xl opacity-20 rounded-full ${usingRLM ? 'bg-amber-500' : 'bg-petro-500'
          }`}></div>
        <div className={`relative bg-industrial-950 p-6 rounded-full border ${usingRLM
            ? 'text-amber-500 border-amber-900/50'
            : 'text-petro-500 border-petro-900/50'
          }`}>
          <Icons.Cpu />
        </div>
      </div>

      <h3 className="text-2xl font-display font-bold text-white mb-2">
        {usingRLM ? 'Deep Research Mode (RLM)' : 'Processing Document'}
      </h3>

      {usingRLM && (
        <p className="text-amber-400/80 text-xs mb-2 flex items-center gap-2">
          <span className="inline-block w-2 h-2 bg-amber-500 rounded-full animate-pulse"></span>
          Large document detected - using recursive analysis
        </p>
      )}

      <p className="text-petro-300 font-mono text-sm mb-6">{fileName}</p>

      <div className={`w-full max-w-md rounded-full h-2 mb-4 overflow-hidden border ${usingRLM
          ? 'bg-industrial-950 border-amber-900/50'
          : 'bg-industrial-950 border-industrial-800'
        }`}>
        <div
          className={`h-full transition-all duration-500 ease-out ${usingRLM
              ? 'bg-gradient-to-r from-amber-700 to-amber-500'
              : 'bg-gradient-to-r from-petro-700 to-petro-500'
            }`}
          style={{ width: `${((stage + 1) / stages.length) * 100}%` }}
        ></div>
      </div>

      <div className="h-6 overflow-hidden">
        <p key={stage} className={`text-sm animate-fade-in-up ${usingRLM ? 'text-amber-300/70' : 'text-gray-400'}`}>
          {stages[stage]}
        </p>
      </div>

      {usingRLM && (
        <p className="text-gray-500 text-xs mt-4 max-w-sm text-center">
          This may take 1-3 minutes depending on document size
        </p>
      )}
    </div>
  );
};

export default ProcessingView;