import { useState, useEffect, useRef, Suspense } from 'react';
import { Canvas, useFrame, useLoader } from '@react-three/fiber';
import { OrbitControls, Stars, Text, Environment } from '@react-three/drei';
import { TextureLoader } from 'three';
import { Physics, useBox, usePlane } from '@react-three/cannon';

function Ground() {
  const [ref] = usePlane(() => ({
    rotation: [-Math.PI / 2, 0, 0],
    position: [0, -2, 0],
    material: { friction: 1 }
  }));

  return (
    <mesh receiveShadow ref={ref}>
      <planeGeometry args={[1000, 1000]} />
      <meshStandardMaterial 
        color="#303030"
        roughness={0.8}
        metalness={0.2}
      />
    </mesh>
  );
}

function Rocket({ position, rotation, thrust }) {
  const rocketRef = useRef();
  
  // Rocket body
  return (
    <group ref={rocketRef} position={position} rotation={rotation}>
      {/* Main body */}
      <mesh castShadow>
        <cylinderGeometry args={[0.5, 0.5, 4, 32]} />
        <meshStandardMaterial color="#silver" metalness={0.8} roughness={0.2} />
      </mesh>
      
      {/* Nose cone */}
      <mesh castShadow position={[0, 2.5, 0]}>
        <coneGeometry args={[0.5, 1, 32]} />
        <meshStandardMaterial color="#silver" metalness={0.8} roughness={0.2} />
      </mesh>
      
      {/* Fins */}
      {[0, 1, 2, 3].map((i) => (
        <mesh
          key={i}
          castShadow
          position={[0, -1.5, 0]}
          rotation={[0, (i * Math.PI) / 2, 0]}
        >
          <boxGeometry args={[0.1, 1, 1]} />
          <meshStandardMaterial color="#silver" metalness={0.8} roughness={0.3} />
        </mesh>
      ))}
      
      {/* Thrust effect */}
      {thrust > 0 && (
        <mesh position={[0, -2.5, 0]}>
          <coneGeometry args={[0.3, 2, 32]} />
          <meshStandardMaterial
            color="#ff4400"
            emissive="#ff4400"
            emissiveIntensity={2}
            transparent
            opacity={0.7}
          />
        </mesh>
      )}
    </group>
  );
}

function GameUI({ altitude, velocity, fuel, gameState, score, onReset, onStart }) {
  return (
    <div className="absolute top-0 left-0 p-4 text-white">
      <div className="bg-black bg-opacity-50 p-4 rounded-lg">
        <h2 className="text-2xl font-bold mb-4">Flight Data</h2>
        <p>Altitude: {Math.round(altitude)}m</p>
        <p>Velocity: {Math.round(velocity)}m/s</p>
        <p>Fuel: {Math.round(fuel)}%</p>
        <p>Score: {score}</p>
        
        {gameState === 'ready' && (
          <button
            onClick={onStart}
            className="mt-4 bg-green-500 hover:bg-green-600 px-4 py-2 rounded"
          >
            Launch
          </button>
        )}
        
        {(gameState === 'crashed' || gameState === 'landed') && (
          <div>
            <p className="mt-4 text-xl">
              {gameState === 'crashed' ? '💥 Crashed!' : '🎉 Landed!'}
            </p>
            <button
              onClick={onReset}
              className="mt-2 bg-blue-500 hover:bg-blue-600 px-4 py-2 rounded"
            >
              Try Again
            </button>
          </div>
        )}
      </div>
    </div>
  );
}

function Scene({ gameState, setGameState, setScore }) {
  const [rocketPosition, setRocketPosition] = useState([0, 1, 0]);
  const [rocketRotation, setRocketRotation] = useState([0, 0, 0]);
  const [velocity, setVelocity] = useState([0, 0, 0]);
  const [fuel, setFuel] = useState(100);
  const [thrust, setThrust] = useState(0);
  
  const gravity = -9.81;
  const thrustPower = 15;
  const fuelConsumption = 0.5;
  
  useFrame((state, delta) => {
    if (gameState !== 'flying') return;
    
    // Update physics
    const newVelocity = [...velocity];
    newVelocity[1] += (gravity + thrust) * delta;
    
    const newPosition = [
      rocketPosition[0] + newVelocity[0] * delta,
      rocketPosition[1] + newVelocity[1] * delta,
      rocketPosition[2] + newVelocity[2] * delta,
    ];
    
    // Ground collision
    if (newPosition[1] <= 0) {
      if (Math.abs(newVelocity[1]) > 10) {
        setGameState('crashed');
      } else {
        setGameState('landed');
        setScore(prev => prev + Math.round(fuel));
      }
      newPosition[1] = 0;
      setVelocity([0, 0, 0]);
    } else {
      setVelocity(newVelocity);
    }
    
    setRocketPosition(newPosition);
    
    // Update fuel
    if (thrust > 0) {
      setFuel(prev => {
        const newFuel = prev - fuelConsumption;
        if (newFuel <= 0) {
          setThrust(0);
          return 0;
        }
        return newFuel;
      });
    }
  });
  
  useEffect(() => {
    const handleKeyDown = (e) => {
      if (gameState !== 'flying') return;
      
      if (e.key === 'ArrowUp' && fuel > 0) {
        setThrust(thrustPower);
      }
    };
    
    const handleKeyUp = (e) => {
      if (e.key === 'ArrowUp') {
        setThrust(0);
      }
    };
    
    window.addEventListener('keydown', handleKeyDown);
    window.addEventListener('keyup', handleKeyUp);
    return () => {
      window.removeEventListener('keydown', handleKeyDown);
      window.removeEventListener('keyup', handleKeyUp);
    };
  }, [gameState, fuel]);
  
  return (
    <>
      <ambientLight intensity={0.5} />
      <pointLight position={[10, 10, 10]} intensity={1} castShadow />
      <Stars radius={100} depth={50} count={5000} factor={4} />
      
      <Physics>
        <Ground />
        <Rocket
          position={rocketPosition}
          rotation={rocketRotation}
          thrust={thrust}
        />
      </Physics>
    </>
  );
}

export default function RocketSimulator() {
  const [gameState, setGameState] = useState('ready');
  const [score, setScore] = useState(0);
  
  const handleStart = () => {
    setGameState('flying');
  };
  
  const handleReset = () => {
    setGameState('ready');
  };
  
  return (
    <div className="w-full h-screen relative">
      <Canvas shadows camera={{ position: [0, 5, 15], fov: 60 }}>
        <Suspense fallback={null}>
          <Scene
            gameState={gameState}
            setGameState={setGameState}
            setScore={setScore}
          />
          <OrbitControls enablePan={false} />
          <Environment preset="sunset" />
        </Suspense>
      </Canvas>
      
      <GameUI
        altitude={0}
        velocity={0}
        fuel={100}
        gameState={gameState}
        score={score}
        onReset={handleReset}
        onStart={handleStart}
      />
    </div>
  );
}