import React, { useEffect, useState } from "react";
import { motion } from "framer-motion";

const characters = [
  { name: "Mario", src: "/images/mario.png" },
  { name: "Luigi", src: "/images/luigi.png" },
  { name: "Wario", src: "/images/wario.png" },
  { name: "Yoshi", src: "/images/yoshi.png" }
];

const getRandomCharacter = () => {
  return characters[Math.floor(Math.random() * characters.length)];
};

export default function WantedGame() {
  const [target, setTarget] = useState(null);
  const [grid, setGrid] = useState([]);
  const [message, setMessage] = useState("");

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

  const startNewRound = () => {
    const newTarget = getRandomCharacter();
    setTarget(newTarget);
    const gridItems = Array.from({ length: 9 }).map(() => getRandomCharacter());
    const randomIndex = Math.floor(Math.random() * 9);
    gridItems[randomIndex] = newTarget;
    setGrid(gridItems);
    setMessage("");
  };

  const handleClick = (char) => {
    if (char.name === target.name) {
      setMessage("✅ Correct!");
    } else {
      setMessage("❌ Wrong one!");
    }
    setTimeout(startNewRound, 1000);
  };

  return (
    <div style={{ padding: "20px", maxWidth: "600px", margin: "0 auto", textAlign: "center" }}>
      <h1 style={{ fontSize: "2rem", marginBottom: "1rem" }}>WANTED!</h1>
      {target && (
        <div style={{ marginBottom: "1rem" }}>
          <p style={{ fontSize: "1.1rem" }}>Find this character:</p>
          <img
            src={target.src}
            alt={target.name}
            style={{ width: "100px", height: "100px", borderRadius: "50%", border: "4px solid red" }}
          />
        </div>
      )}

      <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: "10px", marginBottom: "1rem" }}>
        {grid.map((char, idx) => (
          <motion.div
            key={idx}
            whileTap={{ scale: 0.9 }}
            onClick={() => handleClick(char)}
            style={{ cursor: "pointer" }}
          >
            <div style={{ borderRadius: "12px", boxShadow: "0 2px 8px rgba(0,0,0,0.2)", padding: "10px", background: "#fff" }}>
              <img
                src={char.src}
                alt={char.name}
                style={{ width: "80px", height: "80px" }}
              />
            </div>
          </motion.div>
        ))}
      </div>

      {message && <p style={{ fontSize: "1.2rem", fontWeight: "bold" }}>{message}</p>}

      <button
        onClick={startNewRound}
        style={{ marginTop: "1rem", padding: "10px 20px", fontSize: "1rem", borderRadius: "8px", background: "#007bff", color: "white", border: "none", cursor: "pointer" }}
      >
        🔁 New Round
      </button>
    </div>
  );
}