src/pages/Quiz.jsx

import React, { useState, useEffect } from 'react';
import { Link } from 'react-router-dom';
import { createPageUrl } from '@/utils';
import { motion, AnimatePresence } from 'framer-motion';
import { Brain, CheckCircle2, XCircle, ArrowLeft, Trophy, RotateCcw, Sparkles, Target } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Progress } from '@/components/ui/progress';
import confetti from 'canvas-confetti';

const questions = [
  {
    id: 1,
    question: "In YOLO (You Only Look Once), what makes it faster than traditional object detection methods?",
    options: [
      "It uses smaller images",
      "It processes the entire image in a single pass instead of multiple regions",
      "It only detects one object at a time",
      "It uses black and white images"
    ],
    correct: 1,
    topic: "Object Detection"
  },
  {
    id: 2,
    question: "What does a confidence score of 95% mean in object detection?",
    options: [
      "The object is 95% visible in the image",
      "The AI is 95% certain about its prediction",
      "95% of the object is inside the bounding box",
      "The detection took 95% of the processing time"
    ],
    correct: 1,
    topic: "Object Detection"
  },
  {
    id: 3,
    question: "How many keypoints does a standard pose estimation model typically track on the human body?",
    options: [
      "7 keypoints",
      "10 keypoints",
      "17 keypoints",
      "25 keypoints"
    ],
    correct: 2,
    topic: "Pose Estimation"
  },
  {
    id: 4,
    question: "What are 'skeleton lines' in pose estimation?",
    options: [
      "Lines that show bones in an X-ray",
      "Connections between keypoints showing body structure",
      "Errors in the detection algorithm",
      "Grid lines dividing the image"
    ],
    correct: 1,
    topic: "Pose Estimation"
  },
  {
    id: 5,
    question: "Which of these is NOT one of the 7 basic emotions in FER (Facial Emotion Recognition)?",
    options: [
      "Fear",
      "Disgust",
      "Confused",
      "Surprise"
    ],
    correct: 2,
    topic: "Emotion Recognition"
  },
  {
    id: 6,
    question: "Why do facial emotion recognition models use 48×48 pixel images?",
    options: [
      "Larger images don't work with AI",
      "Smaller size allows faster processing while retaining key facial features",
      "48×48 is the size of human faces",
      "It's the only size cameras can capture"
    ],
    correct: 1,
    topic: "Emotion Recognition"
  },
  {
    id: 7,
    question: "Which technology would be BEST for analyzing a dancer's movements in real-time?",
    options: [
      "Object Detection",
      "Emotion Recognition",
      "Pose Estimation",
      "Voice Recognition"
    ],
    correct: 2,
    topic: "Pose Estimation"
  },
  {
    id: 8,
    question: "In object detection, what happens during 'non-max suppression'?",
    options: [
      "The AI stops detecting objects",
      "Duplicate or overlapping bounding boxes are removed",
      "The confidence threshold is lowered",
      "The image brightness is reduced"
    ],
    correct: 1,
    topic: "Object Detection"
  },
  {
    id: 9,
    question: "Why is consent important before using emotion recognition technology on someone?",
    options: [
      "It makes the AI more accurate",
      "People have a right to privacy and to know when they're being analyzed",
      "It's required by all cameras",
      "Consent improves the lighting in photos"
    ],
    correct: 1,
    topic: "Emotion Recognition"
  },
  {
    id: 10,
    question: "What is the main advantage of using grayscale images in emotion recognition instead of color?",
    options: [
      "Grayscale images look more professional",
      "Color doesn't exist in emotions",
      "It reduces processing complexity and focuses on facial structure rather than skin tone",
      "Grayscale cameras are cheaper"
    ],
    correct: 2,
    topic: "Emotion Recognition"
  },
  {
    id: 11,
    question: "If pose estimation detects 2 people in a video, how many total keypoints might it track?",
    options: [
      "17 keypoints total",
      "34 keypoints (17 per person)",
      "25 keypoints total",
      "10 keypoints total"
    ],
    correct: 1,
    topic: "Pose Estimation"
  },
  {
    id: 12,
    question: "What is a potential bias concern with emotion recognition AI?",
    options: [
      "It works too slowly",
      "It might perform differently across different cultures, ages, or demographics",
      "It can only detect happy emotions",
      "It requires too much computer power"
    ],
    correct: 1,
    topic: "Emotion Recognition"
  }
];

// 60-minute TTL logic (same as Lessons.js)
const COMPLETED_KEY = 'completedChapters_v1';
const TTL_MS = 60 * 60 * 1000;

function checkLessonsCompleted() {
  try {
    const raw = localStorage.getItem(COMPLETED_KEY);
    if (!raw) return false;

    const parsed = JSON.parse(raw);
    const savedAt = parsed?.savedAt;
    const value = parsed?.value;

    if (!Array.isArray(value) || typeof savedAt !== 'number') return false;

    if (Date.now() - savedAt > TTL_MS) {
      localStorage.removeItem(COMPLETED_KEY);
      return false;
    }

    return value.length === 3;
  } catch {
    return false;
  }
}

export default function Quiz() {
  const [started, setStarted] = useState(false);
  const [currentQuestion, setCurrentQuestion] = useState(0);
  const [selectedAnswer, setSelectedAnswer] = useState(null);
  const [showResult, setShowResult] = useState(false);
  const [score, setScore] = useState(0);
  const [answers, setAnswers] = useState([]);
  const [finished, setFinished] = useState(false);
  
  const [allLessonsCompleted, setAllLessonsCompleted] = useState(checkLessonsCompleted);

  // Trigger confetti when finished with perfect score
  useEffect(() => {
    if (finished && score === questions.length) {
      triggerConfetti();
    }
  }, [finished, score]);

  const triggerConfetti = () => {
    const duration = 5 * 1000;
    const animationEnd = Date.now() + duration;
    const defaults = { startVelocity: 30, spread: 360, ticks: 60, zIndex: 0 };

    const random = (min, max) => Math.random() * (max - min) + min;

    const interval = setInterval(function() {
      const timeLeft = animationEnd - Date.now();

      if (timeLeft <= 0) {
        return clearInterval(interval);
      }

      const particleCount = 50 * (timeLeft / duration);
      
      // Since particles fall down, start a bit higher than random
      confetti({
        ...defaults, 
        particleCount,
        origin: { x: random(0.1, 0.3), y: Math.random() - 0.2 }
      });
      confetti({
        ...defaults, 
        particleCount,
        origin: { x: random(0.7, 0.9), y: Math.random() - 0.2 }
      });
    }, 250);
  };

  const handleStart = () => {
    setStarted(true);
    setCurrentQuestion(0);
    setScore(0);
    setAnswers([]);
    setFinished(false);
  };

  const handleAnswer = (index) => {
    if (showResult) return;
    
    setSelectedAnswer(index);
    setShowResult(true);
    
    const isCorrect = index === questions[currentQuestion].correct;
    if (isCorrect) {
      setScore(score + 1);
    }
    
    setAnswers([...answers, { questionId: currentQuestion, selected: index, correct: isCorrect }]);
  };

  const handleNext = () => {
    if (currentQuestion < questions.length - 1) {
      setCurrentQuestion(currentQuestion + 1);
      setSelectedAnswer(null);
      setShowResult(false);
    } else {
      setFinished(true);
    }
  };

  const getScoreMessage = () => {
    const percentage = (score / questions.length) * 100;
    if (percentage === 100) return { emoji: "🏆", message: "PERFECT SCORE! You're an AI Vision Master!" };
    if (percentage >= 80) return { emoji: "🌟", message: "Amazing! You really know your AI stuff!" };
    if (percentage >= 60) return { emoji: "👍", message: "Good job! Keep learning and you'll be an expert!" };
    if (percentage >= 40) return { emoji: "📚", message: "Nice try! Review the lessons and try again!" };
    return { emoji: "💪", message: "Don't give up! Go through the lessons and come back stronger!" };
  };

  // Start Screen
  if (!started) {
    return (
      <div className="min-h-screen bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900 pt-24 pb-12 px-6">
        <div className="fixed inset-0 overflow-hidden pointer-events-none">
          <div className="absolute top-20 left-10 w-72 h-72 bg-yellow-500/20 rounded-full blur-3xl animate-pulse" />
          <div className="absolute bottom-20 right-10 w-96 h-96 bg-orange-500/20 rounded-full blur-3xl animate-pulse" />
        </div>

        <div className="max-w-2xl mx-auto relative text-center">
          <Link to={createPageUrl('Home')}>
            <Button className="text-white/70 hover:text-white mb-8 bg-transparent border-0 hover:bg-white/5">
              <ArrowLeft className="w-4 h-4 mr-2" />
              Back to Home
            </Button>
          </Link>

          <motion.div
            initial={{ scale: 0 }}
            animate={{ scale: 1 }}
            transition={{ type: "spring" }}
            className="w-32 h-32 mx-auto rounded-3xl bg-gradient-to-br from-yellow-500 to-orange-500 flex items-center justify-center shadow-2xl shadow-yellow-500/30 mb-8"
          >
            <Target className="w-16 h-16 text-white" />
          </motion.div>

          <motion.h1
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            className="text-4xl md:text-5xl font-black text-white mb-4"
          >
            AI Vision Quiz
          </motion.h1>

          <motion.p
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: 0.1 }}
            className="text-xl text-white/70 mb-8"
          >
            Test your knowledge with {questions.length} questions about Object Detection, Pose Estimation, and Emotion Recognition!
          </motion.p>

          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: 0.2 }}
            className="bg-white/5 backdrop-blur-xl rounded-3xl p-8 border border-white/10 mb-8"
          >
            <div className="grid grid-cols-3 gap-4 text-center">
              <div>
                <div className="text-3xl font-bold text-cyan-400">{questions.length}</div>
                <div className="text-white/60">Questions</div>
              </div>
              <div>
                <div className="text-3xl font-bold text-purple-400">3</div>
                <div className="text-white/60">Topics</div>
              </div>
              <div>
                <div className="text-3xl font-bold text-emerald-400">∞</div>
                <div className="text-white/60">Retries</div>
              </div>
            </div>
          </motion.div>

          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: 0.3 }}
          >
            {allLessonsCompleted ? (
              <Button
                onClick={handleStart}
                size="lg"
                className="text-xl px-12 py-8 bg-gradient-to-r from-yellow-500 to-orange-500 hover:from-yellow-600 hover:to-orange-600 rounded-2xl shadow-2xl shadow-orange-500/30 text-white font-bold border-0 transition-all hover:scale-105"
              >
                <Sparkles className="w-6 h-6 mr-2" />
                Start Quiz
              </Button>
            ) : (
              <div>
                <Button
                  disabled
                  size="lg"
                  className="text-xl px-12 py-8 bg-slate-700 text-slate-400 rounded-2xl font-bold border-0 cursor-not-allowed opacity-60 mb-4"
                >
                  🔒 Quiz Locked
                </Button>
                <p className="text-white/60">Complete all 3 lessons to unlock the quiz!</p>
                <Link to={createPageUrl('Lessons')} className="inline-block mt-4">
                  <Button className="bg-blue-600 hover:bg-blue-700 text-white border-0 rounded-xl px-6 py-3">
                    Go to Lessons
                  </Button>
                </Link>
              </div>
            )}
          </motion.div>
        </div>
      </div>
    );
  }

  // Results Screen
  if (finished) {
    const { emoji, message } = getScoreMessage();
    const percentage = Math.round((score / questions.length) * 100);

    return (
      <div className="min-h-screen bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900 pt-24 pb-12 px-6">
        <div className="fixed inset-0 overflow-hidden pointer-events-none">
          <div className="absolute top-20 left-10 w-72 h-72 bg-yellow-500/20 rounded-full blur-3xl animate-pulse" />
          <div className="absolute bottom-20 right-10 w-96 h-96 bg-orange-500/20 rounded-full blur-3xl animate-pulse" />
        </div>

        <div className="max-w-2xl mx-auto relative">
          <motion.div
            initial={{ scale: 0 }}
            animate={{ scale: 1 }}
            transition={{ type: "spring" }}
            className="text-center"
          >
            <div className="text-8xl mb-6">{emoji}</div>
            
            <h1 className="text-4xl md:text-5xl font-black text-white mb-4">
              Quiz Complete!
            </h1>

            <div className="bg-white/5 backdrop-blur-xl rounded-3xl p-8 border border-white/10 mb-8">
              <div className="text-6xl font-black text-transparent bg-clip-text bg-gradient-to-r from-yellow-400 to-orange-400 mb-2">
                {score}/{questions.length}
              </div>
              <div className="text-xl text-white/70 mb-6">
                {percentage}% Correct
              </div>
              <Progress value={percentage} className="h-4 bg-white/10" />
              <p className="text-white/80 mt-6 text-lg">{message}</p>
            </div>

            {/* Answer Summary */}
            <div className="bg-white/5 backdrop-blur-xl rounded-3xl p-6 border border-white/10 mb-8">
              <h3 className="text-lg font-bold text-white mb-4">Your Answers</h3>
              <div className="grid grid-cols-5 gap-2">
                {answers.map((answer, i) => (
                  <motion.div
                    key={i}
                    initial={{ scale: 0 }}
                    animate={{ scale: 1 }}
                    transition={{ delay: i * 0.05 }}
                    className={`w-12 h-12 rounded-xl flex items-center justify-center font-bold text-white ${
                      answer.correct 
                        ? 'bg-gradient-to-br from-emerald-500 to-teal-500' 
                        : 'bg-gradient-to-br from-red-500 to-rose-500'
                    }`}
                  >
                    {i + 1}
                  </motion.div>
                ))}
              </div>
            </div>

            <div className="flex flex-col sm:flex-row gap-4 justify-center mb-12">
              <Button
                onClick={handleStart}
                size="lg"
                className="bg-gradient-to-r from-yellow-500 to-orange-500 hover:from-yellow-600 hover:to-orange-600 rounded-xl text-white font-bold border-0 px-8 py-6 text-lg shadow-xl shadow-orange-500/25 transition-all hover:scale-105"
              >
                <RotateCcw className="w-5 h-5 mr-2" />
                Try Again
              </Button>
              <Link to={createPageUrl('Lessons')}>
                <Button
                  size="lg"
                  className="border-2 border-white/30 text-white bg-white/5 hover:bg-white/10 rounded-xl w-full px-8 py-6 text-lg font-bold transition-all"
                >
                  Review Lessons
                </Button>
              </Link>
            </div>

            {/* Test It Yourself Section */}
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: 0.3 }}
              className="bg-gradient-to-br from-blue-500/10 to-purple-500/10 rounded-3xl p-10 border border-blue-500/20"
            >
              <div className="text-center mb-6">
                <div className="text-5xl mb-4">🚀</div>
                <h2 className="text-3xl font-black text-white mb-3">Ready to Test It Yourself?</h2>
                <p className="text-white/70 text-lg mb-8">
                  Now that you've mastered the concepts, try building your own AI vision projects!
                </p>
              </div>
              
              <div className="grid md:grid-cols-3 gap-4 mb-8">
                <div className="bg-white/5 rounded-2xl p-6 border border-white/10">
                  <div className="text-3xl mb-3">👁️</div>
                  <h3 className="text-white font-bold mb-2">Object Detection</h3>
                  <p className="text-white/60 text-sm">Build your own detector</p>
                </div>
                <div className="bg-white/5 rounded-2xl p-6 border border-white/10">
                  <div className="text-3xl mb-3">🏃</div>
                  <h3 className="text-white font-bold mb-2">Pose Tracking</h3>
                  <p className="text-white/60 text-sm">Create motion games</p>
                </div>
                <div className="bg-white/5 rounded-2xl p-6 border border-white/10">
                  <div className="text-3xl mb-3">😊</div>
                  <h3 className="text-white font-bold mb-2">Emotion AI</h3>
                  <p className="text-white/60 text-sm">Analyze expressions</p>
                </div>
              </div>

            <Button
              size="lg"
              onClick={() => {
                window.location.href = "/Lab-Selection.html";
              }}
              className="w-full bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500 hover:from-blue-600 hover:via-purple-600 hover:to-pink-600 text-white font-bold text-xl py-8 rounded-2xl border-0 shadow-2xl transition-all hover:scale-105"
            >
              <Sparkles className="w-6 h-6 mr-3" />
              Launch AI Playground
            </Button>
            </motion.div>
          </motion.div>
        </div>
      </div>
    );
  }

  // Quiz Question Screen
  const question = questions[currentQuestion];

  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900 pt-24 pb-12 px-6">
      <div className="fixed inset-0 overflow-hidden pointer-events-none">
        <div className="absolute top-20 left-10 w-72 h-72 bg-yellow-500/20 rounded-full blur-3xl animate-pulse" />
        <div className="absolute bottom-20 right-10 w-96 h-96 bg-orange-500/20 rounded-full blur-3xl animate-pulse" />
      </div>

      <div className="max-w-2xl mx-auto relative">
        {/* Progress */}
        <div className="mb-8">
          <div className="flex items-center justify-between text-white/60 mb-2">
            <span>Question {currentQuestion + 1} of {questions.length}</span>
            <span className="px-3 py-1 rounded-full bg-white/10 text-sm">{question.topic}</span>
          </div>
          <Progress 
            value={((currentQuestion + 1) / questions.length) * 100} 
            className="h-2 bg-white/10"
          />
        </div>

        {/* Question */}
        <AnimatePresence mode="wait">
          <motion.div
            key={currentQuestion}
            initial={{ opacity: 0, x: 50 }}
            animate={{ opacity: 1, x: 0 }}
            exit={{ opacity: 0, x: -50 }}
          >
            <div className="bg-white/5 backdrop-blur-xl rounded-3xl p-8 border border-white/10 mb-6">
              <div className="flex items-start gap-4 mb-6">
                <div className="w-12 h-12 rounded-xl bg-gradient-to-br from-yellow-500 to-orange-500 flex items-center justify-center flex-shrink-0">
                  <Brain className="w-6 h-6 text-white" />
                </div>
                <h2 className="text-2xl font-bold text-white leading-relaxed">
                  {question.question}
                </h2>
              </div>

              {/* Options */}
              <div className="space-y-3">
                {question.options.map((option, index) => {
                  const isSelected = selectedAnswer === index;
                  const isCorrect = index === question.correct;
                  const showCorrect = showResult && isCorrect;
                  const showWrong = showResult && isSelected && !isCorrect;

                  return (
                    <motion.button
                      key={index}
                      onClick={() => handleAnswer(index)}
                      disabled={showResult}
                      className={`w-full p-4 rounded-2xl text-left transition-all border-2 ${
                        showCorrect
                          ? 'bg-emerald-500/20 border-emerald-500 text-white'
                          : showWrong
                            ? 'bg-red-500/20 border-red-500 text-white'
                            : isSelected
                              ? 'bg-white/20 border-white/40 text-white'
                              : 'bg-white/5 border-white/10 text-white/80 hover:bg-white/10 hover:border-white/20'
                      }`}
                      whileHover={!showResult ? { scale: 1.02 } : {}}
                      whileTap={!showResult ? { scale: 0.98 } : {}}
                    >
                      <div className="flex items-center gap-4">
                        <div className={`w-10 h-10 rounded-xl flex items-center justify-center font-bold ${
                          showCorrect
                            ? 'bg-emerald-500 text-white'
                            : showWrong
                              ? 'bg-red-500 text-white'
                              : 'bg-white/10 text-white/60'
                        }`}>
                          {showCorrect ? (
                            <CheckCircle2 className="w-5 h-5" />
                          ) : showWrong ? (
                            <XCircle className="w-5 h-5" />
                          ) : (
                            String.fromCharCode(65 + index)
                          )}
                        </div>
                        <span className="text-lg">{option}</span>
                      </div>
                    </motion.button>
                  );
                })}
              </div>
            </div>

            {/* Feedback */}
            <AnimatePresence>
              {showResult && (
                <motion.div
                  initial={{ opacity: 0, y: 20 }}
                  animate={{ opacity: 1, y: 0 }}
                  exit={{ opacity: 0, y: -20 }}
                  className={`rounded-2xl p-6 mb-6 ${
                    selectedAnswer === question.correct
                      ? 'bg-gradient-to-br from-emerald-500/20 to-teal-500/20 border border-emerald-500/30'
                      : 'bg-gradient-to-br from-red-500/20 to-rose-500/20 border border-red-500/30'
                  }`}
                >
                  <div className="flex items-center gap-3">
                    {selectedAnswer === question.correct ? (
                      <>
                        <CheckCircle2 className="w-8 h-8 text-emerald-400" />
                        <div>
                          <h3 className="text-xl font-bold text-white">Correct! 🎉</h3>
                          <p className="text-white/70">Great job! You got this one right.</p>
                        </div>
                      </>
                    ) : (
                      <>
                        <XCircle className="w-8 h-8 text-red-400" />
                        <div>
                          <h3 className="text-xl font-bold text-white">Not quite! 🤔</h3>
                          <p className="text-white/70">
                            The correct answer was: {question.options[question.correct]}
                          </p>
                        </div>
                      </>
                    )}
                  </div>
                </motion.div>
              )}
            </AnimatePresence>

            {/* Next Button */}
            {showResult && (
              <motion.div
                initial={{ opacity: 0 }}
                animate={{ opacity: 1 }}
                className="text-center"
              >
                <Button
                  onClick={handleNext}
                  size="lg"
                  className="bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700 rounded-2xl px-12 py-6 text-lg font-bold text-white border-0 shadow-xl shadow-purple-500/30 transition-all hover:scale-105"
                >
                  {currentQuestion < questions.length - 1 ? 'Next Question →' : '✨ See Results'}
                </Button>
              </motion.div>
            )}
          </motion.div>
        </AnimatePresence>
      </div>
    </div>
  );
}