import React, { useEffect, useState } from "react";

export default function HiraganaSearchTrumpApp() {
  const groups = {
    あ: ["あ", "い", "う", "え", "お"],
    か: ["か", "き", "く", "け", "こ"],
    さ: ["さ", "し", "す", "せ", "そ"],
    た: ["た", "ち", "つ", "て", "と"],
    な: ["な", "に", "ぬ", "ね", "の"],
    は: ["は", "ひ", "ふ", "へ", "ほ"],
    ま: ["ま", "み", "む", "め", "も"],
    や: ["や", "ゆ", "よ"],
    ら: ["ら", "り", "る", "れ", "ろ"],
    わ: ["わ", "を", "ん"],
  };

  const allCards = Object.values(groups).flat();

  const [cards, setCards] = useState(allCards);
  const [score, setScore] = useState(0);
  const [message, setMessage] = useState("スタートを押してね！");
  const [target, setTarget] = useState("");
  const [time, setTime] = useState(30);
  const [playing, setPlaying] = useState(false);

  useEffect(() => {
    let timer;

    if (playing && time > 0) {
      timer = setInterval(() => {
        setTime((prev) => prev - 1);
      }, 1000);
    }

    if (time === 0) {
      setPlaying(false);
      setMessage("ゲーム終了！");
    }

    return () => clearInterval(timer);
  }, [playing, time]);

  const shuffleCards = () => {
    const shuffled = [...allCards].sort(() => Math.random() - 0.5);
    setCards(shuffled);
  };

  const startGame = () => {
    shuffleCards();
    setScore(0);
    setTime(30);
    setPlaying(true);

    const keys = Object.keys(groups);
    const randomTarget = keys[Math.floor(Math.random() * keys.length)];

    setTarget(randomTarget);
    setMessage(`「${randomTarget}」のなかまをさがそう！`);
  };

  const nextTarget = () => {
    const keys = Object.keys(groups);
    const randomTarget = keys[Math.floor(Math.random() * keys.length)];

    setTarget(randomTarget);
    setMessage(`「${randomTarget}」のなかまをさがそう！`);
  };

  const handleCardClick = (card) => {
    if (!playing) return;

    if (groups[target].includes(card)) {
      setScore((prev) => prev + 1);
      setMessage("せいかい！✨");

      setCards((prev) => prev.filter((c, index) => {
        const firstIndex = prev.indexOf(card);
        return index !== firstIndex;
      }));

      setTimeout(() => {
        nextTarget();
      }, 700);
    } else {
      setMessage("ちがうよ！もういちど！");
    }
  };

  return (
    <div className="min-h-screen bg-yellow-50 p-6 flex flex-col items-center">
      <h1 className="text-4xl font-bold mb-4 text-orange-500">
        ひらがなさがしトランプ
      </h1>

      <div className="bg-white rounded-3xl shadow-lg p-6 w-full max-w-2xl text-center mb-6">
        <p className="text-2xl font-bold mb-2">おだい</p>
        <p className="text-5xl font-bold text-pink-500 mb-4">{target || "？"}</p>

        <div className="flex justify-center gap-6 text-xl font-semibold mb-4">
          <p>スコア：{score}</p>
          <p>のこり：{time}秒</p>
        </div>

        <p className="text-lg mb-4">{message}</p>

        <button
          onClick={startGame}
          className="bg-orange-400 hover:bg-orange-500 text-white px-6 py-3 rounded-2xl text-lg font-bold transition"
        >
          ゲームスタート
        </button>
      </div>

      <div className="grid grid-cols-5 gap-3 max-w-3xl">
        {cards.map((card, index) => (
          <button
            key={index}
            onClick={() => handleCardClick(card)}
            className="w-16 h-16 bg-white rounded-2xl shadow-md text-3xl font-bold hover:scale-105 transition"
          >
            {card}
          </button>
        ))}
      </div>

      <div className="mt-8 bg-white rounded-2xl p-4 shadow-md max-w-xl">
        <h2 className="text-2xl font-bold mb-2">ルール</h2>
        <ul className="list-disc pl-5 text-lg space-y-1">
          <li>おだいの行と同じひらがなを探そう！</li>
          <li>正解するとポイントゲット！</li>
          <li>30秒で何枚取れるかな？</li>
          <li>小学校1年生向けのゲームです。</li>
        </ul>
      </div>
    </div>
  );
}