import React from 'react';
import { motion, AnimatePresence } from 'motion/react';
import { AlertTriangle, Lightbulb, CheckCircle2, ChevronRight, RefreshCw, Code2, Brain, Target } from 'lucide-react';
import { ErrorAnalysis } from '../lib/errorAnalyzer';
import { cn } from '../lib/utils';

interface ErrorAnalyzerViewProps {
  analysis: ErrorAnalysis;
  onRetry: () => void;
  currentHintLevel: number;
  onShowNextHint: () => void;
}

export function ErrorAnalyzerView({ analysis, onRetry, currentHintLevel, onShowNextHint }: ErrorAnalyzerViewProps) {
  const [activeStep, setActiveStep] = React.useState(1);

  return (
    <motion.div 
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      className="mt-8 space-y-6"
    >
      {/* Error Header */}
      <div className="bg-red-500/10 border border-red-500/20 rounded-2xl p-6">
        <div className="flex items-center gap-3 mb-4">
          <div className="p-2 bg-red-500/20 rounded-lg text-red-500">
            <AlertTriangle size={24} />
          </div>
          <div>
            <h3 className="text-lg font-bold text-white">{analysis.errorType} Error Detected</h3>
            <p className="text-sm text-red-400/80">Don't worry! Mistakes are the best way to learn.</p>
          </div>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
          <div className="p-4 bg-black/20 rounded-xl border border-white/5">
            <div className="text-[10px] font-bold text-slate-500 uppercase tracking-widest mb-1">What happened?</div>
            <p className="text-xs text-slate-300 leading-relaxed">{analysis.explanation.what}</p>
          </div>
          <div className="p-4 bg-black/20 rounded-xl border border-white/5">
            <div className="text-[10px] font-bold text-slate-500 uppercase tracking-widest mb-1">Why is it wrong?</div>
            <p className="text-xs text-slate-300 leading-relaxed">{analysis.explanation.why}</p>
          </div>
          <div className="p-4 bg-black/20 rounded-xl border border-white/5">
            <div className="text-[10px] font-bold text-slate-500 uppercase tracking-widest mb-1">Where is it?</div>
            <p className="text-xs text-slate-300 leading-relaxed font-medium text-[#0b8c9f]">{analysis.explanation.where}</p>
          </div>
        </div>
      </div>

      {/* Step-by-Step Learning */}
      <div className="bg-dark-card border border-dark-border rounded-2xl overflow-hidden">
        <div className="p-4 bg-slate-800/50 border-b border-dark-border flex items-center justify-between">
          <div className="flex items-center gap-2">
            <Brain size={18} className="text-purple-400" />
            <span className="text-xs font-bold text-white uppercase tracking-widest">Step-by-Step Learning</span>
          </div>
          <div className="flex gap-1">
            {[1, 2, 3].map(step => (
              <button
                key={step}
                onClick={() => setActiveStep(step)}
                className={cn(
                  "w-8 h-8 rounded-lg text-xs font-bold transition-all",
                  activeStep === step 
                    ? "bg-[#0b8c9f] text-white" 
                    : "bg-slate-800 text-slate-500 hover:text-slate-300"
                )}
              >
                {step}
              </button>
            ))}
          </div>
        </div>
        <div className="p-6">
          <AnimatePresence mode="wait">
            <motion.div
              key={activeStep}
              initial={{ opacity: 0, x: 10 }}
              animate={{ opacity: 1, x: 0 }}
              exit={{ opacity: 0, x: -10 }}
              className="space-y-4"
            >
              <div className="flex items-start gap-4">
                <div className="w-10 h-10 rounded-xl bg-[#0b8c9f]/10 flex items-center justify-center text-[#0b8c9f] shrink-0">
                  {activeStep === 1 ? <Target size={20} /> : activeStep === 2 ? <Brain size={20} /> : <CheckCircle2 size={20} />}
                </div>
                <div>
                  <h4 className="font-bold text-white mb-1">
                    {activeStep === 1 ? "Identify the Mistake" : activeStep === 2 ? "Understand the Concept" : "The Correct Approach"}
                  </h4>
                  <p className="text-sm text-slate-400 leading-relaxed">
                    {activeStep === 1 ? analysis.steps.step1 : activeStep === 2 ? analysis.steps.step2 : analysis.steps.step3}
                  </p>
                </div>
              </div>
              {activeStep < 3 && (
                <button 
                  onClick={() => setActiveStep(prev => prev + 1)}
                  className="text-xs font-bold text-[#0b8c9f] hover:underline flex items-center gap-1 ml-14"
                >
                  Next Step <ChevronRight size={14} />
                </button>
              )}
            </motion.div>
          </AnimatePresence>
        </div>
      </div>

      {/* Hint System */}
      <div className="bg-yellow-500/5 border border-yellow-500/20 rounded-2xl p-6">
        <div className="flex items-center justify-between mb-4">
          <div className="flex items-center gap-2">
            <Lightbulb size={20} className="text-yellow-500" />
            <span className="text-xs font-bold text-yellow-500 uppercase tracking-widest">Hint System</span>
          </div>
          {currentHintLevel < 3 && (
            <button 
              onClick={onShowNextHint}
              className="text-[10px] font-bold text-yellow-500 hover:underline uppercase tracking-widest"
            >
              {currentHintLevel === 0 ? "Get a Hint" : "Need more help?"}
            </button>
          )}
        </div>

        <div className="space-y-3">
          {currentHintLevel >= 1 && (
            <motion.div 
              initial={{ opacity: 0, x: -10 }}
              animate={{ opacity: 1, x: 0 }}
              className="p-3 bg-yellow-500/10 rounded-xl border border-yellow-500/20 text-xs text-yellow-200/80 italic"
            >
              <span className="font-bold mr-2">Hint 1:</span> {analysis.hints[0]}
            </motion.div>
          )}
          {currentHintLevel >= 2 && (
            <motion.div 
              initial={{ opacity: 0, x: -10 }}
              animate={{ opacity: 1, x: 0 }}
              className="p-3 bg-yellow-500/10 rounded-xl border border-yellow-500/20 text-xs text-yellow-200/80 italic"
            >
              <span className="font-bold mr-2">Hint 2:</span> {analysis.hints[1]}
            </motion.div>
          )}
          {currentHintLevel >= 3 && (
            <motion.div 
              initial={{ opacity: 0, x: -10 }}
              animate={{ opacity: 1, x: 0 }}
              className="p-4 bg-green-500/10 rounded-xl border border-green-500/20 space-y-3"
            >
              <div className="text-xs text-green-400 font-bold uppercase tracking-widest">Final Explanation</div>
              <p className="text-xs text-slate-300 leading-relaxed">{analysis.hints[2]}</p>
              <div className="pt-3 border-t border-green-500/20">
                <div className="text-[10px] font-bold text-slate-500 uppercase mb-2">Corrected Code Snippet</div>
                <pre className="text-[10px] font-mono text-green-400 bg-black/40 p-3 rounded-lg overflow-x-auto">
                  {analysis.correctedCode}
                </pre>
              </div>
            </motion.div>
          )}
        </div>
      </div>

      {/* Suggested Fix & Retry */}
      <div className="flex flex-col sm:flex-row items-center gap-4">
        <div className="flex-1 p-4 bg-[#0b8c9f]/5 border border-[#0b8c9f]/20 rounded-xl flex items-center gap-3">
          <div className="p-2 bg-[#0b8c9f]/10 rounded-lg text-[#0b8c9f]">
            <Code2 size={20} />
          </div>
          <div>
            <div className="text-[10px] font-bold text-slate-500 uppercase tracking-widest mb-0.5">Quick Fix</div>
            <p className="text-sm font-bold text-white">{analysis.suggestedFix}</p>
          </div>
        </div>
        <button 
          onClick={onRetry}
          className="w-full sm:w-auto bg-white text-black px-8 py-4 rounded-xl font-bold hover:bg-slate-200 transition-all flex items-center justify-center gap-2 shadow-xl"
        >
          <RefreshCw size={20} /> Try Again
        </button>
      </div>
    </motion.div>
  );
}
