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/place4/场景4展品1",
  2: "chenyun/place4/场景4展品2",
};
const ChenyunPlace4 = () => {
  const navigate = useNavigate();
  const { moduleName } = useParams<{
    moduleName: string;
  }>();

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

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

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

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

  const handleOpenExhibit = (index: 1 | 2) => {
    if (index === 1) {
      // 展品1：点击时同时打开展品和引导对话
      setActiveExhibitId(1);
      setGuideVisible(true);
      setGuideStep(0);
    } else {
      // 展品2：点击时同时打开展品和引导对话
      setActiveExhibitId(2);
      setGuideVisible2(true);
      setGuideStep2(0);
    }
  };

  // 监听GuideSteps步骤变化，仅同步当前步骤
  const handleGuideStepChange = (step: number) => {
    setGuideStep(step);
  };

  const handleGuideStepChange2 = (step: number) => {
    setGuideStep2(step);
  };

  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/place4/场景4`),
      }}
    >
      {/* 标题 */}
      <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}/place3`);
          }
        }}
      />

      {/* 展品1 */}
      <Cursor
        className="absolute left-180 top-120"
        onClick={() => handleOpenExhibit(1)}
        read={visited.has(1)}
      />
      {/* 展品2 */}
      <Cursor
        className="absolute right-2 top-100"
        onClick={() => handleOpenExhibit(2)}
        read={visited.has(2)}
      />

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

      {/* 遮罩层 */}
      <ExhibitOverlay
        visible={activeExhibitId !== null}
        src={activeExhibitId ? exhibitSrcMap[activeExhibitId] : ""}
        onOpen={() => {
          if (activeExhibitId === 1) {
            triggerPuzzleAnimation(6);
          }
        }}
        onClose={() => {
          if (activeExhibitId !== null) {
            markExhibitVisited(place, activeExhibitId);
          }
          setActiveExhibitId(null);
        }}
      />

      {/* 展品1的引导对话 */}
      <GuideSteps
        visible={guideVisible}
        onVisibleChange={setGuideVisible}
        currentStep={guideStep}
        onStepChange={handleGuideStepChange}
        showMask={false}
        highlightSelectors={[]}
        zIndex={10000}
      >
        <GuideStepsItem speaker="student">
          这组史料看起来陈云前往中央苏区了，他在中央苏区主要负责哪些工作呢？
        </GuideStepsItem>
        <GuideStepsItem speaker="guide">
          1932年3月，陈云担任中共临时中央政治局常委，兼任全国总工会党团书记。1933年1月，陈云离开上海前往中央苏区首府瑞金，继续参加中共中央和全国总工会的领导工作。
        </GuideStepsItem>
        <GuideStepsItem speaker="guide">
          虽然陈云在中央苏区的任务主要是领导工人运动，但是陈云总是能针对一些棘手的经济问题提出较出色的建议。
        </GuideStepsItem>
        <GuideStepsItem speaker="guide">
          在中央苏区时期，陈云也关注和积极参与解决了许多经济难题。1934年，在中共六届五中全会上，陈云被选为中央政治局委员、常委，兼任中央白区工作部部长。
        </GuideStepsItem>
      </GuideSteps>

      {/* 展品2的引导对话 */}
      <GuideSteps
        visible={guideVisible2}
        onVisibleChange={setGuideVisible2}
        currentStep={guideStep2}
        onStepChange={handleGuideStepChange2}
        showMask={false}
        highlightSelectors={[]}
        zIndex={10000}
      >
        <GuideStepsItem speaker="student">
          苏区的经济工作一定不简单，陈云是如何开展工作的呢？
        </GuideStepsItem>
        <GuideStepsItem speaker="guide">
          中央苏区时期的经济斗争，是陈云经济工作能力的“淬炼场”。陈云分析了“左”倾经济政策的表现、危害以及原因。
        </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 ChenyunPlace4;