import { useState, useEffect } from 'react';
import { Play, Check, X, Share2, RefreshCw, Clock } from 'lucide-react';

export default function TikTokKnowledgeQuiz() {
  const [gameState, setGameState] = useState('start'); // start, playing, result
  const [currentQuestion, setCurrentQuestion] = useState(0);
  const [score, setScore] = useState(0);
  const [selectedAnswer, setSelectedAnswer] = useState(null);
  const [timeLeft, setTimeLeft] = useState(15);
  const [isAnswered, setIsAnswered] = useState(false);
  const [shuffledQuestions, setShuffledQuestions] = useState([]);

  // TikTok quiz questions - removed filter questions
  const questions = [
    {
      question: "What dance trend featured people dancing to 'Savage' by Megan Thee Stallion?",
      options: ["Renegade", "Savage Challenge", "Say So Dance", "Blinding Lights Challenge"],
      correct: 1,
      explanation: "The Savage Challenge went viral in 2020 with choreography by Keara Wilson."
    },
    {
      question: "Which food trend involved making whipped coffee?",
      options: ["Pancake Cereal", "Dalgona Coffee", "Feta Pasta", "Cloud Bread"],
      correct: 1,
      explanation: "Dalgona Coffee became popular during early 2020 lockdowns."
    },
    {
      question: "Which song by Lizzo sparked a dance challenge where people toss their hair?",
      options: ["Truth Hurts", "Good As Hell", "About Damn Time", "Juice"],
      correct: 2,
      explanation: "The 'About Damn Time' choreography by Jaeden Gomez went viral in 2022."
    },
    {
      question: "What trend involves people transforming into their 'glow up' selves?",
      options: ["Level Up", "Transformation Tuesday", "Glow Up Challenge", "Version 2.0"],
      correct: 2,
      explanation: "The Glow Up Challenge shows dramatic before and after transformations."
    },
    {
      question: "Which viral sound starts with 'Bored in the house, and I'm in the house bored'?",
      options: ["Curtis Roach", "Charli D'Amelio", "Addison Rae", "Bella Poarch"],
      correct: 0,
      explanation: "Curtis Roach created this viral sound during pandemic lockdowns."
    },
    {
      question: "What dance trend is set to the song 'Supalonely' by BENEE?",
      options: ["The Renegade", "Say So Dance", "Supalonely Dance", "Cannibal Dance"],
      correct: 2,
      explanation: "The Supalonely dance became popular in early 2020."
    },
    {
      question: "Which food trend involves a block of feta cheese and cherry tomatoes?",
      options: ["TikTok Pasta", "Feta Pasta", "Baked Feta", "Tomato Surprise"],
      correct: 1,
      explanation: "Feta Pasta (or TikTok Pasta) became so popular it caused feta shortages."
    },
    {
      question: "Which viral challenge involves people showing their profile from both sides?",
      options: ["Silhouette Challenge", "Profile Check", "Side to Side", "Symmetry Check"],
      correct: 3,
      explanation: "The Symmetry Check trend has users showing both sides of their face."
    },
    // New questions replacing filter questions
    {
      question: "What TikTok trend had people stacking tiny pancakes in a bowl with syrup?",
      options: ["Breakfast Bowl", "Mini Pancakes", "Pancake Cereal", "Tiny Food"],
      correct: 2,
      explanation: "Pancake Cereal was a popular food trend where people made tiny pancakes and ate them like cereal."
    },
    {
      question: "Which viral TikTok song includes the lyrics 'Don't show up, don't come out'?",
      options: ["Drivers License", "Savage Love", "Mood", "Levitating"],
      correct: 0,
      explanation: "Olivia Rodrigo's 'Drivers License' became a massive TikTok hit with these lyrics."
    }
  ];

  // Shuffle questions on game start
  useEffect(() => {
    if (gameState === 'start') {
      const shuffled = [...questions].sort(() => Math.random() - 0.5);
      setShuffledQuestions(shuffled);
    }
  }, [gameState]);

  // Timer countdown
  useEffect(() => {
    let timer;
    if (gameState === 'playing' && !isAnswered && timeLeft > 0) {
      timer = setTimeout(() => setTimeLeft(timeLeft - 1), 1000);
    } else if (timeLeft === 0 && !isAnswered) {
      handleAnswer(null);
    }
    return () => clearTimeout(timer);
  }, [gameState, timeLeft, isAnswered]);

  const startGame = () => {
    setGameState('playing');
    setCurrentQuestion(0);
    setScore(0);
    setTimeLeft(15);
    setIsAnswered(false);
    setSelectedAnswer(null);
  };

  const handleAnswer = (index) => {
    setSelectedAnswer(index);
    setIsAnswered(true);
    
    if (index === shuffledQuestions[currentQuestion].correct) {
      setScore(score + 1);
    }
    
    setTimeout(() => {
      if (currentQuestion < shuffledQuestions.length - 1) {
        setCurrentQuestion(currentQuestion + 1);
        setSelectedAnswer(null);
        setIsAnswered(false);
        setTimeLeft(15);
      } else {
        setGameState('result');
      }
    }, 2000);
  };

  const getKnowledgeLevel = () => {
    const percentage = (score / questions.length) * 100;
    if (percentage >= 90) return "TikTok Expert";
    if (percentage >= 70) return "TikTok Enthusiast";
    if (percentage >= 50) return "Casual TikToker";
    if (percentage >= 30) return "TikTok Newbie";
    return "TikTok Outsider";
  };

  const getKnowledgeDescription = () => {
    const percentage = (score / questions.length) * 100;
    if (percentage >= 90) return "You're basically TikTok royalty! You know all the trends before they even go viral.";
    if (percentage >= 70) return "You definitely spend a good amount of time on TikTok and stay up to date with most trends.";
    if (percentage >= 50) return "You enjoy TikTok and catch some trends, but you might miss others.";
    if (percentage >= 30) return "You occasionally check TikTok but aren't keeping up with most trends.";
    return "You might need to download TikTok and start scrolling!";
  };

  return (
    <div className="min-h-screen bg-gradient-to-b from-[#121212] to-[#1D1D1D] text-white flex flex-col items-center justify-center p-4">
      <div className="w-full max-w-md bg-[#252525] rounded-xl shadow-lg overflow-hidden">
        <div className="bg-gradient-to-r from-[#FF0050] to-[#00F2EA] p-4 text-center">
          <h1 className="text-2xl font-bold">TikTok Knowledge Quiz</h1>
          <p className="text-sm opacity-90">How well do you know TikTok trends?</p>
        </div>

        {gameState === 'start' && (
          <div className="p-8 flex flex-col items-center">
            <img 
              src="https://i.imgur.com/8wYTx9j.png" 
              alt="TikTok Logo" 
              className="w-24 h-24 mb-6" 
            />
            <h2 className="text-xl font-bold mb-4">Test Your TikTok Knowledge</h2>
            <p className="text-center mb-6 text-gray-300">
              Answer 10 questions about viral TikTok trends, dances, and challenges to see how much of a TikTok expert you really are!
            </p>
            <button 
              onClick={startGame}
              className="flex items-center justify-center gap-2 bg-[#FF0050] hover:bg-[#D10045] text-white font-bold py-3 px-6 rounded-full transition-all transform hover:scale-105"
            >
              <Play size={20} />
              Start Quiz
            </button>
          </div>
        )}

        {gameState === 'playing' && (
          <div className="p-6">
            {/* Progress bar */}
            <div className="w-full bg-gray-700 rounded-full h-2.5 mb-4">
              <div 
                className="bg-gradient-to-r from-[#FF0050] to-[#00F2EA] h-2.5 rounded-full" 
                style={{ width: `${((currentQuestion) / questions.length) * 100}%` }}
              ></div>
            </div>
            
            <div className="flex justify-between items-center mb-4">
              <span className="text-sm font-medium text-gray-300">
                Question {currentQuestion + 1}/{questions.length}
              </span>
              <div className="flex items-center gap-1 bg-gray-800 px-3 py-1 rounded-full">
                <Clock size={16} className="text-[#00F2EA]" />
                <span className={`font-medium ${timeLeft <= 5 ? 'text-[#FF0050]' : 'text-[#00F2EA]'}`}>
                  {timeLeft}s
                </span>
              </div>
            </div>
            
            <div className="mb-6">
              <h2 className="text-xl font-bold mb-6">{shuffledQuestions[currentQuestion].question}</h2>
              
              <div className="space-y-3">
                {shuffledQuestions[currentQuestion].options.map((option, index) => (
                  <button
                    key={index}
                    onClick={() => !isAnswered && handleAnswer(index)}
                    disabled={isAnswered}
                    className={`w-full text-left p-4 rounded-lg transition-all ${
                      isAnswered 
                        ? index === shuffledQuestions[currentQuestion].correct
                          ? 'bg-green-600 text-white'
                          : selectedAnswer === index
                            ? 'bg-red-600 text-white'
                            : 'bg-gray-700 text-gray-300'
                        : 'bg-gray-700 hover:bg-gray-600 text-white'
                    }`}
                  >
                    <div className="flex items-center justify-between">
                      <span>{option}</span>
                      {isAnswered && index === shuffledQuestions[currentQuestion].correct && (
                        <Check size={20} className="text-white" />
                      )}
                      {isAnswered && selectedAnswer === index && index !== shuffledQuestions[currentQuestion].correct && (
                        <X size={20} className="text-white" />
                      )}
                    </div>
                  </button>
                ))}
              </div>
            </div>
            
            {isAnswered && (
              <div className="bg-gray-800 p-4 rounded-lg text-sm">
                <p className="font-medium text-[#00F2EA]">
                  {selectedAnswer === shuffledQuestions[currentQuestion].correct 
                    ? "Correct! " 
                    : "Incorrect! "}
                  {shuffledQuestions[currentQuestion].explanation}
                </p>
              </div>
            )}
          </div>
        )}

        {gameState === 'result' && (
          <div className="p-8 flex flex-col items-center">
            <h2 className="text-2xl font-bold mb-2">Quiz Complete!</h2>
            <div className="text-6xl font-bold my-4 text-center">
              <span className="bg-clip-text text-transparent bg-gradient-to-r from-[#FF0050] to-[#00F2EA]">
                {score}/{questions.length}
              </span>
            </div>
            
            <div className="bg-gray-800 p-5 rounded-lg w-full mb-6">
              <h3 className="text-xl font-bold mb-2 text-center text-[#00F2EA]">
                {getKnowledgeLevel()}
              </h3>
              <p className="text-center text-gray-300">
                {getKnowledgeDescription()}
              </p>
            </div>
            
            <div className="flex flex-col sm:flex-row gap-3 w-full">
              <button 
                onClick={startGame}
                className="flex-1 flex items-center justify-center gap-2 bg-[#00F2EA] hover:bg-[#00D6D0] text-black font-bold py-3 px-4 rounded-lg"
              >
                <RefreshCw size={18} />
                Play Again
              </button>
              <button 
                onClick={() => {
                  if (navigator.share) {
                    navigator.share({
                      title: 'My TikTok Knowledge Score',
                      text: `I scored ${score}/${questions.length} on the TikTok Knowledge Quiz! My level: ${getKnowledgeLevel()}`
                    });
                  } else {
                    alert(`I scored ${score}/${questions.length} on the TikTok Knowledge Quiz! My level: ${getKnowledgeLevel()}`);
                  }
                }}
                className="flex-1 flex items-center justify-center gap-2 bg-[#FF0050] hover:bg-[#D10045] text-white font-bold py-3 px-4 rounded-lg"
              >
                <Share2 size={18} />
                Share Result
              </button>
            </div>
          </div>
        )}
      </div>
      
      <div className="mt-4 text-xs text-gray-500 text-center">
        Created with Sitebrew.ai • Not affiliated with TikTok
      </div>
    </div>
  );
}