import React, { useState, useEffect } from 'react';
import { AstroData } from '../types';
import { summarizeAstroData, extractErrorMessage } from '../services/geminiService';
import { VEDIC_KNOWLEDGE_BASE, MASTER_LIFE_LESSONS_PROMPT } from '../services/astroWorkflow';
import { Loader2, CheckCircle2, ShieldCheck, Copy, Check, ShieldAlert, Sparkles } from 'lucide-react';
import ReactMarkdown from 'react-markdown';
import { motion } from 'motion/react';
import { useAstroContext } from '../context/AstroContext';
import ModelSelector from './ModelSelector';

interface Props {
  userData: AstroData;
  onComplete: (summary: string) => void;
}

export default function TechnicalRoadmap({ userData, onComplete }: Props) {
  const { state, setScreen, setModelPreference, setStepError } = useAstroContext();
  const [loading, setLoading] = useState(false);
  const [summary, setSummary] = useState<string>('');
  const [modelName, setModelName] = useState<string>('');
  const [copiedKey, setCopiedKey] = useState<string | null>(null);
  const [masterPromptCopied, setMasterPromptCopied] = useState<boolean>(false);
  const [auditVerified, setAuditVerified] = useState<boolean>(false);

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

  const getSummary = async (retryModel?: string) => {
    try {
      setLoading(true);
      setStepError('screen2', null);
      const targetModel = retryModel || selectedModel;
      const result = await summarizeAstroData(userData, targetModel);
      setSummary(result.text);
      setModelName(result.model);
      onComplete(result.text);
    } catch (err: any) {
      console.error(err);
      setStepError('screen2', extractErrorMessage(err));
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    if (userData.summary) {
      setSummary(userData.summary);
      setLoading(false);
      return;
    }

    if (summary || loading || currentError) return;

    getSummary();
  }, [userData, summary, onComplete]);

  const handleModelChange = (modelId: string) => {
    setModelPreference('screen2', modelId);
    // Automatically trigger reload if we had an error
    if (currentError) {
      getSummary(modelId);
    }
  };

  const parseSections = (text: string) => {
    const findSection = (id: string) => {
      // Loosened regex to handle bolding, different spacing, and variant formatting
      const regex = new RegExp(`(?:^|\\n)(?:#+)?\\s*(?:\\*\\*)?\\s*(?:SECTION|Step)\\s*${id}\\b[\\s\\S]*?(?=\\n(?:#+)?\\s*(?:\\*\\*)?\\s*(?:SECTION|Step)|$)`, 'i');
      const match = text.match(regex);
      return match ? match[0].trim() : '';
    };

    const sections = {
      step1: findSection('1'),
      step2_1: findSection('2\\.1'),
      step2_2: findSection('2\\.2'),
      step2_3: findSection('2\\.3'),
      step2_4: findSection('2\\.4'),
    };

    // Fallback if no sections are found
    if (!sections.step1 && !sections.step2_1 && !sections.step2_2 && !sections.step2_3 && !sections.step2_4) {
      return { step1: text, step2_1: '', step2_2: '', step2_3: '', step2_4: '' };
    }

    return sections;
  };

  const sections = parseSections(summary);

  const handleCopyStep = (key: string, stepLabel: string, technicalData: string) => {
    const guidanceKey = `step${key}` as keyof typeof VEDIC_KNOWLEDGE_BASE;
    const guidanceText = VEDIC_KNOWLEDGE_BASE[guidanceKey];

    const prompt = `You are the Vedic Astrology Spiritual Guide, you will explain the meaning of those vedic technological data into application & practical, still spiritual meaning for me.

FOLLOWING THE GUIDANCE OF ${stepLabel.toUpperCase()}:
${guidanceText}

TECHNICAL DATA FOR ANALYSIS:
${technicalData}
`;

    navigator.clipboard.writeText(prompt);
    setCopiedKey(key);
    setTimeout(() => setCopiedKey(null), 2000);
  };

  const handleCopyMasterPrompt = () => {
    const fullPrompt = `${MASTER_LIFE_LESSONS_PROMPT}\n\n${summary}`;
    navigator.clipboard.writeText(fullPrompt);
    setMasterPromptCopied(true);
    setTimeout(() => setMasterPromptCopied(false), 2000);
  };

  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">Distilling Your Karma...</h3>
          <p className="text-sm font-mono text-stone-400 uppercase tracking-widest">Generating Technical Roadmap (Screen 2)</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">The stars are 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">
            This model might be overloaded or unavailable. Try switching to a different one:
          </p>
          <div className="flex justify-center">
            <ModelSelector 
              selectedModel={selectedModel} 
              onSelect={handleModelChange} 
            />
          </div>
          <button
            onClick={() => getSummary()}
            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 Analysis
          </button>
        </div>
      </div>
    );
  }

  const renderSection = (key: string, labelNumber: string, content: string, title: string) => {
    if (!content || content.trim().length === 0) return null;
    return (
      <motion.div
        initial={{ opacity: 0, y: 10 }}
        whileInView={{ opacity: 1, y: 0 }}
        viewport={{ once: true }}
        className="bg-white rounded-3xl border border-stone-200 shadow-sm overflow-hidden"
      >
        <div className="p-6 border-b border-stone-100 bg-stone-50 flex items-center justify-between">
          <div className="flex items-center gap-3">
            <span className="w-10 h-10 rounded-full bg-stone-900 text-white flex items-center justify-center text-xs font-mono">
              {labelNumber}
            </span>
            <h3 className="text-lg font-serif italic text-stone-900">{title}</h3>
          </div>
          <button
            onClick={() => handleCopyStep(key, `Step ${labelNumber}`, content)}
            className={`flex items-center gap-2 px-4 py-2 rounded-full text-[10px] font-mono uppercase tracking-widest transition-all border ${copiedKey === key
                ? 'bg-green-50 border-green-200 text-green-600'
                : 'bg-stone-900 text-white hover:bg-stone-800 border-stone-900'
              }`}
          >
            {copiedKey === key ? <Check size={12} /> : <Copy size={12} />}
            {copiedKey === key ? 'Prompt Copied' : 'Copy Interpretation Prompt'}
          </button>
        </div>
        <div className="p-8 prose prose-stone max-w-none prose-sm font-mono text-stone-700 bg-white/50">
          <ReactMarkdown>{content}</ReactMarkdown>
        </div>
      </motion.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">
          <div className="w-12 h-12 bg-stone-900 text-white rounded-full flex items-center justify-center">
            <ShieldCheck size={28} />
          </div>
          <div>
            <h2 className="text-3xl font-serif italic text-stone-900">Technical Roadmap</h2>
            <p className="text-xs font-mono uppercase tracking-widest text-stone-400">Foundation & Promise Analysis</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, 'screen2')} 
            disabled={loading}
          />
        </div>
      </div>

      <div className="space-y-4">
        <div className="p-6 bg-stone-900 border border-stone-800 rounded-2xl flex flex-col md:flex-row items-center justify-between gap-6 shadow-xl relative overflow-hidden group">
          <div className="absolute inset-0 bg-gradient-to-r from-stone-800/0 via-white/5 to-stone-800/0 translate-x-[-100%] group-hover:translate-x-[100%] transition-transform duration-1000" />
          <div className="flex items-center gap-4 relative z-10">
            <div className={`w-12 h-12 rounded-full flex items-center justify-center transition-all ${auditVerified ? 'bg-green-500 text-white shadow-[0_0_20px_rgba(34,197,94,0.3)]' : 'bg-red-500/20 text-red-500 shadow-[0_0_20px_rgba(239,68,68,0.2)]'}`}>
              <ShieldCheck size={28} />
            </div>
            <div>
              <h3 className="text-white font-serif italic text-lg">@VedicGuru Sequential Audit</h3>
              <p className="text-[10px] font-mono uppercase tracking-widest text-stone-400">Mandatory Technical Verification</p>
            </div>
          </div>
          
          <div className="flex items-center gap-3 bg-white/5 p-4 rounded-xl border border-white/10 relative z-10">
            <input 
              type="checkbox" 
              id="auditCheck"
              className="w-5 h-5 accent-green-500 rounded border-white/20 bg-transparent focus:ring-green-500"
              checked={auditVerified}
              onChange={e => setAuditVerified(e.target.checked)}
            />
            <label htmlFor="auditCheck" className="text-sm font-sans text-stone-200 cursor-pointer select-none">
              I have verified all degrees & signs are 100% accurate.
              <span className="block text-[10px] text-stone-500 uppercase tracking-tight">Step-by-step audit complete</span>
            </label>
          </div>
        </div>

        <div className="grid gap-8">
          {renderSection('1', '1', sections.step1, "Step 1: Foundational Self")}
          {renderSection('2_1', '2.1', sections.step2_1, "Step 2.1: Players & Yoga Producers")}
          {renderSection('2_2', '2.2', sections.step2_2, "Step 2.2: Structural Evaluation")}
          {renderSection('2_3', '2.3', sections.step2_3, "Step 2.3: Capacity & Dignity")}
          {renderSection('2_4', '2.4', sections.step2_4, "Step 2.4: Karaka Confluence")}
        </div>

        <div className="mt-12 flex flex-col items-center gap-6">
          <button
            onClick={() => setScreen(3)}
            disabled={!auditVerified}
            className={`px-12 py-4 rounded-full font-serif italic text-xl transition-all shadow-xl flex items-center gap-3 ${
              auditVerified 
               ? 'bg-stone-900 text-white hover:bg-stone-800 hover:shadow-2xl active:scale-95' 
               : 'bg-stone-200 text-stone-400 cursor-not-allowed opacity-50'
            }`}
          >
            {auditVerified ? 'Proceed to Step 3' : 'Audit Required to Proceed'}
            <CheckCircle2 size={24} className={auditVerified ? 'text-green-400' : 'text-stone-300'} />
          </button>
          
          {!auditVerified && (
            <p className="text-[10px] font-mono uppercase tracking-[0.2em] text-red-400 animate-pulse">
              Locked: Complete the technical audit above to unlock Step 3
            </p>
          )}
        </div>

        {/* Master Life Lessons Prompt Section */}
        {auditVerified && summary && (
          <motion.div 
            initial={{ opacity: 0, y: 10 }}
            animate={{ opacity: 1, y: 0 }}
            className="mt-12 p-8 bg-stone-900 rounded-3xl text-stone-100 shadow-xl overflow-hidden relative"
          >
            <div className="absolute top-0 right-0 w-64 h-64 bg-stone-800 rounded-full blur-[100px] opacity-50 -translate-y-1/2 translate-x-1/2 pointer-events-none" />
            <div className="relative z-10 space-y-4">
              <h3 className="text-2xl font-serif italic text-white flex items-center gap-3">
                <Sparkles size={24} className="text-stone-400" />
                Takeaway: Master Life Lessons Prompt
              </h3>
              <p className="text-sm text-stone-400 max-w-2xl leading-relaxed">
                Want a profound reading of your core karma and psychological architecture without an exact birth time? Copy this highly engineered prompt (which includes your verified data) and paste it into your favorite chat AI (like ChatGPT or Claude).
              </p>
              <button
                onClick={handleCopyMasterPrompt}
                className="mt-4 px-6 py-3 bg-white text-stone-900 rounded-xl font-mono text-sm tracking-widest uppercase hover:bg-stone-200 transition-colors flex items-center gap-2"
              >
                {masterPromptCopied ? <Check size={18} /> : <Copy size={18} />}
                {masterPromptCopied ? 'Prompt Copied!' : 'Copy Master Prompt & Data'}
              </button>
            </div>
          </motion.div>
        )}
      </div>
      {modelName && (
        <div className="flex justify-center mt-8">
          <p className="text-[10px] font-mono uppercase tracking-[0.2em] text-stone-300">
            Technical extraction generated by: <span className="text-stone-400 font-bold">{modelName}</span>
          </p>
        </div>
      )}
    </div>
  );
}