import {
  Image,
  Video,
  Narration,
  Spotlight,
  MultipleChoiceQuizPanel,
  SingleChoiceQuizPanel,
  ExhibitOverlay,
} from "@/components";
import Alert from "@/components/layout/alert";
import SuccessAlert from "@/components/layout/success-alert";
import ClueOverlay from "@/components/layout/clue";
import { ClueData } from "@/components/layout";
import {
  cn,
  getBackgroundImage,
  getPublicPath,
  getStaticImage,
} from "@/lib/utils";
import { useState, useMemo } from "react";
import { useNavigate, useParams } from "react-router-dom";

// starName 固定为 chenyun
const starName = "chenyun";

// 视频配置
const VIDEO_CONFIG = {
  yinyuan: {
    src: getPublicPath("video/chenyun/chenyun_15.mp4"),
    narration: `1949年5月，上海解放，此时上海经济秩序混乱，一些资本家甚至说"共产党是军事一百分，政治八十分，财经打零分。"上海经济旧势力利用人们长期以来形成的担心钞票贬值的心理，大肆贩卖银元，掀起投机风潮。上海证券交易所是投机商的大本营，而大街小巷的银元贩子却更多。原来的一块银元值100人民币，到了6月4日已经涨到1100元，而涨势仍在继续。事实上，银元已经是上海市场的主要货币。有些商号只认银元，把人民币排斥到市场之外。上海，这个全国的经济心脏，能否在新政权手中恢复跳动？一场没有硝烟的经济战争即将打响。面对这硝烟弥漫的经济战线，陈云同志亲自参与指导了同旧经济势力间的"银元之战。你将化身陈云同志的特派员，直面这场'银元之战'。"`,
    alert: {
      title: '第一幕:"银元之战"--人民币的阵地争夺战',
      subtitle: "上海目前出现大肆贩卖银元的情况,请你了解情况!",
    },
  },
  mimian: {
    src: getPublicPath("video/chenyun/chenyun_16.mp4"),
    narration: "", // 没有旁白
    alert: {
      title: '第二幕:"米棉之战"--全国一盘棋的战略调度',
      subtitle: "上海目前出现米棉物资短缺的情况,请你先了解情况!",
    },
  },
};

// 线索数据配置
const CLUE_DATA: Record<string, ClueData> = {
  // 银元之战 - 线索1
  "yinyuan-clue1": {
    type: "text",
    title: "线索一",
    content: `沪市银元价格连日暴涨,
      5月27日一块银元值100人民币,
      6月3日涨到720元,
      6月4日涨到1100元。`,
  },
  // 银元之战 - 线索2
  "yinyuan-clue2": {
    type: "text",
    title: "线索二",
    content: (
      <div className="flex flex-col items-start text-left gap-2 px-14">
        <div className="mb-8">
          南京路的先施、永安、大新、新新等四大公司率先拒收人民币,甚至用银元标价。
        </div>
        <div>其他商户纷纷仿效,人民币在市场交易中地位下降。</div>
      </div>
    ),
  },
  // 米棉之战 - 投机商情报
  "mimian-intelligence": {
    type: "text",
    title: "投机商情报",
    content: `申新财团囤积棉纱3万件,
      扬言"控制纱布就能控制上海"。`,
  },
  // 米棉之战 - 全国物资分布
  "mimian-distribution": {
    type: "map",
    mapImage: "chenyun/reflection/全国物资分布",
  },
  // 米棉之战 - 对话线索
  "mimian-dialogue": {
    type: "dialogue",
    dialogues: [
      {
        character: "群众1",
        avatar: "chenyun/reflection/群众1",
        text: "米价一天涨三次，家里快断粮了",
      },
      {
        character: "群众2",
        avatar: "chenyun/reflection/群众2",
        text: "钱庄都在囤媒，冬天没法取暖",
      },
    ],
  },
  // 银元之战 - 电话线索
  "yinyuan-phone": {
    type: "audio",
    text: `人民币进不了上海市场,问题很严重。必须让人民币站稳脚跟。`,
    audioImage: "chenyun/reflection/录音",
  },
};

const ChenyunReflection = () => {
  const navigate = useNavigate();
  const [expandedFile, setExpandedFile] = useState<"yinyuan" | "mimian" | null>(
    null
  );
  const [playingVideo, setPlayingVideo] = useState<"yinyuan" | "mimian" | null>(
    null
  );
  const [narrationText, setNarrationText] = useState(
    `同学你好，欢迎来到跨越时空-体悟学习模块！

我们即将跨越时空，穿越到"银元之战"和"米棉之战"两个沉浸式场景，来感受陈云同志在1949年的上海是如何应对当时混乱的经济秩序的。`
  );
  const [showNarration, setShowNarration] = useState(true);
  const [showAlert, setShowAlert] = useState(false);
  const [alertConfig, setAlertConfig] = useState({ title: "", subtitle: "" });
  const [currentClue, setCurrentClue] = useState<ClueData | null>(null);
  const [currentClueKey, setCurrentClueKey] = useState<string | null>(null);
  const [showClueOverlay, setShowClueOverlay] = useState(false);
  // 记录每个线索的查看状态
  const [clueStates, setClueStates] = useState<Record<string, boolean>>({
    "yinyuan-clue1": false,
    "yinyuan-clue2": false,
    "mimian-intelligence": false,
    "mimian-distribution": false,
    "mimian-dialogue": false,
    "yinyuan-phone": false,
  });

  // 判断银元之战的所有线索是否都已查看
  const isYinyuanAllViewed = useMemo(() => {
    return (
      clueStates["yinyuan-clue1"] &&
      clueStates["yinyuan-clue2"] &&
      clueStates["yinyuan-phone"]
    );
  }, [clueStates]);

  // 判断米棉之战的所有线索是否都已查看（用于自动显示题目）
  const _isMimianAllViewed = useMemo(() => {
    return (
      clueStates["mimian-intelligence"] &&
      clueStates["mimian-distribution"] &&
      clueStates["mimian-dialogue"]
    );
  }, [clueStates]);

  // 多选题1相关状态
  const [showQuiz1, setShowQuiz1] = useState(false);
  // 旁白文字状态（图2）
  const [showNarration2, setShowNarration2] = useState(false);
  const [narration2Text, setNarration2Text] = useState("");
  // 多选题2相关状态
  const [showQuiz2, setShowQuiz2] = useState(false);
  // 成功提示框状态
  const [showSuccessAlert, setShowSuccessAlert] = useState(false);
  // 银元之战解决状态
  const [isYinyuanSolved, setIsYinyuanSolved] = useState(false);
  // 走势图图标显示状态（控制文件上的走势图图标是否显示）
  const [showTrendChartIcon, setShowTrendChartIcon] = useState(true);
  // 走势图大图显示状态
  const [showTrendChartDetail, setShowTrendChartDetail] = useState(false);

  // 米棉之战相关状态
  const [showMimianQuiz1, setShowMimianQuiz1] = useState(false);
  const [showMimianNarration1, setShowMimianNarration1] = useState(false);
  const [showMimianQuiz2, setShowMimianQuiz2] = useState(false);
  const [showMimianNarration2, setShowMimianNarration2] = useState(false);
  const [showMimianQuiz3, setShowMimianQuiz3] = useState(false);
  const [showMimianQuiz4, setShowMimianQuiz4] = useState(false);
  const [showMimianNarration3, setShowMimianNarration3] = useState(false);
  const [showMimianQuiz5, setShowMimianQuiz5] = useState(false);
  const [showMimianNarration4, setShowMimianNarration4] = useState(false);
  const [showMimianNarration5, setShowMimianNarration5] = useState(false);
  const [isMimianSolved, setIsMimianSolved] = useState(false);
  // 米棉之战成功提示框状态
  const [showMimianSuccessAlert, setShowMimianSuccessAlert] = useState(false);
  const [mimianSuccessAlertContent, setMimianSuccessAlertContent] =
    useState("");

  const { moduleName } = useParams<{
    moduleName: string;
  }>();

  const handleFileClick = (fileType: "yinyuan" | "mimian") => {
    // 如果已经展开，则收起
    if (expandedFile === fileType) {
      setExpandedFile(null);
      return;
    }

    // 播放视频
    setPlayingVideo(fileType);
  };

  const handleVideoEnd = () => {
    if (!playingVideo) return;

    const config = VIDEO_CONFIG[playingVideo];

    // 银元之战：视频结束后显示旁白
    if (playingVideo === "yinyuan") {
      setNarrationText(config.narration);
      setShowNarration(true);
    }
    // 米棉之战：视频结束后直接显示提示框
    else if (playingVideo === "mimian") {
      setPlayingVideo(null);
      setAlertConfig(config.alert);
      setShowAlert(true);
    }
  };

  const handleNarrationClose = () => {
    // 关闭旁白和视频后显示提示框
    setShowNarration(false);

    // 保存当前的文件类型用于后续展开
    const currentFile = playingVideo;
    setPlayingVideo(null);

    if (currentFile) {
      setAlertConfig(VIDEO_CONFIG[currentFile].alert);
      setShowAlert(true);
    }
  };

  const handleAlertClose = () => {
    // 关闭提示框后展开线索
    setShowAlert(false);

    // 从 alertConfig 的 title 判断是哪个文件
    if (alertConfig.title.includes("银元之战")) {
      setExpandedFile("yinyuan");
    } else if (alertConfig.title.includes("米棉之战")) {
      setExpandedFile("mimian");
    }
  };

  return (
    <div
      className="w-full h-full bg-cover bg-center bg-no-repeat"
      style={{
        backgroundImage: getBackgroundImage(`chenyun/reflection/底图`),
      }}
    >
      {/* 离开按钮 */}
      {expandedFile == null && (
        <Image
          className="absolute right-5 top-5"
          src={getStaticImage("components/离开")}
          button
          onClick={() => {
            if (moduleName && starName) {
              navigate(`/${moduleName}/${starName}/home`);
            }
          }}
        />
      )}

      {/* 桌子位置 */}
      <div className="relative w-full top-145 flex">
        {/* 文件1:银元之战 */}
        <div
          id="yinyuan-file"
          className={cn([
            "relative left-60 cursor-pointer transition-all duration-500",
            expandedFile === null || expandedFile === "yinyuan"
              ? "opacity-100 scale-100"
              : "opacity-0 scale-75 pointer-events-none",
            expandedFile !== "yinyuan" &&
              "hover:scale-105 hover:brightness-115",
          ])}
          onClick={() => handleFileClick("yinyuan")}
        >
          <Image src={getStaticImage("chenyun/reflection/文件1")} />
          <span
            className={cn([
              "absolute left-0 bottom-1/2 z-10",
              "w-full bg-black/60 px-4 py-2 rounded-2xl text-center",
              "text-white text-3xl font-bold tracking-widest",
            ])}
          >
            {isYinyuanSolved ? "01银元之战(已解决)" : "01银元之战(未解决)"}
          </span>

          {/* 走势图 - 银元之战解决后显示，点击后隐藏 */}
          {isYinyuanSolved && showTrendChartIcon && (
            <div
              className="absolute -top-40 left-1/2 -translate-x-1/2 cursor-pointer transition-all duration-300 hover:scale-105 z-2"
              onClick={(e) => {
                e.stopPropagation();
                setShowTrendChartDetail(true);
              }}
            >
              <Image src={getStaticImage("chenyun/reflection/走势图")} />
            </div>
          )}

          {/* 引导标志 - 只在所有线索查看完后显示-前往解决按钮-去做题 */}
          {isYinyuanAllViewed &&
            !isYinyuanSolved &&
            !showQuiz1 &&
            !showNarration2 &&
            !showQuiz2 &&
            !showSuccessAlert && (
              <div
                className="absolute top-0 w-full h-full"
                onClick={(e) => {
                  e.stopPropagation();
                  // 显示多选题1
                  setShowQuiz1(true);
                }}
              >
                <Image
                  className="translate-x-26 -translate-y-2"
                  src={getStaticImage("chenyun/reflection/点击前往解决")}
                  button
                />
              </div>
            )}
        </div>

        {/* 银元之战：线索1 */}
        <div
          className={cn([
            "absolute left-190 bottom-8 transition-all duration-300 delay-100 cursor-pointer",
            "hover:scale-105 hover:brightness-115",
            expandedFile === "yinyuan"
              ? "opacity-100 translate-y-0"
              : "opacity-0 translate-y-10 pointer-events-none",
          ])}
          onClick={() => {
            const clue = CLUE_DATA["yinyuan-clue1"];
            if (clue) {
              setCurrentClue(clue);
              setCurrentClueKey("yinyuan-clue1");
              setShowClueOverlay(true);
            }
          }}
        >
          {/* 线索图片 */}
          <Image src={getStaticImage("chenyun/reflection/线索1")} />
          {/* 搜索图标 */}
          {!clueStates["yinyuan-clue1"] && (
            <Image
              className="absolute left-1/2 top-[45%] pointer-events-none animate-search"
              src={getStaticImage("chenyun/reflection/探索")}
            />
          )}
          {/* 已浏览标记 */}
          {clueStates["yinyuan-clue1"] && (
            <div className="absolute left-1/2 -translate-x-1/2 bottom-0 ml-5">
              <span
                className={cn([
                  "text-[#ae6400] text-3xl font-bold",
                  "[text-shadow:_-4px_-4px_0_#ffffff,_4px_-4px_0_#ffffff,_-4px_4px_0_#ffffff,_4px_4px_0_#ffffff,_-5px_0_0_#ffffff,_5px_0_0_#ffffff,_0_-5px_0_#ffffff,_0_5px_0_#ffffff]",
                ])}
              >
                已浏览
              </span>
            </div>
          )}
        </div>
        {/* 银元之战：线索2 */}
        <div
          className={cn([
            "absolute left-265 bottom-8 transition-all duration-300 delay-150 cursor-pointer",
            "hover:scale-105 hover:brightness-115",
            expandedFile === "yinyuan"
              ? "opacity-100 translate-y-0"
              : "opacity-0 translate-y-10 pointer-events-none",
          ])}
          onClick={() => {
            const clue = CLUE_DATA["yinyuan-clue2"];
            if (clue) {
              setCurrentClue(clue);
              setCurrentClueKey("yinyuan-clue2");
              setShowClueOverlay(true);
            }
          }}
        >
          {/* 线索图片 */}
          <Image src={getStaticImage("chenyun/reflection/线索2")} />
          {/* 搜索图标 */}
          {!clueStates["yinyuan-clue2"] && (
            <Image
              className="absolute left-1/2 top-[45%] pointer-events-none animate-search"
              src={getStaticImage("chenyun/reflection/探索")}
            />
          )}
          {/* 已浏览标记 */}
          {clueStates["yinyuan-clue2"] && (
            <div className="absolute left-1/2 -translate-x-1/2 bottom-0 ml-5">
              <span
                className={cn([
                  "text-[#ae6400] text-3xl font-bold",
                  "[text-shadow:_-4px_-4px_0_#ffffff,_4px_-4px_0_#ffffff,_-4px_4px_0_#ffffff,_4px_4px_0_#ffffff,_-5px_0_0_#ffffff,_5px_0_0_#ffffff,_0_-5px_0_#ffffff,_0_5px_0_#ffffff]",
                ])}
              >
                已浏览
              </span>
            </div>
          )}
        </div>

        {/* 文件2:米棉之战 */}
        <div
          className={cn([
            "relative left-90 cursor-pointer transition-all duration-500",
            expandedFile === null || expandedFile === "mimian"
              ? "opacity-100 scale-100"
              : "opacity-0 scale-75 pointer-events-none",
            expandedFile !== "mimian" && "hover:scale-105 hover:brightness-115",
          ])}
          onClick={() => handleFileClick("mimian")}
        >
          <Image src={getStaticImage("chenyun/reflection/文件2")} />
          <span
            className={cn([
              "absolute left-0 bottom-1/2",
              "w-full bg-black/60 px-4 py-2 rounded-2xl text-center",
              "text-white text-3xl font-bold tracking-widest",
            ])}
          >
            {isMimianSolved ? "02米棉之战(已解决)" : "02米棉之战(未解决)"}
          </span>
        </div>

        {/* 米棉之战：线索-投机商情报 */}
        <div
          className={cn([
            "absolute left-70 bottom-8 transition-all duration-300 delay-100 cursor-pointer",
            "hover:scale-105 hover:brightness-115",
            expandedFile === "mimian"
              ? "opacity-100 translate-y-0"
              : "opacity-0 translate-y-10 pointer-events-none",
          ])}
          onClick={() => {
            const clue = CLUE_DATA["mimian-intelligence"];
            if (clue) {
              setCurrentClue(clue);
              setCurrentClueKey("mimian-intelligence");
              setShowClueOverlay(true);
            }
          }}
        >
          {/* 线索图片 */}
          <Image src={getStaticImage("chenyun/reflection/投机商情报桌上")} />
          {/* 搜索图标 */}
          {!clueStates["mimian-intelligence"] && (
            <Image
              className="absolute left-1/2 top-[45%] pointer-events-none animate-search"
              src={getStaticImage("chenyun/reflection/探索")}
            />
          )}
          {/* 已浏览标记 */}
          {clueStates["mimian-intelligence"] && (
            <div className="absolute left-1/2 -translate-x-1/2 bottom-0 ml-1">
              <span
                className={cn([
                  "text-[#ae6400] text-3xl font-bold whitespace-nowrap",
                  "[text-shadow:_-4px_-4px_0_#ffffff,_4px_-4px_0_#ffffff,_-4px_4px_0_#ffffff,_4px_4px_0_#ffffff,_-5px_0_0_#ffffff,_5px_0_0_#ffffff,_0_-5px_0_#ffffff,_0_5px_0_#ffffff]",
                ])}
              >
                已浏览
              </span>
            </div>
          )}
        </div>
        {/* 米棉之战：线索-全国物资分布 */}
        <div
          className={cn([
            "absolute left-135 bottom-8 transition-all duration-300 delay-150 cursor-pointer",
            "hover:scale-105 hover:brightness-115",
            expandedFile === "mimian"
              ? "opacity-100 translate-y-0"
              : "opacity-0 translate-y-10 pointer-events-none",
          ])}
          onClick={() => {
            const clue = CLUE_DATA["mimian-distribution"];
            if (clue) {
              setCurrentClue(clue);
              setCurrentClueKey("mimian-distribution");
              setShowClueOverlay(true);
            }
          }}
        >
          {/* 线索图片 */}
          <Image src={getStaticImage("chenyun/reflection/全国物资分布桌上")} />
          {/* 搜索图标 */}
          {!clueStates["mimian-distribution"] && (
            <Image
              className="absolute left-1/2 top-[45%] pointer-events-none animate-search"
              src={getStaticImage("chenyun/reflection/探索")}
            />
          )}
          {/* 已浏览标记 */}
          {clueStates["mimian-distribution"] && (
            <div className="absolute left-1/2 -translate-x-1/2 bottom-0 ml-3">
              <span
                className={cn([
                  "text-[#ae6400] text-3xl font-bold whitespace-nowrap",
                  "[text-shadow:_-4px_-4px_0_#ffffff,_4px_-4px_0_#ffffff,_-4px_4px_0_#ffffff,_4px_4px_0_#ffffff,_-5px_0_0_#ffffff,_5px_0_0_#ffffff,_0_-5px_0_#ffffff,_0_5px_0_#ffffff]",
                ])}
              >
                已浏览
              </span>
            </div>
          )}
        </div>

        {/* 米棉之战：消息（对话线索） */}
        <div
          className={cn([
            "absolute left-155 -top-118 transition-all duration-300 delay-200 cursor-pointer",
            "hover:scale-105 hover:brightness-115",
            expandedFile === "mimian"
              ? "opacity-100 translate-y-0"
              : "opacity-0 -translate-y-10 pointer-events-none",
          ])}
          onClick={() => {
            const clue = CLUE_DATA["mimian-dialogue"];
            if (clue) {
              setCurrentClue(clue);
              setCurrentClueKey("mimian-dialogue");
              setShowClueOverlay(true);
            }
          }}
        >
          <Image src={getStaticImage("chenyun/reflection/对话气泡")} button />
          {/* 未倾听时显示三个点动画 */}
          {!clueStates["mimian-dialogue"] && (
            <div className="absolute left-1/2 -translate-x-1/2 top-1/2 -translate-y-1/2 flex items-center justify-center">
              <div className="animate-dots flex gap-2">
                <span className="w-3 h-3 bg-gray-500 rounded-full inline-block" />
                <span className="w-3 h-3 bg-gray-500 rounded-full inline-block" />
                <span className="w-3 h-3 bg-gray-500 rounded-full inline-block" />
              </div>
            </div>
          )}
          {/* 已倾听标记 */}
          {clueStates["mimian-dialogue"] && (
            <div className="absolute left-1/2 -translate-x-1/2 bottom-16">
              <span
                className={cn([
                  "text-[#ae6400] text-3xl font-bold whitespace-nowrap",
                  "[text-shadow:_-4px_-4px_0_#ffffff,_4px_-4px_0_#ffffff,_-4px_4px_0_#ffffff,_4px_4px_0_#ffffff,_-5px_0_0_#ffffff,_5px_0_0_#ffffff,_0_-5px_0_#ffffff,_0_5px_0_#ffffff]",
                ])}
              >
                已倾听
              </span>
            </div>
          )}
        </div>

        {/* 电话 - 只有银元之战有 */}
        <div className="absolute right-50.5 -top-41">
          <div className="relative">
            {/* 响铃图标 */}
            {!clueStates["yinyuan-phone"] && expandedFile === "yinyuan" && (
              <Image
                className="absolute left-[45%] -translate-x-1/2 -top-32 animate-bounce"
                src={getStaticImage("chenyun/reflection/电话响")}
              />
            )}
            {/* 电话 */}
            <Image
              src={getStaticImage("chenyun/reflection/电话")}
              button
              onClick={() => {
                if (expandedFile !== "yinyuan") return;
                const clue = CLUE_DATA["yinyuan-phone"];
                if (clue) {
                  setCurrentClue(clue);
                  setCurrentClueKey("yinyuan-phone");
                  setShowClueOverlay(true);
                }
              }}
            />
            {/* 已接听标记 */}
            {clueStates["yinyuan-phone"] && expandedFile === "yinyuan" && (
              <div className="absolute left-[40%] -translate-x-1/2 bottom-0">
                <span
                  className={cn([
                    "text-[#ae6400] text-3xl font-bold",
                    "[text-shadow:_-4px_-4px_0_#ffffff,_4px_-4px_0_#ffffff,_-4px_4px_0_#ffffff,_4px_4px_0_#ffffff,_-5px_0_0_#ffffff,_5px_0_0_#ffffff,_0_-5px_0_#ffffff,_0_5px_0_#ffffff]",
                  ])}
                >
                  已接听
                </span>
              </div>
            )}
          </div>
        </div>
      </div>

      {/* 拼图盒 */}
      <Image
        className="absolute left-4 bottom-4"
        src={getStaticImage("components/拼图盒")}
      />

      {/* 视频播放层 */}
      {playingVideo && (
        <div className="absolute inset-0 z-40">
          <Video
            src={VIDEO_CONFIG[playingVideo].src}
            autoPlay
            showSkipButton
            onEnded={handleVideoEnd}
            className="w-full h-full"
          />
        </div>
      )}

      {/* 旁白层（包含欢迎语和视频后的旁白） */}
      <Narration
        text={narrationText}
        visible={showNarration}
        onClose={handleNarrationClose}
        enableAnimation={playingVideo === "yinyuan"}
      />

      {/* 提示框 */}
      {showAlert && (
        <Alert
          visible={showAlert}
          title={alertConfig.title}
          subtitle={alertConfig.subtitle}
          onClose={handleAlertClose}
        />
      )}

      {/* 展示线索 */}
      {currentClue && (
        <ClueOverlay
          visible={showClueOverlay}
          clue={currentClue}
          onClose={() => {
            setShowClueOverlay(false);
            // 标记当前线索为已查看
            if (currentClueKey) {
              const newClueStates = {
                ...clueStates,
                [currentClueKey]: true,
              };
              setClueStates(newClueStates);

              // 检查米棉之战所有线索是否都已查看
              const allMimianViewed =
                newClueStates["mimian-intelligence"] &&
                newClueStates["mimian-distribution"] &&
                newClueStates["mimian-dialogue"];

              // 如果所有米棉之战线索都已查看，自动显示单选题1
              if (allMimianViewed && !showMimianQuiz1) {
                setShowMimianQuiz1(true);
              }
            }
            setCurrentClue(null);
            setCurrentClueKey(null);
          }}
        />
      )}

      {/* 遮罩层 - 当银元之战所有线索都已查看时显示 */}
      <Spotlight
        targetSelector="#yinyuan-file"
        visible={
          isYinyuanAllViewed &&
          !showQuiz1 &&
          !showNarration2 &&
          !showQuiz2 &&
          !showSuccessAlert &&
          !isYinyuanSolved
        }
        padding={10}
        borderRadius={8}
      />

      {/* 成功提示框 - 多选题2答对后显示 */}
      <SuccessAlert
        visible={showSuccessAlert}
        title="恭喜你, 选择正确!"
        content="陈云同志的意见是:三管齐下,但核心是查封投机核心场所,逮捕首要分子。擒贼先擒王,打掉指挥部。"
        onContinue={() => {
          // 关闭聚光灯、标记银元之战为已解决、显示走势图
          setIsYinyuanSolved(true);
          setShowSuccessAlert(false);
        }}
      />

      {/* 走势图大图展示 - 使用 ExhibitOverlay */}
      <ExhibitOverlay
        visible={showTrendChartDetail}
        src="chenyun/reflection/银元价格走势图"
        description={`以上海为中心，代表"人民币信用"的绿色区域迅速覆盖全市，并向外辐射。`}
        clickableAreas={[
          {
            name: "走势图",
            // 假设走势图在图片的中心区域，可以根据实际图片调整位置
            position: { left: 20, top: 20, width: 60, height: 60 },
            onClick: () => {
              // 点击走势图：隐藏文件上的走势图图标，播放米棉之战视频
              setShowTrendChartIcon(false);
              setShowTrendChartDetail(false);
              // 播放米棉之战视频
              setPlayingVideo("mimian");
            },
          },
        ]}
        onClose={() => {
          setShowTrendChartDetail(false);
          // 普通关闭：进入米棉之战（展开米棉之战文件）
          // setExpandedFile("mimian");
        }}
      />

      {/* 多选题1 - 点击引导图标后显示 */}
      <MultipleChoiceQuizPanel
        visible={showQuiz1}
        title="面对银元投机狂潮,你认为首要突破口是? ()"
        options={[
          { value: "A", label: "A. 政治攻势（警告、约谈）" },
          { value: "B", label: "B. 经济手段（抛售银元,以银元打银元）" },
          { value: "C", label: "C. 舆论动员（宣传人民币信用,发动群众）" },
        ]}
        correctAnswer={["A", "B", "C"]}
        errorMessage="单一措施效果有限,请尝试综合施策。"
        minSelections={1}
        maxSelections={3}
        minSelectionsErrorMessage="单一措施效果有限,请尝试综合施策。"
        submitText="提交"
        onSubmit={(values, isCorrect) => {
          if (isCorrect) {
            // 关闭多选题1，显示旁白文字（图2）
            setShowQuiz1(false);
            setNarration2Text(
              `六月五日,上海政府抛出十万银元,力图以银元制服银元,使价格回跌。全市举行了"反对银元投机,保障人民生活"的游行和宣传。上海市军委会主任陈毅在全市集会上警告投机奸商"赶快洗手不干,否则勿谓言之不预"。但这两手收效仍微。十万银元被投机商人一吸而空,六月七日银元每元的价格涨到一千八百元人民币。陈云同志判断:'单纯的经济手段已不足以震慑敌人,必须辅以坚定的行政与法律手段。`
            );
            setShowNarration2(true);
          }
        }}
        onError={(error) => {
          console.log("错误信息:", error);
        }}
      />

      {/* 旁白文字2（图2）- 多选题1答对后显示 */}
      <Narration
        text={narration2Text}
        visible={showNarration2}
        onClose={() => {
          setShowNarration2(false);
          // 关闭旁白后显示多选题2
          setShowQuiz2(true);
        }}
        enableAnimation={false}
      />

      {/* 多选题2（图3）- 关闭旁白后显示 */}
      <MultipleChoiceQuizPanel
        visible={showQuiz2}
        title="面对投机商的猖狂反扑,下一步应采取何种决定性措施?"
        options={[
          { value: "A", label: "A. 加大银元抛售量,耗尽投机资本。" },
          { value: "B", label: "B. 查封投机核心场所,逮捕首要分子。" },
          { value: "C", label: "C. 颁布法令,严禁银元计价流通。" },
        ]}
        correctAnswer={["A", "B", "C"]}
        errorMessage="单一措施效果有限,请尝试综合施策。"
        minSelections={1}
        maxSelections={3}
        minSelectionsErrorMessage="单一措施效果有限,请尝试综合施策。"
        submitText="提交"
        onSubmit={(values, isCorrect) => {
          if (isCorrect) {
            // 关闭多选题2，显示成功提示框
            setShowQuiz2(false);
            setShowSuccessAlert(true);
          }
        }}
        onError={(error) => {
          console.log("错误信息:", error);
        }}
      />

      {/* 米棉之战 - 单选题1（图1） */}
      <SingleChoiceQuizPanel
        visible={showMimianQuiz1}
        title='题目1（单选题）:投机商集中冲击"两白一黑"的核心目的是( )。'
        options={[
          { value: "A", label: "A. 满足市场需求" },
          { value: "B", label: "B. 扰乱经济秩序、动摇政权" },
        ]}
        correctAnswer="B"
        errorMessage="很抱歉,你选错了!请你再思考一下吧!"
        onSubmit={(value, isCorrect) => {
          if (isCorrect) {
            setShowMimianQuiz1(false);
            setShowMimianSuccessAlert(true);
            setMimianSuccessAlertContent("恭喜你,选择正确!");
          }
        }}
      />

      {/* 米棉之战 - 成功提示框1 */}
      <SuccessAlert
        visible={
          showMimianSuccessAlert &&
          mimianSuccessAlertContent === "恭喜你,选择正确!"
        }
        title="恭喜你,选择正确!"
        onContinue={() => {
          setShowMimianSuccessAlert(false);
          setMimianSuccessAlertContent("");
          // 显示旁白1（图2）
          setShowMimianNarration1(true);
        }}
      />

      {/* 米棉之战 - 旁白1（图2） */}
      <Narration
        text="为了打击投机资本势力,面对上海米价、纱价等上涨,又同时影响到整个华东和华北、中南等地的情况。陈云于1949年7月17日率领中财委抵达上海,开展了一系列的举措,7月27日至8月15日,陈云主持召开了华东、华北、华中、东北、西北5个大区的财经会议,商讨解决上海和全国面临的严峻经济形势问题和对策。"
        visible={showMimianNarration1}
        onClose={() => {
          setShowMimianNarration1(false);
          // 显示单选题2
          setShowMimianQuiz2(true);
        }}
        enableAnimation={false}
      />

      {/* 米棉之战 - 单选题2（图3） */}
      <SingleChoiceQuizPanel
        visible={showMimianQuiz2}
        title="你觉得此时解决上海和全国面临的严峻经济形势问题的对策应该是( )。"
        options={[
          { value: "A", label: "A. 局部限购" },
          { value: "B", label: "B. 增发货币" },
          { value: "C", label: "C. 全国调运+集中抛售" },
        ]}
        correctAnswer="C"
        errorMessage="很抱歉,你选错了!请你再思考一下吧!"
        onSubmit={(value, isCorrect) => {
          if (isCorrect) {
            setShowMimianQuiz2(false);
            setShowMimianSuccessAlert(true);
            setMimianSuccessAlertContent(
              `恭喜你,选择正确!结合当时市场情况,陈云同志在会上做出了"全国一盘棋"的指示。全国统筹调运粮食、棉花、煤炭填补缺口,筑牢物资基础。关键节点集中抛售,让跟风囤货的投机商无力承接,因亏本和高利贷纷纷破产,快速平抑物价、稳固人民币地位。`
            );
          } else {
            // 根据选项显示不同的错误信息
            if (value === "A") {
              setShowMimianSuccessAlert(true);
              setMimianSuccessAlertContent(
                "很抱歉,你选错了!当时物价上涨已波及多地区,局部限购无法阻止投机商转移物资炒作。上海米、棉依赖外部供应,本地物资匮乏,限购既不解决缺口,还会加剧民众恐慌,扰乱市场秩序。请你再思考一下吧!"
              );
            } else if (value === "B") {
              setShowMimianSuccessAlert(true);
              setMimianSuccessAlertContent(
                "很抱歉,你选错了!当时国民党滥发货币导致的贬值阴影未消,民众对新货币缺乏信任。此时增发人民币,会使货币供应量远超物资总量,重蹈贬值覆辙,削弱人民币信用,让投机气焰更盛。请你再思考一下吧!"
              );
            }
          }
        }}
      />

      {/* 米棉之战 - 成功提示框2（单选题2答对后） */}
      <SuccessAlert
        visible={
          showMimianSuccessAlert &&
          mimianSuccessAlertContent.includes("全国一盘棋")
        }
        title="恭喜你,选择正确!"
        content={mimianSuccessAlertContent}
        onContinue={() => {
          setShowMimianSuccessAlert(false);
          setMimianSuccessAlertContent("");
          // 显示旁白2（图4）
          setShowMimianNarration2(true);
        }}
      />

      {/* 米棉之战 - 错误提示框（单选题2答错后） */}
      <SuccessAlert
        visible={
          showMimianSuccessAlert &&
          mimianSuccessAlertContent.includes("很抱歉") &&
          !mimianSuccessAlertContent.includes("全国一盘棋")
        }
        title="很抱歉,你选错了!"
        content={mimianSuccessAlertContent}
        onContinue={() => {
          setShowMimianSuccessAlert(false);
          setMimianSuccessAlertContent("");
          // 重新显示单选题2
          setShowMimianQuiz2(true);
        }}
      />

      {/* 米棉之战 - 旁白2（图4） */}
      <Narration
        text={`根据"全国一盘棋"的指示,中央政府通过全国范围内的物资调配体系,从多个区域调运米、棉、煤等关键物资支援上海。可是地方在落实推进过程中碰到了现实问题,作为陈云同志的特派员,你应该如何与地方沟通。`}
        visible={showMimianNarration2}
        onClose={() => {
          setShowMimianNarration2(false);
          // 显示单选题3
          setShowMimianQuiz3(true);
        }}
        enableAnimation={false}
      />

      {/* 米棉之战 - 单选题3（图5） */}
      <SingleChoiceQuizPanel
        visible={showMimianQuiz3}
        title='某地方粮站反馈"本地冬储粮不足,不愿外运"。'
        options={[
          { value: "A", label: "A. 强制调运,否则追责" },
          {
            value: "B",
            label: "B. 中央已协调东北补充常州冬储粮,先保障全国物价稳定",
          },
        ]}
        correctAnswer="B"
        errorMessage="地方抵触,调运延误多天"
        onSubmit={(value, isCorrect) => {
          if (isCorrect) {
            setShowMimianQuiz3(false);
            setShowMimianSuccessAlert(true);
            setMimianSuccessAlertContent(
              "恭喜你,选择正确!地方配合,调运按时推进。"
            );
          } else {
            setShowMimianQuiz3(false);
            setShowMimianSuccessAlert(true);
            setMimianSuccessAlertContent(
              "很抱歉,你选错了!地方抵触,调运延误多天。请你再思考一下吧!"
            );
          }
        }}
      />

      {/* 米棉之战 - 单选题3成功/错误提示 */}
      <SuccessAlert
        visible={
          showMimianSuccessAlert &&
          (mimianSuccessAlertContent.includes("地方配合") ||
            mimianSuccessAlertContent.includes("地方抵触"))
        }
        title={
          mimianSuccessAlertContent.includes("恭喜")
            ? "恭喜你,选择正确!"
            : "很抱歉,你选错了!"
        }
        content={mimianSuccessAlertContent}
        onContinue={() => {
          setShowMimianSuccessAlert(false);
          setMimianSuccessAlertContent("");
          if (mimianSuccessAlertContent.includes("地方配合")) {
            // 答对后显示单选题4
            setShowMimianQuiz4(true);
          } else {
            // 答错后重新显示单选题3
            setShowMimianQuiz3(true);
          }
        }}
      />

      {/* 米棉之战 - 单选题4（图6） */}
      <SingleChoiceQuizPanel
        visible={showMimianQuiz4}
        title="某地方棉农担心外运后本地纱厂缺原料。"
        options={[
          { value: "A", label: "A. 全国优先上海,本地暂时忍耐" },
          {
            value: "B",
            label: "B. 上海纱厂稳定后,会优先供应本地布匹,实现全国共赢",
          },
        ]}
        correctAnswer="B"
        errorMessage="棉农抵触,调运量减少"
        onSubmit={(value, isCorrect) => {
          if (isCorrect) {
            setShowMimianQuiz4(false);
            setShowMimianSuccessAlert(true);
            setMimianSuccessAlertContent(
              "恭喜你,选择正确!棉农支持,调运量足额完成。"
            );
          } else {
            setShowMimianQuiz4(false);
            setShowMimianSuccessAlert(true);
            setMimianSuccessAlertContent(
              "很抱歉,你选错了!棉农抵触,调运量减少。请你再思考一下吧!"
            );
          }
        }}
      />

      {/* 米棉之战 - 单选题4成功/错误提示 */}
      <SuccessAlert
        visible={
          showMimianSuccessAlert &&
          (mimianSuccessAlertContent.includes("棉农支持") ||
            mimianSuccessAlertContent.includes("棉农抵触"))
        }
        title={
          mimianSuccessAlertContent.includes("恭喜")
            ? "恭喜你,选择正确!"
            : "很抱歉,你选错了!"
        }
        content={mimianSuccessAlertContent}
        onContinue={() => {
          setShowMimianSuccessAlert(false);
          setMimianSuccessAlertContent("");
          if (mimianSuccessAlertContent.includes("棉农支持")) {
            // 答对后显示旁白3
            setShowMimianNarration3(true);
          } else {
            // 答错后重新显示单选题4
            setShowMimianQuiz4(true);
          }
        }}
      />

      {/* 米棉之战 - 旁白3（图7） */}
      <Narration
        text="在以陈云为首的中财委的统一部署下,人民政府在全国范围内调配粮食、棉布和煤炭等商品,在准备充分后,政府开始行动。11月25日,市场物价处在高峰,进入总攻阶段。"
        visible={showMimianNarration3}
        onClose={() => {
          setShowMimianNarration3(false);
          // 显示单选题5
          setShowMimianQuiz5(true);
        }}
        enableAnimation={false}
      />

      {/* 米棉之战 - 单选题5（图8） */}
      <SingleChoiceQuizPanel
        visible={showMimianQuiz5}
        title="弹出选择题:此时,以下哪种举措能够一举获得胜利?"
        options={[
          {
            value: "A",
            label:
              "A:突然性、连续性大量抛售。在全国各地同时行动,上海、武汉、西安等地国营公司连续降价抛售粮棉,不给投机资本喘息之机",
          },
          {
            value: "B",
            label: `B:逐步降价,配合舆论引导,每日小幅降价,并通过报纸宣传政府物资充足,试图"劝退"投机商`,
          },
        ]}
        correctAnswer="A"
        errorMessage="很抱歉,你选错了!投机商此前曾吃下政府平价抛售物资获利。逐步降价加舆论引导难让其信服,他们会持续囤货,政府储备会被消耗,反而让投机商掌控节奏,无法遏制物价上涨。请你再思考一下吧!"
        onSubmit={(value, isCorrect) => {
          if (isCorrect) {
            setShowMimianQuiz5(false);
            setShowMimianSuccessAlert(true);
            setMimianSuccessAlertContent(
              "恭喜你,选择正确!这契合米棉之战史实,多地同步大量抛售,让借高利贷囤货的投机商措手不及。连续抛售使其无力承接,只得亏本抛售,最终纷纷破产,快速稳住物价。"
            );
          } else {
            setShowMimianQuiz5(false);
            setShowMimianSuccessAlert(true);
            setMimianSuccessAlertContent(
              "很抱歉,你选错了!投机商此前曾吃下政府平价抛售物资获利。逐步降价加舆论引导难让其信服,他们会持续囤货,政府储备会被消耗,反而让投机商掌控节奏,无法遏制物价上涨。请你再思考一下吧!"
            );
          }
        }}
      />

      {/* 米棉之战 - 单选题5成功/错误提示 */}
      <SuccessAlert
        visible={
          showMimianSuccessAlert &&
          (mimianSuccessAlertContent.includes("这契合米棉之战史实") ||
            mimianSuccessAlertContent.includes("投机商此前曾吃下"))
        }
        title={
          mimianSuccessAlertContent.includes("恭喜")
            ? "恭喜你,选择正确!"
            : "很抱歉,你选错了!"
        }
        content={mimianSuccessAlertContent}
        onContinue={() => {
          setShowMimianSuccessAlert(false);
          setMimianSuccessAlertContent("");
          if (mimianSuccessAlertContent.includes("这契合米棉之战史实")) {
            // 答对后显示旁白4
            setShowMimianNarration4(true);
          } else {
            // 答错后重新显示单选题5
            setShowMimianQuiz5(true);
          }
        }}
      />

      {/* 米棉之战 - 旁白4（图9） */}
      <Narration
        text='毛泽东:"这场经济战线上的"淮海战役",其意义不亚于一场军事决战,它证明了我们不仅会打仗,也能管好经济。"'
        visible={showMimianNarration4}
        onClose={() => {
          setShowMimianNarration4(false);
          // 显示旁白5（结束语）
          setShowMimianNarration5(true);
        }}
        enableAnimation={false}
      />

      {/* 米棉之战 - 旁白5（结束语） */}
      <Narration
        text='从"银元之战"查封投机枢纽、稳固人民币根基,到"米棉之战"全国统筹调运、集中抛售击溃投机势力,这场经济战线的"淮海战役",不仅平定了物价、安定了民心,更印证了"全国一盘棋"的战略智慧与制度优势。当市场秩序重归稳定,新生政权在经济领域站稳脚跟,这份由陈云同志等老一辈革命家铸就的治理经验,也为新时代经济建设埋下了思想伏笔,等待我们在传承中探索新的实践路径。'
        visible={showMimianNarration5}
        onClose={() => {
          setShowMimianNarration5(false);
          // 标记米棉之战为已解决
          setIsMimianSolved(true);
        }}
        enableAnimation={false}
      />
    </div>
  );
};

export default ChenyunReflection;