import React, { useState, useEffect } from 'react';
import { X, Copy, Check, Terminal, HardHat, Search, Wand2, CheckCircle2, ArrowLeft, Play } from 'lucide-react';
import { generateCodeWithAgents, AgentStatus } from '../services/geminiService';

interface CodeViewerProps {
  code: string; // This represents the PROMPT text initially
  isOpen: boolean;
  onClose: () => void;
  isLoading: boolean;
}

const CodeViewer: React.FC<CodeViewerProps> = ({ code, isOpen, onClose, isLoading }) => {
  const [copied, setCopied] = useState(false);
  const [viewMode, setViewMode] = useState<'prompt' | 'building' | 'code'>('prompt');
  
  const [finalCode, setFinalCode] = useState('');
  const [agentStatus, setAgentStatus] = useState<AgentStatus>('idle');
  const [agentMessage, setAgentMessage] = useState('');

  // Reset state when opening/closing or changing input
  useEffect(() => {
    if (isOpen) {
      setViewMode('prompt');
      setFinalCode('');
      setAgentStatus('idle');
    }
  }, [isOpen, code]);

  const handleCopy = (text: string) => {
    navigator.clipboard.writeText(text);
    setCopied(true);
    setTimeout(() => setCopied(false), 2000);
  };

  const handleBuildWithAgents = async () => {
    setViewMode('building');
    setAgentStatus('architect');
    setAgentMessage('Initializing agents...');

    try {
        const result = await generateCodeWithAgents(code, (status, msg) => {
            setAgentStatus(status);
            setAgentMessage(msg);
        });
        setFinalCode(result);
        // Small delay to show completion state
        setTimeout(() => {
            setViewMode('code');
        }, 1000);
    } catch (error) {
        setAgentStatus('error');
        setAgentMessage('Generation failed. Please try again.');
        setTimeout(() => setViewMode('prompt'), 2000);
    }
  };

  const getStepStatus = (step: AgentStatus, current: AgentStatus) => {
    const order = ['idle', 'architect', 'critic', 'refiner', 'complete'];
    const stepIdx = order.indexOf(step);
    const currentIdx = order.indexOf(current);
    
    if (current === 'error') return 'text-slate-500';
    if (currentIdx > stepIdx) return 'text-emerald-400';
    if (currentIdx === stepIdx) return 'text-blue-400 animate-pulse';
    return 'text-slate-600';
  };

  const renderAgentStep = (step: AgentStatus, icon: React.ReactNode, label: string) => {
      const statusColor = getStepStatus(step, agentStatus);
      const isCurrent = agentStatus === step;
      const isDone = ['architect', 'critic', 'refiner', 'complete'].indexOf(agentStatus) > ['architect', 'critic', 'refiner'].indexOf(step);

      return (
        <div className={`flex items-center gap-3 p-4 rounded-lg border border-slate-800 ${isCurrent ? 'bg-slate-800/50 border-blue-500/30' : 'bg-slate-900'}`}>
            <div className={`${statusColor} transition-colors duration-300`}>
                {isDone ? <CheckCircle2 size={24} /> : icon}
            </div>
            <div className="flex-1">
                <div className={`font-semibold text-sm ${isCurrent ? 'text-blue-200' : 'text-slate-400'}`}>{label}</div>
                {isCurrent && (
                     <div className="text-xs text-slate-500 mt-1">{agentMessage}</div>
                )}
            </div>
            {isCurrent && <div className="w-2 h-2 rounded-full bg-blue-400 animate-ping" />}
        </div>
      );
  };

  if (!isOpen) return null;

  return (
    <div className="absolute inset-0 z-50 flex items-center justify-center bg-black/70 backdrop-blur-sm p-4 md:p-8">
      <div className="bg-slate-900 w-full max-w-5xl h-[85vh] rounded-xl border border-slate-700 shadow-2xl flex flex-col overflow-hidden animate-in fade-in zoom-in duration-200">
        
        {/* Header */}
        <div className="flex items-center justify-between px-6 py-4 border-b border-slate-800 bg-slate-800/50">
          <h2 className="text-lg font-bold text-white flex items-center gap-2">
            {viewMode === 'prompt' && <span className="text-blue-400">Architecture Prompt</span>}
            {viewMode === 'building' && <span className="text-purple-400 flex items-center gap-2"><HardHat size={18}/> Agents Building...</span>}
            {viewMode === 'code' && <span className="text-emerald-400 flex items-center gap-2"><Terminal size={18}/> Final Code</span>}
            
            {isLoading && <span className="text-xs text-blue-400 animate-pulse ml-2">Building...</span>}
          </h2>
          
          <div className="flex items-center gap-3">
             {viewMode === 'code' && (
               <button 
                  onClick={() => setViewMode('prompt')}
                  className="flex items-center gap-2 px-3 py-1.5 bg-slate-800 hover:bg-slate-700 rounded text-xs font-medium text-slate-300 transition-colors border border-slate-700"
                >
                  <ArrowLeft size={14} /> Back to Prompt
                </button>
             )}

            {viewMode !== 'building' && (
              <button 
                onClick={() => handleCopy(viewMode === 'code' ? finalCode : code)}
                className="flex items-center gap-2 px-3 py-1.5 bg-slate-800 hover:bg-slate-700 rounded text-xs font-medium text-slate-300 transition-colors border border-slate-700"
              >
                {copied ? <Check size={14} className="text-emerald-400"/> : <Copy size={14} />}
                {copied ? 'Copied' : 'Copy'}
              </button>
            )}
            
            {viewMode === 'prompt' && !isLoading && (
              <button 
                onClick={handleBuildWithAgents}
                className="flex items-center gap-2 px-3 py-1.5 bg-purple-600 hover:bg-purple-500 rounded text-xs font-medium text-white transition-colors shadow-lg shadow-purple-500/20"
              >
                <Play size={14} fill="currentColor" />
                Build with Agents (Beta)
              </button>
            )}
            
            <button onClick={onClose} className="text-slate-400 hover:text-white transition-colors ml-2">
              <X size={20} />
            </button>
          </div>
        </div>

        {/* Content */}
        <div className="flex-1 overflow-hidden bg-[#0d1117] relative">
          
          {/* View: Loading Prompt */}
          {isLoading && viewMode === 'prompt' && (
            <div className="h-full flex flex-col items-center justify-center space-y-4">
              <div className="w-12 h-12 border-4 border-blue-500/30 border-t-blue-500 rounded-full animate-spin"></div>
              <p className="text-slate-400 text-sm animate-pulse">Refining architecture prompt...</p>
            </div>
          )}

          {/* View: Prompt Text */}
          {!isLoading && viewMode === 'prompt' && (
             <div className="h-full overflow-auto p-6 font-mono text-sm text-slate-300 leading-relaxed whitespace-pre-wrap">
               {code}
             </div>
          )}

          {/* View: Agents Building */}
          {viewMode === 'building' && (
             <div className="h-full flex flex-col items-center justify-center p-8">
                 <div className="w-full max-w-md space-y-3">
                    {renderAgentStep('architect', <HardHat size={24} />, "Coder Agent: Writing Implementation")}
                    {renderAgentStep('critic', <Search size={24} />, "Reviewer Agent: Analyzing Logic")}
                    {renderAgentStep('refiner', <Wand2 size={24} />, "Polisher Agent: Finalizing Code")}
                 </div>
                 {agentStatus === 'complete' && (
                     <div className="mt-8 text-emerald-400 font-bold animate-bounce">
                         Done! Loading code...
                     </div>
                 )}
             </div>
          )}

          {/* View: Final Code */}
          {viewMode === 'code' && (
            <div className="h-full overflow-auto p-6 font-mono text-sm leading-relaxed whitespace-pre-wrap text-blue-100 selection:bg-blue-500/30">
              {finalCode}
            </div>
          )}

        </div>
      </div>
    </div>
  );
};

export default CodeViewer;