import React, { useState, useEffect } from 'react';
import { useAstroContext } from '../context/AstroContext';
import ModelSelector from './ModelSelector';
import { ArrowRight, Loader2, Copy, Check, ArrowLeft, Sparkles, ShieldCheck } from 'lucide-react';
import ReactMarkdown from 'react-markdown';
import { motion } from 'motion/react';
import { VEDIC_KNOWLEDGE_BASE } from '../services/astroWorkflow';
import { getLifeAreaById } from '../services/vargaMapping';
import { summarizeVargaData, extractErrorMessage } from '../services/geminiService';

export default function Screen4VargaOutput() {
  const { state, setScreen, setModelPreference, setStepError } = useAstroContext();
  const [loading, setLoading] = useState(true);
  const [vargaResults, setVargaResults] = useState<Record<string, string>>({});
  const [vargaModels, setVargaModels] = useState<Record<string, string>>({});
  const [copied, setCopied] = useState(false);

  const selectedModel = state.modelPreferences['screen4'] || 'gemini-2.5-flash';
  const currentError = state.lastError['screen4'];

  const currentArea = state.selectedLifeArea ? getLifeAreaById(state.selectedLifeArea) : null;
  // We process all vargas INCLUDING D1 if it's in the list, but D1 comes from Step 1 data usually.
  // Actually, to satisfy the "Comparison with D1" logic, we need to pass D1 data into every Varga prompt.
  const allVargas = currentArea ? currentArea.vargas : [];
  const vargasToProcess = allVargas.filter(v => v !== 'D1');

  const processVargas = async (retryModel?: string) => {
    if (!currentArea) {
      setLoading(false);
      return;
    }

    setLoading(true);
    setStepError('screen4', null);
    
    const results: Record<string, string> = { ...vargaResults };
    const models: Record<string, string> = { ...vargaModels };
    const targetModel = retryModel || selectedModel;

    try {
      // Special case: Get technical summary for D1 if not already present
      results['D1'] = state.step1_2_Data?.summary || 'No D1 summary available.';

      // Process other vargas in parallel
      await Promise.all(vargasToProcess.map(async (varga) => {
        const rawData = state.step3_Data[varga];
        if (!rawData || rawData.trim() === '') {
          results[varga] = `*No raw data provided for ${varga}.*`;
          return;
        }
        
        const result = await summarizeVargaData(
          varga, 
          rawData, 
          state.step1_2_Data?.rasiChartText || '',
          targetModel
        );
        results[varga] = result.text;
        models[varga] = result.model;
      }));
      
      setVargaResults(results);
      setVargaModels(models);
    } catch (err: any) {
      console.error(err);
      setStepError('screen4', extractErrorMessage(err));
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    if (loading || currentError || Object.keys(vargaResults).length > 1) return;
    processVargas();
  }, [state.selectedLifeArea, state.step3_Data]);

  const handleModelChange = (modelId: string) => {
    setModelPreference('screen4', modelId);
    if (currentError) {
      processVargas(modelId);
    }
  };

  const handleCopySynthesis = () => {
    if (!currentArea) return;

    let compiledTechData = `--- D1 (RASHI) FOUNDATION ---\n${state.step1_2_Data?.summary || 'No summary available.'}\n`;
    
    vargasToProcess.forEach(varga => {
      compiledTechData += `\n--- ${varga} MICRO-LENS DATA ---\n${vargaResults[varga] || 'No data generated.'}\n`;
    });

    const prompt = `You are the Vedic Astrology Interpretation by Nhi Vo. I want to ask about a specific Life Area/Concern.

MY SPECIFIC CONCERN: ${currentArea.label.toUpperCase()}

FOLLOWING THE CONTEXT OF STEP 3 (VARGA VERIFICATION):
${VEDIC_KNOWLEDGE_BASE.step3}

${currentArea.promptGuidance}

TECHNICAL DATA FOR ANALYSIS (D1 + VARGAS):
${compiledTechData}

Please synthesize the structural foundation of the D1 with the specific micro-lens data provided above to give me a definitive reading on my concern.
`;

    navigator.clipboard.writeText(prompt);
    setCopied(true);
    setTimeout(() => setCopied(false), 2000);
  };

  if (!currentArea) {
    return (
      <div className="text-center p-8">
        <p className="text-red-500 font-mono">Error: No life area selected. Please go back to Step 3.</p>
        <button onClick={() => setScreen(3)} className="mt-4 px-4 py-2 bg-stone-900 text-white rounded-full">Go Back</button>
      </div>
    );
  }

  if (loading) {
    return (
      <div className="flex flex-col items-center justify-center min-h-[400px] space-y-6 text-center">
        <motion.div 
          animate={{ rotate: 360 }}
          transition={{ duration: 2, repeat: Infinity, ease: "linear" }}
        >
          <Loader2 size={48} className="text-stone-400" />
        </motion.div>
        <div className="space-y-2">
          <h3 className="text-2xl font-serif italic text-stone-800">Aligning the Micro-Lenses...</h3>
          <p className="text-sm font-mono text-stone-400 uppercase tracking-widest">Generating Varga Audit (Screen 4)</p>
        </div>
      </div>
    );
  }

  if (currentError) {
    return (
      <div className="p-8 bg-red-50 border border-red-200 rounded-3xl text-center space-y-6 max-w-2xl mx-auto">
        <div className="space-y-2">
          <h3 className="text-red-800 font-serif text-2xl italic">Varga Lenses Obscured...</h3>
          <p className="text-red-600 text-sm font-mono uppercase tracking-widest">{currentError}</p>
        </div>
        
        <div className="p-6 bg-white rounded-2xl border border-red-100 space-y-4">
          <p className="text-xs text-stone-500 font-sans">
            One or more micro-lenses failed to align. Try switching models and retrying:
          </p>
          <div className="flex justify-center">
            <ModelSelector 
              selectedModel={selectedModel} 
              onSelect={handleModelChange} 
            />
          </div>
          <button
            onClick={() => processVargas()}
            className="w-full py-3 bg-stone-900 text-white rounded-xl text-xs font-mono uppercase tracking-[0.2em] hover:bg-stone-800 transition-all shadow-lg"
          >
            Retry Micro-Lens Extraction
          </button>
        </div>
      </div>
    );
  }

  return (
    <div className="max-w-4xl mx-auto space-y-12 animate-in fade-in slide-in-from-bottom-4 duration-700">
      <div className="flex flex-col md:flex-row md:items-center justify-between border-b border-stone-200 pb-6 gap-6">
        <div className="flex items-center gap-3">
          <button 
            onClick={() => setScreen(3)}
            className="w-10 h-10 bg-white border border-stone-200 text-stone-600 rounded-full flex items-center justify-center hover:bg-stone-50 transition-colors"
          >
            <ArrowLeft size={18} />
          </button>
          <div>
            <h2 className="text-3xl font-serif italic text-stone-900">Synthesis Audit</h2>
            <p className="text-xs font-mono uppercase tracking-widest text-stone-400">Step 3 • Life Area Integration</p>
          </div>
        </div>

        <div className="flex flex-col items-end gap-1">
          <span className="text-[10px] font-mono uppercase tracking-widest text-stone-400">AI Intelligence Engine</span>
          <ModelSelector 
            selectedModel={selectedModel} 
            onSelect={setModelPreference.bind(null, 'screen4')} 
            disabled={loading}
          />
        </div>
      </div>

      <motion.div 
        initial={{ opacity: 0, scale: 0.98 }}
        animate={{ opacity: 1, scale: 1 }}
        className="bg-stone-900 rounded-3xl overflow-hidden shadow-2xl border border-stone-800"
      >
        <div className="p-8 md:p-12 text-center border-b border-stone-800 bg-gradient-to-b from-stone-800 to-stone-900">
          <Sparkles className="w-12 h-12 text-amber-500 mx-auto mb-6" />
          <h3 className="text-3xl font-serif italic text-white mb-4">
            {currentArea.label}
          </h3>
          <p className="text-stone-400 font-mono text-sm max-w-2xl mx-auto leading-relaxed">
            The technical data for {vargasToProcess.join(' and ')} has been successfully extracted. 
            Click the button below to generate a master prompt for Vedic Astrology Interpretation by Nhi Vo that synthesizes these micro-lenses deeply with your foundational D1 chart.
          </p>

          <button 
            onClick={handleCopySynthesis}
            className={`mt-10 mx-auto flex items-center justify-center gap-3 px-10 py-4 rounded-full font-serif italic text-xl transition-all shadow-xl hover:shadow-2xl w-full max-w-md ${
              copied ? 'bg-green-600 text-white' : 'bg-amber-600 text-white hover:bg-amber-500'
            }`}
          >
            {copied ? <Check size={24} /> : <Copy size={24} />}
            {copied ? 'Synthesis Prompt Copied!' : 'Copy Synthesis Prompt (Full Audit)'}
          </button>
        </div>

        <div className="p-8 bg-stone-100">
          <h4 className="text-sm font-mono uppercase tracking-widest text-stone-500 mb-6 flex items-center gap-2">
            <ShieldCheck size={16} /> Technical Extraction Preview
          </h4>
          <div className="grid md:grid-cols-2 gap-6">
            {allVargas.map(varga => (
              <div key={varga} className="bg-white rounded-2xl p-6 border border-stone-200 shadow-sm">
                 <h5 className="font-serif text-lg text-stone-900 mb-4 pb-2 border-b border-stone-100">{varga} Chart</h5>
                 <div className="prose prose-sm prose-stone font-mono text-xs max-w-none text-stone-600 mb-4">
                   <ReactMarkdown>{vargaResults[varga] || 'No data extracted.'}</ReactMarkdown>
                 </div>
                 {vargaModels[varga] && (
                    <p className="text-[9px] font-mono uppercase tracking-widest text-stone-300 border-t border-stone-50 pt-2">
                      Generated by: <span className="text-stone-400 font-bold">{vargaModels[varga]}</span>
                    </p>
                  )}
              </div>
            ))}
          </div>
        </div>

        <div className="p-8 border-t border-stone-800 flex justify-center bg-stone-900">
           <button 
            onClick={() => setScreen(5)}
            className="flex items-center gap-3 bg-white text-stone-900 px-12 py-4 rounded-full font-serif italic text-xl hover:bg-stone-50 transition-all shadow-xl hover:shadow-2xl"
          >
            Proceed to Timing
            <ArrowRight size={24} />
          </button>
        </div>
      </motion.div>
    </div>
  );
}