import { useState } from "react";
import {
  ExhibitOverlay,
  Title,
  Image,
  Cursor,
  GuideSteps,
  GuideStepsItem,
  StudyGuideModal,
} from "@/components";
import { getBackgroundImage, getStaticImage } from "@/lib/utils";
import { useNavigate, useParams } from "react-router-dom";
import { useChenyunStore } from "@/store/chenyunStore";
import { usePuzzleAnimation } from "@/contexts/PuzzleAnimationContext";

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

// 展品 ID 与资源路径映射
const exhibitSrcMap: Record<1 | 2, string> = {
  1: "chenyun/place8/场景8展品1",
  2: "chenyun/place8/场景8展品2",
};
const ChenyunPlace8 = () => {
  const navigate = useNavigate();
  const { moduleName } = useParams<{
    moduleName: string;
  }>();

  // 获取碎片动画触发方法
  const { triggerPuzzleAnimation } = usePuzzleAnimation();

  const [activeExhibitId, setActiveExhibitId] = useState<1 | 2 | null>(null);

  // 使用持久化的访问状态
  const place = "place8";
  const { isExhibitVisited, markExhibitVisited, getVisitedExhibits } =
    useChenyunStore();

  // 从 store 获取已访问的展品，转换为 Set 用于兼容现有代码
  const visitedExhibits = getVisitedExhibits(place);
  const visited = new Set(visitedExhibits);
  // 展品2的对话引导
  const [guideVisible, setGuideVisible] = useState(false);
  const [guideStep, setGuideStep] = useState(0);
  // 学习引导弹窗
  const [showGuideModal, setShowGuideModal] = useState(true);

  const handleOpenExhibit = (index: 1 | 2) => {
    setActiveExhibitId(index);
    // 如果是展品2，显示对话引导
    if (index === 2) {
      setGuideVisible(true);
      setGuideStep(0);
    }
  };

  // 监听对话引导步骤变化
  const handleGuideStepChange = (step: number) => {
    setGuideStep(step);
  };

  // 监听对话引导完成
  const handleGuideVisibleChange = (visible: boolean) => {
    setGuideVisible(visible);
  };

  const progressCount = visited.size;
  const total = 2;
  const completed = progressCount >= total;
  const subtitle = completed
    ? "探索该阶段相关资料(已完成)"
    : `探索该阶段相关资料(${progressCount}/${total})`;
  const subtitleClassName = completed
    ? "text-[#fff998] [text-shadow:_0_8px_8px_rgba(0,0,0,0.35),_0_0_16px_rgba(0,0,0,0.25)]"
    : undefined;
  return (
    <div
      className="w-full h-full bg-cover bg-center bg-no-repeat"
      style={{
        backgroundImage: getBackgroundImage(`chenyun/place8/场景8`),
      }}
    >
      {/* 标题 */}
      <Title
        title="建设时期·务实兴邦"
        subtitle={subtitle}
        subtitleClassName={subtitleClassName}
        className="absolute top-10 left-1/2 -translate-x-1/2"
      />

      {/* 返回上一章 */}
      <Image
        className="absolute right-5 top-5"
        src={getStaticImage("components/离开")}
        button
        onClick={() => {
          if (moduleName && starName) {
            navigate(`/${moduleName}/${starName}/place7`);
          }
        }}
      />

      {/* 展品1 */}
      <Cursor
        className="absolute right-175 top-75"
        onClick={() => handleOpenExhibit(1)}
        read={visited.has(1)}
      />
      {/* 展品2 */}
      <Cursor
        className="absolute right-100 bottom-55"
        onClick={() => handleOpenExhibit(2)}
        read={visited.has(2)}
      />

      {/* 继续前进 - 仅在完成所有展品后显示 */}
      {completed && (
        <Image
          className="absolute bottom-0 right-150"
          src={getStaticImage("chenyun/place8/继续前进6")}
          button
          onClick={() => {
            navigate(`/${moduleName}/${starName}/place9`);
          }}
        />
      )}

      {/* 遮罩层 */}
      <ExhibitOverlay
        visible={activeExhibitId !== null}
        src={activeExhibitId ? exhibitSrcMap[activeExhibitId] : ""}
        onOpen={() => {
          if (activeExhibitId === 1) {
            triggerPuzzleAnimation(11);
          }
        }}
        description={
          activeExhibitId === 1
            ? `打赢"银元之战""两白一黑"战役的过程彰显了中国共产党治理经济的卓越能力！这里有一份"一五"计划报告的手稿，陈云在"一五"计划的编制中做出了重大贡献。一九五四年，陈云的主要工作之一，就是主持编制第一个五年计划纲要。这次编制工作是在前四次基础上进行的，陈云提出计划编制工作中要注意几个问题：首先是工业投资金额，其次是市场供应和人民生活，第三是农业发展速度，这三个问题对编制计划有指导意义。第一个五年计划纲要草案的重点是优先发展重工业，特别是156项重点工程。当时陈云重点抓重工业建设和粮食保障，通过"统购统销"稳定粮价，为重点工程项目筑牢根基，亲手铺就了我国工业化的起步之路。`
            : undefined
        }
        onClose={() => {
          if (activeExhibitId !== null) {
            markExhibitVisited(place, activeExhibitId);
          }
          setActiveExhibitId(null);
        }}
      />

      {/* 展品2的对话引导 - 在展品遮罩层上方显示 */}
      <GuideSteps
        visible={guideVisible}
        onVisibleChange={handleGuideVisibleChange}
        currentStep={guideStep}
        onStepChange={handleGuideStepChange}
        showMask={false}
        highlightSelectors={[]}
        zIndex={10001}
      >
        <GuideStepsItem speaker="student">
          您讲的"统购统销"是不是和这里我们看到的粮票有直接关系啊？
        </GuideStepsItem>
        <GuideStepsItem speaker="guide">
          不错，随着大规模经济建设的展开，全国粮、棉、油等主要农产品严重紧缺，供求矛盾尖锐。陈云经过调查研究，反复比较，权衡利弊得失，终于下决心在农村征购，在城市配售的解决粮食问题的办法，也就是后来所说的"统购统销"。
        </GuideStepsItem>
        <GuideStepsItem speaker="guide">
          陈云说："只有采用这种办法，才能保证我国人民生活日益增长的需要，才能制止投机活动，保证市场物价的稳定，才能使发展国民经济第一个五年计划得以顺利地进行。"
        </GuideStepsItem>
      </GuideSteps>

      {/* 学习引导 */}
      <StudyGuideModal
        visible={showGuideModal}
        onContinue={() => setShowGuideModal(false)}
        ailgn="left"
      >
        1、场景中出现动态光点的展品表示未浏览，可通过点击光点来了解展品背后的故事，通过滚轮可以放大展品，浏览展品后蓝色动态光点会变为已浏览状态；
        {"\n"}
        2、在学习过程中会掉落拼图碎片，拼图碎片会自动收入拼图盒中，拼图盒可以点击查看当前拼图收集情况，点击单个拼图可以回到获得拼图的场景再次学习；
        {"\n"}
        3、所有动态光点的展品全部学习后才能进入下一个场景学习；
      </StudyGuideModal>
    </div>
  );
};

export default ChenyunPlace8;