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

// ==========================================
// 1. 题目数据定义 (精选5年级典型异分母加减法应用题)
// ==========================================
const PROBLEMS = [
  {
    id: 1,
    title: "量子燃料调配 (减法 - 同分母/简单通分)",
    story: "【航行日志】领航员报告：飞船起飞时携带了 5/6 吨的量子燃料。在穿越小行星带时，副推进器消耗了 1/3 吨。目前动力舱还剩多少吨燃料？",
    question: "计算：\\frac{5}{6} - \\frac{1}{3}",
    num1: 5,
    den1: 6,
    operator: '-',
    num2: 1,
    den2: 3,
    lcd: 6, // 最小公分母
    step2Num1: 5,
    step2Num2: 2,
    resultNum: 3,
    resultDen: 6,
    simplifiedNum: 1,
    simplifiedDen: 2,
    needSimplify: true,
    componentName: "量子燃料泵",
    componentIcon: "⚡",
    hint: "提示：分母 6 和 3 的最小公倍数是 6。请把 1/3 的分子分母同时乘以 2，化为分母是 6 的分数再进行减法！"
  },
  {
    id: 2,
    title: "星云能量采集 (加法 - 互质分母通分)",
    story: "【能量监控】飞船正在采集星云物质。1号采集器收集了 1/4 吨星云结晶，2号采集器收集了 2/5 吨。两台采集器一共收集了多少吨结晶？",
    question: "计算：\\frac{1}{4} + \\frac{2}{5}",
    num1: 1,
    den1: 4,
    operator: '+',
    num2: 2,
    den2: 5,
    lcd: 20,
    step2Num1: 5,
    step2Num2: 8,
    resultNum: 13,
    resultDen: 20,
    simplifiedNum: 13,
    simplifiedDen: 20,
    needSimplify: false,
    componentName: "星云收集器",
    componentIcon: "🛸",
    hint: "提示：分母 4 和 5 是互质数，它们的最小公分母是 4 × 5 = 20。将两分数分别通分后再相加！"
  },
  {
    id: 3,
    title: "超空间航线规划 (减法 - 倍数关系通分)",
    story: "【航线警报】导航计算机规划了 7/10 光年的曲率航线。飞船刚刚越过了空间跃迁点，已行驶 2/5 光年。前方还有多少光年的航程？",
    question: "计算：\\frac{7}{10} - \\frac{2}{5}",
    num1: 7,
    den1: 10,
    operator: '-',
    num2: 2,
    den2: 5,
    lcd: 10,
    step2Num1: 7,
    step2Num2: 4,
    resultNum: 3,
    resultDen: 10,
    simplifiedNum: 3,
    simplifiedDen: 10,
    needSimplify: false,
    componentName: "曲率跃迁引擎",
    componentIcon: "🌀",
    hint: "提示：分母 10 是 5 的倍数，因此最小公分母就是 10。只需要把 2/5 的分子和分母同时乘以 2 即可通分。"
  },
  {
    id: 4,
    title: "太空厨房配给 (加法 - 常用分母计算)",
    story: "【后勤保障】宇航员正在准备太空晚餐。制作蔬菜沙拉需要 1/2 千克水培生菜，制作高能能量棒需要 3/8 千克大豆蛋白。一共需要准备多少千克的原料？",
    question: "计算：\\frac{1}{2} + \\frac{3}{8}",
    num1: 1,
    den1: 2,
    operator: '+',
    num2: 3,
    den2: 8,
    lcd: 8,
    step2Num1: 4,
    step2Num2: 3,
    resultNum: 7,
    resultDen: 8,
    simplifiedNum: 7,
    simplifiedDen: 8,
    needSimplify: false,
    componentName: "重力厨房炉心",
    componentIcon: "🍳",
    hint: "提示：分母 2 和 8 具有倍数关系，最小公分母是 8。把 1/2 化成分母为 8 的分数，分子分母同乘以 4。"
  },
  {
    id: 5,
    title: "防护盾能量加固 (减法 - 一般合数通分)",
    story: "【主控防卫】遭遇陨石碎屑冲击，主能量盾原本有 5/6 的完整度，破损消耗了 1/4。现在的防护盾能量值还剩多少？",
    question: "计算：\\frac{5}{6} - \\frac{1}{4}",
    num1: 5,
    den1: 6,
    operator: '-',
    num2: 1,
    den2: 4,
    lcd: 12,
    step2Num1: 10,
    step2Num2: 3,
    resultNum: 7,
    resultDen: 12,
    simplifiedNum: 7,
    simplifiedDen: 12,
    needSimplify: false,
    componentName: "脉冲防护力场",
    componentIcon: "🛡️",
    hint: "提示：分母 6 和 4 的最小公倍数是 12（可以通过列举 6,12... 和 4,8,12... 找到）。两分数通分到分母为 12 即可计算。"
  }
];

export default function App() {
  // ==========================================
  // 2. 状态定义
  // ==========================================
  const [gameState, setGameState] = useState('intro'); // intro | map | solve | victory
  const [activeIdx, setActiveIdx] = useState(0);
  const [unlocked, setUnlocked] = useState([false, false, false, false, false]);
  
  // 步骤导学状态 (1: 输入公分母, 2: 输入通分分子, 3: 输入初步结果, 4: 化简/确认最终结果)
  const [step, setStep] = useState(1);
  const [showHint, setShowHint] = useState(false);
  const [feedback, setFeedback] = useState({ text: '', isError: false });

  // 用户答题输入存储
  const [inputLcd, setInputLcd] = useState('');
  const [inputNum1, setInputNum1] = useState('');
  const [inputNum2, setInputNum2] = useState('');
  const [inputResultNum, setInputResultNum] = useState('');
  const [inputFinalNum, setInputFinalNum] = useState('');
  const [inputFinalDen, setInputFinalDen] = useState('');

  const currentProblem = PROBLEMS[activeIdx];

  // ==========================================
  // 3. 辅助计算与逻辑校验
  // ==========================================
  const startMission = () => {
    setGameState('map');
  };

  const selectSector = (index) => {
    setActiveIdx(index);
    setStep(1);
    clearInputs();
    setShowHint(false);
    setFeedback({ text: '', isError: false });
    setGameState('solve');
  };

  const clearInputs = () => {
    setInputLcd('');
    setInputNum1('');
    setInputNum2('');
    setInputResultNum('');
    setInputFinalNum('');
    setInputFinalDen('');
  };

  // 验证第一步：最小公分母
  const handleVerifyStep1 = () => {
    const val = parseInt(inputLcd.trim());
    if (isNaN(val)) {
      setFeedback({ text: "⚠️ 领航员，请输入数值作为公分母！", isError: true });
      return;
    }
    if (val === currentProblem.lcd) {
      setFeedback({ text: "✨ 完美锁定公分母！跃迁通道已对齐，请开始量子通分转换。", isError: false });
      setStep(2);
    } else if (val % currentProblem.den1 === 0 && val % currentProblem.den2 === 0) {
      // 输了公倍数但不是最小公倍数
      setFeedback({ text: `💡 找到了公倍数 ${val}，但为了计算更简便，请寻找分母 ${currentProblem.den1} 和 ${currentProblem.den2} 的【最小】公倍数哦！`, isError: true });
    } else {
      setFeedback({ text: `❌ 公分母不对哦。提示：它需要同时是 ${currentProblem.den1} 和 ${currentProblem.den2} 的倍数。`, isError: true });
    }
  };

  // 验证第二步：通分后的分子
  const handleVerifyStep2 = () => {
    const n1 = parseInt(inputNum1.trim());
    const n2 = parseInt(inputNum2.trim());
    if (isNaN(n1) || isNaN(n2)) {
      setFeedback({ text: "⚠️ 仪表盘数据未填满，请输入通分后的两个新分子！", isError: true });
      return;
    }

    if (n1 === currentProblem.step2Num1 && n2 === currentProblem.step2Num2) {
      setFeedback({ text: "✨ 通分完全正确！分子能量已校准。现在可以执行分子加减运算了。", isError: false });
      setStep(3);
    } else {
      setFeedback({ text: `❌ 分子校准失败。分母扩大了多少倍，分子也要扩大相同的倍数哦！再检查一下。`, isError: true });
    }
  };

  // 验证第三步：初步相加减结果
  const handleVerifyStep3 = () => {
    const rNum = parseInt(inputResultNum.trim());
    if (isNaN(rNum)) {
      setFeedback({ text: "⚠️ 请输入计算得出的分子结果！", isError: true });
      return;
    }

    if (rNum === currentProblem.resultNum) {
      if (currentProblem.needSimplify) {
        setFeedback({ text: "✨ 运算成功！不过，这个分数好像还可以通过【约分】化为最简分数。试着化简它！", isError: false });
        setStep(4);
      } else {
        // 不需要化简，直接通关
        handleProblemComplete();
      }
    } else {
      const correctOp = currentProblem.operator === '+' ? "相加" : "相减";
      setFeedback({ text: `❌ 结果分子不正确。请将通分后的两个新分子进行${correctOp} (${currentProblem.step2Num1} ${currentProblem.operator} ${currentProblem.step2Num2})。`, isError: true });
    }
  };

  // 验证第四步：最简分数化简
  const handleVerifyStep4 = () => {
    const fNum = parseInt(inputFinalNum.trim());
    const fDen = parseInt(inputFinalDen.trim());

    if (isNaN(fNum) || isNaN(fDen)) {
      setFeedback({ text: "⚠️ 请输入最简分数的分子和分母！", isError: true });
      return;
    }

    if (fNum === currentProblem.simplifiedNum && fDen === currentProblem.simplifiedDen) {
      handleProblemComplete();
    } else {
      setFeedback({ text: "❌ 化简结果未对齐。请找出分子和分母的最大公因数，同时除以它来进行约分！", isError: true });
    }
  };

  // 单题完全通关处理
  const handleProblemComplete = () => {
    const updatedUnlocked = [...unlocked];
    updatedUnlocked[activeIdx] = true;
    setUnlocked(updatedUnlocked);

    // 检查是否全部解锁成功
    const allDone = updatedUnlocked.every(status => status === true);

    setFeedback({
      text: `🎉 太棒了！成功修复并充能【${currentProblem.componentName}】！核心引擎能量+20%！`,
      isError: false
    });

    setTimeout(() => {
      if (allDone) {
        setGameState('victory');
      } else {
        setGameState('map');
      }
    }, 2800);
  };

  // 检查是否全通关
  const isAllUnlocked = unlocked.every(status => status === true);

  return (
    <div className="min-h-screen bg-[#070A13] text-slate-100 flex flex-col justify-between font-sans selection:bg-cyan-500 selection:text-slate-900 relative overflow-hidden">
      
      {/* 炫酷背景星空特效与网格 */}
      <div className="absolute inset-0 bg-[linear-gradient(to_right,#1e293b_1px,transparent_1px),linear-gradient(to_bottom,#1e293b_1px,transparent_1px)] bg-[size:4rem_4rem] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_0%,#000_70%,transparent_100%)] opacity-35 pointer-events-none"></div>
      <div className="absolute top-[-10%] left-[-10%] w-[40%] h-[40%] bg-pink-500/10 rounded-full blur-[120px] pointer-events-none"></div>
      <div className="absolute bottom-[-10%] right-[-10%] w-[40%] h-[40%] bg-cyan-500/10 rounded-full blur-[120px] pointer-events-none"></div>

      {/* ==========================================
          页头 HEADER (所有界面共享)
         ========================================== */}
      <header className="border-b border-slate-800/80 bg-slate-950/60 backdrop-blur-md px-4 py-3 sticky top-0 z-50">
        <div className="max-w-md mx-auto flex items-center justify-between">
          <div className="flex items-center gap-2">
            <div className="w-8 h-8 rounded-lg bg-cyan-950 border border-cyan-500/50 flex items-center justify-center text-cyan-400 font-bold animate-pulse">
              ★
            </div>
            <div>
              <h1 className="text-sm font-bold tracking-wider text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-pink-400">
                星际航行：分数轨道
              </h1>
              <p className="text-[10px] text-slate-400 tracking-widest">5年级异分母加减法专项</p>
            </div>
          </div>
          <div className="text-xs font-mono px-2 py-1 rounded bg-slate-900 border border-slate-800 text-cyan-400">
            核心完整度: {unlocked.filter(Boolean).length * 20}%
          </div>
        </div>
      </header>

      {/* ==========================================
          主要内容区 - 状态分发
         ========================================== */}
      <main className="flex-1 w-full max-w-md mx-auto px-4 py-6 z-10 flex flex-col justify-center">

        {/* ------------------------------------------
            A) 引导介绍界面 (Intro)
           ------------------------------------------ */}
        {gameState === 'intro' && (
          <div className="space-y-6 text-center py-4">
            <div className="relative inline-block">
              {/* 飞船科技感框 */}
              <div className="w-24 h-24 mx-auto mb-2 rounded-2xl bg-gradient-to-tr from-cyan-500 via-indigo-600 to-pink-500 p-[2px] animate-bounce">
                <div className="w-full h-full bg-[#070A13] rounded-2xl flex items-center justify-center text-5xl">
                  🚀
                </div>
              </div>
              <span className="absolute -top-1 -right-1 flex h-4 w-4">
                <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-cyan-400 opacity-75"></span>
                <span className="relative inline-flex rounded-full h-4 w-4 bg-cyan-500"></span>
              </span>
            </div>

            <div className="space-y-2">
              <span className="text-[11px] font-mono tracking-widest uppercase bg-cyan-950 text-cyan-400 px-3 py-1 rounded-full border border-cyan-800/40">
                MISSION BRIEFING / 任务简报
              </span>
              <h2 className="text-2xl font-black text-white tracking-tight pt-2">
                拯救“逐星号”探索船
              </h2>
              <p className="text-sm text-slate-300 leading-relaxed max-w-sm mx-auto">
                星历 2026 年，逐星号飞船穿过微陨石带，主引擎受损，5大动力核心部件悉数离线。
              </p>
              <p className="text-xs text-slate-400 leading-relaxed max-w-sm mx-auto">
                我们需要利用您的<span className="text-cyan-400 font-bold">【异分母分数加减法】</span>超强计算力，重新激活各大控制阀门。每修复一个部件，飞船引擎完整度将回升 20%。
              </p>
            </div>

            {/* 炫酷的收集预览列表 */}
            <div className="bg-slate-900/80 border border-slate-800 rounded-xl p-4 text-left space-y-3">
              <p className="text-xs font-mono text-slate-400 border-b border-slate-800 pb-2">🚀 待锁定的引擎组件：</p>
              <div className="grid grid-cols-5 gap-2">
                {PROBLEMS.map((p, idx) => (
                  <div key={p.id} className="flex flex-col items-center justify-center p-2 rounded-lg bg-slate-950 border border-slate-800 text-center">
                    <span className="text-xl filter grayscale opacity-40">{p.componentIcon}</span>
                    <span className="text-[9px] mt-1 text-slate-500 truncate w-full">{p.componentName}</span>
                  </div>
                ))}
              </div>
            </div>

            <button
              onClick={startMission}
              className="w-full py-4 bg-gradient-to-r from-cyan-500 via-blue-600 to-indigo-600 hover:from-cyan-400 hover:to-indigo-500 text-white font-bold rounded-xl shadow-[0_0_20px_rgba(6,182,212,0.3)] transition-all transform active:scale-95 flex items-center justify-center gap-2 text-base tracking-wider"
            >
              <span>立即建立神经元链接</span>
              <span className="animate-pulse">⚡</span>
            </button>
          </div>
        )}

        {/* ------------------------------------------
            B) 关卡选择地图界面 (Map)
           ------------------------------------------ */}
        {gameState === 'map' && (
          <div className="space-y-6">
            <div className="text-center space-y-1">
              <h3 className="text-lg font-black text-white tracking-wide">
                逐星号 · 核心状态终端
              </h3>
              <p className="text-xs text-slate-400">选择故障舱区，启动分步逻辑通分修复</p>
            </div>

            {/* 飞船状态舱位平面图示意 (SVG 精准绘制) */}
            <div className="bg-slate-900/60 border border-slate-800/80 rounded-2xl p-4 relative overflow-hidden flex flex-col items-center">
              <div className="w-full max-w-[240px] aspect-video relative flex items-center justify-center">
                {/* 科技感线框飞船 */}
                <svg viewBox="0 0 100 50" className="w-full h-full stroke-cyan-500/20 fill-none stroke-1">
                  <path d="M50 5 L85 25 L85 35 L70 45 L30 45 L15 35 L15 25 Z" />
                  <line x1="50" y1="5" x2="50" y2="45" strokeDasharray="2 2" className="stroke-slate-700" />
                  <line x1="15" y1="30" x2="85" y2="30" strokeDasharray="2 2" className="stroke-slate-700" />
                  
                  {/* 点亮已解锁的喷气动画 */}
                  {isAllUnlocked && (
                    <path d="M50 45 L45 50 L50 48 L55 50 Z" fill="#06B6D4" className="animate-bounce" />
                  )}
                </svg>

                {/* 飞船中央HUD光圈 */}
                <div className="absolute inset-0 flex items-center justify-center">
                  <div className="w-20 h-20 rounded-full border border-dashed border-cyan-500/30 animate-spin flex items-center justify-center text-xs font-mono text-cyan-400">
                    DIAGNOSTICS
                  </div>
                </div>
              </div>

              {/* 引擎总体能量条 */}
              <div className="w-full mt-2 space-y-1">
                <div className="flex justify-between text-[10px] font-mono text-slate-400">
                  <span>REACTOR CORE (反应堆输出功率)</span>
                  <span className="text-emerald-400 font-bold">{unlocked.filter(Boolean).length * 20}%</span>
                </div>
                <div className="w-full h-2 rounded-full bg-slate-950 overflow-hidden border border-slate-800">
                  <div
                    className="h-full bg-gradient-to-r from-cyan-500 via-emerald-500 to-emerald-400 transition-all duration-500"
                    style={{ width: `${unlocked.filter(Boolean).length * 20}%` }}
                  ></div>
                </div>
              </div>
            </div>

            {/* 关卡列表卡片组 */}
            <div className="space-y-3">
              {PROBLEMS.map((prob, idx) => {
                const isFinished = unlocked[idx];
                return (
                  <button
                    key={prob.id}
                    onClick={() => selectSector(idx)}
                    className={`w-full text-left p-4 rounded-xl border transition-all flex items-center justify-between ${
                      isFinished
                        ? 'bg-emerald-950/20 border-emerald-500/30 hover:bg-emerald-950/30'
                        : 'bg-slate-900/90 border-slate-800 hover:border-slate-700 hover:bg-slate-850'
                    }`}
                  >
                    <div className="flex items-center gap-3 min-w-0">
                      {/* 部件激活指示灯 */}
                      <div className={`w-10 h-10 rounded-lg flex items-center justify-center text-xl shrink-0 ${
                        isFinished ? 'bg-emerald-500/15 text-emerald-400' : 'bg-slate-950 text-slate-500 border border-slate-800'
                      }`}>
                        {isFinished ? '✓' : prob.componentIcon}
                      </div>
                      <div className="min-w-0">
                        <span className="text-[10px] font-mono text-slate-400 tracking-wider">
                          SECTOR 0{prob.id} · {prob.componentName}
                        </span>
                        <h4 className={`text-sm font-bold truncate ${isFinished ? 'text-emerald-300' : 'text-slate-100'}`}>
                          {prob.title}
                        </h4>
                      </div>
                    </div>

                    <div className="shrink-0 ml-2">
                      {isFinished ? (
                        <span className="text-[10px] bg-emerald-500/10 text-emerald-400 px-2 py-1 rounded border border-emerald-500/30 font-mono">
                          已激活
                        </span>
                      ) : (
                        <span className="text-[10px] bg-cyan-500/10 text-cyan-400 px-2 py-1 rounded border border-cyan-500/30 font-mono">
                          维护中
                        </span>
                      )}
                    </div>
                  </button>
                );
              })}
            </div>

            {/* 隐藏大招：全解锁后的发射选项 */}
            {isAllUnlocked && (
              <button
                onClick={() => setGameState('victory')}
                className="w-full py-4 bg-gradient-to-r from-emerald-500 to-cyan-500 text-slate-950 font-black rounded-xl text-center shadow-[0_0_25px_rgba(16,185,129,0.4)] transition-all animate-pulse"
              >
                🚀 动力核心已100%校准！开启时空跃迁 🚀
              </button>
            )}
          </div>
        )}

        {/* ------------------------------------------
            C) 核心解题交互界面 (Solve)
           ------------------------------------------ */}
        {gameState === 'solve' && (
          <div className="space-y-6">
            
            {/* 返回按键与当前进度 */}
            <div className="flex items-center justify-between">
              <button
                onClick={() => setGameState('map')}
                className="text-xs text-slate-400 hover:text-white flex items-center gap-1 font-mono transition-colors"
              >
                ← 返回终端中心
              </button>
              <div className="text-xs font-mono text-cyan-400">
                部件修复任务 {activeIdx + 1}/5
              </div>
            </div>

            {/* 情境应用题面板 */}
            <div className="bg-slate-900/90 border border-slate-800 rounded-2xl p-5 space-y-4 shadow-lg relative overflow-hidden">
              <div className="absolute top-0 left-0 w-2 h-full bg-cyan-500"></div>
              
              <div className="space-y-2">
                <span className="text-[10px] font-mono tracking-widest text-pink-400 uppercase bg-pink-500/10 px-2 py-0.5 rounded border border-pink-500/20">
                  {currentProblem.title}
                </span>
                <p className="text-sm text-slate-200 leading-relaxed font-normal">
                  {currentProblem.story}
                </p>
              </div>

              {/* 核心数学物理模型展示：将文字题，抽象成美观的分数计算式 */}
              <div className="pt-3 border-t border-slate-800 flex items-center justify-between">
                <span className="text-xs text-slate-400 font-mono">待解决算式：</span>
                <div className="flex items-center gap-3 text-lg font-bold font-mono">
                  {/* 分数 1 */}
                  <div className="flex flex-col items-center">
                    <span className="px-1 text-cyan-400">{currentProblem.num1}</span>
                    <span className="w-6 h-[2px] bg-slate-500"></span>
                    <span className="px-1 text-slate-400">{currentProblem.den1}</span>
                  </div>

                  {/* 运算符 */}
                  <span className="text-pink-400 text-xl font-bold">{currentProblem.operator}</span>

                  {/* 分数 2 */}
                  <div className="flex flex-col items-center">
                    <span className="px-1 text-cyan-400">{currentProblem.num2}</span>
                    <span className="w-6 h-[2px] bg-slate-500"></span>
                    <span className="px-1 text-slate-400">{currentProblem.den2}</span>
                  </div>

                  <span className="text-slate-400">=</span>
                  <span className="text-cyan-400 text-xl animate-pulse">?</span>
                </div>
              </div>
            </div>

            {/* ==================== 独创分步通分卡片 ==================== */}
            <div className="bg-slate-950 border border-cyan-500/30 rounded-2xl p-5 shadow-[0_0_20px_rgba(6,182,212,0.05)] space-y-6 relative">
              
              {/* 步骤导航条 */}
              <div className="grid grid-cols-4 gap-1">
                {[1, 2, 3, 4].map((s) => {
                  if (s === 4 && !currentProblem.needSimplify) return null; // 不需要化简则隐去第4步
                  return (
                    <div key={s} className="flex flex-col gap-1">
                      <div className={`h-1.5 rounded-full ${
                        step > s ? 'bg-emerald-500' : step === s ? 'bg-cyan-500 animate-pulse' : 'bg-slate-800'
                      }`}></div>
                      <span className={`text-[8px] text-center font-mono tracking-tighter ${
                        step === s ? 'text-cyan-400 font-bold' : 'text-slate-500'
                      }`}>
                        {s === 1 && "1.找公分母"}
                        {s === 2 && "2.分子通分"}
                        {s === 3 && "3.求和/差"}
                        {s === 4 && "4.约分最简"}
                      </span>
                    </div>
                  );
                })}
              </div>

              {/* ----------------- 步骤1：输入公分母 ----------------- */}
              {step === 1 && (
                <div className="space-y-4 animate-fadeIn">
                  <div className="space-y-1">
                    <h5 className="text-xs font-bold text-slate-200 flex items-center gap-1.5">
                      <span className="w-4 h-4 rounded-full bg-cyan-950 text-cyan-400 flex items-center justify-center text-[10px] font-mono border border-cyan-700/50">1</span>
                      第一步：锁定最小公分母
                    </h5>
                    <p className="text-[11px] text-slate-400">
                      请观察分母 <span className="text-cyan-400 font-bold">{currentProblem.den1}</span> 和 <span className="text-cyan-400 font-bold">{currentProblem.den2}</span>，它们最小的公共倍数是多少？
                    </p>
                  </div>

                  <div className="flex items-center gap-3 bg-slate-900 p-3 rounded-xl border border-slate-800">
                    <label className="text-xs font-mono text-slate-400 shrink-0">公分母 =</label>
                    <input
                      type="number"
                      pattern="[0-9]*"
                      inputMode="numeric"
                      value={inputLcd}
                      onChange={(e) => setInputLcd(e.target.value)}
                      placeholder="输入两个分母的最小公倍数"
                      className="w-full bg-slate-950 border border-slate-700 rounded-lg px-3 py-2 text-sm font-mono text-cyan-400 focus:outline-none focus:border-cyan-400 text-center"
                    />
                  </div>

                  <button
                    onClick={handleVerifyStep1}
                    className="w-full py-3 bg-cyan-950 hover:bg-cyan-900 border border-cyan-500/50 hover:border-cyan-400 text-cyan-300 font-bold rounded-xl text-xs tracking-wider transition-all"
                  >
                    发射定位雷达 (验证公分母)
                  </button>
                </div>
              )}

              {/* ----------------- 步骤2：输入通分后的分子 ----------------- */}
              {step === 2 && (
                <div className="space-y-4 animate-fadeIn">
                  <div className="space-y-1">
                    <h5 className="text-xs font-bold text-slate-200 flex items-center gap-1.5">
                      <span className="w-4 h-4 rounded-full bg-cyan-950 text-cyan-400 flex items-center justify-center text-[10px] font-mono border border-cyan-700/50">2</span>
                      第二步：飞船大脑通分校准
                    </h5>
                    <p className="text-[11px] text-slate-400">
                      现在分母已统一转换为 <span className="text-emerald-400 font-bold">{currentProblem.lcd}</span>。请计算通分后的新分子：
                    </p>
                  </div>

                  {/* 全息分数框通分形态 */}
                  <div className="flex items-center justify-center gap-3 font-mono py-2">
                    {/* 分数 1 变换 */}
                    <div className="flex items-center gap-2">
                      <div className="flex flex-col items-center">
                        <span className="text-[10px] text-slate-500">原: {currentProblem.num1}/{currentProblem.den1}</span>
                        <input
                          type="number"
                          pattern="[0-9]*"
                          inputMode="numeric"
                          value={inputNum1}
                          onChange={(e) => setInputNum1(e.target.value)}
                          placeholder="新分子"
                          className="w-14 bg-slate-900 border border-cyan-500/40 rounded px-1.5 py-1 text-center text-sm font-bold text-cyan-400 focus:outline-none focus:border-cyan-400"
                        />
                        <span className="w-12 h-[1.5px] bg-slate-600 my-1"></span>
                        <span className="text-emerald-400 font-bold text-sm">{currentProblem.lcd}</span>
                      </div>
                    </div>

                    <span className="text-pink-400 font-bold text-lg">{currentProblem.operator}</span>

                    {/* 分数 2 变换 */}
                    <div className="flex items-center gap-2">
                      <div className="flex flex-col items-center">
                        <span className="text-[10px] text-slate-500">原: {currentProblem.num2}/{currentProblem.den2}</span>
                        <input
                          type="number"
                          pattern="[0-9]*"
                          inputMode="numeric"
                          value={inputNum2}
                          onChange={(e) => setInputNum2(e.target.value)}
                          placeholder="新分子"
                          className="w-14 bg-slate-900 border border-cyan-500/40 rounded px-1.5 py-1 text-center text-sm font-bold text-cyan-400 focus:outline-none focus:border-cyan-400"
                        />
                        <span className="w-12 h-[1.5px] bg-slate-600 my-1"></span>
                        <span className="text-emerald-400 font-bold text-sm">{currentProblem.lcd}</span>
                      </div>
                    </div>
                  </div>

                  <button
                    onClick={handleVerifyStep2}
                    className="w-full py-3 bg-cyan-950 hover:bg-cyan-900 border border-cyan-500/50 text-cyan-300 font-bold rounded-xl text-xs tracking-wider transition-all"
                  >
                    量子能量校准 (确认分子通分)
                  </button>
                </div>
              )}

              {/* ----------------- 步骤3：计算求和差结果 ----------------- */}
              {step === 3 && (
                <div className="space-y-4 animate-fadeIn">
                  <div className="space-y-1">
                    <h5 className="text-xs font-bold text-slate-200 flex items-center gap-1.5">
                      <span className="w-4 h-4 rounded-full bg-cyan-950 text-cyan-400 flex items-center justify-center text-[10px] font-mono border border-cyan-700/50">3</span>
                      第三步：同分母分子相加减
                    </h5>
                    <p className="text-[11px] text-slate-400">
                      分母已相同！请执行分子的 <span className="text-pink-400 font-bold">{currentProblem.operator === '+' ? '加法' : '减法'}</span>：即计算 {currentProblem.step2Num1} {currentProblem.operator} {currentProblem.step2Num2} 得出合并分子：
                    </p>
                  </div>

                  <div className="flex items-center justify-center font-mono py-2 gap-4">
                    <div className="flex flex-col items-center">
                      <span className="text-sm text-slate-400">{currentProblem.step2Num1} {currentProblem.operator} {currentProblem.step2Num2}</span>
                      <span className="w-20 h-[2px] bg-slate-500 my-1.5"></span>
                      <span className="text-slate-400 text-sm">{currentProblem.lcd}</span>
                    </div>

                    <span className="text-slate-400 text-xl">=</span>

                    {/* 用户输入合成的分数结果 */}
                    <div className="flex flex-col items-center bg-slate-900 p-3 rounded-xl border border-slate-800">
                      <input
                        type="number"
                        pattern="[0-9]*"
                        inputMode="numeric"
                        value={inputResultNum}
                        onChange={(e) => setInputResultNum(e.target.value)}
                        placeholder="?"
                        className="w-14 bg-slate-950 border border-cyan-500/40 rounded px-1 text-center text-base font-bold text-cyan-400 focus:outline-none focus:border-cyan-400"
                      />
                      <span className="w-14 h-[1.5px] bg-slate-600 my-1.5"></span>
                      <span className="text-emerald-400 font-bold text-sm">{currentProblem.lcd}</span>
                    </div>
                  </div>

                  <button
                    onClick={handleVerifyStep3}
                    className="w-full py-3 bg-cyan-950 hover:bg-cyan-900 border border-cyan-500/50 text-cyan-300 font-bold rounded-xl text-xs tracking-wider transition-all"
                  >
                    融合引擎输出 (验证初步结果)
                  </button>
                </div>
              )}

              {/* ----------------- 步骤4：化简分数 ----------------- */}
              {step === 4 && (
                <div className="space-y-4 animate-fadeIn">
                  <div className="space-y-1">
                    <h5 className="text-xs font-bold text-slate-200 flex items-center gap-1.5">
                      <span className="w-4 h-4 rounded-full bg-cyan-950 text-cyan-400 flex items-center justify-center text-[10px] font-mono border border-cyan-700/50">4</span>
                      第四步：量子晶格压缩 (约分为最简分数)
                    </h5>
                    <p className="text-[11px] text-slate-400">
                      检测到当前结果 <span className="text-pink-400 font-bold">{currentProblem.resultNum}/{currentProblem.resultDen}</span> 并非最简形式。请通过求分子与分母的最大公因数来进行最简转换：
                    </p>
                  </div>

                  <div className="flex items-center justify-center font-mono py-2 gap-4">
                    <div className="flex flex-col items-center">
                      <span className="text-slate-400 text-sm">{currentProblem.resultNum}</span>
                      <span className="w-12 h-[1.5px] bg-slate-600 my-1"></span>
                      <span className="text-slate-400 text-sm">{currentProblem.resultDen}</span>
                    </div>

                    <span className="text-slate-500 text-sm">约分→</span>

                    {/* 最终化简结果输入 */}
                    <div className="flex flex-col items-center bg-slate-900 p-3 rounded-xl border border-cyan-500/30">
                      <input
                        type="number"
                        pattern="[0-9]*"
                        inputMode="numeric"
                        value={inputFinalNum}
                        onChange={(e) => setInputFinalNum(e.target.value)}
                        placeholder="最简分子"
                        className="w-16 bg-slate-950 border border-slate-700 rounded px-1.5 py-1 text-center text-sm font-bold text-cyan-400 focus:outline-none focus:border-cyan-400"
                      />
                      <span className="w-16 h-[1.5px] bg-slate-600 my-1.5"></span>
                      <input
                        type="number"
                        pattern="[0-9]*"
                        inputMode="numeric"
                        value={inputFinalDen}
                        onChange={(e) => setInputFinalDen(e.target.value)}
                        placeholder="最简分母"
                        className="w-16 bg-slate-950 border border-slate-700 rounded px-1.5 py-1 text-center text-sm font-bold text-cyan-400 focus:outline-none focus:border-cyan-400"
                      />
                    </div>
                  </div>

                  <button
                    onClick={handleVerifyStep4}
                    className="w-full py-3 bg-emerald-950 hover:bg-emerald-900 border border-emerald-500/50 text-emerald-300 font-bold rounded-xl text-xs tracking-wider transition-all"
                  >
                    最终注入动力阀 (确认化简)
                  </button>
                </div>
              )}

              {/* 实时系统报告反馈 (取代传统的 Alert) */}
              {feedback.text && (
                <div className={`p-3 rounded-xl text-xs border leading-relaxed animate-pulse ${
                  feedback.isError 
                    ? 'bg-pink-950/30 border-pink-500/30 text-pink-300' 
                    : 'bg-emerald-950/30 border-emerald-500/30 text-emerald-300'
                }`}>
                  <div className="font-bold mb-1">{feedback.isError ? "🚨 诊断错误:" : "📡 测控反馈:"}</div>
                  {feedback.text}
                </div>
              )}

              {/* 辅助折纸条/可视化帮助提示 (帮助理解通分本质) */}
              <div className="border-t border-slate-800 pt-4 flex flex-col gap-2">
                <button
                  onClick={() => setShowHint(!showHint)}
                  className="text-xs text-slate-400 hover:text-cyan-400 flex items-center justify-between transition-colors font-mono"
                >
                  <span>{showHint ? "▲ 收起全息辅助星轨" : "▼ 呼叫全息辅助星轨 (分步提示)"}</span>
                  <span className="text-[10px] bg-slate-800 px-1.5 py-0.5 rounded text-cyan-400">HELP</span>
                </button>

                {showHint && (
                  <div className="bg-slate-900/60 p-3 rounded-xl border border-slate-800 space-y-3 text-xs text-slate-300 animate-slideDown">
                    <p className="text-slate-400 font-sans">{currentProblem.hint}</p>
                    
                    {/* 分数格动态可视化示意 (分数条分割) */}
                    <div className="space-y-2 pt-1 border-t border-slate-800/80 font-mono">
                      <div>
                        <div className="flex justify-between text-[9px] text-slate-500 mb-1">
                          <span>第一数: {currentProblem.num1}/{currentProblem.den1}</span>
                          <span>分割为 {currentProblem.lcd} 等份</span>
                        </div>
                        {/* 简易分割块示意 */}
                        <div className="h-4 w-full bg-slate-950 rounded flex overflow-hidden border border-slate-800">
                          {Array.from({ length: currentProblem.lcd }).map((_, i) => {
                            const ratio = currentProblem.lcd / currentProblem.den1;
                            const isFilled = i < currentProblem.num1 * ratio;
                            return (
                              <div
                                key={i}
                                className={`h-full flex-1 border-r border-slate-900/40 last:border-0 ${
                                  isFilled ? 'bg-cyan-500/40' : 'bg-transparent'
                                }`}
                              ></div>
                            );
                          })}
                        </div>
                      </div>

                      <div>
                        <div className="flex justify-between text-[9px] text-slate-500 mb-1">
                          <span>第二数: {currentProblem.num2}/{currentProblem.den2}</span>
                          <span>分割为 {currentProblem.lcd} 等份</span>
                        </div>
                        <div className="h-4 w-full bg-slate-950 rounded flex overflow-hidden border border-slate-800">
                          {Array.from({ length: currentProblem.lcd }).map((_, i) => {
                            const ratio = currentProblem.lcd / currentProblem.den2;
                            const isFilled = i < currentProblem.num2 * ratio;
                            return (
                              <div
                                key={i}
                                className={`h-full flex-1 border-r border-slate-900/40 last:border-0 ${
                                  isFilled ? 'bg-pink-500/30' : 'bg-transparent'
                                }`}
                              ></div>
                            );
                          })}
                        </div>
                      </div>
                    </div>
                  </div>
                )}
              </div>

            </div>
          </div>
        )}

        {/* ------------------------------------------
            D) 最终胜利欢庆界面 (Victory)
           ------------------------------------------ */}
        {gameState === 'victory' && (
          <div className="space-y-8 text-center py-6 animate-scaleUp">
            <div className="relative inline-block">
              {/* 大飞船升空动画框 */}
              <div className="w-28 h-28 mx-auto rounded-full bg-gradient-to-r from-emerald-400 via-teal-500 to-cyan-500 p-1 animate-pulse shadow-[0_0_40px_rgba(16,185,129,0.3)]">
                <div className="w-full h-full bg-[#070A13] rounded-full flex items-center justify-center text-6xl">
                  🌌
                </div>
              </div>
              <div className="absolute top-2 left-1/2 -translate-x-1/2 text-5xl animate-bounce">
                🚀
              </div>
            </div>

            <div className="space-y-3">
              <span className="text-[10px] font-mono tracking-widest text-emerald-400 uppercase bg-emerald-500/10 px-3 py-1 rounded-full border border-emerald-500/20">
                SYSTEM FULLY OPERATIONAL / 飞船状态满载
              </span>
              <h2 className="text-3xl font-black text-white tracking-tight">
                星空浩瀚，即刻启航！
              </h2>
              <p className="text-sm text-slate-300 leading-relaxed max-w-sm mx-auto">
                恭喜你，最强心算领航员！你通过了全部 5 道关卡的量子逻辑校验，成功为“逐星号”的 5 大引擎核心注入了平衡的分数能量！
              </p>
            </div>

            {/* 炫酷的属性结算面板 */}
            <div className="bg-slate-900/80 border border-emerald-500/20 rounded-2xl p-5 text-left max-w-sm mx-auto space-y-3 shadow-lg">
              <h4 className="text-xs font-mono text-emerald-400 border-b border-slate-800 pb-2 flex items-center justify-between">
                <span>🛰️ 任务结算数据库 (Log)</span>
                <span>STATUS: COMPLETE</span>
              </h4>
              <ul className="text-xs text-slate-300 space-y-2 font-mono">
                <li className="flex justify-between">
                  <span>• 异分母通分解析数:</span>
                  <span className="text-emerald-400">100% 对齐成功</span>
                </li>
                <li className="flex justify-between">
                  <span>• 最大公因数极简压缩:</span>
                  <span className="text-emerald-400">顺利匹配</span>
                </li>
                <li className="flex justify-between">
                  <span>• 拯救探索船等级:</span>
                  <span className="text-cyan-400 font-bold">💎 五星统帅</span>
                </li>
              </ul>
            </div>

            <div className="space-y-3 max-w-sm mx-auto">
              <button
                onClick={() => {
                  setUnlocked([false, false, false, false, false]);
                  setGameState('map');
                }}
                className="w-full py-4 bg-gradient-to-r from-emerald-500 via-teal-600 to-cyan-500 hover:from-emerald-400 hover:to-cyan-400 text-slate-950 font-black rounded-xl shadow-[0_0_20px_rgba(16,185,129,0.3)] transition-all active:scale-95 text-sm tracking-widest"
              >
                再次开启新航程
              </button>
            </div>
          </div>
        )}

      </main>

      {/* ==========================================
          页脚 FOOTER (版权与鼓励说明)
         ========================================== */}
      <footer className="border-t border-slate-900 bg-slate-950/40 py-4 text-center text-[10px] text-slate-500 tracking-wider">
        <div className="max-w-md mx-auto px-4">
          <p>© 2026 星际领航数学教育实验室</p>
          <p className="mt-1">用数学语言解锁宇宙的奥秘 · 为五年级异分母分数专项赋能</p>
        </div>
      </footer>

      {/* 极简自定义 CSS 动画 (解决过渡与入场动效) */}
      <style>{`
        @keyframes fadeIn {
          from { opacity: 0; transform: translateY(8px); }
          to { opacity: 1; transform: translateY(0); }
        }
        @keyframes slideDown {
          from { opacity: 0; max-height: 0; }
          to { opacity: 1; max-height: 200px; }
        }
        @keyframes scaleUp {
          from { opacity: 0; transform: scale(0.95); }
          to { opacity: 1; transform: scale(1); }
        }
        .animate-fadeIn {
          animation: fadeIn 0.35s ease-out forwards;
        }
        .animate-slideDown {
          animation: slideDown 0.3s ease-out forwards;
          overflow: hidden;
        }
        .animate-scaleUp {
          animation: scaleUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
        }
      `}</style>
    </div>
  );
}