import { useState, useRef } from "react";
import {
  ExhibitOverlay,
  Title,
  Image,
  Cursor,
  GuideSteps,
  GuideStepsItem,
  Video,
  type VideoRef,
} from "@/components";
import { useCursorController } from "@/hooks/useCursorController";
import { getBackgroundImage, getPublicPath, getStaticImage } from "@/lib/utils";
import { useNavigate, useParams } from "react-router-dom";

const starName = "sunzhongshan";

const exhibitSrcMap: Record<1 | 2 | 3 | 4, string> = {
  1: "sunzhongshan/place2/铁路计划图",
  2: "sunzhongshan/place2/陆军大元帅时佩带的指挥刀",
  3: "sunzhongshan/place2/917.9.10孙中山就任中华民国军政府海陆军大元帅留影",
  4: "sunzhongshan/place2/实业计划",
};

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

  const [activeExhibitId, setActiveExhibitId] = useState<1 | 2 | 3 | 4 | null>(
    null
  );
  const [visited, setVisited] = useState<Set<number>>(new Set());

  // Cursor 顺序控制：1 -> 2 -> 3 -> 4
  const { isEnabled } = useCursorController({
    initialEnabled: [1],
    dependencies: {
      2: [3],
      3: [4],
      4: [1],
    },
    visited: visited,
  });

  // 光标1的对话状态
  const [guide1Visible, setGuide1Visible] = useState(false);
  const [guide1Step, setGuide1Step] = useState(0);
  // 光标1的视频状态
  const [showVideo1, setShowVideo1] = useState(false);
  const video1Ref = useRef<VideoRef>(null);

  // 光标4的对话状态
  const [guide4Visible, setGuide4Visible] = useState(false);
  const [guide4Step, setGuide4Step] = useState(0);

  // 光标2的视频状态
  const [showVideo2, setShowVideo2] = useState(false);
  const video2Ref = useRef<VideoRef>(null);

  const handleOpenExhibit = (index: 1 | 2 | 3 | 4) => {
    setActiveExhibitId(index);
    // 根据不同的展品显示对应的对话，并重置进度
    if (index === 1) {
      setGuide1Step(0);
      setGuide1Visible(true);
    } else if (index === 4) {
      setGuide4Step(0);
      setGuide4Visible(true);
    }
  };

  const progressCount = visited.size;
  const total = 4;
  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(`sunzhongshan/place2/背景`),
      }}
    >
      <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}/place1`);
          }
        }}
      />
      {/* 光标1-铁路计划图 */}
      <Cursor
        className="absolute left-160 top-114"
        onClick={() => handleOpenExhibit(1)}
        read={visited.has(1)}
        disabled={!isEnabled(1)}
      />
      {/* 光标2-陆军大元帅时佩带的指挥刀 */}
      <Cursor
        className="absolute left-235 bottom-95"
        onClick={() => handleOpenExhibit(2)}
        read={visited.has(2)}
        disabled={!isEnabled(2)}
      />
      {/* 光标3-917.9.10孙中山就任中华民国军政府海陆军大元帅留影 */}
      <Cursor
        className="absolute left-241.5 top-119"
        onClick={() => handleOpenExhibit(3)}
        read={visited.has(3)}
        disabled={!isEnabled(3)}
      />
      {/* 光标4-实业计划 */}
      <Cursor
        className="absolute right-120 bottom-78"
        onClick={() => handleOpenExhibit(4)}
        read={visited.has(4)}
        disabled={!isEnabled(4)}
      />

      {completed && (
        <Image
          className="absolute bottom-5 right-115"
          src={getStaticImage("components/place/r-前进")}
          button
          onClick={() => {
            navigate(`/${moduleName}/${starName}/place3`);
          }}
        />
      )}

      <ExhibitOverlay
        visible={activeExhibitId !== null}
        src={activeExhibitId ? exhibitSrcMap[activeExhibitId] : ""}
        onClose={() => {
          const currentId = activeExhibitId;
          // 关闭展品框时，重置所有对话的进度并隐藏对话，确保遮罩层正确清理
          setGuide1Step(0);
          setGuide1Visible(false);
          setGuide4Step(0);
          setGuide4Visible(false);

          // 关闭展品框时，重置对应对话的进度并隐藏对话
          if (currentId === 1) {
            // 光标1：关闭窗口后播放视频
            setActiveExhibitId(null);
            setShowVideo1(true);
            return;
          } else if (currentId === 2) {
            // 光标2：关闭窗口后播放视频
            setActiveExhibitId(null);
            setShowVideo2(true);
            return;
          } else if (currentId === 4) {
            // 光标4：正常关闭，更新visited状态
          }
          if (currentId !== null) {
            setVisited((prev) => {
              const next = new Set(prev);
              next.add(currentId);
              return next;
            });
          }
          setActiveExhibitId(null);
        }}
      />

      {/* 光标1的对话 */}
      <GuideSteps
        visible={guide1Visible}
        currentStep={guide1Step}
        onStepChange={setGuide1Step}
        onVisibleChange={(nextVisible) => {
          setGuide1Visible(nextVisible);
        }}
        showMask={false}
        highlightSelectors={[]}
        zIndex={10000}
      >
        <GuideStepsItem speaker="student">
          这张大大的路线图好复杂,上面画满了铁路线,这是孙中山先生规划的吗?
        </GuideStepsItem>
        <GuideStepsItem speaker="guide">
          对!这是中国铁路总公司的路线图。孙中山先生辞去临时大总统后,致力于国家的实业建设。他认为"交通为实业之母,铁路又为交通之母"。要让国家强大,首先要发展实业,投身铁路规划与建设就是其中一项重要实践。
        </GuideStepsItem>
        <GuideStepsItem speaker="guide">
          旁边这本《实业计划》中译稿手稿,就是他对中国实业发展的整体构想,里面不仅有铁路,还有港口、工厂等规划。这个计划也是孙先生在上海居住期间完成的。
        </GuideStepsItem>
      </GuideSteps>

      {/* 光标1的视频 */}
      {showVideo1 && (
        <Video
          ref={video1Ref}
          src={getPublicPath("video/sunzhongshan/sunzhongshan_05.mp4")}
          className="fixed inset-0 z-[20000]"
          autoPlay
          playsInline
          showSkipButton
          onEnded={() => {
            setShowVideo1(false);
            // 修改cursor状态
            setVisited((prev) => {
              const next = new Set(prev);
              next.add(1);
              return next;
            });
          }}
        />
      )}

      {/* 光标4的对话 */}
      <GuideSteps
        visible={guide4Visible}
        currentStep={guide4Step}
        onStepChange={setGuide4Step}
        onVisibleChange={(nextVisible) => {
          setGuide4Visible(nextVisible);
        }}
        showMask={false}
        highlightSelectors={[]}
        zIndex={10000}
      >
        <GuideStepsItem speaker="student">
          真是一个宏伟的计划,可是在内忧外患的时局下,实现起来一定很艰难吧?
        </GuideStepsItem>
        <GuideStepsItem speaker="guide">
          是的,1913年3月"宋教仁案"将国民党和袁世凯方面的矛盾推向高峰。不愿坐视袁世凯窃取辛亥革命果实后独揽大权,革命党人发动了"二次革命"。可惜革命失败,孙中山先生被迫流亡海外。
        </GuideStepsItem>
        <GuideStepsItem speaker="guide">
          袁世凯趁机撤销了他"筹办全国铁路全权"的职务,把铁路公司的事权交给了北京政府交通部,公司就这样解散了。
        </GuideStepsItem>
      </GuideSteps>

      {/* 光标2的视频 */}
      {showVideo2 && (
        <Video
          ref={video2Ref}
          src={getPublicPath("video/sunzhongshan/sunzhongshan_06.mp4")}
          className="fixed inset-0 z-[20000]"
          autoPlay
          playsInline
          showSkipButton
          onEnded={() => {
            setShowVideo2(false);
            // 修改cursor状态
            setVisited((prev) => {
              const next = new Set(prev);
              next.add(2);
              return next;
            });
          }}
        />
      )}
    </div>
  );
};

export default SunzhongshanPlace2;