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 targetX = target.x + 25; // Center of target
    const targetY = target.y + 25; // Center of target
    const distance = Math.sqrt(Math.pow(clickX - targetX, 2) + Math.pow(clickY - targetY, 2));

    if (distance < 25) { // If click is within the target
      const timeTaken = (Date.now() - startTime) / 1000; // Time in seconds
      const pointsEarned = Math.max(10 - Math.floor(timeTaken), 1); // 10 points max, 1 point min
      setScore(prevScore => prevScore + pointsEarned);
      setTries(prevTries => prevTries + 1);

      if (tries === 4) { // Game over after 5 tries
        setGameOver(true);
      } else {
        generateTarget();
      }
    }
  };

  const getGrade = () => {
    const avgScore = score / 5;
    if (avgScore >= 9) return 'A';
    if (avgScore >= 7) return 'B';
    if (avgScore >= 5) return 'C';
    if (avgScore >= 3) return 'D';
    return 'F';
  };

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

  return (
    <div onClick={handleClick} style={{ width: '100vw', height: '100vh', cursor: 'crosshair', userSelect: 'none' }}>
      <div style={{ position: 'absolute', top: 10, left: 10, fontSize: '20px' }}>
        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',
        }}>
          <h2>Game Over!</h2>
          <p>Final Score: {score}</p>
          <p>Grade: {getGrade()}</p>
          <button onClick={resetGame} style={{ fontSize: '20px', padding: '10px 20px' }}>Play Again</button>
        </div>
      )}
    </div>
  );
};

export default MouseHunterGame;