import React, { useState, useEffect, useCallback } from 'react';

// Mock movie soundtrack data
const MOVIE_SONGS = [
  {
    id: 1,
    correctAnswer: "Titanic",
    options: ["Titanic", "The Notebook", "Ghost", "Dirty Dancing"],
    trivia: "Celine Dion's 'My Heart Will Go On' became one of the best-selling singles of all time."
  },
  {
    id: 2,
    correctAnswer: "Star Wars",
    options: ["Star Trek", "Star Wars", "Battlestar Galactica", "Guardians of the Galaxy"],
    trivia: "John Williams' iconic score is considered one of the greatest film soundtracks ever composed."
  },
  {
    id: 3,
    correctAnswer: "The Lion King",
    options: ["The Jungle Book", "The Lion King", "Moana", "Frozen"],
    trivia: "Elton John co-wrote several songs for the film, including 'Can You Feel the Love Tonight'."
  },
  {
    id: 4,
    correctAnswer: "Pulp Fiction",
    options: ["Reservoir Dogs", "Kill Bill", "Pulp Fiction", "Django Unchained"],
    trivia: "Quentin Tarantino's eclectic soundtrack helped revive several classic songs from the 1960s and 70s."
  },
  {
    id: 5,
    correctAnswer: "Top Gun",
    options: ["Top Gun", "Days of Thunder", "Mission Impossible", "Jerry Maguire"],
    trivia: "Berlin's 'Take My Breath Away' won the Academy Award for Best Original Song."
  },
  {
    id: 6,
    correctAnswer: "Rocky",
    options: ["Rocky", "The Karate Kid", "Rudy", "Remember the Titans"],
    trivia: "The theme song 'Gonna Fly Now' became synonymous with training montages and perseverance."
  },
  {
    id: 7,
    correctAnswer: "The Bodyguard",
    options: ["Pretty Woman", "The Bodyguard", "Ghost", "Dirty Dancing"],
    trivia: "Whitney Houston's 'I Will Always Love You' spent 14 weeks at #1 on the Billboard Hot 100."
  },
  {
    id: 8,
    correctAnswer: "Grease",
    options: ["Mamma Mia!", "Grease", "High School Musical", "La La Land"],
    trivia: "The soundtrack was the second-best-selling album of 1978 in the United States."
  }
];

const MovieMusicQuiz = () => {
  const [gameState, setGameState] = useState('intro');
  const [currentQuestion, setCurrentQuestion] = useState(0);
  const [score, setScore] = useState(0);
  const [streak, setStreak] = useState(0);
  const [timeLeft, setTimeLeft] = useState(15);
  const [selectedAnswer, setSelectedAnswer] = useState(null);
  const [isCorrect, setIsCorrect] = useState(null);
  const [questions, setQuestions] = useState([]);
  const [isPlaying, setIsPlaying] = useState(false);
  const [waveformBars, setWaveformBars] = useState([]);

  // Initialize game
  const initializeGame = useCallback(() => {
    const shuffled = [...MOVIE_SONGS].sort(() => Math.random() - 0.5).slice(0, 5);
    setQuestions(shuffled);
    setCurrentQuestion(0);
    setScore(0);
    setStreak(0);
    setGameState('playing');
    setTimeLeft(15);
    setSelectedAnswer(null);
    setIsCorrect(null);
    setIsPlaying(true);
    
    // Initialize waveform animation
    const bars = Array.from({ length: 30 }, () => Math.random() * 100);
    setWaveformBars(bars);
  }, []);

  // Animate waveform bars
  useEffect(() => {
    if (isPlaying && gameState === 'playing') {
      const interval = setInterval(() => {
        setWaveformBars(prev => prev.map(() => Math.random() * 100));
      }, 200);
      return () => clearInterval(interval);
    }
  }, [isPlaying, gameState]);

  // Timer countdown
  useEffect(() => {
    if (gameState === 'playing' && timeLeft > 0 && selectedAnswer === null) {
      const timer = setTimeout(() => {
        setTimeLeft(prev => prev - 1);
      }, 1000);
      return () => clearTimeout(timer);
    } else if (timeLeft === 0 && gameState === 'playing' && selectedAnswer === null) {
      handleTimeout();
    }
  }, [timeLeft, gameState, selectedAnswer]);

  const handleTimeout = () => {
    setIsPlaying(false);
    setGameState('feedback');
    setIsCorrect(false);
    setStreak(0);
    
    setTimeout(() => {
      nextQuestion();
    }, 3000);
  };

  const handleAnswerSelect = (answer) => {
    if (selectedAnswer !== null) return;
    
    setSelectedAnswer(answer);
    setIsPlaying(false);
    const correct = answer === questions[currentQuestion].correctAnswer;
    setIsCorrect(correct);
    
    if (correct) {
      const timeBonus = timeLeft * 10;
      const streakMultiplier = Math.min(streak + 1, 3);
      const points = (100 + timeBonus) * streakMultiplier;
      setScore(prev => prev + points);
      setStreak(prev => prev + 1);
    } else {
      setStreak(0);
    }
    
    setGameState('feedback');
    
    setTimeout(() => {
      nextQuestion();
    }, 3000);
  };

  const nextQuestion = () => {
    if (currentQuestion < questions.length - 1) {
      setCurrentQuestion(prev => prev + 1);
      setSelectedAnswer(null);
      setIsCorrect(null);
      setTimeLeft(15);
      setGameState('playing');
      setIsPlaying(true);
    } else {
      setGameState('gameOver');
      setIsPlaying(false);
    }
  };

  const getButtonStyle = (option) => {
    if (gameState !== 'feedback') {
      return selectedAnswer === option 
        ? 'bg-yellow-600 border-yellow-400 transform scale-95' 
        : 'bg-red-900 border-yellow-500 hover:bg-red-800 hover:border-yellow-400 hover:transform hover:scale-105';
    }
    
    if (option === questions[currentQuestion]?.correctAnswer) {
      return 'bg-green-600 border-green-400 animate-pulse';
    }
    if (selectedAnswer === option && !isCorrect) {
      return 'bg-red-600 border-red-400 animate-pulse';
    }
    return 'bg-red-900 border-yellow-500 opacity-50';
  };

  const getTimerColor = () => {
    if (timeLeft > 10) return 'text-yellow-400';
    if (timeLeft > 5) return 'text-orange-400 animate-pulse';
    return 'text-red-400 animate-bounce';
  };

  const getScoreDisplay = () => {
    return score.toLocaleString();
  };

  if (gameState === 'intro') {
    return (
      <div className="w-full h-screen bg-gradient-to-b from-red-950 via-red-900 to-black flex items-center justify-center p-4 font-inter">
        <div className="text-center max-w-2xl">
          <div className="mb-8">
            <h1 className="text-5xl md:text-7xl font-bold text-yellow-400 mb-4 drop-shadow-lg">
              🎬 Movie Music Quiz 🎵
            </h1>
            <div className="w-32 h-1 bg-yellow-400 mx-auto rounded-full"></div>
          </div>
          
          <p className="text-lg md:text-xl text-white mb-8 leading-relaxed px-4">
            Test your knowledge of iconic movie soundtracks! Listen to clips and guess which film they're from.
          </p>
          
          <div className="bg-black bg-opacity-60 p-8 rounded-xl mb-8 border-2 border-yellow-500 backdrop-blur-sm">
            <h3 className="text-yellow-400 text-2xl mb-6 font-semibold">How to Play:</h3>
            <ul className="text-white text-left space-y-3 text-lg">
              <li className="flex items-center">
                <span className="text-yellow-400 mr-3">🎵</span>
                Listen to each song clip
              </li>
              <li className="flex items-center">
                <span className="text-yellow-400 mr-3">🎯</span>
                Choose the correct movie from 4 options
              </li>
              <li className="flex items-center">
                <span className="text-yellow-400 mr-3">⚡</span>
                Answer quickly for bonus points
              </li>
              <li className="flex items-center">
                <span className="text-yellow-400 mr-3">🔥</span>
                Build streaks for score multipliers (up to 3x)
              </li>
            </ul>
          </div>
          
          <button
            onClick={initializeGame}
            className="bg-red-900 hover:bg-red-800 text-white text-xl px-12 py-4 rounded-xl border-2 border-yellow-500 hover:border-yellow-400 transition-all duration-300 font-semibold transform hover:scale-105 hover:shadow-lg"
          >
            🎮 Start Game
          </button>
        </div>
      </div>
    );
  }

  if (gameState === 'gameOver') {
    const correctAnswers = questions.reduce((count, _, index) => {
      if (index < currentQuestion) return count + 1;
      if (index === currentQuestion && isCorrect) return count + 1;
      return count;
    }, 0);
    
    return (
      <div className="w-full h-screen bg-gradient-to-b from-red-950 via-red-900 to-black flex items-center justify-center p-4 font-inter">
        <div className="text-center max-w-2xl">
          <h1 className="text-4xl md:text-6xl font-bold text-yellow-400 mb-8 drop-shadow-lg">
            🏆 Game Over!
          </h1>
          
          <div className="bg-black bg-opacity-60 p-8 rounded-xl border-2 border-yellow-500 mb-8 backdrop-blur-sm">
            <div className="text-2xl text-yellow-400 mb-4 font-semibold">Final Score</div>
            <div className="text-6xl text-white font-bold mb-6 drop-shadow-lg">{getScoreDisplay()}</div>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-lg">
              <div className="bg-red-900 bg-opacity-50 p-4 rounded-lg">
                <div className="text-yellow-400 font-semibold">Questions Correct</div>
                <div className="text-white text-2xl font-bold">{correctAnswers} / {questions.length}</div>
              </div>
              <div className="bg-red-900 bg-opacity-50 p-4 rounded-lg">
                <div className="text-yellow-400 font-semibold">Accuracy</div>
                <div className="text-white text-2xl font-bold">
                  {Math.round((correctAnswers / questions.length) * 100)}%
                </div>
              </div>
            </div>
          </div>
          
          <div className="space-x-4">
            <button
              onClick={initializeGame}
              className="bg-red-900 hover:bg-red-800 text-white text-lg px-8 py-3 rounded-lg border-2 border-yellow-500 hover:border-yellow-400 transition-all duration-300 transform hover:scale-105"
            >
              🔄 Play Again
            </button>
            <button
              onClick={() => setGameState('intro')}
              className="bg-gray-800 hover:bg-gray-700 text-white text-lg px-8 py-3 rounded-lg border-2 border-gray-600 hover:border-gray-500 transition-all duration-300 transform hover:scale-105"
            >
              🏠 Main Menu
            </button>
          </div>
        </div>
      </div>
    );
  }

  const currentQ = questions[currentQuestion];

  return (
    <div className="w-full h-screen bg-gradient-to-b from-red-950 via-red-900 to-black flex flex-col font-inter">
      {/* Top Section - Score, Timer, Progress */}
      <div className="h-1/5 flex items-center justify-between px-4 md:px-8 py-6">
        <div className="flex items-center space-x-6">
          <div className="bg-black bg-opacity-60 px-6 py-3 rounded-xl border-2 border-yellow-500 backdrop-blur-sm">
            <div className="text-yellow-400 text-sm font-semibold">Score</div>
            <div className="text-white text-2xl font-bold">{getScoreDisplay()}</div>
          </div>
          <div className="bg-black bg-opacity-60 px-6 py-3 rounded-xl border-2 border-yellow-500 backdrop-blur-sm">
            <div className="text-yellow-400 text-sm font-semibold">Streak</div>
            <div className="text-white text-2xl font-bold flex items-center">
              {streak}
              {streak > 0 && <span className="ml-2 text-yellow-400">🔥</span>}
            </div>
          </div>
        </div>
        
        <div className="text-center">
          <div className="text-yellow-400 text-lg mb-2 font-semibold">
            Question {currentQuestion + 1} of {questions.length}
          </div>
          <div className={`flex items-center justify-center space-x-2 text-3xl font-bold ${getTimerColor()}`}>
            <span>⏰</span>
            <span>{timeLeft}s</span>
          </div>
          <div className="w-32 bg-red-900 bg-opacity-50 rounded-full h-2 mt-2">
            <div 
              className="bg-yellow-400 h-2 rounded-full transition-all duration-1000"
              style={{ width: `${((15 - timeLeft) / 15) * 100}%` }}
            />
          </div>
        </div>
      </div>

      {/* Middle Section - Audio Player */}
      <div className="h-2/5 flex items-center justify-center px-4">
        <div className="bg-black bg-opacity-70 p-8 rounded-2xl border-2 border-yellow-500 w-full max-w-3xl backdrop-blur-sm">
          <div className="flex items-center justify-center mb-8">
            <button
              onClick={() => setIsPlaying(!isPlaying)}
              className="bg-yellow-500 hover:bg-yellow-400 text-black p-4 rounded-full mr-6 transition-all duration-200 transform hover:scale-110 shadow-lg"
              disabled={gameState === 'feedback'}
            >
              <span className="text-2xl">{isPlaying ? '⏸️' : '▶️'}</span>
            </button>
            <div className="text-center">
              <div className="text-white text-xl font-semibold">🎵 Now Playing</div>
              <div className="text-yellow-400 text-lg">Movie Soundtrack Clip</div>
            </div>
          </div>
          
          {/* Waveform Visualization */}
          <div className="flex items-end justify-center space-x-1 h-20 bg-red-900 bg-opacity-50 rounded-xl p-6 mb-4">
            {waveformBars.map((height, index) => (
              <div
                key={index}
                className="bg-gradient-to-t from-yellow-600 to-yellow-400 rounded-t transition-all duration-200"
                style={{
                  height: `${isPlaying ? height : 20}%`,
                  width: '8px',
                  opacity: isPlaying ? 0.9 : 0.4
                }}
              />
            ))}
          </div>
          
          <div className="bg-red-900 bg-opacity-50 rounded-full h-3">
            <div 
              className="bg-gradient-to-r from-yellow-500 to-yellow-400 h-3 rounded-full transition-all duration-1000 shadow-sm"
              style={{ width: `${((15 - timeLeft) / 15) * 100}%` }}
            />
          </div>
        </div>
      </div>

      {/* Bottom Section - Answer Options */}
      <div className="h-2/5 flex items-center justify-center px-4 pb-8">
        <div className="grid grid-cols-1 md:grid-cols-2 gap-6 w-full max-w-5xl">
          {currentQ?.options.map((option, index) => (
            <button
              key={index}
              onClick={() => handleAnswerSelect(option)}
              disabled={gameState === 'feedback'}
              className={`${getButtonStyle(option)} text-white text-lg md:text-xl py-6 px-8 rounded-xl border-2 transition-all duration-300 font-semibold min-h-[80px] flex items-center justify-center shadow-lg`}
            >
              {option}
            </button>
          ))}
        </div>
      </div>

      {/* Feedback Overlay */}
      {gameState === 'feedback' && (
        <div className="fixed inset-0 bg-black bg-opacity-90 flex items-center justify-center z-50 p-4 backdrop-blur-sm">
          <div className="bg-red-950 p-8 rounded-2xl border-2 border-yellow-500 max-w-2xl text-center shadow-2xl">
            <div className={`text-4xl font-bold mb-6 ${isCorrect ? 'text-green-400' : 'text-red-400'}`}>
              {isCorrect ? '✅ Correct!' : '❌ Incorrect!'}
            </div>
            <div className="text-2xl text-white mb-6">
              The answer was: <span className="text-yellow-400 font-bold">{currentQ?.correctAnswer}</span>
            </div>
            <div className="text-lg text-gray-300 mb-6 leading-relaxed">
              💡 {currentQ?.trivia}
            </div>
            {isCorrect && (
              <div className="bg-green-900 bg-opacity-50 p-4 rounded-lg border border-green-500">
                <div className="text-yellow-400 text-xl font-semibold">
                  +{(100 + (timeLeft * 10)) * Math.min(streak, 3)} points
                </div>
                {streak > 1 && (
                  <div className="text-green-400 text-lg">
                    🔥 {streak}x streak bonus!
                  </div>
                )}
              </div>
            )}
          </div>
        </div>
      )}
    </div>
  );
};

export default MovieMusicQuiz;