export default function KanjiLearningGame() {
  const levels = {
    1: [
      { kanji: '山', yomikata: 'やま', enemy: 'スライム' },
      { kanji: '川', yomikata: 'かわ', enemy: 'コウモリ' },
      { kanji: '空', yomikata: 'そら', enemy: 'ミニドラゴン' }
    ],
    2: [
      { kanji: '海', yomikata: 'うみ', enemy: '海のまおう' },
      { kanji: '星', yomikata: 'ほし', enemy: 'スターゴーレム' },
      { kanji: '雪', yomikata: 'ゆき', enemy: 'アイスモンスター' }
    ],
    3: [
      { kanji: '議', yomikata: 'ぎ', enemy: 'かんじキング' },
      { kanji: '戦', yomikata: 'せん', enemy: 'ダークナイト' },
      { kanji: '勇', yomikata: 'ゆう', enemy: 'ラスボスドラゴン' }
    ]
  };

  const [screen, setScreen] = React.useState('title');
  const [level, setLevel] = React.useState(1);
  const [questionIndex, setQuestionIndex] = React.useState(0);
  const [answer, setAnswer] = React.useState('');
  const [message, setMessage] = React.useState('');
  const [hp, setHp] = React.useState(5);
  const [exp, setExp] = React.useState(0);
  const [cleared, setCleared] = React.useState([]);

  const currentQuestion = levels[level][questionIndex];

  const startGame = (selectedLevel) => {
    setLevel(selectedLevel);
    setQuestionIndex(0);
    setAnswer('');
    setMessage('');
    setHp(5);
    setScreen('game');
  };

  const checkAnswer = () => {
    if (answer.trim() === currentQuestion.yomikata) {
      setMessage('⚔️ こうげき成功！');
      setExp(exp + 10);

      if (questionIndex + 1 < levels[level].length) {
        setTimeout(() => {
          setQuestionIndex(questionIndex + 1);
          setAnswer('');
          setMessage('');
        }, 1200);
      } else {
        if (!cleared.includes(level)) {
          setCleared([...cleared, level]);
        }
        setTimeout(() => {
          setScreen('clear');
        }, 1200);
      }
    } else {
      setHp(hp - 1);
      setMessage('💥 ダメージをうけた！');

      if (hp - 1 <= 0) {
        setTimeout(() => {
          setScreen('gameover');
        }, 1200);
      }
    }
  };

  if (screen === 'title') {
    return (
      <div className="min-h-screen bg-gradient-to-b from-purple-200 to-blue-200 flex items-center justify-center p-6">
        <div className="bg-white p-8 rounded-3xl shadow-2xl text-center max-w-xl w-full">
          <h1 className="text-5xl font-bold text-purple-700 mb-4">
            🏰 漢字クエスト
          </h1>
          <p className="text-lg mb-6">
            漢字を読んでモンスターをたおそう！
          </p>

          <div className="space-y-4">
            <button
              onClick={() => startGame(1)}
              className="w-full bg-green-500 hover:bg-green-600 text-white text-2xl py-4 rounded-2xl font-bold"
            >
              🌱 レベル1
            </button>

            <button
              onClick={() => startGame(2)}
              className="w-full bg-blue-500 hover:bg-blue-600 text-white text-2xl py-4 rounded-2xl font-bold"
            >
              ❄️ レベル2
            </button>

            <button
              onClick={() => startGame(3)}
              className="w-full bg-red-500 hover:bg-red-600 text-white text-2xl py-4 rounded-2xl font-bold"
            >
              🔥 レベル3
            </button>
          </div>

          <div className="mt-6 text-left bg-yellow-50 p-4 rounded-2xl">
            <h2 className="font-bold mb-2">🏆 クリアしたレベル</h2>
            {cleared.length === 0 ? (
              <p>まだありません</p>
            ) : (
              <ul className="list-disc ml-6">
                {cleared.map((lv) => (
                  <li key={lv}>レベル {lv}</li>
                ))}
              </ul>
            )}
          </div>
        </div>
      </div>
    );
  }

  if (screen === 'clear') {
    return (
      <div className="min-h-screen bg-yellow-100 flex items-center justify-center p-6">
        <div className="bg-white rounded-3xl shadow-2xl p-8 text-center max-w-lg w-full">
          <h1 className="text-5xl font-bold text-green-600 mb-4">
            🎉 レベルクリア！
          </h1>
          <p className="text-2xl mb-4">EXP +30！</p>
          <p className="text-xl mb-6">現在のEXP：{exp}</p>

          <button
            onClick={() => setScreen('title')}
            className="bg-purple-500 hover:bg-purple-600 text-white px-8 py-4 rounded-2xl text-2xl font-bold"
          >
            🏠 タイトルへ
          </button>
        </div>
      </div>
    );
  }

  if (screen === 'gameover') {
    return (
      <div className="min-h-screen bg-gray-800 flex items-center justify-center p-6">
        <div className="bg-white rounded-3xl shadow-2xl p-8 text-center max-w-lg w-full">
          <h1 className="text-5xl font-bold text-red-600 mb-4">
            ☠️ ゲームオーバー
          </h1>

          <button
            onClick={() => setScreen('title')}
            className="bg-blue-500 hover:bg-blue-600 text-white px-8 py-4 rounded-2xl text-2xl font-bold"
          >
            🔄 もう一度
          </button>
        </div>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-gradient-to-b from-blue-100 to-purple-100 p-6 flex items-center justify-center">
      <div className="bg-white rounded-3xl shadow-2xl p-8 max-w-2xl w-full text-center">
        <div className="flex justify-between mb-4 text-xl font-bold">
          <div>❤️ HP: {hp}</div>
          <div>⭐ EXP: {exp}</div>
        </div>

        <h1 className="text-4xl font-bold text-purple-700 mb-2">
          👾 {currentQuestion.enemy} が あらわれた！
        </h1>

        <p className="text-lg mb-4">この漢字を読め！</p>

        <div className="text-8xl font-bold mb-6 text-gray-800">
          {currentQuestion.kanji}
        </div>

        <input
          type="text"
          value={answer}
          onChange={(e) => setAnswer(e.target.value)}
          placeholder="ひらがなで入力"
          className="w-full border-2 border-purple-300 rounded-2xl p-4 text-2xl text-center mb-4"
        />

        <button
          onClick={checkAnswer}
          className="bg-purple-500 hover:bg-purple-600 text-white px-8 py-4 rounded-2xl text-2xl font-bold"
        >
          ⚔️ こうげき！
        </button>

        <div className="mt-6 text-2xl font-bold text-green-600 min-h-[40px]">
          {message}
        </div>

        <button
          onClick={() => setScreen('title')}
          className="mt-6 bg-gray-400 hover:bg-gray-500 text-white px-6 py-3 rounded-2xl text-lg"
        >
          🏠 タイトルへもどる
        </button>
      </div>
    </div>
  );
}