import React from "react";

export default function KanjiMonsterBattleGame() {
  const stages = {
    1: [
      { kanji: "森林", answer: "しんりん" },
      { kanji: "海岸", answer: "かいがん" },
      { kanji: "勇気", answer: "ゆうき" },
    ],
    2: [
      { kanji: "努力", answer: "どりょく" },
      { kanji: "観察", answer: "かんさつ" },
      { kanji: "環境", answer: "かんきょう" },
    ],
    3: [
      { kanji: "複雑", answer: "ふくざつ" },
      { kanji: "演説", answer: "えんぜつ" },
      { kanji: "責任", answer: "せきにん" },
    ],
  };

  const [level, setLevel] = React.useState(1);
  const [monsterHp, setMonsterHp] = React.useState(100);
  const [playerHp, setPlayerHp] = React.useState(100);
  const [exp, setExp] = React.useState(0);
  const [index, setIndex] = React.useState(0);
  const [input, setInput] = React.useState("");
  const [message, setMessage] = React.useState("漢字を読んでモンスターを倒そう！");
  const [gameOver, setGameOver] = React.useState(false);
  const [clear, setClear] = React.useState(false);

  const currentQuestion = stages[level][index];

  const attackMonster = () => {
    if (gameOver || clear) return;

    if (input === currentQuestion.answer) {
      const newMonsterHp = monsterHp - 35;
      setMonsterHp(newMonsterHp);
      setMessage("こうげき成功！モンスターにダメージ！");

      if (newMonsterHp <= 0) {
        const gainedExp = exp + 50;
        setExp(gainedExp);

        if (index + 1 < stages[level].length) {
          setIndex(index + 1);
          setMonsterHp(100);
          setMessage("モンスターを倒した！次の敵が現れた！");
        } else {
          setClear(true);
          setMessage("ステージクリア！EXP をゲット！");
        }
      }
    } else {
      const newPlayerHp = playerHp - 25;
      setPlayerHp(newPlayerHp);
      setMessage("まちがい！ダメージを受けた！");

      if (newPlayerHp <= 0) {
        setGameOver(true);
        setMessage("ゲームオーバー…");
      }
    }

    setInput("");
  };

  const resetGame = () => {
    setMonsterHp(100);
    setPlayerHp(100);
    setExp(0);
    setIndex(0);
    setInput("");
    setGameOver(false);
    setClear(false);
    setMessage("漢字を読んでモンスターを倒そう！");
  };

  return (
    <div className="min-h-screen bg-gradient-to-b from-indigo-200 to-purple-200 flex items-center justify-center p-6">
      <div className="bg-white rounded-3xl shadow-2xl p-8 max-w-xl w-full text-center space-y-6">
        <h1 className="text-4xl font-bold text-purple-700">
          漢字モンスターバトル
        </h1>

        <div className="flex justify-center gap-4">
          <div className="bg-red-100 rounded-2xl p-4 w-40">
            <h2 className="font-bold">プレイヤー HP</h2>
            <p className="text-2xl">{playerHp}</p>
          </div>

          <div className="bg-green-100 rounded-2xl p-4 w-40">
            <h2 className="font-bold">モンスター HP</h2>
            <p className="text-2xl">{monsterHp}</p>
          </div>
        </div>

        <div className="bg-yellow-100 rounded-2xl p-4">
          <p className="font-bold">EXP</p>
          <p className="text-2xl">{exp}</p>
        </div>

        <div className="space-y-3">
          <label className="font-bold">レベル選択</label>
          <select
            value={level}
            onChange={(e) => {
              setLevel(Number(e.target.value));
              resetGame();
            }}
            className="border rounded-xl px-4 py-2"
          >
            <option value={1}>レベル 1</option>
            <option value={2}>レベル 2</option>
            <option value={3}>レベル 3</option>
          </select>
        </div>

        {!gameOver && !clear && (
          <div className="bg-blue-100 rounded-2xl p-6 space-y-4">
            <p className="text-lg">この漢字の読み方は？</p>
            <p className="text-5xl font-bold text-blue-700">
              {currentQuestion.kanji}
            </p>

            <input
              type="text"
              value={input}
              onChange={(e) => setInput(e.target.value)}
              placeholder="ひらがなで入力"
              className="w-full border-2 rounded-xl px-4 py-3 text-center text-xl"
            />

            <button
              onClick={attackMonster}
              className="bg-purple-600 hover:bg-purple-700 text-white font-bold px-6 py-3 rounded-2xl shadow-lg"
            >
              こうげき！
            </button>
          </div>
        )}

        {(gameOver || clear) && (
          <div className="space-y-4">
            <p className="text-3xl font-bold">
              {gameOver ? "ゲームオーバー" : "ステージクリア！"}
            </p>

            <button
              onClick={resetGame}
              className="bg-green-600 hover:bg-green-700 text-white font-bold px-6 py-3 rounded-2xl"
            >
              もう一度遊ぶ
            </button>
          </div>
        )}

        <div className="bg-gray-100 rounded-2xl p-4 text-lg font-semibold">
          {message}
        </div>
      </div>
    </div>
  );
}