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

const starName = "huangyanpei";

const exhibitSrcMap: Record<1 | 2 | 3 | 4 | 5, string> = {
  1: "huangyanpei/place4/6_006",
  2: "huangyanpei/place4/6_007",
  3: "huangyanpei/place4/6_008",
  4: "huangyanpei/place4/6_009",
  5: "huangyanpei/place4/6_010",
};

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

  const [activeExhibitId, setActiveExhibitId] = useState<1 | 3 | 4 | 5 | null>(
    null
  );
  const [visited, setVisited] = useState<Set<number>>(new Set());
  const { isEnabled } = useCursorController({
    initialEnabled: [3, 5],
    dependencies: {
      1: [3, 5],
      4: [1],
      // 2 已注释，不计入顺序
    },
    visited,
  });

  // 光标1的引导对话状态
  const [guide1Visible, setGuide1Visible] = useState(false);
  const [guide1Step, setGuide1Step] = useState(0);

  // 光标3、4的引导对话状态（在两者都浏览后显示）
  const [guide34Visible, setGuide34Visible] = useState(false);
  const [guide34Shown, setGuide34Shown] = useState(false);

  // 光标5的引导对话状态
  const [guide5Visible, setGuide5Visible] = useState(false);
  const [guide5Step, setGuide5Step] = useState(0);

  // 视频显示状态
  const [showVideo, setShowVideo] = useState(false);
  // 题目显示状态
  const [showQuiz, setShowQuiz] = useState(false);
  // 成功提示状态
  const [showSuccessAlert, setShowSuccessAlert] = useState(false);
  const videoRef = useRef<VideoRef>(null);

  const handleOpenExhibit = (index: 1 | 3 | 4 | 5) => {
    setActiveExhibitId(index);
    if (index === 1) {
      setGuide1Step(0);
      setGuide1Visible(true);
    }

    if (index === 4) {
      setGuide5Step(0);
      setGuide5Visible(true);
    }
  };

  // 监听visited变化，当光标3、4都浏览后显示引导对话
  useEffect(() => {
    if (visited.has(3) && visited.has(5) && !guide34Shown) {
      setGuide34Shown(true);
      setGuide34Visible(true);
    }
  }, [visited, guide34Shown]);

  // 处理题目提交
  const handleQuizSubmit = (value: string, isCorrect: boolean) => {
    if (isCorrect) {
      setShowQuiz(false);
      setShowSuccessAlert(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(`huangyanpei/place4/6_001`),
      }}
    >
      <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-42 top-102"
        onClick={() => handleOpenExhibit(1)}
        size={1}
        read={visited.has(1)}
        disabled={!isEnabled(1)}
      />
      {/* 光标2 */}
      {/* <Cursor
        className="absolute left-40 top-132"
        onClick={() => handleOpenExhibit(2)}
        read={visited.has(2)}
      /> */}
      {/* 光标3 */}
      <Cursor
        className="absolute left-125 top-100"
        onClick={() => handleOpenExhibit(3)}
        read={visited.has(3)}
        disabled={!isEnabled(3)}
      />
      {/* 光标4 */}
      <Cursor
        className="absolute right-62 top-102"
        onClick={() => handleOpenExhibit(4)}
        read={visited.has(4)}
        disabled={!isEnabled(4)}
      />
      {/* 光标5 */}
      <Cursor
        className="absolute right-205 top-110"
        onClick={() => handleOpenExhibit(5)}
        read={visited.has(5)}
        disabled={!isEnabled(5)}
      />

      {completed && (
        <Image
          className="absolute bottom-0 right-4"
          src={getStaticImage("components/place/继续前进")}
          button
          onClick={() => {
            navigate(`/${moduleName}/${starName}/place5`);
          }}
        />
      )}

      {/* 展品1、2、4出现描述 */}
      <ExhibitOverlay
        visible={activeExhibitId !== null}
        // description={
        //   activeExhibitId === 1 ||
        //   activeExhibitId === 2 ||
        //   activeExhibitId === 4
        //     ? "黄炎培先生一直怀揣着“教育救国”的理想，职业教育从来都和国家命运紧紧连在一起。1932年“一・二八”事变爆发，黄炎培立刻组织了抗日救国研究会，一边支援前线输送军需，一边维持地方秩序、稳定金融市场，还创办了“一・二八”残废院，专门收容受伤战士和无家可归的难民。“八・一三”抗战爆发后，他担任上海抗战后援会主席，组织民众设难民所、医疗队和后方医院，还成立了青年战地服务团，冒着枪林弹雨为前线军队服务。他自己不顾日机轰炸的危险，九次往返南京与上海之间，协助政府募集救国公债。正是这样的全民抗敌，粉碎了日军“一个月灭亡中国”的狂妄企图。这期间，1935年中华职业教育社还与荣氏三兄弟合作，在申新三厂办理劳动工自治区，对工人进行文化教育。"
        //     : undefined
        // }
        src={activeExhibitId ? exhibitSrcMap[activeExhibitId] : ""}
        onClose={() => {
          if (activeExhibitId !== null) {
            setVisited((prev) => {
              const next = new Set(prev);
              next.add(activeExhibitId);
              return next;
            });
          }
          setActiveExhibitId(null);
        }}
      />

      {/* 光标1的对话 */}
      <GuideSteps
        visible={guide1Visible}
        currentStep={guide1Step}
        onStepChange={setGuide1Step}
        onVisibleChange={(visible) => {
          setGuide1Visible(visible);
        }}
        showMask={false}
        zIndex={10000}
      >
        <GuideStepsItem
          speaker="student"
          audioSrc={getPublicPath("audio/huangyanpei/mp3_huangyanpei_13.mp3")}
        >
          真没想到中华职校还组织过义勇军！我们现在也会参加国防教育、志愿服务，当年的职业教育不仅教技能，还这么注重爱国主义教育呀？
        </GuideStepsItem>
        <GuideStepsItem
          speaker="guide"
          audioSrc={getPublicPath("audio/huangyanpei/mp3_huangyanpei_14.mp3")}
        >
          没错！黄炎培先生一直怀揣着“教育救国”的理想，职业教育从来都和国家命运紧紧连在一起。
        </GuideStepsItem>
        <GuideStepsItem speaker="guide">
          1932年“一・二八”事变爆发，黄炎培立刻组织了抗日救国研究会，一边支援前线输送军需，一边维持地方秩序、稳定金融市场，还创办了“一・二八”残废院，专门收容受伤战士和无家可归的难民。
        </GuideStepsItem>
        <GuideStepsItem speaker="guide">
          “八・一三”抗战爆发后，他担任上海抗战后援会主席，组织民众设难民所、医疗队和后方医院，还成立了青年战地服务团，冒着枪林弹雨为前线军队服务。他自己不顾日机轰炸的危险，九次往返南京与上海之间，协助政府募集救国公债。
        </GuideStepsItem>
        <GuideStepsItem speaker="guide">
          正是这样的全民抗敌，粉碎了日军“一个月灭亡中国”的狂妄企图。
        </GuideStepsItem>
      </GuideSteps>

      {/* 光标3、5的引导对话 */}
      <GuideSteps
        visible={guide34Visible}
        onVisibleChange={(visible) => {
          setGuide34Visible(visible);
          // 对话结束后播放视频
          if (!visible) {
            setShowVideo(true);
          }
        }}
        showMask={false}
        highlightSelectors={[]}
        zIndex={10000}
      >
        <GuideStepsItem
          speaker="student"
          audioSrc={getPublicPath("audio/huangyanpei/mp3_huangyanpei_11.mp3")}
        >
          职业教育这个词是黄炎培先生创造的吗？
        </GuideStepsItem>
        <GuideStepsItem
          speaker="guide"
          audioSrc={getPublicPath("audio/huangyanpei/mp3_huangyanpei_12.mp3")}
        >
          这个词不是他创造的，但体系是他建立的。1917年5月6日，黄炎培联合蔡元培、张謇等48位有识之士，在上海成立了“中华职业教育社”，并发表了《中华职业教育社宣言》。
        </GuideStepsItem>
        <GuideStepsItem speaker="guide">
          1918年，他在上海陆家浜创办中华职业学校，开设铁工、木工、珐琅、纽扣四科，招生广告明确写着“免学费、包分配”。首批招收78人，还推出了响亮的口号“双手万能、手脑并用”。
        </GuideStepsItem>
        <GuideStepsItem speaker="guide">
          这所学校特别厉害，教室和车间连在一起，学生可以一边学理论，一边练技能。学校铁工厂制作的台钳，后来还成了"国货精品"，甚至在巴拿马万国博览会上拿过金奖呢！
        </GuideStepsItem>
      </GuideSteps>

      {/* 光标4的对话 */}
      <GuideSteps
        visible={guide5Visible}
        currentStep={guide5Step}
        onStepChange={setGuide5Step}
        onVisibleChange={(visible) => {
          setGuide5Visible(visible);
        }}
        showMask={false}
        zIndex={10000}
      >
        <GuideStepsItem
          speaker="guide"
          audioSrc={getPublicPath("audio/huangyanpei/mp3_huangyanpei_15.mp3")}
        >
          这期间，1935年中华职业教育社还与荣氏三兄弟合作，再申新三厂办理劳动工自治区，对工人进行文化教育。
        </GuideStepsItem>
      </GuideSteps>

      {/* 视频播放 */}
      {showVideo && (
        <Video
          ref={videoRef}
          src={getPublicPath("video/huangyanpei/huangyanpei_05.mp4")}
          className="fixed inset-0 z-[20000]"
          autoPlay
          playsInline
          showSkipButton
          onEnded={() => {
            setShowVideo(false);
            setShowQuiz(true);
          }}
        />
      )}

      {/* 题目 */}
      <SingleChoiceQuizPanel
        visible={showQuiz}
        title={`【单选】中华职业学校首批招生78人,凭借(\xa0\xa0\xa0\xa0)口号和"免学费、包分配"的优待,开创了中国近代职业教育的先河。`}
        options={[
          { value: "A", label: "A. 学而优则仕" },
          { value: "B", label: "B. 双手万能、手脑并用" },
          { value: "C", label: "C. 实业救国、教育兴国" },
          { value: "D", label: "D. 民主科学、救国救民" },
        ]}
        correctAnswer="B"
        errorMessage="1918年黄炎培在上海创办中华职业学校，首批招78人，以“免学费、包分配”的实惠和“双手万能、手脑并用”的响亮口号，打破“学而优则仕”的传统观念，设铁工、木工、珐琅、纽扣科，把课堂与车间合一，开创了中国近代职业教育的先河。"
        onSubmit={handleQuizSubmit}
        zIndex={10001}
      />

      {/* 成功提示 */}
      <SuccessAlert
        visible={showSuccessAlert}
        onContinue={() => {
          setShowSuccessAlert(false);
        }}
        onClose={() => {
          setShowSuccessAlert(false);
        }}
      />
    </div>
  );
};

export default HuangyanpeiPlace4;