import React, { useState, useEffect, useRef } from 'react';
import { User, Zap, Star, Award, Heart, Trophy, Clock } from 'lucide-react';

export default function BasketballHeroes() {
  const [gameState, setGameState] = useState('start'); // start, playing, gameOver
  const [character, setCharacter] = useState(null); // 'kanye', 'hitler'
  const [teammate, setTeammate] = useState(null);
  const [score, setScore] = useState({ player: 0, ai: 0 });
  const [possession, setPossession] = useState('player'); // 'player' or 'ai'
  const [ballPosition, setBallPosition] = useState({ x: 50, y: 50, progress: 0 });
  const [playerPosition, setPlayerPosition] = useState({ x: 70, y: 70 });
  const [teammatePosition, setTeammatePosition] = useState({ x: 30, y: 70 });
  const [aiPosition, setAiPosition] = useState({ x: 50, y: 30 });
  const [aiTeammatePosition, setAiTeammatePosition] = useState({ x: 70, y: 30 });
  const [gameTime, setGameTime] = useState(60); // 60 seconds game
  const [shotClock, setShotClock] = useState(24);
  const [isShooting, setIsShooting] = useState(false);
  const [shootingPower, setShootingPower] = useState(0);
  const [messages, setMessages] = useState([]);
  const [specialMeter, setSpecialMeter] = useState(0);
  const [isSpecialActive, setIsSpecialActive] = useState(false);
  const [gameSpeed, setGameSpeed] = useState(1);
  const [difficulty, setDifficulty] = useState('normal');
  const gameAreaRef = useRef(null);
  const animationFrameRef = useRef(null);
  const lastUpdateTimeRef = useRef(Date.now());
  
  // Game constants
  const COURT_WIDTH = 100;
  const COURT_HEIGHT = 100;
  const PLAYER_SIZE = 8;
  const BALL_SIZE = 4;
  const BASKET_PLAYER_Y = 15;
  const BASKET_AI_Y = 85;
  const BASKET_X = 50;
  const SPECIAL_THRESHOLD = 100;
  const SHOT_POWER_RATE = 2;
  const MAX_SHOT_POWER = 100;
  
  // Character stats
  const characters = {
    lebron: {
      name: "LeBron James",
      specialName: "King's Takeover",
      shooting: 9,
      defense: 8,
      speed: 8,
      special: "Becomes unstoppable for 10 seconds",
      image: "https://placehold.co/100x100/9966CC/FFFFFF?text=LeBron",
      color: "#6A0DAD" // Purple
    },
    kanye: {
      name: "Kanye West",
      specialName: "Dropout Beat",
      shooting: 7,
      defense: 6,
      speed: 9,
      special: "Freezes opponents for 5 seconds",
      image: "https://placehold.co/100x100/FF9900/FFFFFF?text=Kanye",
      color: "#FF9900" // Gold
    },
    hitler: {
      name: "Hitler",
      specialName: "Blitzkrieg",
      shooting: 6,
      defense: 9,
      speed: 7,
      special: "Steals the ball and gets a fast break",
      image: "https://placehold.co/100x100/333333/FFFFFF?text=Hitler",
      color: "#333333" // Dark gray
    }
  };
  
  // Difficulty settings
  const difficultySettings = {
    easy: { aiAccuracy: 0.5, aiSpeed: 0.7, aiDefense: 0.6 },
    normal: { aiAccuracy: 0.7, aiSpeed: 0.85, aiDefense: 0.75 },
    hard: { aiAccuracy: 0.9, aiSpeed: 1, aiDefense: 0.9 }
  };
  
  // Initialize game
  useEffect(() => {
    if (gameState === 'playing') {
      // Start game loop
      lastUpdateTimeRef.current = Date.now();
      startGameLoop();
      
      // Start game timer
      const timerInterval = setInterval(() => {
        setGameTime(time => {
          if (time <= 0) {
            clearInterval(timerInterval);
            setGameState('gameOver');
            return 0;
          }
          return time - 1;
        });
        
        // Update shot clock
        if (possession === 'player') {
          setShotClock(clock => {
            if (clock <= 0) {
              changePossession('ai');
              addMessage("Shot clock violation! AI ball");
              return 24;
            }
            return clock - 1;
          });
        }
      }, 1000);
      
      return () => {
        cancelAnimationFrame(animationFrameRef.current);
        clearInterval(timerInterval);
      };
    }
  }, [gameState]);
  
  // Game loop
  const startGameLoop = () => {
    const gameLoop = () => {
      const now = Date.now();
      const deltaTime = (now - lastUpdateTimeRef.current) / 1000 * gameSpeed;
      lastUpdateTimeRef.current = now;
      
      updateGame(deltaTime);
      animationFrameRef.current = requestAnimationFrame(gameLoop);
    };
    
    animationFrameRef.current = requestAnimationFrame(gameLoop);
  };
  
  // Update game state
  const updateGame = (deltaTime) => {
    // AI movement and decision making
    if (possession === 'ai') {
      moveAI(deltaTime);
      aiDecisionMaking(deltaTime);
    } else {
      // AI defense when player has the ball
      defendAI(deltaTime);
    }
    
    // Teammate AI
    moveTeammate(deltaTime);
    
    // Update ball position
    if (possession === 'player') {
      if (isShooting) {
        updateBallShooting(deltaTime);
      } else {
        // Ball follows the player
        setBallPosition(prev => ({ ...prev, x: playerPosition.x, y: playerPosition.y - 2 }));
      }
    } else if (possession === 'ai') {
      // Ball follows AI
      setBallPosition(prev => ({ ...prev, x: aiPosition.x, y: aiPosition.y + 2 }));
    }
    
    // Remove old messages
    setMessages(m => m.filter(msg => Date.now() - msg.time < 3000));
  };
  
  // AI movement
  const moveAI = (deltaTime) => {
    const settings = difficultySettings[difficulty];
    const speed = characters.lebron.speed * settings.aiSpeed * deltaTime * 10;
    
    // Move towards the basket when in possession
    if (possession === 'ai') {
      const targetX = BASKET_X;
      const targetY = BASKET_AI_Y - 20; // Position in front of basket
      
      const dx = targetX - aiPosition.x;
      const dy = targetY - aiPosition.y;
      const distance = Math.sqrt(dx * dx + dy * dy);
      
      if (distance > 1) {
        setAiPosition(pos => ({
          x: pos.x + (dx / distance) * speed,
          y: pos.y + (dy / distance) * speed
        }));
      }
    }
    
    // Move AI teammate for support
    const teammateTargetX = aiPosition.x > BASKET_X ? BASKET_X - 15 : BASKET_X + 15;
    const teammateTargetY = BASKET_AI_Y - 15;
    
    const tdx = teammateTargetX - aiTeammatePosition.x;
    const tdy = teammateTargetY - aiTeammatePosition.y;
    const tDistance = Math.sqrt(tdx * tdx + tdy * tdy);
    
    if (tDistance > 1) {
      setAiTeammatePosition(pos => ({
        x: pos.x + (tdx / tDistance) * speed * 0.8,
        y: pos.y + (tdy / tDistance) * speed * 0.8
      }));
    }
  };
  
  // AI defense
  const defendAI = (deltaTime) => {
    const settings = difficultySettings[difficulty];
    const speed = characters.lebron.speed * settings.aiSpeed * deltaTime * 10;
    
    // AI defends the player with the ball
    const targetX = playerPosition.x;
    const targetY = playerPosition.y - 10;
    
    const dx = targetX - aiPosition.x;
    const dy = targetY - aiPosition.y;
    const distance = Math.sqrt(dx * dx + dy * dy);
    
    if (distance > 5) {
      setAiPosition(pos => ({
        x: pos.x + (dx / distance) * speed,
        y: pos.y + (dy / distance) * speed
      }));
    }
    
    // AI teammate defends the player's teammate
    const teammateTargetX = teammatePosition.x;
    const teammateTargetY = teammatePosition.y - 5;
    
    const tdx = teammateTargetX - aiTeammatePosition.x;
    const tdy = teammateTargetY - aiTeammatePosition.y;
    const tDistance = Math.sqrt(tdx * tdx + tdy * tdy);
    
    if (tDistance > 5) {
      setAiTeammatePosition(pos => ({
        x: pos.x + (tdx / tDistance) * speed * 0.8,
        y: pos.y + (tdy / tDistance) * speed * 0.8
      }));
    }
    
    // Check for steals
    if (!isSpecialActive && !isShooting) {
      const stealChance = settings.aiDefense * 0.01;
      if (distance < 8 && Math.random() < stealChance) {
        changePossession('ai');
        addMessage("Ball stolen by LeBron!");
        setSpecialMeter(m => Math.min(SPECIAL_THRESHOLD, m + 10));
      }
    }
  };
  
  // AI decision making
  const aiDecisionMaking = (deltaTime) => {
    const settings = difficultySettings[difficulty];
    
    // Distance to basket
    const distanceToBasket = Math.sqrt(
      Math.pow(aiPosition.x - BASKET_X, 2) + 
      Math.pow(aiPosition.y - BASKET_AI_Y, 2)
    );
    
    // Shoot if close enough to basket or shot clock running low
    if (distanceToBasket < 20 || shotClock < 5) {
      const shootingSkill = characters.lebron.shooting;
      const shotDifficulty = distanceToBasket / 10;
      const successChance = (shootingSkill / 10) * settings.aiAccuracy * (1 - shotDifficulty / 10);
      
      if (Math.random() < successChance) {
        // Successful shot
        setScore(s => ({ ...s, ai: s.ai + 2 }));
        addMessage("LeBron scores! +2 points for AI");
        changePossession('player');
      } else {
        // Missed shot - chance for rebound
        const reboundChance = 0.5;
        if (Math.random() < reboundChance) {
          addMessage("LeBron misses, but AI gets the rebound!");
          setShotClock(24);
        } else {
          addMessage("LeBron misses! Player gets the rebound");
          changePossession('player');
        }
      }
    }
    
    // Pass to teammate occasionally
    if (Math.random() < 0.01 && distanceToBasket > 15) {
      // Simulate pass to teammate
      setAiPosition(aiTeammatePosition);
      setAiTeammatePosition(aiPosition);
      addMessage("LeBron passes to teammate!");
    }
  };
  
  // Move teammate AI
  const moveTeammate = (deltaTime) => {
    if (!teammate) return;
    
    const speed = characters[teammate].speed * deltaTime * 10;
    
    if (possession === 'player') {
      // Position for receiving a pass
      let targetX, targetY;
      
      if (playerPosition.x < BASKET_X) {
        targetX = BASKET_X + 15;
      } else {
        targetX = BASKET_X - 15;
      }
      
      targetY = BASKET_PLAYER_Y + 15;
      
      const dx = targetX - teammatePosition.x;
      const dy = targetY - teammatePosition.y;
      const distance = Math.sqrt(dx * dx + dy * dy);
      
      if (distance > 1) {
        setTeammatePosition(pos => ({
          x: pos.x + (dx / distance) * speed,
          y: pos.y + (dy / distance) * speed
        }));
      }
    }
  };
  
  // Update ball shooting
  const updateBallShooting = (deltaTime) => {
    setBallPosition(pos => {
      // Calculate trajectory to basket
      const targetX = BASKET_X;
      const targetY = BASKET_PLAYER_Y;
      
      const startX = playerPosition.x;
      const startY = playerPosition.y;
      
      const dx = targetX - startX;
      const dy = targetY - startY;
      const distance = Math.sqrt(dx * dx + dy * dy);
      
      // Calculate progress along shot path (0 to 1)
      const progress = Math.min(1, pos.progress + deltaTime * 2);
      
      // Parabolic arc for the shot
      const x = startX + dx * progress;
      const y = startY + dy * progress - Math.sin(progress * Math.PI) * 20;
      
      // Check if shot is complete
      if (progress >= 1) {
        setIsShooting(false);
        
        // Calculate shot success based on distance, power, and player skill
        const shotDifficulty = distance / 10;
        const powerFactor = Math.abs((shootingPower / MAX_SHOT_POWER) - 0.8);
        const skillFactor = characters[character].shooting / 10;
        
        // Check for defenders nearby
        const defenderDistance = Math.sqrt(
          Math.pow(aiPosition.x - playerPosition.x, 2) + 
          Math.pow(aiPosition.y - playerPosition.y, 2)
        );
        
        const defenseEffect = Math.max(0, 1 - (characters.lebron.defense / 10) * (1 - defenderDistance / 30));
        
        const successChance = skillFactor * (1 - powerFactor) * (1 - shotDifficulty / 10) * defenseEffect;
        
        if (Math.random() < successChance) {
          // Successful shot
          setScore(s => ({ ...s, player: s.player + 2 }));
          addMessage(`${characters[character].name} scores! +2 points`);
          setSpecialMeter(m => Math.min(SPECIAL_THRESHOLD, m + 20));
          changePossession('ai');
        } else {
          // Missed shot - chance for rebound
          const reboundChance = 0.6;
          if (Math.random() < reboundChance) {
            addMessage(`${characters[character].name} misses, but gets the rebound!`);
            setShotClock(24);
          } else {
            addMessage(`${characters[character].name} misses! AI gets the rebound`);
            changePossession('ai');
          }
        }
        
        return { x: playerPosition.x, y: playerPosition.y, progress: 0 };
      }
      
      return { x, y, progress };
    });
  };
  
  // Handle player movement
  const handleKeyDown = (e) => {
    if (gameState !== 'playing' || possession !== 'player') return;
    
    const speed = characters[character].speed * 0.5;
    
    switch(e.key) {
      case 'ArrowLeft':
        setPlayerPosition(p => ({ ...p, x: Math.max(5, p.x - speed) }));
        break;
      case 'ArrowRight':
        setPlayerPosition(p => ({ ...p, x: Math.min(95, p.x + speed) }));
        break;
      case 'ArrowUp':
        setPlayerPosition(p => ({ ...p, y: Math.max(30, p.y - speed) }));
        break;
      case 'ArrowDown':
        setPlayerPosition(p => ({ ...p, y: Math.min(90, p.y + speed) }));
        break;
      case ' ':
        if (!isShooting && possession === 'player') {
          startShooting();
        }
        break;
      case 'p':
        if (possession === 'player') {
          passBall();
        }
        break;
      case 'Enter':
        if (specialMeter >= SPECIAL_THRESHOLD) {
          activateSpecial();
        }
        break;
      default:
        break;
    }
  };
  
  // Start shooting process
  const startShooting = () => {
    setIsShooting(true);
    setShootingPower(0);
    
    // Power meter increases
    const powerInterval = setInterval(() => {
      setShootingPower(power => {
        if (power >= MAX_SHOT_POWER) {
          clearInterval(powerInterval);
          return MAX_SHOT_POWER;
        }
        return power + SHOT_POWER_RATE;
      });
    }, 20);
    
    // Auto-release after max power
    setTimeout(() => {
      clearInterval(powerInterval);
      if (isShooting) {
        releaseShotWithCurrentPower();
      }
    }, MAX_SHOT_POWER / SHOT_POWER_RATE * 20 + 100);
  };
  
  // Release shot with current power
  const releaseShotWithCurrentPower = () => {
    setBallPosition(pos => ({
      ...pos,
      progress: 0
    }));
  };
  
  // Pass ball to teammate
  const passBall = () => {
    if (possession !== 'player' || isShooting) return;
    
    // Swap positions
    const tempPos = playerPosition;
    setPlayerPosition(teammatePosition);
    setTeammatePosition(tempPos);
    
    addMessage(`${characters[character].name} passes to ${characters[teammate].name}!`);
  };
  
  // Change possession
  const changePossession = (newPossession) => {
    setPossession(newPossession);
    setShotClock(24);
    
    if (newPossession === 'player') {
      // Reset player and ball positions for inbound
      setPlayerPosition({ x: 50, y: 70 });
      setTeammatePosition({ x: 30, y: 70 });
      setBallPosition({ x: 50, y: 70, progress: 0 });
    } else {
      // Reset AI positions for inbound
      setAiPosition({ x: 50, y: 30 });
      setAiTeammatePosition({ x: 70, y: 30 });
      setBallPosition({ x: 50, y: 30, progress: 0 });
    }
  };
  
  // Add message to the message list
  const addMessage = (text) => {
    setMessages(prev => [...prev, { text, time: Date.now() }]);
  };
  
  // Activate special ability
  const activateSpecial = () => {
    setIsSpecialActive(true);
    setSpecialMeter(0);
    
    if (character === 'kanye') {
      // Kanye's special: freeze opponents
      const originalAiPos = { ...aiPosition };
      const originalAiTeammatePos = { ...aiTeammatePosition };
      
      addMessage(`${characters[character].specialName} activated! Opponents frozen!`);
      
      // Freeze AI movement
      const unfreezeTime = setTimeout(() => {
        setIsSpecialActive(false);
        addMessage("Opponents unfrozen!");
      }, 5000);
      
      return () => clearTimeout(unfreezeTime);
    } else if (character === 'hitler') {
      // Hitler's special: steal ball and fast break
      changePossession('player');
      setPlayerPosition({ x: BASKET_X, y: BASKET_PLAYER_Y + 15 });
      addMessage(`${characters[character].specialName} activated! Ball stolen!`);
      
      setTimeout(() => {
        setIsSpecialActive(false);
      }, 2000);
    }
    
    // Reset special state after animation
    setTimeout(() => {
      setIsSpecialActive(false);
    }, 2000);
  };
  
  // Start the game
  const startGame = (selectedCharacter) => {
    setCharacter(selectedCharacter);
    
    // Set teammate as the non-selected character
    const availableTeammates = Object.keys(characters).filter(c => c !== selectedCharacter && c !== 'lebron');
    setTeammate(availableTeammates[0]);
    
    setGameState('playing');
    setScore({ player: 0, ai: 0 });
    setGameTime(60);
    setShotClock(24);
    setPossession('player');
    setPlayerPosition({ x: 70, y: 70 });
    setTeammatePosition({ x: 30, y: 70 });
    setAiPosition({ x: 50, y: 30 });
    setAiTeammatePosition({ x: 70, y: 30 });
    setBallPosition({ x: 70, y: 70, progress: 0 });
    setMessages([]);
    setSpecialMeter(0);
    
    // Focus on game area for keyboard controls
    if (gameAreaRef.current) {
      gameAreaRef.current.focus();
    }
    
    addMessage(`Game started with ${characters[selectedCharacter].name}!`);
    addMessage(`Your teammate is ${characters[availableTeammates[0]].name}`);
  };
  
  // Restart the game
  const restartGame = () => {
    setGameState('start');
  };
  
  // Handle touch/mouse movement for mobile
  const handlePointerMove = (e) => {
    if (gameState !== 'playing' || possession !== 'player') return;
    
    const rect = e.currentTarget.getBoundingClientRect();
    const x = ((e.clientX - rect.left) / rect.width) * 100;
    const y = ((e.clientY - rect.top) / rect.height) * 100;
    
    setPlayerPosition({ 
      x: Math.min(95, Math.max(5, x)),
      y: Math.min(90, Math.max(30, y))
    });
  };
  
  // Handle shooting on click/tap
  const handlePointerDown = () => {
    if (gameState === 'playing' && possession === 'player' && !isShooting) {
      startShooting();
    }
  };
  
  // Handle shooting release on pointer up
  const handlePointerUp = () => {
    if (gameState === 'playing' && possession === 'player' && isShooting) {
      releaseShotWithCurrentPower();
    }
  };
  
  // Format time as MM:SS
  const formatTime = (seconds) => {
    const mins = Math.floor(seconds / 60);
    const secs = seconds % 60;
    return `${mins}:${secs < 10 ? '0' : ''}${secs}`;
  };
  
  return (
    <div className="flex flex-col items-center justify-center min-h-screen bg-gradient-to-b from-purple-900 to-indigo-900 text-white p-4">
      {gameState === 'start' ? (
        <div className="flex flex-col items-center justify-center space-y-8 w-full max-w-md">
          <h1 className="text-4xl font-bold text-center text-yellow-400 mb-2">Basketball Heroes</h1>
          <h2 className="text-2xl font-semibold text-center mb-6">2v2 Showdown vs LeBron</h2>
          
          <div className="grid grid-cols-2 gap-6 w-full">
            <div 
              className="bg-indigo-800 p-4 rounded-lg flex flex-col items-center cursor-pointer hover:bg-indigo-700 transition-colors border-2 border-indigo-600"
              onClick={() => startGame('kanye')}
            >
              <div 
                className="w-24 h-24 rounded-full mb-3 border-4 flex items-center justify-center"
                style={{ borderColor: characters.kanye.color, backgroundColor: `${characters.kanye.color}40` }}
              >
                <img 
                  src={characters.kanye.image} 
                  alt="Kanye West" 
                  className="w-20 h-20 rounded-full"
                />
              </div>
              <h3 className="text-xl font-bold">{characters.kanye.name}</h3>
              <div className="mt-2 space-y-1 text-sm">
                <div className="flex items-center">
                  <Zap size={16} className="text-yellow-400 mr-1" />
                  <span>Shooting: {characters.kanye.shooting}/10</span>
                </div>
                <div className="flex items-center">
                  <Star size={16} className="text-yellow-400 mr-1" />
                  <span>Defense: {characters.kanye.defense}/10</span>
                </div>
                <div className="flex items-center">
                  <Star size={16} className="text-yellow-400 mr-1" />
                  <span>Speed: {characters.kanye.speed}/10</span>
                </div>
                <div className="flex items-center mt-2">
                  <Award size={16} className="text-yellow-400 mr-1" />
                  <span className="font-semibold">{characters.kanye.specialName}</span>
                </div>
              </div>
            </div>
            
            <div 
              className="bg-indigo-800 p-4 rounded-lg flex flex-col items-center cursor-pointer hover:bg-indigo-700 transition-colors border-2 border-indigo-600"
              onClick={() => startGame('hitler')}
            >
              <div 
                className="w-24 h-24 rounded-full mb-3 border-4 flex items-center justify-center"
                style={{ borderColor: characters.hitler.color, backgroundColor: `${characters.hitler.color}40` }}
              >
                <img 
                  src={characters.hitler.image} 
                  alt="Hitler" 
                  className="w-20 h-20 rounded-full"
                />
              </div>
              <h3 className="text-xl font-bold">{characters.hitler.name}</h3>
              <div className="mt-2 space-y-1 text-sm">
                <div className="flex items-center">
                  <Zap size={16} className="text-yellow-400 mr-1" />
                  <span>Shooting: {characters.hitler.shooting}/10</span>
                </div>
                <div className="flex items-center">
                  <Star size={16} className="text-yellow-400 mr-1" />
                  <span>Defense: {characters.hitler.defense}/10</span>
                </div>
                <div className="flex items-center">
                  <Star size={16} className="text-yellow-400 mr-1" />
                  <span>Speed: {characters.hitler.speed}/10</span>
                </div>
                <div className="flex items-center mt-2">
                  <Award size={16} className="text-yellow-400 mr-1" />
                  <span className="font-semibold">{characters.hitler.specialName}</span>
                </div>
              </div>
            </div>
          </div>
          
          <div className="w-full mt-6">
            <h3 className="text-lg font-semibold mb-2">Difficulty:</h3>
            <div className="grid grid-cols-3 gap-2">
              {['easy', 'normal', 'hard'].map(diff => (
                <button
                  key={diff}
                  className={`py-2 px-4 rounded-md text-center capitalize ${
                    difficulty === diff 
                      ? 'bg-indigo-600 border-2 border-indigo-400' 
                      : 'bg-indigo-800 hover:bg-indigo-700'
                  }`}
                  onClick={() => setDifficulty(diff)}
                >
                  {diff}
                </button>
              ))}
            </div>
          </div>
          
          <div className="mt-6 text-center text-sm text-indigo-300">
            <p className="mb-2">Use arrow keys to move, SPACE to shoot, P to pass, ENTER for special move</p>
            <p>Or use touch/mouse controls on mobile devices</p>
          </div>
        </div>
      ) : gameState === 'playing' ? (
        <div 
          ref={gameAreaRef}
          tabIndex={0}
          onKeyDown={handleKeyDown}
          onPointerMove={handlePointerMove}
          onPointerDown={handlePointerDown}
          onPointerUp={handlePointerUp}
          className="relative w-full max-w-lg h-[500px] bg-indigo-950 rounded-lg overflow-hidden border-4 border-indigo-700 focus:outline-none"
          style={{ touchAction: 'none' }}
        >
          {/* Court markings */}
          <div className="absolute inset-0">
            {/* Center circle */}
            <div className="absolute top-1/2 left-1/2 w-20 h-20 border-2 border-white/30 rounded-full -translate-x-1/2 -translate-y-1/2"></div>
            
            {/* Center line */}
            <div className="absolute top-1/2 left-0 right-0 h-0.5 bg-white/30 -translate-y-1/2"></div>
            
            {/* Three point lines */}
            <div className="absolute top-0 left-1/4 right-1/4 h-1/4 border-b-2 border-white/30 rounded-b-full"></div>
            <div className="absolute bottom-0 left-1/4 right-1/4 h-1/4 border-t-2 border-white/30 rounded-t-full"></div>
            
            {/* Key areas */}
            <div className="absolute top-0 left-1/3 right-1/3 h-1/6 border-2 border-t-0 border-white/30"></div>
            <div className="absolute bottom-0 left-1/3 right-1/3 h-1/6 border-2 border-b-0 border-white/30"></div>
          </div>
          
          {/* Game UI */}
          <div className="absolute top-0 left-0 right-0 flex justify-between items-center p-2 bg-indigo-900/80 z-10">
            <div className="flex items-center space-x-2">
              <Clock size={16} className="text-white" />
              <span className="font-mono">{formatTime(gameTime)}</span>
            </div>
            
            <div className="text-center">
              <div className="text-xl font-bold">
                <span className={possession === 'player' ? 'text-green-400' : 'text-white'}>
                  {score.player}
                </span>
                <span className="mx-2">-</span>
                <span className={possession === 'ai' ? 'text-red-400' : 'text-white'}>
                  {score.ai}
                </span>
              </div>
            </div>
            
            <div className="flex items-center space-x-2">
              <span className="font-mono">{shotClock}</span>
              <Clock size={16} className="text-white" />
            </div>
          </div>
          
          {/* Special meter */}
          <div className="absolute top-10 left-0 right-0 flex justify-center items-center px-4">
            <div className="w-full max-w-xs h-2 bg-gray-800 rounded-full overflow-hidden">
              <div 
                className="h-full bg-gradient-to-r from-yellow-600 to-yellow-400 rounded-full transition-all duration-300"
                style={{ width: `${(specialMeter / SPECIAL_THRESHOLD) * 100}%` }}
              ></div>
            </div>
          </div>
          
          {/* Shooting power meter (only visible when shooting) */}
          {isShooting && (
            <div className="absolute bottom-4 left-4 right-4 flex flex-col items-center">
              <div className="w-full h-4 bg-gray-800 rounded-full overflow-hidden">
                <div 
                  className="h-full bg-gradient-to-r from-green-600 to-red-600 rounded-full transition-all duration-100"
                  style={{ width: `${(shootingPower / MAX_SHOT_POWER) * 100}%` }}
                ></div>
              </div>
              <div className="text-xs mt-1">Power: {Math.round(shootingPower)}%</div>
            </div>
          )}
          
          {/* Player character */}
          <div 
            className={`absolute w-16 h-16 transition-transform ${isSpecialActive ? 'animate-pulse' : ''}`}
            style={{ 
              left: `${playerPosition.x - 8}%`, 
              top: `${playerPosition.y - 8}%`,
              backgroundImage: `url('${characters[character]?.image}')`,
              backgroun<ant_artifact identifier="1" title="Basketball Heroes Game Code">
import React, { useState, useEffect, useRef } from 'react';
import { Music, Zap, Star, Award, Heart } from 'lucide-react';

export default function BasketballHeroes() {
  const [gameState, setGameState] = useState('start'); // start, playing, gameOver
  const [character, setCharacter] = useState(null); // 'lebron' or 'kanye'
  const [score, setScore] = useState(0);
  const [level, setLevel] = useState(1);
  const [health, setHealth] = useState(100);
  const [specialMeter, setSpecialMeter] = useState(0);
  const [position, setPosition] = useState({ x: 50, y: 70 });
  const [ballPosition, setBallPosition] = useState({ x: 50, y: 60 });
  const [enemies, setEnemies] = useState([]);
  const [messages, setMessages] = useState([]);
  const [isShooting, setIsShooting] = useState(false);
  const [isSpecialActive, setIsSpecialActive] = useState(false);
  const gameAreaRef = useRef(null);
  
  // Game constants
  const ENEMY_SPAWN_RATE = 3000;
  const SPECIAL_THRESHOLD = 100;
  const BASKET_POSITION = { x: 50, y: 15 };
  
  // Character stats
  const characters = {
    lebron: {
      name: "LeBron James",
      specialName: "King's Dunk",
      power: 10,
      speed: 8,
      special: "Unstoppable dunk that clears all enemies",
      image: "https://placehold.co/100x100/9966CC/FFFFFF?text=LeBron"
    },
    kanye: {
      name: "Kanye West",
      specialName: "Dropout Beat",
      power: 7,
      speed: 10,
      special: "Musical wave that stuns all enemies",
      image: "https://placehold.co/100x100/9966CC/FFFFFF?text=Kanye"
    }
  };
  
  // Enemy types
  const enemyTypes = [
    { 
      type: "villain", 
      name: "Historical Villain", 
      health: 30, 
      speed: 2, 
      damage: 10,
      points: 100,
      image: "https://placehold.co/50x50/FF4136/FFFFFF?text=Villain"
    },
    { 
      type: "boss", 
      name: "Final Boss", 
      health: 100, 
      speed: 1, 
      damage: 20,
      points: 500,
      image: "https://placehold.co/70x70/111111/FFFFFF?text=BOSS"
    }
  ];
  
  // Initialize game
  useEffect(() => {
    if (gameState === 'playing') {
      const enemyInterval = setInterval(() => {
        if (enemies.length < 5) {
          spawnEnemy();
        }
      }, ENEMY_SPAWN_RATE);
      
      const gameLoop = setInterval(() => {
        updateGame();
      }, 50);
      
      return () => {
        clearInterval(enemyInterval);
        clearInterval(gameLoop);
      };
    }
  }, [gameState, enemies, position, ballPosition, isShooting]);
  
  // Spawn a new enemy
  const spawnEnemy = () => {
    const isBoss = Math.random() < 0.1 && level > 2;
    const enemyType = enemyTypes[isBoss ? 1 : 0];
    const newEnemy = {
      id: Date.now(),
      x: Math.random() * 80 + 10,
      y: 10,
      ...enemyType
    };
    
    setEnemies(prev => [...prev, newEnemy]);
  };
  
  // Update game state
  const updateGame = () => {
    // Move enemies
    setEnemies(prev => prev.map(enemy => ({
      ...enemy,
      y: enemy.y + enemy.speed * 0.2
    })).filter(enemy => {
      // Remove enemies that reach the bottom
      if (enemy.y > 90) {
        setHealth(h => Math.max(0, h - enemy.damage));
        addMessage(`${enemy.name} scored! -${enemy.damage} health`);
        return false;
      }
      return true;
    }));
    
    // Check for game over
    if (health <= 0) {
      setGameState('gameOver');
    }
    
    // Move ball if shooting
    if (isShooting) {
      setBallPosition(prev => {
        const newY = prev.y - 3;
        const distanceToBasket = Math.sqrt(
          Math.pow(prev.x - BASKET_POSITION.x, 2) + 
          Math.pow(prev.y - BASKET_POSITION.y, 2)
        );
        
        // Ball reached basket
        if (distanceToBasket < 10) {
          setIsShooting(false);
          setScore(s => s + 20);
          setSpecialMeter(sm => Math.min(SPECIAL_THRESHOLD, sm + 20));
          addMessage("Scored a basket! +20 points");
          return { x: position.x, y: position.y - 10 };
        }
        
        // Check for collision with enemies
        const hitEnemy = enemies.find(enemy => 
          Math.sqrt(Math.pow(prev.x - enemy.x, 2) + Math.pow(prev.y - enemy.y, 2)) < 10
        );
        
        if (hitEnemy) {
          setIsShooting(false);
          setEnemies(enemies => enemies.map(e => 
            e.id === hitEnemy.id 
              ? { ...e, health: e.health - characters[character].power } 
              : e
          ).filter(e => e.health > 0));
          
          setScore(s => s + 10);
          setSpecialMeter(sm => Math.min(SPECIAL_THRESHOLD, sm + 10));
          addMessage(`Hit ${hitEnemy.name}! +10 points`);
          return { x: position.x, y: position.y - 10 };
        }
        
        // Ball went off screen
        if (newY < 0) {
          setIsShooting(false);
          return { x: position.x, y: position.y - 10 };
        }
        
        // Continue ball movement
        return { 
          x: prev.x + (BASKET_POSITION.x - prev.x) / 10,
          y: newY 
        };
      });
    } else {
      // Update ball position to follow player
      setBallPosition({ x: position.x, y: position.y - 10 });
    }
    
    // Check for level up
    if (score >= level * 1000) {
      setLevel(l => l + 1);
      addMessage(`Level Up! Now at level ${level + 1}`);
    }
    
    // Remove old messages
    setMessages(m => m.filter(msg => Date.now() - msg.time < 3000));
  };
  
  // Handle player movement
  const handleKeyDown = (e) => {
    if (gameState !== 'playing') return;
    
    const speed = characters[character].speed * 0.5;
    
    switch(e.key) {
      case 'ArrowLeft':
        setPosition(p => ({ ...p, x: Math.max(5, p.x - speed) }));
        break;
      case 'ArrowRight':
        setPosition(p => ({ ...p, x: Math.min(95, p.x + speed) }));
        break;
      case 'ArrowUp':
        setPosition(p => ({ ...p, y: Math.max(30, p.y - speed) }));
        break;
      case 'ArrowDown':
        setPosition(p => ({ ...p, y: Math.min(90, p.y + speed) }));
        break;
      case ' ':
        if (!isShooting) {
          setIsShooting(true);
        }
        break;
      case 'Enter':
        if (specialMeter >= SPECIAL_THRESHOLD) {
          activateSpecial();
        }
        break;
      default:
        break;
    }
  };
  
  // Add message to the message list
  const addMessage = (text) => {
    setMessages(prev => [...prev, { text, time: Date.now() }]);
  };
  
  // Activate special ability
  const activateSpecial = () => {
    setIsSpecialActive(true);
    setSpecialMeter(0);
    
    if (character === 'lebron') {
      // LeBron's special: clear all enemies
      setEnemies([]);
      setScore(s => s + enemies.length * 50);
      addMessage(`${characters[character].specialName} activated! Cleared all enemies!`);
    } else {
      // Kanye's special: stun all enemies
      setEnemies(e => e.map(enemy => ({ ...enemy, speed: 0 })));
      addMessage(`${characters[character].specialName} activated! Enemies stunned!`);
      
      // Reset enemy speed after 5 seconds
      setTimeout(() => {
        setEnemies(e => e.map(enemy => ({ 
          ...enemy, 
          speed: enemyTypes.find(t => t.type === enemy.type).speed 
        })));
        setIsSpecialActive(false);
      }, 5000);
    }
    
    // Reset special state after animation
    setTimeout(() => {
      setIsSpecialActive(false);
    }, 2000);
  };
  
  // Start the game
  const startGame = (selectedCharacter) => {
    setCharacter(selectedCharacter);
    setGameState('playing');
    setScore(0);
    setLevel(1);
    setHealth(100);
    setSpecialMeter(0);
    setPosition({ x: 50, y: 70 });
    setBallPosition({ x: 50, y: 60 });
    setEnemies([]);
    setMessages([]);
    
    // Focus on game area for keyboard controls
    if (gameAreaRef.current) {
      gameAreaRef.current.focus();
    }
    
    addMessage(`Game started with ${characters[selectedCharacter].name}!`);
  };
  
  // Restart the game
  const restartGame = () => {
    setGameState('start');
  };
  
  // Handle touch/mouse movement for mobile
  const handlePointerMove = (e) => {
    if (gameState !== 'playing') return;
    
    const rect = e.currentTarget.getBoundingClientRect();
    const x = ((e.clientX - rect.left) / rect.width) * 100;
    const y = ((e.clientY - rect.top) / rect.height) * 100;
    
    setPosition({ 
      x: Math.min(95, Math.max(5, x)),
      y: Math.min(90, Math.max(30, y))
    });
  };
  
  // Handle shooting on click/tap
  const handlePointerDown = () => {
    if (gameState === 'playing' && !isShooting) {
      setIsShooting(true);
    }
  };
  
  return (
    <div className="flex flex-col items-center justify-center min-h-screen bg-gradient-to-b from-purple-900 to-indigo-900 text-white p-4">
      {gameState === 'start' ? (
        <div className="flex flex-col items-center justify-center space-y-8 w-full max-w-md">
          <h1 className="text-4xl font-bold text-center text-yellow-400 mb-2">Basketball Heroes</h1>
          <h2 className="text-2xl font-semibold text-center mb-6">LeBron & Kanye vs Villains</h2>
          
          <div className="grid grid-cols-2 gap-6 w-full">
            <div 
              className="bg-indigo-800 p-4 rounded-lg flex flex-col items-center cursor-pointer hover:bg-indigo-700 transition-colors border-2 border-indigo-600"
              onClick={() => startGame('lebron')}
            >
              <img 
                src={characters.lebron.image} 
                alt="LeBron James" 
                className="w-24 h-24 rounded-full mb-3 border-4 border-yellow-400"
              />
              <h3 className="text-xl font-bold">{characters.lebron.name}</h3>
              <div className="mt-2 space-y-1 text-sm">
                <div className="flex items-center">
                  <Zap size={16} className="text-yellow-400 mr-1" />
                  <span>Power: {characters.lebron.power}/10</span>
                </div>
                <div className="flex items-center">
                  <Star size={16} className="text-yellow-400 mr-1" />
                  <span>Speed: {characters.lebron.speed}/10</span>
                </div>
                <div className="flex items-center mt-2">
                  <Award size={16} className="text-yellow-400 mr-1" />
                  <span className="font-semibold">{characters.lebron.specialName}</span>
                </div>
              </div>
            </div>
            
            <div 
              className="bg-indigo-800 p-4 rounded-lg flex flex-col items-center cursor-pointer hover:bg-indigo-700 transition-colors border-2 border-indigo-600"
              onClick={() => startGame('kanye')}
            >
              <img 
                src={characters.kanye.image} 
                alt="Kanye West" 
                className="w-24 h-24 rounded-full mb-3 border-4 border-yellow-400"
              />
              <h3 className="text-xl font-bold">{characters.kanye.name}</h3>
              <div className="mt-2 space-y-1 text-sm">
                <div className="flex items-center">
                  <Zap size={16} className="text-yellow-400 mr-1" />
                  <span>Power: {characters.kanye.power}/10</span>
                </div>
                <div className="flex items-center">
                  <Star size={16} className="text-yellow-400 mr-1" />
                  <span>Speed: {characters.kanye.speed}/10</span>
                </div>
                <div className="flex items-center mt-2">
                  <Music size={16} className="text-yellow-400 mr-1" />
                  <span className="font-semibold">{characters.kanye.specialName}</span>
                </div>
              </div>
            </div>
          </div>
          
          <div className="mt-6 text-center text-sm text-indigo-300">
            <p className="mb-2">Use arrow keys to move, SPACE to shoot, ENTER for special move</p>
            <p>Or use touch/mouse controls on mobile devices</p>
          </div>
        </div>
      ) : gameState === 'playing' ? (
        <div 
          ref={gameAreaRef}
          tabIndex={0}
          onKeyDown={handleKeyDown}
          onPointerMove={handlePointerMove}
          onPointerDown={handlePointerDown}
          className="relative w-full max-w-lg h-[500px] bg-indigo-950 rounded-lg overflow-hidden border-4 border-indigo-700 focus:outline-none"
          style={{ touchAction: 'none' }}
        >
          {/* Game UI */}
          <div className="absolute top-0 left-0 right-0 flex justify-between items-center p-2 bg-indigo-900/80 z-10">
            <div className="flex items-center">
              <Heart size={16} className="text-red-500 mr-1" />
              <div className="w-24 h-4 bg-gray-800 rounded-full overflow-hidden">
                <div 
                  className="h-full bg-gradient-to-r from-red-600 to-red-400 rounded-full"
                  style={{ width: `${health}%` }}
                ></div>
              </div>
            </div>
            
            <div className="text-center">
              <div className="text-yellow-400 font-bold">SCORE: {score}</div>
              <div className="text-xs">LEVEL {level}</div>
            </div>
            
            <div className="flex items-center">
              <Zap size={16} className="text-yellow-400 mr-1" />
              <div className="w-24 h-4 bg-gray-800 rounded-full overflow-hidden">
                <div 
                  className="h-full bg-gradient-to-r from-yellow-600 to-yellow-400 rounded-full"
                  style={{ width: `${(specialMeter / SPECIAL_THRESHOLD) * 100}%` }}
                ></div>
              </div>
            </div>
          </div>
          
          {/* Basketball hoop */}
          <div 
            className="absolute w-20 h-12"
            style={{ 
              left: `${BASKET_POSITION.x - 10}%`, 
              top: `${BASKET_POSITION.y}%`,
              backgroundImage: "url('https://placehold.co/80x50/FF6B00/FFFFFF?text=HOOP')",
              backgroundSize: 'contain',
              backgroundRepeat: 'no-repeat',
              backgroundPosition: 'center'
            }}
          ></div>
          
          {/* Player character */}
          <div 
            className={`absolute w-16 h-16 transition-transform ${isSpecialActive ? 'animate-pulse' : ''}`}
            style={{ 
              left: `${position.x - 8}%`, 
              top: `${position.y - 8}%`,
              backgroundImage: `url('${characters[character]?.image}')`,
              backgroundSize: 'contain',
              backgroundRepeat: 'no-repeat',
              backgroundPosition: 'center',
              filter: isSpecialActive ? 'drop-shadow(0 0 8px gold)' : 'none'
            }}
          ></div>
          
          {/* Basketball */}
          <div 
            className={`absolute w-8 h-8 rounded-full bg-orange-600 border-2 border-orange-800 ${isShooting ? 'animate-ping' : ''}`}
            style={{ 
              left: `${ballPosition.x - 4}%`, 
              top: `${ballPosition.y - 4}%`,
              backgroundImage: "radial-gradient(circle, #f97316 0%, #c2410c 100%)",
              boxShadow: "0 0 10px rgba(0,0,0,0.5)"
            }}
          ></div>
          
          {/* Enemies */}
          {enemies.map(enemy => (
            <div 
              key={enemy.id}
              className="absolute"
              style={{ 
                left: `${enemy.x - (enemy.type === 'boss' ? 5 : 3)}%`, 
                top: `${enemy.y - (enemy.type === 'boss' ? 5 : 3)}%`,
                width: enemy.type === 'boss' ? '10%' : '6%',
                height: enemy.type === 'boss' ? '10%' : '6%',
                backgroundImage: `url('${enemy.image}')`,
                backgroundSize: 'contain',
                backgroundRepeat: 'no-repeat',
                backgroundPosition: 'center'
              }}
            >
              <div className="absolute -top-2 left-0 right-0 h-1 bg-gray-800 rounded-full overflow-hidden">
                <div 
                  className="h-full bg-red-600 rounded-full"
                  style={{ width: `${(enemy.health / enemyTypes.find(t => t.type === enemy.type).health) * 100}%` }}
                ></div>
              </div>
            </div>
          ))}
          
          {/* Special effect */}
          {isSpecialActive && (
            <div className={`absolute inset-0 ${character === 'lebron' ? 'bg-yellow-500/30' : 'bg-purple-500/30'} animate-pulse z-20`}>
              <div className="absolute inset-0 flex items-center justify-center">
                <span className="text-4xl font-bold text-white drop-shadow-lg">
                  {characters[character].specialName}!
                </span>
              </div>
            </div>
          )}
          
          {/* Messages */}
          <div className="absolute bottom-4 left-4 right-4">
            {messages.map((msg, i) => (
              <div 
                key={msg.time} 
                className="bg-black/70 text-white px-2 py-1 rounded mb-1 text-sm animate-fadeOut"
                style={{ 
                  opacity: 1 - ((Date.now() - msg.time) / 3000),
                  transform: `translateY(${i * -20}px)`
                }}
              >
                {msg.text}
              </div>
            ))}
          </div>
          
          {/* Controls hint */}
          <div className="absolute bottom-1 right-1 text-xs text-white/50">
            ↑↓←→: Move | Space: Shoot | Enter: Special
          </div>
        </div>
      ) : (
        <div className="flex flex-col items-center justify-center space-y-6 w-full max-w-md">
          <h1 className="text-4xl font-bold text-center text-red-500 mb-2">Game Over</h1>
          <div className="text-center">
            <p className="text-2xl mb-2">Final Score: <span className="text-yellow-400 font-bold">{score}</span></p>
            <p className="text-lg">You reached Level {level}</p>
          </div>
          
          <button 
            onClick={restartGame}
            className="px-6 py-3 bg-indigo-700 hover:bg-indigo-600 text-white font-bold rounded-lg transition-colors"
          >
            Play Again
          </button>
        </div>
      )}
      
      <style jsx>{`
        @keyframes fadeOut {
          from { opacity: 1; }
          to { opacity: 0; }
        }
        .animate-fadeOut {
          animation: fadeOut 3s forwards;
        }
      `}</style>
    </div>
  );
}