import React, { useState, useEffect } from 'react';
import { Trophy, RotateCcw, Star } from 'lucide-react';

const MovieBoxOfficeGame = () => {
  // Movie data with box office earnings (in millions USD)
  const movies = [
    { title: "Avatar", year: 2009, boxOffice: 2847, genre: "Sci-Fi" },
    { title: "Avengers: Endgame", year: 2019, boxOffice: 2798, genre: "Action" },
    { title: "Avatar: The Way of Water", year: 2022, boxOffice: 2320, genre: "Sci-Fi" },
    { title: "Titanic", year: 1997, boxOffice: 2257, genre: "Romance" },
    { title: "Star Wars: The Force Awakens", year: 2015, boxOffice: 2071, genre: "Sci-Fi" },
    { title: "Avengers: Infinity War", year: 2018, boxOffice: 2048, genre: "Action" },
    { title: "Spider-Man: No Way Home", year: 2021, boxOffice: 1921, genre: "Action" },
    { title: "Jurassic World", year: 2015, boxOffice: 1672, genre: "Adventure" },
    { title: "The Lion King", year: 2019, boxOffice: 1657, genre: "Animation" },
    { title: "The Avengers", year: 2012, boxOffice: 1519, genre: "Action" },
    { title: "Furious 7", year: 2015, boxOffice: 1516, genre: "Action" },
    { title: "Top Gun: Maverick", year: 2022, boxOffice: 1489, genre: "Action" },
    { title: "Frozen II", year: 2019, boxOffice: 1450, genre: "Animation" },
    { title: "Avengers: Age of Ultron", year: 2015, boxOffice: 1403, genre: "Action" },
    { title: "Black Panther", year: 2018, boxOffice: 1347, genre: "Action" },
    { title: "Harry Potter and the Deathly Hallows – Part 2", year: 2011, boxOffice: 1342, genre: "Fantasy" },
    { title: "Star Wars: The Last Jedi", year: 2017, boxOffice: 1333, genre: "Sci-Fi" },
    { title: "Jurassic World: Fallen Kingdom", year: 2018, boxOffice: 1310, genre: "Adventure" },
    { title: "Frozen", year: 2013, boxOffice: 1282, genre: "Animation" },
    { title: "Beauty and the Beast", year: 2017, boxOffice: 1264, genre: "Romance" }
  ];

  const [currentMovie, setCurrentMovie] = useState(null);
  const [nextMovie, setNextMovie] = useState(null);
  const [score, setScore] = useState(0);
  const [highScore, setHighScore] = useState(0);
  const [gameOver, setGameOver] = useState(false);
  const [showResult, setShowResult] = useState(false);
  const [usedMovies, setUsedMovies] = useState([]);
  const [streak, setStreak] = useState(0);

  // Initialize game
  useEffect(() => {
    const savedHighScore = localStorage.getItem('movieGameHighScore');
    if (savedHighScore) {
      setHighScore(parseInt(savedHighScore));
    }
    startNewGame();
  }, []);

  const getRandomMovie = (excludeMovies = []) => {
    const availableMovies = movies.filter(movie => 
      !excludeMovies.some(used => used.title === movie.title)
    );
    if (availableMovies.length === 0) return null;
    return availableMovies[Math.floor(Math.random() * availableMovies.length)];
  };

  const startNewGame = () => {
    const firstMovie = getRandomMovie();
    const secondMovie = getRandomMovie([firstMovie]);
    
    setCurrentMovie(firstMovie);
    setNextMovie(secondMovie);
    setUsedMovies([firstMovie]);
    setScore(0);
    setStreak(0);
    setGameOver(false);
    setShowResult(false);
  };

  const makeGuess = (guess) => {
    if (gameOver || showResult) return;

    setShowResult(true);
    
    const isCorrect = 
      (guess === 'higher' && nextMovie.boxOffice >= currentMovie.boxOffice) ||
      (guess === 'lower' && nextMovie.boxOffice <= currentMovie.boxOffice);

    setTimeout(() => {
      if (isCorrect) {
        const newScore = score + 1;
        const newStreak = streak + 1;
        setScore(newScore);
        setStreak(newStreak);
        
        if (newScore > highScore) {
          setHighScore(newScore);
          localStorage.setItem('movieGameHighScore', newScore.toString());
        }

        // Continue game
        const newUsedMovies = [...usedMovies, nextMovie];
        const newNextMovie = getRandomMovie(newUsedMovies);
        
        if (newNextMovie) {
          setCurrentMovie(nextMovie);
          setNextMovie(newNextMovie);
          setUsedMovies(newUsedMovies);
          setShowResult(false);
        } else {
          // No more movies available
          setGameOver(true);
        }
      } else {
        setGameOver(true);
      }
    }, 2000);
  };

  const formatBoxOffice = (amount) => {
    if (amount >= 1000) {
      return `$${(amount / 1000).toFixed(1)}B`;
    }
    return `$${amount}M`;
  };

  const getScoreMessage = () => {
    if (score === 0) return "Better luck next time!";
    if (score < 3) return "Not bad for a start!";
    if (score < 5) return "Getting warmer!";
    if (score < 8) return "Movie buff in training!";
    if (score < 12) return "Impressive knowledge!";
    if (score < 15) return "Box office expert!";
    return "Hollywood insider!";
  };

  if (!currentMovie || !nextMovie) {
    return (
      <div className="min-h-screen bg-gradient-to-br from-purple-900 via-blue-900 to-indigo-900 flex items-center justify-center">
        <div className="text-white text-xl">Loading...</div>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-gradient-to-br from-purple-900 via-blue-900 to-indigo-900 text-white font-inter">
      {/* Header */}
      <div className="container mx-auto px-4 py-6">
        <div className="flex justify-between items-center mb-8">
          <div className="flex items-center gap-4">
            <Star className="w-8 h-8 text-yellow-400" />
            <h1 className="text-3xl font-bold">Box Office Battle</h1>
          </div>
          <div className="flex items-center gap-6">
            <div className="text-center">
              <div className="text-sm opacity-75">Score</div>
              <div className="text-2xl font-bold">{score}</div>
            </div>
            <div className="text-center">
              <div className="text-sm opacity-75">Best</div>
              <div className="text-2xl font-bold text-yellow-400">{highScore}</div>
            </div>
          </div>
        </div>

        {/* Game Area */}
        <div className="max-w-4xl mx-auto">
          {!gameOver ? (
            <div className="grid md:grid-cols-2 gap-8">
              {/* Current Movie */}
              <div className="bg-white/10 backdrop-blur-sm rounded-2xl p-8 border border-white/20">
                <div className="text-center">
                  <div className="text-sm opacity-75 mb-2">{currentMovie.genre} • {currentMovie.year}</div>
                  <h2 className="text-2xl font-bold mb-6">{currentMovie.title}</h2>
                  <div className="bg-green-500/20 border border-green-500/30 rounded-xl p-6">
                    <div className="text-sm opacity-75 mb-2">Box Office Earnings</div>
                    <div className="text-3xl font-bold text-green-400">
                      {formatBoxOffice(currentMovie.boxOffice)}
                    </div>
                  </div>
                </div>
              </div>

              {/* Next Movie */}
              <div className="bg-white/10 backdrop-blur-sm rounded-2xl p-8 border border-white/20">
                <div className="text-center">
                  <div className="text-sm opacity-75 mb-2">{nextMovie.genre} • {nextMovie.year}</div>
                  <h2 className="text-2xl font-bold mb-6">{nextMovie.title}</h2>
                  
                  {showResult ? (
                    <div className="bg-blue-500/20 border border-blue-500/30 rounded-xl p-6">
                      <div className="text-sm opacity-75 mb-2">Box Office Earnings</div>
                      <div className="text-3xl font-bold text-blue-400">
                        {formatBoxOffice(nextMovie.boxOffice)}
                      </div>
                    </div>
                  ) : (
                    <div className="space-y-4">
                      <p className="text-lg mb-6">
                        Did <span className="font-bold text-yellow-400">{nextMovie.title}</span> earn 
                        <span className="font-bold"> higher</span> or <span className="font-bold">lower</span> than 
                        <span className="font-bold text-green-400"> {currentMovie.title}</span>?
                      </p>
                      
                      <div className="flex gap-4">
                        <button
                          onClick={() => makeGuess('higher')}
                          className="flex-1 bg-green-600 hover:bg-green-700 transition-colors duration-200 rounded-xl py-4 px-6 font-bold text-lg"
                        >
                          📈 HIGHER
                        </button>
                        <button
                          onClick={() => makeGuess('lower')}
                          className="flex-1 bg-red-600 hover:bg-red-700 transition-colors duration-200 rounded-xl py-4 px-6 font-bold text-lg"
                        >
                          📉 LOWER
                        </button>
                      </div>
                    </div>
                  )}
                </div>
              </div>
            </div>
          ) : (
            /* Game Over Screen */
            <div className="text-center bg-white/10 backdrop-blur-sm rounded-2xl p-12 border border-white/20">
              <Trophy className="w-16 h-16 text-yellow-400 mx-auto mb-6" />
              <h2 className="text-4xl font-bold mb-4">Game Over!</h2>
              <p className="text-xl mb-2">{getScoreMessage()}</p>
              <div className="text-6xl font-bold text-yellow-400 mb-2">{score}</div>
              <p className="text-lg opacity-75 mb-8">
                {score === 1 ? "1 correct guess" : `${score} correct guesses`}
              </p>
              
              {score > 0 && (
                <div className="bg-white/5 rounded-xl p-6 mb-8">
                  <h3 className="text-lg font-bold mb-4">Final Answer:</h3>
                  <div className="grid md:grid-cols-2 gap-4 text-sm">
                    <div>
                      <div className="font-bold">{currentMovie.title}</div>
                      <div className="text-green-400">{formatBoxOffice(currentMovie.boxOffice)}</div>
                    </div>
                    <div>
                      <div className="font-bold">{nextMovie.title}</div>
                      <div className="text-blue-400">{formatBoxOffice(nextMovie.boxOffice)}</div>
                    </div>
                  </div>
                </div>
              )}
              
              <button
                onClick={startNewGame}
                className="bg-purple-600 hover:bg-purple-700 transition-colors duration-200 rounded-xl py-4 px-8 font-bold text-lg flex items-center gap-2 mx-auto"
              >
                <RotateCcw className="w-5 h-5" />
                Play Again
              </button>
            </div>
          )}
        </div>

        {/* Instructions */}
        {!gameOver && (
          <div className="max-w-2xl mx-auto mt-12 text-center">
            <div className="bg-white/5 backdrop-blur-sm rounded-xl p-6 border border-white/10">
              <h3 className="text-lg font-bold mb-3">How to Play</h3>
              <p className="text-sm opacity-75 leading-relaxed">
                Compare box office earnings between two movies. Guess whether the second movie earned 
                higher or lower than the first. Keep guessing correctly to build your streak!
              </p>
            </div>
          </div>
        )}
      </div>
    </div>
  );
};

export default MovieBoxOfficeGame;