import { useState, useEffect, useCallback } from 'react';
import { ArrowUp, ArrowDown, ArrowLeft, ArrowRight, Repeat } from 'lucide-react';

export default function Game() {
  const [playerPos, setPlayerPos] = useState({ x: 50, y: 300 });
  const [velocity, setVelocity] = useState({ x: 0, y: 0 });
  const [isJumping, setIsJumping] = useState(false);
  const [deaths, setDeaths] = useState(0);
  const [gameStarted, setGameStarted] = useState(false);

  // Platform positions - extremely challenging layout
  const platforms = [
    { x: 50, y: 350, width: 100, height: 20 },
    { x: 200, y: 280, width: 60, height: 20 },
    { x: 320, y: 200, width: 40, height: 20 },
    { x: 420, y: 150, width: 30, height: 20 },
    { x: 520, y: 100, width: 20, height: 20 },
  ];

  // Deadly spikes
  const spikes = [
    { x: 150, y: 340, width: 40, height: 30 },
    { x: 260, y: 270, width: 40, height: 30 },
    { x: 370, y: 190, width: 40, height: 30 },
    { x: 470, y: 140, width: 40, height: 30 },
  ];

  const checkCollision = useCallback((pos, obj) => {
    return pos.x < obj.x + obj.width &&
           pos.x + 30 > obj.x &&
           pos.y < obj.y + obj.height &&
           pos.y + 30 > obj.y;
  }, []);

  const gameLoop = useCallback(() => {
    if (!gameStarted) return;

    setPlayerPos(prev => {
      const newPos = {
        x: prev.x + velocity.x,
        y: prev.y + velocity.y
      };

      // Check platform collisions
      let onPlatform = false;
      platforms.forEach(platform => {
        if (checkCollision(newPos, platform)) {
          if (velocity.y > 0) {
            newPos.y = platform.y - 30;
            setVelocity(v => ({ ...v, y: 0 }));
            setIsJumping(false);
            onPlatform = true;
          }
        }
      });

      // Check spike collisions
      spikes.forEach(spike => {
        if (checkCollision(newPos, spike)) {
          setDeaths(d => d + 1);
          newPos.x = 50;
          newPos.y = 300;
          setVelocity({ x: 0, y: 0 });
        }
      });

      // Apply gravity if not on platform
      if (!onPlatform) {
        setVelocity(v => ({ ...v, y: Math.min(v.y + 0.5, 10) }));
      }

      // Screen boundaries
      newPos.x = Math.max(0, Math.min(newPos.x, 570));
      newPos.y = Math.max(0, Math.min(newPos.y, 370));

      return newPos;
    });
  }, [velocity, gameStarted, checkCollision]);

  useEffect(() => {
    const interval = setInterval(gameLoop, 16);
    return () => clearInterval(interval);
  }, [gameLoop]);

  const handleKeyDown = useCallback((e) => {
    if (!gameStarted) return;
    
    switch(e.key) {
      case 'ArrowLeft':
        setVelocity(v => ({ ...v, x: -5 }));
        break;
      case 'ArrowRight':
        setVelocity(v => ({ ...v, x: 5 }));
        break;
      case 'ArrowUp':
      case ' ':
        if (!isJumping) {
          setVelocity(v => ({ ...v, y: -10 }));
          setIsJumping(true);
        }
        break;
      default:
        break;
    }
  }, [gameStarted, isJumping]);

  const handleKeyUp = useCallback((e) => {
    if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {
      setVelocity(v => ({ ...v, x: 0 }));
    }
  }, []);

  useEffect(() => {
    window.addEventListener('keydown', handleKeyDown);
    window.addEventListener('keyup', handleKeyUp);
    return () => {
      window.removeEventListener('keydown', handleKeyDown);
      window.removeEventListener('keyup', handleKeyUp);
    };
  }, [handleKeyDown, handleKeyUp]);

  return (
    <div className="flex flex-col items-center justify-center min-h-screen bg-gradient-to-b from-green-900 to-green-700 p-8">
      {!gameStarted ? (
        <div className="text-center">
          <h1 className="text-4xl font-bold text-green-100 mb-8">IMPOSSIBLE GAME</h1>
          <button
            onClick={() => setGameStarted(true)}
            className="px-8 py-4 bg-green-500 hover:bg-green-600 text-white rounded-lg text-xl font-bold transition-colors"
          >
            Start Game
          </button>
        </div>
      ) : (
        <>
          <div className="relative w-[600px] h-[400px] bg-green-800 rounded-lg overflow-hidden border-4 border-green-600">
            {/* Player */}
            <div
              className="absolute w-[30px] h-[30px] transition-transform"
              style={{
                transform: `translate(${playerPos.x}px, ${playerPos.y}px)`,
              }}
            >
              <img
                src="https://placeholder.com/30x30"
                alt="Anime Character"
                className="w-full h-full"
              />
            </div>

            {/* Platforms */}
            {platforms.map((platform, i) => (
              <div
                key={i}
                className="absolute bg-green-400"
                style={{
                  left: platform.x,
                  top: platform.y,
                  width: platform.width,
                  height: platform.height,
                }}
              />
            ))}

            {/* Spikes */}
            {spikes.map((spike, i) => (
              <div
                key={i}
                className="absolute bg-red-500"
                style={{
                  left: spike.x,
                  top: spike.y,
                  width: spike.width,
                  height: spike.height,
                  clipPath: 'polygon(50% 0%, 0% 100%, 100% 100%)',
                }}
              />
            ))}
          </div>

          <div className="mt-4 text-white text-xl">
            Deaths: {deaths}
            <button
              onClick={() => {
                setPlayerPos({ x: 50, y: 300 });
                setVelocity({ x: 0, y: 0 });
              }}
              className="ml-4 p-2 bg-green-500 hover:bg-green-600 rounded"
            >
              <Repeat className="w-6 h-6" />
            </button>
          </div>

          <div className="mt-4 flex gap-4">
            <div className="flex flex-col items-center text-white">
              <ArrowLeft className="w-8 h-8" />
              <span>Move Left</span>
            </div>
            <div className="flex flex-col items-center text-white">
              <ArrowRight className="w-8 h-8" />
              <span>Move Right</span>
            </div>
            <div className="flex flex-col items-center text-white">
              <ArrowUp className="w-8 h-8" />
              <span>Jump</span>
            </div>
          </div>
        </>
      )}
    </div>
  );
}