"use client";

import { useState, useEffect, useCallback, useRef } from "react";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { motion, AnimatePresence } from "framer-motion";
import { 
  Play, 
  Trophy, 
  Users, 
  Zap, 
  Brain, 
  Globe, 
  Eye, 
  BookOpen, 
  Star, 
  Clock, 
  Target, 
  Ghost,
  Coffee,
  Zap as PowerZap,
  Book,
  Camera,
  PenTool,
  Volume2,
  VolumeX
} from "lucide-react";

// Types
type Operation = "+" | "-" | "×" | "÷";
type GameMode = 
  | "speedrun" 
  | "pvp" 
  | "memory" 
  | "equationBuilder" 
  | "blindSolve" 
  | "dailyPuzzle" 
  | "teamBattle";

type MathProblem = {
  operand1: number;
  operand2: number;
  operation: Operation;
  answer: number;
};

type PlayerStats = {
  score: number;
  streak: number;
  maxStreak: number;
  problemsSolved: number;
  problemsCorrect: number;
  accuracy: number;
};

type PowerUp = {
  id: string;
  name: string;
  description: string;
  icon: JSX.Element;
  active: boolean;
  duration: number; // in seconds
};

type Tier = "Bronze" | "Silver" | "Gold" | "Platinum" | "Diamond";

// Game data
const TIER_COLORS: Record<Tier, string> = {
  Bronze: "text-amber-800",
  Silver: "text-gray-400",
  Gold: "text-yellow-500",
  Platinum: "text-blue-400",
  Diamond: "text-purple-400"
};

const POWER_UPS: PowerUp[] = [
  {
    id: "freeze-time",
    name: "Freeze Time",
    description: "5 extra seconds",
    icon: <Clock className="w-4 h-4" />,
    active: false,
    duration: 5
  },
  {
    id: "second-chance",
    name: "Second Chance",
    description: "Undo one wrong answer",
    icon: <Zap className="w-4 h-4" />,
    active: false,
    duration: 0
  },
  {
    id: "double-points",
    name: "Double Points",
    description: "10s multiplier",
    icon: <Star className="w-4 h-4" />,
    active: false,
    duration: 10
  }
];

const TRIVIA_QUESTIONS = [
  { question: "Who invented the equals sign?", answer: "Robert Recorde" },
  { question: "What is the only even prime number?", answer: "2" },
  { question: "How many sides does a hexagon have?", answer: "6" },
  { question: "What is the value of Pi to 3 decimal places?", answer: "3.141" },
  { question: "What is the Roman numeral for 1000?", answer: "M" }
];

export default function NumBlitzApp() {
  // Game state
  const [gameMode, setGameMode] = useState<GameMode | null>(null);
  const [timeLeft, setTimeLeft] = useState<number>(30);
  const [isActive, setIsActive] = useState<boolean>(false);
  const [currentProblem, setCurrentProblem] = useState<MathProblem | null>(null);
  const [userAnswer, setUserAnswer] = useState<string>("");
  const [playerStats, setPlayerStats] = useState<PlayerStats>({
    score: 0,
    streak: 0,
    maxStreak: 0,
    problemsSolved: 0,
    problemsCorrect: 0,
    accuracy: 0
  });
  const [feedback, setFeedback] = useState<{ type: "correct" | "incorrect"; message: string } | null>(null);
  const [gameOver, setGameOver] = useState<boolean>(false);
  const [opponentScore, setOpponentScore] = useState<number>(0);
  const [tier, setTier] = useState<Tier>("Bronze");
  const [powerUps, setPowerUps] = useState<PowerUp[]>(POWER_UPS);
  const [activePowerUp, setActivePowerUp] = useState<PowerUp | null>(null);
  const [triviaQuestion, setTriviaQuestion] = useState<string>("");
  const [triviaAnswer, setTriviaAnswer] = useState<string>("");
  const [showTrivia, setShowTrivia] = useState<boolean>(false);
  const [fatigueData, setFatigueData] = useState<number[]>([]);
  const [dailyChallengeActive, setDailyChallengeActive] = useState<boolean>(false);
  const [dailyChallengeTime, setDailyChallengeTime] = useState<string>("18:00 UTC");
  const [storyProgress, setStoryProgress] = useState<number>(0);
  const [storyUnlocked, setStoryUnlocked] = useState<boolean>(false);
  
  // Refs
  const timerRef = useRef<NodeJS.Timeout | null>(null);
  const fatigueTimerRef = useRef<NodeJS.Timeout | null>(null);

  // Generate math problem
  const generateProblem = useCallback((): MathProblem => {
    const operations: Operation[] = ["+", "-", "×", "÷"];
    const operation = operations[Math.floor(Math.random() * operations.length)];
    
    let operand1: number;
    let operand2: number;
    
    switch (operation) {
      case "+":
        operand1 = Math.floor(Math.random() * 50) + 1;
        operand2 = Math.floor(Math.random() * 50) + 1;
        break;
      case "-":
        operand1 = Math.floor(Math.random() * 50) + 1;
        operand2 = Math.floor(Math.random() * operand1) + 1;
        break;
      case "×":
        operand1 = Math.floor(Math.random() * 12) + 1;
        operand2 = Math.floor(Math.random() * 12) + 1;
        break;
      case "÷":
        operand2 = Math.floor(Math.random() * 12) + 1;
        operand1 = operand2 * (Math.floor(Math.random() * 12) + 1);
        break;
      default:
        operand1 = 1;
        operand2 = 1;
    }
    
    let answer: number;
    switch (operation) {
      case "+": answer = operand1 + operand2; break;
      case "-": answer = operand1 - operand2; break;
      case "×": answer = operand1 * operand2; break;
      case "÷": answer = operand1 / operand2; break;
      default: answer = 0;
    }
    
    return { operand1, operand2, operation, answer };
  }, []);

  // Format problem for display
  const formatProblem = (problem: MathProblem): string => {
    return `${problem.operand1} ${problem.operation} ${problem.operand2} = ?`;
  };

  // Handle timer
  useEffect(() => {
    if (isActive && timeLeft > 0) {
      timerRef.current = setInterval(() => {
        setTimeLeft((time) => {
          if (time <= 1) {
            setIsActive(false);
            setGameOver(true);
            return 0;
          }
          return time - 1;
        });
      }, 1000);
    } else if (timerRef.current) {
      clearInterval(timerRef.current);
    }
    
    return () => {
      if (timerRef.current) clearInterval(timerRef.current);
    };
  }, [isActive, timeLeft]);

  // Fatigue tracking
  useEffect(() => {
    if (isActive && !fatigueTimerRef.current) {
      fatigueTimerRef.current = setInterval(() => {
        setFatigueData(prev => {
          const newData = [...prev, playerStats.accuracy];
          if (newData.length > 20) newData.shift();
          return newData;
        });
      }, 5000);
    } else if (!isActive && fatigueTimerRef.current) {
      clearInterval(fatigueTimerRef.current);
      fatigueTimerRef.current = null;
    }
    
    return () => {
      if (fatigueTimerRef.current) {
        clearInterval(fatigueTimerRef.current);
        fatigueTimerRef.current = null;
      }
    };
  }, [isActive, playerStats.accuracy]);

  // Handle answer submission
  const handleSubmit = useCallback(() => {
    if (!userAnswer || !currentProblem || !isActive) return;
    
    const answer = parseFloat(userAnswer);
    const isCorrect = answer === currentProblem.answer;
    
    if (isCorrect) {
      const newStreak = playerStats.streak + 1;
      const points = activePowerUp?.id === "double-points" ? 20 * newStreak : 10 * newStreak;
      
      setPlayerStats(prev => ({
        ...prev,
        streak: newStreak,
        maxStreak: Math.max(prev.maxStreak, newStreak),
        score: prev.score + points,
        problemsCorrect: prev.problemsCorrect + 1,
        problemsSolved: prev.problemsSolved + 1,
        accuracy: prev.problemsSolved > 0 
          ? Math.round(((prev.problemsCorrect + 1) / (prev.problemsSolved + 1)) * 100)
          : 100
      }));
      
      setFeedback({ type: "correct", message: "Correct!" });
      
      // Check for story unlock
      if (newStreak % 5 === 0) {
        setStoryUnlocked(true);
        setStoryProgress(prev => prev + 1);
      }
    } else {
      setPlayerStats(prev => ({
        ...prev,
        streak: 0,
        problemsSolved: prev.problemsSolved + 1,
        accuracy: prev.problemsSolved > 0 
          ? Math.round((prev.problemsCorrect / (prev.problemsSolved + 1)) * 100)
          : 0
      }));
      
      setFeedback({ type: "incorrect", message: `Incorrect! Answer: ${currentProblem.answer}` });
    }
    
    // Generate new problem
    setCurrentProblem(generateProblem());
    setUserAnswer("");
    
    // Clear feedback after delay
    setTimeout(() => setFeedback(null), 1000);
    
    // Handle PVP mode
    if (gameMode === "pvp") {
      // Simulate opponent scoring
      if (Math.random() > 0.5) {
        setOpponentScore(prev => prev + 10);
      }
    }
  }, [userAnswer, currentProblem, isActive, playerStats, activePowerUp, gameMode, generateProblem]);

  // Handle key presses
  const handleKeyPress = useCallback((key: string) => {
    if (!isActive) return;
    
    if (key === "Enter") {
      handleSubmit();
    } else if (key === "Backspace") {
      setUserAnswer(prev => prev.slice(0, -1));
    } else if (/^[0-9.-]$/.test(key)) {
      setUserAnswer(prev => prev + key);
    }
  }, [isActive, handleSubmit]);

  // Keyboard event listener
  useEffect(() => {
    const handleKeyDown = (e: KeyboardEvent) => {
      handleKeyPress(e.key);
    };
    
    window.addEventListener("keydown", handleKeyDown);
    return () => window.removeEventListener("keydown", handleKeyDown);
  }, [handleKeyPress]);

  // Start game
  const startGame = (mode: GameMode) => {
    setGameMode(mode);
    setIsActive(true);
    setGameOver(false);
    setTimeLeft(mode === "pvp" ? 60 : 30);
    setPlayerStats({
      score: 0,
      streak: 0,
      maxStreak: 0,
      problemsSolved: 0,
      problemsCorrect: 0,
      accuracy: 100
    });
    setOpponentScore(0);
    setCurrentProblem(generateProblem());
    setUserAnswer("");
    setFeedback(null);
    setStoryUnlocked(false);
    setFatigueData([]);
    
    // Set daily challenge flag
    if (mode === "dailyPuzzle") {
      setDailyChallengeActive(true);
    } else {
      setDailyChallengeActive(false);
    }
    
    // Show trivia occasionally
    if (Math.random() > 0.7) {
      const randomTrivia = TRIVIA_QUESTIONS[Math.floor(Math.random() * TRIVIA_QUESTIONS.length)];
      setTriviaQuestion(randomTrivia.question);
      setTriviaAnswer(randomTrivia.answer);
      setShowTrivia(true);
      setTimeout(() => setShowTrivia(false), 5000);
    }
  };

  // Activate power-up
  const activatePowerUp = (powerUp: PowerUp) => {
    if (powerUp.active) return;
    
    setActivePowerUp(powerUp);
    setPowerUps(prev => 
      prev.map(p => 
        p.id === powerUp.id ? { ...p, active: true } : p
      )
    );
    
    // Apply power-up effects
    if (powerUp.id === "freeze-time") {
      setTimeLeft(prev => prev + powerUp.duration);
    }
    
    // Deactivate after duration
    if (powerUp.duration > 0) {
      setTimeout(() => {
        setActivePowerUp(null);
        setPowerUps(prev => 
          prev.map(p => 
            p.id === powerUp.id ? { ...p, active: false } : p
          )
        );
      }, powerUp.duration * 1000);
    }
  };

  // Reset game
  const resetGame = () => {
    setGameMode(null);
    setIsActive(false);
    setGameOver(false);
    setTimeLeft(30);
    setCurrentProblem(null);
    setUserAnswer("");
    setFeedback(null);
    setOpponentScore(0);
    setDailyChallengeActive(false);
    setShowTrivia(false);
  };

  // Render game screen based on mode
  const renderGameScreen = () => {
    if (!gameMode) return null;
    
    return (
      <div className="w-full max-w-2xl">
        {/* Header */}
        <div className="flex justify-between items-center mb-4">
          <div className="flex items-center">
            <div className="text-center mr-4">
              <div className="text-xs text-gray-400">TIME</div>
              <div className={`text-2xl font-bold ${timeLeft <= 5 ? "text-red-500 animate-pulse" : "text-green-500"}`}>
                {timeLeft}s
              </div>
            </div>
            
            <div className="text-center mr-4">
              <div className="text-xs text-gray-400">SCORE</div>
              <div className="text-2xl font-bold text-yellow-400">{playerStats.score}</div>
            </div>
            
            <div className="text-center">
              <div className="text-xs text-gray-400">STREAK</div>
              <div className="text-2xl font-bold text-blue-400">{playerStats.streak}</div>
            </div>
          </div>
          
          <div className="flex items-center">
            {gameMode === "pvp" && (
              <div className="text-center mr-4">
                <div className="text-xs text-gray-400">OPPONENT</div>
                <div className="text-2xl font-bold text-red-400">{opponentScore}</div>
              </div>
            )}
            
            <div className="text-center">
              <div className="text-xs text-gray-400">TIER</div>
              <div className={`text-xl font-bold ${TIER_COLORS[tier]}`}>{tier}</div>
            </div>
          </div>
        </div>
        
        {/* Daily Challenge Banner */}
        {dailyChallengeActive && (
          <div className="bg-gradient-to-r from-purple-700 to-indigo-800 rounded-lg p-3 mb-4 text-center">
            <div className="flex items-center justify-center">
              <Globe className="mr-2" />
              <span className="font-bold">DAILY CHALLENGE ACTIVE</span>
            </div>
            <div className="text-sm">Solve as many as you can! Ends at {dailyChallengeTime}</div>
          </div>
        )}
        
        {/* Trivia Question */}
        <AnimatePresence>
          {showTrivia && (
            <motion.div
              initial={{ opacity: 0, y: -20 }}
              animate={{ opacity: 1, y: 0 }}
              exit={{ opacity: 0, y: -20 }}
              className="bg-blue-900 rounded-lg p-3 mb-4 text-center"
            >
              <div className="flex items-center justify-center mb-1">
                <BookOpen className="mr-2" size={16} />
                <span className="font-bold">Math Trivia</span>
              </div>
              <div className="text-sm">{triviaQuestion}</div>
            </motion.div>
          )}
        </AnimatePresence>
        
        {/* Problem Display */}
        <div className="text-center mb-6">
          <div className="text-3xl font-mono font-bold mb-4 min-h-[2.5rem]">
            {currentProblem ? formatProblem(currentProblem) : "Loading..."}
          </div>
          
          <div className="relative">
            <input
              type="text"
              value={userAnswer}
              onChange={(e) => setUserAnswer(e.target.value)}
              className="w-full p-4 text-2xl text-center bg-gray-800 border-2 border-gray-700 rounded-lg focus:border-blue-500 focus:outline-none"
              placeholder="Enter answer"
              disabled={!isActive}
            />
            
            <AnimatePresence>
              {feedback && (
                <motion.div
                  initial={{ opacity: 0, y: 20 }}
                  animate={{ opacity: 1, y: 0 }}
                  exit={{ opacity: 0 }}
                  className={`absolute -bottom-8 left-1/2 transform -translate-x-1/2 px-3 py-1 rounded-full text-sm font-bold ${
                    feedback.type === "correct" 
                      ? "bg-green-500 text-white" 
                      : "bg-red-500 text-white"
                  }`}
                >
                  {feedback.message}
                </motion.div>
              )}
            </AnimatePresence>
          </div>
        </div>
        
        {/* Power-ups */}
        <div className="flex justify-center gap-2 mb-4">
          {powerUps.map((powerUp) => (
            <Button
              key={powerUp.id}
              onClick={() => activatePowerUp(powerUp)}
              disabled={powerUp.active || !isActive}
              className={`flex items-center px-3 py-2 text-xs ${
                powerUp.active 
                  ? "bg-yellow-600 hover:bg-yellow-700" 
                  : "bg-gray-700 hover:bg-gray-600"
              }`}
            >
              {powerUp.icon}
              <span className="ml-1">{powerUp.name}</span>
            </Button>
          ))}
        </div>
        
        {/* Active Power-up Indicator */}
        <AnimatePresence>
          {activePowerUp && (
            <motion.div
              initial={{ opacity: 0, scale: 0.8 }}
              animate={{ opacity: 1, scale: 1 }}
              exit={{ opacity: 0, scale: 0.8 }}
              className="bg-gradient-to-r from-yellow-600 to-orange-600 rounded-lg p-2 mb-4 text-center"
            >
              <div className="flex items-center justify-center">
                <PowerZap className="mr-2" size={16} />
                <span className="font-bold">{activePowerUp.name} Active!</span>
              </div>
            </motion.div>
          )}
        </AnimatePresence>
        
        {/* Keypad */}
        <div className="grid grid-cols-3 gap-2 mb-4">
          {[1, 2, 3, 4, 5, 6, 7, 8, 9, "-", 0, "."].map((key) => (
            <Button
              key={key}
              onClick={() => handleKeyPress(key.toString())}
              className="h-14 text-lg font-bold bg-gray-800 hover:bg-gray-700 text-white"
              disabled={!isActive}
            >
              {key}
            </Button>
          ))}
          <Button
            onClick={() => handleKeyPress("Backspace")}
            className="h-14 text-lg font-bold bg-red-700 hover:bg-red-600 text-white col-span-3"
            disabled={!isActive}
          >
            Clear
          </Button>
        </div>
        
        {/* Action Buttons */}
        <div className="flex gap-3">
          <Button
            onClick={handleSubmit}
            className="flex-1 py-4 text-lg font-bold bg-blue-600 hover:bg-blue-700"
            disabled={!isActive || !userAnswer}
          >
            Submit
          </Button>
          <Button
            onClick={() => setUserAnswer("")}
            className="flex-1 py-4 text-lg font-bold bg-gray-700 hover:bg-gray-600"
            disabled={!isActive}
          >
            Clear
          </Button>
        </div>
        
        {/* Story Unlock */}
        <AnimatePresence>
          {storyUnlocked && (
            <motion.div
              initial={{ opacity: 0, scale: 0.8 }}
              animate={{ opacity: 1, scale: 1 }}
              exit={{ opacity: 0, scale: 0.8 }}
              className="mt-4 bg-gradient-to-r from-purple-700 to-indigo-800 rounded-lg p-4 text-center"
            >
              <div className="font-bold mb-2">Story Unlocked!</div>
              <div className="text-sm">You've helped the Math Hero progress in their journey!</div>
            </motion.div>
          )}
        </AnimatePresence>
      </div>
    );
  };

  // Render game over screen
  const renderGameOverScreen = () => {
    return (
      <div className="w-full max-w-2xl">
        <Card className="bg-gray-800 border-gray-700">
          <CardHeader>
            <CardTitle className="text-2xl text-center">
              {gameMode === "pvp" ? "Battle Results" : "Game Over!"}
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="grid grid-cols-2 gap-4 mb-6">
              <div className="bg-gray-700 p-4 rounded-lg text-center">
                <div className="text-3xl font-bold text-yellow-400">{playerStats.score}</div>
                <div className="text-gray-400">Score</div>
              </div>
              
              <div className="bg-gray-700 p-4 rounded-lg text-center">
                <div className="text-3xl font-bold text-blue-400">{playerStats.maxStreak}</div>
                <div className="text-gray-400">Max Streak</div>
              </div>
              
              <div className="bg-gray-700 p-4 rounded-lg text-center">
                <div className="text-3xl font-bold text-green-400">{playerStats.problemsCorrect}</div>
                <div className="text-gray-400">Correct</div>
              </div>
              
              <div className="bg-gray-700 p-4 rounded-lg text-center">
                <div className="text-3xl font-bold text-purple-400">{playerStats.accuracy}%</div>
                <div className="text-gray-400">Accuracy</div>
              </div>
            </div>
            
            {/* AI Tutor Feedback */}
            <div className="bg-blue-900 rounded-lg p-4 mb-6">
              <div className="flex items-center mb-2">
                <Brain className="mr-2" />
                <h3 className="font-bold">AI Tutor Feedback</h3>
              </div>
              <p className="text-sm">
                {playerStats.accuracy < 70 
                  ? "You're doing great! Focus on the operations you find challenging." 
                  : playerStats.maxStreak > 10 
                    ? "High streaks! Try increasing the difficulty for more challenge." 
                    : "Good performance! Keep practicing to improve your speed."}
              </p>
            </div>
            
            {/* Fatigue Meter */}
            {fatigueData.length > 0 && (
              <div className="bg-amber-900 rounded-lg p-4 mb-6">
                <div className="flex items-center mb-2">
                  <Coffee className="mr-2" />
                  <h3 className="font-bold">Brain Fatigue Meter</h3>
                </div>
                <div className="flex items-end h-12 gap-1">
                  {fatigueData.map((value, index) => (
                    <div 
                      key={index} 
                      className="flex-1 bg-amber-500 rounded-t"
                      style={{ height: `${value}%` }}
                    />
                  ))}
                </div>
                <p className="text-xs mt-2">
                  {fatigueData[fatigueData.length - 1] < 80 
                    ? "Consider taking a break to maintain peak performance." 
                    : "You're maintaining strong focus!"}
                </p>
              </div>
            )}
            
            {/* Action Buttons */}
            <div className="flex gap-3">
              <Button
                onClick={() => startGame(gameMode!)}
                className="flex-1 py-4 text-lg font-bold bg-green-600 hover:bg-green-700"
              >
                Play Again
              </Button>
              <Button
                onClick={resetGame}
                className="flex-1 py-4 text-lg font-bold bg-gray-700 hover:bg-gray-600"
              >
                Main Menu
              </Button>
            </div>
          </CardContent>
        </Card>
      </div>
    );
  };

  // Render main menu
  const renderMainMenu = () => {
    return (
      <div className="w-full max-w-2xl">
        <Card className="bg-gray-800 border-gray-700">
          <CardHeader>
            <CardTitle className="text-3xl text-center flex items-center justify-center">
              <Target className="mr-2 text-yellow-500" />
              NumBlitz: Math Mastery Arena
            </CardTitle>
            <p className="text-center text-gray-400">
              Sharpen your math skills with lightning-fast challenges
            </p>
          </CardHeader>
          <CardContent>
            <div className="grid grid-cols-2 gap-4 mb-6">
              <Button 
                onClick={() => startGame("speedrun")}
                className="h-24 flex flex-col items-center justify-center bg-gradient-to-br from-blue-600 to-indigo-700 hover:from-blue-700 hover:to-indigo-800"
              >
                <Play className="mb-2" />
                <span>Speed Run</span>
              </Button>
              
              <Button 
                onClick={() => startGame("pvp")}
                className="h-24 flex flex-col items-center justify-center bg-gradient-to-br from-red-600 to-orange-700 hover:from-red-700 hover:to-orange-800"
              >
                <Users className="mb-2" />
                <span>Math Rush Battle</span>
              </Button>
              
              <Button 
                onClick={() => startGame("memory")}
                className="h-24 flex flex-col items-center justify-center bg-gradient-to-br from-purple-600 to-pink-700 hover:from-purple-700 hover:to-pink-800"
              >
                <Brain className="mb-2" />
                <span>Memory Mix</span>
              </Button>
              
              <Button 
                onClick={() => startGame("equationBuilder")}
                className="h-24 flex flex-col items-center justify-center bg-gradient-to-br from-green-600 to-teal-700 hover:from-green-700 hover:to-teal-800"
              >
                <PenTool className="mb-2" />
                <span>Equation Builder</span>
              </Button>
              
              <Button 
                onClick={() => startGame("blindSolve")}
                className="h-24 flex flex-col items-center justify-center bg-gradient-to-br from-amber-600 to-yellow-700 hover:from-amber-700 hover:to-yellow-800"
              >
                <Eye className="mb-2" />
                <span>Blind Solve</span>
              </Button>
              
              <Button 
                onClick={() => startGame("dailyPuzzle")}
                className="h-24 flex flex-col items-center justify-center bg-gradient-to-br from-cyan-600 to-blue-700 hover:from-cyan-700 hover:to-blue-800"
              >
                <Globe className="mb-2" />
                <span>Daily Puzzle</span>
              </Button>
            </div>
            
            {/* Stats Preview */}
            <div className="bg-gray-900 rounded-lg p-4">
              <div className="flex justify-between mb-2">
                <div className="text-gray-400">Current Tier</div>
                <div className={`font-bold ${TIER_COLORS[tier]}`}>{tier}</div>
              </div>
              <div className="flex justify-between">
                <div className="text-gray-400">Story Progress</div>
                <div className="font-bold text-yellow-500">{storyProgress}/20</div>
              </div>
              <div className="w-full bg-gray-700 rounded-full h-2 mt-2">
                <div 
                  className="bg-yellow-500 h-2 rounded-full" 
                  style={{ width: `${(storyProgress / 20) * 100}%` }}
                ></div>
              </div>
            </div>
          </CardContent>
        </Card>
      </div>
    );
  };

  return (
    <div className="min-h-screen bg-gradient-to-b from-gray-900 to-gray-950 text-white flex flex-col items-center justify-center p-4">
      <AnimatePresence mode="wait">
        {gameOver ? (
          <motion.div
            key="game-over"
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            transition={{ duration: 0.3 }}
          >
            {renderGameOverScreen()}
          </motion.div>
        ) : gameMode ? (
          <motion.div
            key="game"
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            transition={{ duration: 0.3 }}
          >
            {renderGameScreen()}
          </motion.div>
        ) : (
          <motion.div
            key="menu"
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            transition={{ duration: 0.3 }}
          >
            {renderMainMenu()}
          </motion.div>
        )}
      </AnimatePresence>
      
      {/* Footer */}
      <div className="mt-6 text-center text-xs text-gray-500">
        NumBlitz: Math Mastery Arena • Sharpen your mind, one equation at a time
      </div>
    </div>
  );
}