import { useState, useEffect } from "react";

export default function Home() {
  const [score, setScore] = useState(0);
  const [timeLeft, setTimeLeft] = useState(30);
  const [target, setTarget] = useState({ top: "50%", left: "50%" });
  const [gameOver, setGameOver] = useState(false);

  // Countdown timer
  useEffect(() => {
    if (timeLeft <= 0) {
      setGameOver(true);
      return;
    }
    const timer = setTimeout(() => setTimeLeft(timeLeft - 1), 1000);
    return () => clearTimeout(timer);
  }, [timeLeft]);

  // Move target when clicked
  const handleClick = () => {
    if (gameOver) return;
    setScore(score + 1);
    const top = Math.floor(Math.random() * 90) + "%";
    const left = Math.floor(Math.random() * 90) + "%";
    setTarget({ top, left });
  };

  return (
    <div className="flex flex-col items-center justify-center h-screen bg-black text-white">
      <h1 className="text-3xl font-bold mb-4">🎯 Click the Target!</h1>
      <p className="mb-2">Time Left: {timeLeft}s</p>
      <p className="mb-4">Score: {score}</p>

      {!gameOver ? (
        <div
          className="absolute w-12 h-12 bg-red-500 rounded-full cursor-pointer transition-all duration-300"
          style={{ top: target.top, left: target.left, position: "absolute" }}
          onClick={handleClick}
        ></div>
      ) : (
        <div className="text-xl font-semibold">Game Over! Final Score: {score}</div>
      )}
    </div>
  );
}