import React, { useState, useRef, useEffect, Suspense } from 'react';
import { Canvas, useFrame, useThree } from '@react-three/fiber';
import { OrbitControls, useGLTF, Text, Sky, Stars, Html, useAnimations } from '@react-three/drei';
import { Physics, useBox, usePlane, useSphere } from '@react-three/cannon';
import * as THREE from 'three';

// Game state management
const GameContext = React.createContext();

const GameProvider = ({ children }) => {
  const [gameState, setGameState] = useState('menu'); // menu, playing, gameover
  const [score, setScore] = useState(0);
  const [health, setHealth] = useState(100);
  const [ammo, setAmmo] = useState(6);
  const [wave, setWave] = useState(1);
  const [zombies, setZombies] = useState([]);
  const [reloading, setReloading] = useState(false);

  const addScore = (points) => setScore(prev => prev + points);
  const damage = (amount) => setHealth(prev => Math.max(0, prev - amount));
  const useAmmo = () => setAmmo(prev => prev - 1);
  const reload = () => {
    setReloading(true);
    setTimeout(() => {
      setAmmo(6);
      setReloading(false);
    }, 2000);
  };

  const startGame = () => {
    setGameState('playing');
    setScore(0);
    setHealth(100);
    setAmmo(6);
    setWave(1);
    setZombies(generateZombies(wave));
  };

  const endGame = () => {
    setGameState('gameover');
  };

  const nextWave = () => {
    setWave(prev => prev + 1);
    setZombies(generateZombies(wave + 1));
  };

  const generateZombies = (currentWave) => {
    const count = 3 + currentWave * 2;
    return Array.from({ length: count }, (_, i) => ({
      id: `zombie-${Date.now()}-${i}`,
      position: [
        (Math.random() - 0.5) * 20,
        0,
        (Math.random() - 0.5) * 20
      ],
      health: 100,
      speed: 0.03 + Math.random() * 0.02,
      type: Math.random() > 0.7 ? 'fast' : 'normal'
    }));
  };

  const removeZombie = (id) => {
    setZombies(prev => {
      const newZombies = prev.filter(z => z.id !== id);
      if (newZombies.length === 0) {
        nextWave();
      }
      return newZombies;
    });
  };

  useEffect(() => {
    if (health <= 0 && gameState === 'playing') {
      endGame();
    }
  }, [health, gameState]);

  return (
    <GameContext.Provider value={{
      gameState, score, health, ammo, wave, zombies, reloading,
      addScore, damage, useAmmo, reload, startGame, endGame, removeZombie
    }}>
      {children}
    </GameContext.Provider>
  );
};

// Player character with chicken mask
const Player = ({ position = [0, 0, 0] }) => {
  const { camera } = useThree();
  const playerRef = useRef();
  const gunRef = useRef();
  const [playerPos, setPlayerPos] = useState(new THREE.Vector3(...position));
  const [rotation, setRotation] = useState(0);
  const { gameState, ammo, useAmmo, reload, reloading, damage } = React.useContext(GameContext);
  
  const [ref, api] = useBox(() => ({ 
    mass: 1, 
    position, 
    args: [0.5, 1.8, 0.5],
    type: 'Dynamic',
    fixedRotation: true,
    onCollide: (e) => {
      if (e.body.userData && e.body.userData.type === 'zombie') {
        damage(5);
      }
    }
  }));

  // Movement controls
  useEffect(() => {
    const keys = { 
      KeyW: false, 
      KeyS: false, 
      KeyA: false, 
      KeyD: false,
      Space: false,
      KeyR: false
    };
    
    const handleKeyDown = (e) => {
      if (keys[e.code] !== undefined) {
        keys[e.code] = true;
      }
      
      // Shooting
      if (e.code === 'MouseLeft' && ammo > 0 && !reloading && gameState === 'playing') {
        shoot();
      }
      
      // Reloading
      if (e.code === 'KeyR' && !reloading && ammo < 6 && gameState === 'playing') {
        reload();
      }
    };
    
    const handleKeyUp = (e) => {
      if (keys[e.code] !== undefined) {
        keys[e.code] = false;
      }
    };
    
    const handleMouseMove = (e) => {
      if (gameState === 'playing') {
        setRotation(-e.movementX * 0.01);
      }
    };
    
    const handleMouseDown = () => {
      if (ammo > 0 && !reloading && gameState === 'playing') {
        shoot();
      }
    };
    
    window.addEventListener('keydown', handleKeyDown);
    window.addEventListener('keyup', handleKeyUp);
    window.addEventListener('mousemove', handleMouseMove);
    window.addEventListener('mousedown', handleMouseDown);
    
    return () => {
      window.removeEventListener('keydown', handleKeyDown);
      window.removeEventListener('keyup', handleKeyUp);
      window.removeEventListener('mousemove', handleMouseMove);
      window.removeEventListener('mousedown', handleMouseDown);
    };
  }, [ammo, reloading, gameState]);
  
  const shoot = () => {
    useAmmo();
    // Create a raycaster for shooting
    const raycaster = new THREE.Raycaster();
    raycaster.setFromCamera(new THREE.Vector2(), camera);
    
    // TODO: Check for zombie hits and handle damage
  };
  
  useFrame((state, delta) => {
    if (gameState !== 'playing') return;
    
    // Update player position based on keyboard input
    const moveSpeed = 0.1;
    const direction = new THREE.Vector3();
    
    if (keys.KeyW) direction.z -= moveSpeed;
    if (keys.KeyS) direction.z += moveSpeed;
    if (keys.KeyA) direction.x -= moveSpeed;
    if (keys.KeyD) direction.x += moveSpeed;
    
    // Apply rotation to movement direction
    direction.applyAxisAngle(new THREE.Vector3(0, 1, 0), playerRef.current.rotation.y);
    
    // Update position
    api.velocity.set(direction.x, 0, direction.z);
    
    // Update rotation
    playerRef.current.rotation.y += rotation;
    setRotation(0);
    
    // Update camera position to follow player
    const newPos = new THREE.Vector3();
    ref.current.getWorldPosition(newPos);
    setPlayerPos(newPos);
    
    // Position camera behind player
    const cameraOffset = new THREE.Vector3(0, 2, 5);
    cameraOffset.applyAxisAngle(new THREE.Vector3(0, 1, 0), playerRef.current.rotation.y);
    camera.position.copy(newPos).add(cameraOffset);
    camera.lookAt(newPos);
  });

  return (
    <group ref={ref}>
      <group ref={playerRef}>
        {/* Player body */}
        <mesh position={[0, 0, 0]}>
          <capsuleGeometry args={[0.5, 1, 8, 16]} />
          <meshStandardMaterial color="#5E7B58" />
        </mesh>
        
        {/* Chicken mask */}
        <mesh position={[0, 1.1, 0]}>
          <sphereGeometry args={[0.5, 16, 16]} />
          <meshStandardMaterial color="#E3D8B4" />
          
          {/* Beak */}
          <mesh position={[0, -0.1, -0.5]}>
            <coneGeometry args={[0.2, 0.4, 16]} />
            <meshStandardMaterial color="#A93F55" />
          </mesh>
          
          {/* Eyes */}
          <mesh position={[0.2, 0.1, -0.4]}>
            <sphereGeometry args={[0.1, 16, 16]} />
            <meshStandardMaterial color="#1D1E2C" />
          </mesh>
          <mesh position={[-0.2, 0.1, -0.4]}>
            <sphereGeometry args={[0.1, 16, 16]} />
            <meshStandardMaterial color="#1D1E2C" />
          </mesh>
        </mesh>
        
        {/* Gun - 1851 Navy Colt */}
        <group ref={gunRef} position={[0.4, 0.2, -0.5]} rotation={[0, Math.PI / 2, 0]}>
          {/* Gun barrel */}
          <mesh position={[0, 0, 0]}>
            <cylinderGeometry args={[0.05, 0.05, 0.8, 8]} />
            <meshStandardMaterial color="#1D1E2C" />
          </mesh>
          
          {/* Gun body */}
          <mesh position={[0, -0.1, 0.2]}>
            <boxGeometry args={[0.15, 0.3, 0.4]} />
            <meshStandardMaterial color="#5E7B58" />
          </mesh>
          
          {/* Gun handle */}
          <mesh position={[0, -0.3, 0.3]} rotation={[0.3, 0, 0]}>
            <boxGeometry args={[0.1, 0.4, 0.2]} />
            <meshStandardMaterial color="#8B1E3F" />
          </mesh>
          
          {/* Cylinder */}
          <mesh position={[0, 0, 0.2]}>
            <cylinderGeometry args={[0.12, 0.12, 0.2, 8]} rotation={[Math.PI / 2, 0, 0]} />
            <meshStandardMaterial color="#1D1E2C" />
          </mesh>
        </group>
      </group>
    </group>
  );
};

// Zombie enemy
const Zombie = ({ zombie }) => {
  const zombieRef = useRef();
  const { removeZombie, addScore, playerPos } = React.useContext(GameContext);
  
  const [ref, api] = useBox(() => ({ 
    mass: 1, 
    position: zombie.position, 
    args: [0.6, 1.8, 0.6],
    userData: { type: 'zombie', id: zombie.id },
    onCollide: (e) => {
      // Handle collisions
    }
  }));
  
  useFrame(() => {
    if (!zombieRef.current || !playerPos) return;
    
    // Move zombie towards player
    const direction = new THREE.Vector3()
      .subVectors(playerPos, new THREE.Vector3(...zombie.position))
      .normalize()
      .multiplyScalar(zombie.speed);
    
    zombie.position[0] += direction.x;
    zombie.position[2] += direction.z;
    
    api.position.set(zombie.position[0], zombie.position[1], zombie.position[2]);
    
    // Rotate zombie to face player
    zombieRef.current.lookAt(playerPos);
  });
  
  const handleShot = () => {
    zombie.health -= 50;
    if (zombie.health <= 0) {
      removeZombie(zombie.id);
      addScore(100);
    }
  };

  return (
    <group ref={ref}>
      <group ref={zombieRef}>
        {/* Zombie body */}
        <mesh position={[0, 0, 0]}>
          <capsuleGeometry args={[0.6, 1, 8, 16]} />
          <meshStandardMaterial color={zombie.type === 'fast' ? "#A93F55" : "#8B1E3F"} />
        </mesh>
        
        {/* Zombie head */}
        <mesh position={[0, 1.1, 0]}>
          <sphereGeometry args={[0.5, 16, 16]} />
          <meshStandardMaterial color="#5E7B58" />
          
          {/* Eyes */}
          <mesh position={[0.2, 0.1, -0.4]}>
            <sphereGeometry args={[0.1, 16, 16]} />
            <meshStandardMaterial color="#E3D8B4" />
          </mesh>
          <mesh position={[-0.2, 0.1, -0.4]}>
            <sphereGeometry args={[0.1, 16, 16]} />
            <meshStandardMaterial color="#E3D8B4" />
          </mesh>
          
          {/* Mouth */}
          <mesh position={[0, -0.2, -0.4]}>
            <boxGeometry args={[0.3, 0.1, 0.1]} />
            <meshStandardMaterial color="#1D1E2C" />
          </mesh>
        </mesh>
        
        {/* Arms */}
        <mesh position={[0.8, 0.2, 0]} rotation={[0, 0, -Math.PI / 4]}>
          <capsuleGeometry args={[0.2, 1, 8, 16]} />
          <meshStandardMaterial color="#5E7B58" />
        </mesh>
        <mesh position={[-0.8, 0.2, 0]} rotation={[0, 0, Math.PI / 4]}>
          <capsuleGeometry args={[0.2, 1, 8, 16]} />
          <meshStandardMaterial color="#5E7B58" />
        </mesh>
      </group>
    </group>
  );
};

// Environment
const Ground = () => {
  const [ref] = usePlane(() => ({ 
    rotation: [-Math.PI / 2, 0, 0], 
    position: [0, -0.5, 0],
    args: [100, 100]
  }));

  return (
    <mesh ref={ref} receiveShadow>
      <planeGeometry args={[100, 100]} />
      <meshStandardMaterial color="#1D1E2C" />
    </mesh>
  );
};

// UI Components
const HUD = () => {
  const { health, ammo, score, wave, reloading } = React.useContext(GameContext);
  
  return (
    <Html fullscreen>
      <div style={{ 
        position: 'absolute', 
        bottom: '20px', 
        left: '20px', 
        color: 'white',
        fontFamily: 'monospace',
        fontSize: '18px',
        textShadow: '2px 2px 2px rgba(0,0,0,0.5)',
        display: 'flex',
        flexDirection: 'column',
        gap: '10px'
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
          <div style={{ 
            width: '150px', 
            height: '20px', 
            background: 'rgba(0,0,0,0.5)', 
            border: '2px solid #8B1E3F',
            borderRadius: '5px',
            overflow: 'hidden'
          }}>
            <div style={{ 
              width: `${health}%`, 
              height: '100%', 
              background: '#A93F55',
              transition: 'width 0.3s'
            }} />
          </div>
          <span>Health: {health}</span>
        </div>
        
        <div>
          <span>Ammo: {reloading ? 'Reloading...' : `${ammo}/6`}</span>
        </div>
        
        <div>
          <span>Score: {score}</span>
        </div>
        
        <div>
          <span>Wave: {wave}</span>
        </div>
      </div>
    </Html>
  );
};

const MenuScreen = () => {
  const { startGame, gameState, score } = React.useContext(GameContext);
  
  return (
    <Html fullscreen>
      <div style={{ 
        position: 'absolute', 
        top: 0, 
        left: 0, 
        width: '100%', 
        height: '100%', 
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center',
        background: 'rgba(0,0,0,0.7)',
        color: '#E3D8B4',
        fontFamily: 'monospace'
      }}>
        <h1 style={{ fontSize: '48px', marginBottom: '20px', color: '#A93F55' }}>
          CHICKEN MASK ZOMBIE HUNTER
        </h1>
        
        {gameState === 'gameover' && (
          <h2 style={{ fontSize: '32px', marginBottom: '40px' }}>
            Game Over! Score: {score}
          </h2>
        )}
        
        <div style={{ 
          padding: '15px 30px', 
          background: '#8B1E3F', 
          color: 'white',
          borderRadius: '5px',
          cursor: 'pointer',
          fontSize: '24px',
          transition: 'transform 0.2s',
          transform: 'scale(1)',
          ':hover': {
            transform: 'scale(1.05)'
          }
        }} onClick={startGame}>
          {gameState === 'gameover' ? 'Play Again' : 'Start Game'}
        </div>
        
        <div style={{ marginTop: '40px', maxWidth: '600px', textAlign: 'center' }}>
          <p style={{ marginBottom: '10px' }}>Controls:</p>
          <p>WASD - Move | MOUSE - Aim | LEFT CLICK - Shoot | R - Reload</p>
          <p style={{ marginTop: '20px' }}>
            Survive waves of zombies with your trusty 1851 Navy Colt revolver.
            Your mysterious chicken mask is your only protection!
          </p>
        </div>
      </div>
    </Html>
  );
};

// Main Game Component
const ZombieGame = () => {
  const { gameState, zombies } = React.useContext(GameContext);
  
  return (
    <Canvas shadows style={{ background: '#000' }}>
      <ambientLight intensity={0.3} />
      <directionalLight 
        position={[10, 10, 5]} 
        intensity={0.5} 
        castShadow 
        shadow-mapSize-width={1024} 
        shadow-mapSize-height={1024} 
      />
      <fog attach="fog" args={['#1D1E2C', 10, 50]} />
      <Sky sunPosition={[100, -10, 100]} />
      <Stars radius={100} depth={50} count={5000} factor={4} />
      
      <Physics>
        <Player position={[0, 0, 0]} />
        <Ground />
        
        {gameState === 'playing' && zombies.map(zombie => (
          <Zombie key={zombie.id} zombie={zombie} />
        ))}
      </Physics>
      
      {gameState === 'playing' && <HUD />}
      {(gameState === 'menu' || gameState === 'gameover') && <MenuScreen />}
    </Canvas>
  );
};

// Main App
export default function App() {
  return (
    <div style={{ width: '100vw', height: '100vh', overflow: 'hidden' }}>
      <GameProvider>
        <ZombieGame />
      </GameProvider>
    </div>
  );
}