import React, { useState, useEffect, useCallback } from 'react';

const MouseHunterGame = () => {
  const [target, setTarget] = useState({ x: 0, y: 0 });
  const [score, setScore] = useState(0);
  const [tries, setTries] = useState(0);
  const [startTime, setStartTime] = useState(null);
  const [gameOver, setGameOver] = useState(false);

  const generateTarget = useCallback(() => {
    const x = Math.floor(Math.random() * (window.innerWidth - 50));
    const y = Math.floor(Math.random() * (window.innerHeight - 50));
    setTarget({ x, y });setStartTime(Date.now());
  }, []);

  useEffect(() => {
    generateTarget();
  }, [generateTarget]);

  const handleClick = (e) => {
    if (gameOver) return;

    const clickX = e.clientX;
    const clickY = e.clientY;
    const distance = Math.sqrt(
      Math.pow(clickX - target.x, 2) + Math.pow(clickY - target.y, 2)
    );

    if (distance < 25) {
      const timeTaken = (Date.now() - startTime) / 1000;
      const pointsEarned = Math.max(10 - Math.floor(timeTaken), 1);
      setScore(prevScore => prevScore + pointsEarned);
      setTries(prevTries => prevTries + 1);

      if (tries === 4) {
        setGameOver(true);
      } else {
        generateTarget();
      }
    }
  };

  const getGrade = () => {
    if (score >= 45) return 'A';
    if (score >= 35) return 'B';
    if (score >= 25) return 'C';
    if (score >= 15) return 'D';
    return 'F';
  };

  const resetGame = () => {
    setScore(0);
    setTries(0);
    setGameOver(false);
    generateTarget();
  };

  return (
    <div 
      onClick={handleClick} 
      style={{
        width: '100vw', 
        height: '100vh', 
        position: 'relative', 
        backgroundColor: '#f0f0f0',
        cursor: 'crosshair'
      }}
    >
      <div style={{
        position: 'absolute',
        top: 10,
        left: 10,
        fontSize: '18px',
        fontFamily: 'Arial, sans-serif'
      }}>
        Score: {score} | Tries: {tries}/5
      </div>
      {!gameOver && (
        <div 
          style={{
            position: 'absolute',
            left: target.x,
            top: target.y,
            width: '50px',
            height: '50px',
            borderRadius: '50%',
            backgroundColor: 'red'
          }}
        />
      )}{gameOver && (
        <div style={{
          position: 'absolute',
          top: '50%',
          left: '50%',
          transform: 'translate(-50%, -50%)',
          textAlign: 'center',
          fontSize: '24px',
          fontFamily: 'Arial, sans-serif'
        }}>
          <h2>Game Over!</h2>
          <p>Final Score: {score}</p>
          <p>Grade: {getGrade()}</p>
          <button 
            onClick={resetGame}
            style={{
              fontSize: '18px',
              padding: '10px 20px',
              cursor: 'pointer'
            }}
          >
            Play Again
          </button>
        </div>
      )}
    </div>
  );
};

export default MouseHunterGame;