shanghai-residences/src/pages/luxun/reflection/scene3.tsx

import { getBackgroundImage, getPublicPath, getStaticImage } from "@/lib/utils";
import { useState, useEffect } from "react";
import { useNavigate, useParams } from "react-router-dom";
import {
  Image,
  GuideSteps,
  GuideStepsItem,
  StudyGuideModal,
  EndingOverlay,
} from "@/components";
import { SingleChoiceQuizPanel } from "@/components/layout/quiz";
import SuccessAlert from "@/components/layout/alert/success-alert";
import { usePuzzleAnimation } from "@/contexts/PuzzleAnimationContext";

const starName = "luxun";

// 提示图标位置类型
type HintPosition =
  | "luxun1"
  | "guanzhu"
  | "piping"
  | "jiaguo"
  | "luxun2"
  | "none";

const LuxunReflectionScene3 = () => {
  //碎片动画触发方法
  const { triggerPuzzleAnimation } = usePuzzleAnimation();
  const navigate = useNavigate();
  const { moduleName } = useParams<{
    moduleName: string;
  }>();
  const [showGuanzhu, setShowGuanzhu] = useState(false); // 是否显示"关注底层"
  const [showPiping, setShowPiping] = useState(false); // 是否显示"批判现实"
  const [showJiaguo, setShowJiaguo] = useState(false); // 是否显示"家国情怀"
  const [hintPosition, setHintPosition] = useState<HintPosition>("luxun1"); // 提示图标位置
  const [showQuiz1, setShowQuiz1] = useState(false); // 是否显示题目1（关注底层）
  const [showQuiz2, setShowQuiz2] = useState(false); // 是否显示题目2（批判现实）
  const [showQuiz3, setShowQuiz3] = useState(false); // 是否显示题目3（家国情怀）
  const [completedQuiz1, setCompletedQuiz1] = useState(false); // 题目1是否完成
  const [completedQuiz2, setCompletedQuiz2] = useState(false); // 题目2是否完成
  const [completedQuiz3, setCompletedQuiz3] = useState(false); // 题目3是否完成
  const [showSummary, setShowSummary] = useState(false); // 是否显示总结
  const [completionGuideVisible, setCompletionGuideVisible] = useState(false); // 通关提示对话是否显示

  const [showGuideModal, setShowGuideModal] = useState(true);
  // 成功提示相关状态
  const [showSuccessAlert, setShowSuccessAlert] = useState(false);
  const [successMessage, setSuccessMessage] = useState("");
  // 结束语覆盖层是否已关闭
  const [endingOverlayFinished, setEndingOverlayFinished] = useState(false);
  const [showEndingOverlay, setShowEndingOverlay] = useState(false);

  const allCompleted = completedQuiz1 && completedQuiz2 && completedQuiz3;
  const progress =
    (completedQuiz1 ? 1 : 0) +
    (completedQuiz2 ? 1 : 0) +
    (completedQuiz3 ? 1 : 0);
  const totalTasks = 3;

  // 当显示总结后，延迟1秒显示通关提示对话
  useEffect(() => {
    if (showSummary) {
      const timer = setTimeout(() => {
        setCompletionGuideVisible(true);
        triggerPuzzleAnimation(15);
      }, 500);
      return () => clearTimeout(timer);
    }
  }, [showSummary]);

  // 点击"鲁迅1"的处理
  const handleLuxun1Click = () => {
    // 同时显示三个选项
    setShowGuanzhu(true);
    setShowPiping(true);
    setShowJiaguo(true);
    // 提示图标会根据完成状态自动显示在对应的选项上
  };

  // 点击"关注底层"的处理
  const handleGuanzhuClick = () => {
    if (!showGuanzhu || completedQuiz1) return; // 必须先点击"鲁迅1"且未完成
    setShowQuiz1(true);
  };

  // 点击"批判现实"的处理
  const handlePipingClick = () => {
    if (!completedQuiz1 || completedQuiz2) return; // 必须先完成题目1且未完成题目2
    setShowQuiz2(true);
  };

  // 点击"家国情怀"的处理
  const handleJiaguoClick = () => {
    if (!completedQuiz2 || completedQuiz3) return; // 必须先完成题目2且未完成题目3
    setShowQuiz3(true);
  };

  // 题目1提交处理（关注底层）
  const handleQuiz1Submit = (value: string, isCorrect: boolean) => {
    if (isCorrect) {
      setCompletedQuiz1(true);
      setShowQuiz1(false);
      // 提示图标会自动移动到"批判现实"旁边（根据完成状态）
      // 显示成功提示
      setSuccessMessage("鲁迅的文字始终聚焦底层百姓的苦难与希望。");
      setShowSuccessAlert(true);
    }
  };

  // 题目2提交处理（批判现实）
  const handleQuiz2Submit = (value: string, isCorrect: boolean) => {
    if (isCorrect) {
      setCompletedQuiz2(true);
      setShowQuiz2(false);
      // 提示图标会自动移动到"家国情怀"旁边（根据完成状态）
      // 显示成功提示
      setSuccessMessage("鲁迅以文字批判旧时代的黑暗，唤醒国人的觉醒。");
      setShowSuccessAlert(true);
    }
  };

  // 题目3提交处理（家国情怀）
  const handleQuiz3Submit = (value: string, isCorrect: boolean) => {
    if (isCorrect) {
      setCompletedQuiz3(true);
      setShowQuiz3(false);
      setHintPosition("luxun2"); // 提示图标移动到"鲁迅2"旁边
      // 显示成功提示
      setSuccessMessage("鲁迅一生辗转，只为唤醒国人，守护家国。");
      setShowSuccessAlert(true);
    }
  };

  // 点击"鲁迅2"的处理
  const handleLuxun2Click = () => {
    if (allCompleted) {
      setShowSummary(true);
      setHintPosition("none"); // 隐藏提示图标
    }
  };

  return (
    <div
      className="select-none flex justify-between w-full h-full bg-cover bg-center bg-no-repeat gap-10 relative"
      style={{
        backgroundImage: getBackgroundImage(
          `${starName}/reflection/scene3/底图`
        ),
      }}
    >
      {/* 离开按钮 */}
      <Image
        className="absolute right-5 top-5 z-10"
        src={getStaticImage(`${starName}/reflection/scene1/离开`)}
        button
        onClick={() => {
          if (moduleName && starName) {
            navigate(`/${moduleName}/${starName}/reflection2`);
          }
        }}
      />

      {/* 左侧：鲁迅的文学足迹 - 地图区域 */}
      <div className="w-[44.5%] h-full relative">
        {/* 关注底层 - 同时显示，但按顺序启用 */}
        {showGuanzhu && (
          <img
            className={`absolute top-20 left-40 transition-opacity ${
              completedQuiz1
                ? "opacity-50 cursor-default"
                : "cursor-pointer opacity-100"
            } ${!showGuanzhu ? "opacity-30 cursor-not-allowed" : ""}`}
            src={getStaticImage(`${starName}/reflection/scene3/关注底层`)}
            alt="关注底层"
            onClick={handleGuanzhuClick}
            style={{
              pointerEvents: completedQuiz1 ? "none" : "auto",
            }}
          />
        )}
        {/* 批判现实 - 同时显示，但按顺序启用 */}
        {showPiping && (
          <img
            className={`absolute top-60 left-40 transition-opacity ${
              completedQuiz2
                ? "opacity-50 cursor-default"
                : completedQuiz1
                ? "cursor-pointer opacity-100"
                : "opacity-30 cursor-not-allowed"
            }`}
            src={getStaticImage(`${starName}/reflection/scene3/批判现实`)}
            alt="批判现实"
            onClick={handlePipingClick}
            style={{
              pointerEvents:
                !completedQuiz1 || completedQuiz2 ? "none" : "auto",
            }}
          />
        )}
        {/* 家国情怀 - 同时显示，但按顺序启用 */}
        {showJiaguo && (
          <img
            className={`absolute top-100 left-40 transition-opacity ${
              completedQuiz3
                ? "opacity-50 cursor-default"
                : completedQuiz2
                ? "cursor-pointer opacity-100"
                : "opacity-30 cursor-not-allowed"
            }`}
            src={getStaticImage(`${starName}/reflection/scene3/家国情怀`)}
            alt="家国情怀"
            onClick={handleJiaguoClick}
            style={{
              pointerEvents:
                !completedQuiz2 || completedQuiz3 ? "none" : "auto",
            }}
          />
        )}

        {/* 提示图标 - 关注底层左侧（未完成题目1时显示） */}
        {showGuanzhu && !completedQuiz1 && (
          <div className="absolute top-32 left-86 z-10 pointer-events-none">
            <img
              className="animate-finger-bounce scale-x-[-1]"
              draggable={false}
              src={getStaticImage(
                `${starName}/reflection/scene1/鲁迅体悟点一点图标`
              )}
              alt="点一点图标"
            />
            <img
              draggable={false}
              src={getStaticImage(
                `${starName}/reflection/scene1/鲁迅体悟改版点一点`
              )}
              alt="点一点"
            />
          </div>
        )}

        {/* 提示图标 - 批判现实旁边（完成题目1但未完成题目2时显示） */}
        {showPiping && completedQuiz1 && !completedQuiz2 && (
          <div className="absolute top-75 left-85 z-10 pointer-events-none">
            <img
              className="animate-finger-bounce scale-x-[-1]"
              draggable={false}
              src={getStaticImage(
                `${starName}/reflection/scene1/鲁迅体悟点一点图标`
              )}
              alt="点一点图标"
            />
            <img
              draggable={false}
              src={getStaticImage(
                `${starName}/reflection/scene1/鲁迅体悟改版点一点`
              )}
              alt="点一点"
            />
          </div>
        )}

        {/* 提示图标 - 家国情怀旁边（完成题目2但未完成题目3时显示） */}
        {showJiaguo && completedQuiz2 && !completedQuiz3 && (
          <div className="absolute top-112 left-85 z-10 pointer-events-none">
            <img
              className="animate-finger-bounce scale-x-[-1]"
              draggable={false}
              src={getStaticImage(
                `${starName}/reflection/scene1/鲁迅体悟点一点图标`
              )}
              alt="点一点图标"
            />
            <img
              draggable={false}
              src={getStaticImage(
                `${starName}/reflection/scene1/鲁迅体悟改版点一点`
              )}
              alt="点一点"
            />
          </div>
        )}
      </div>

      {/* 右侧区域 */}
      <div className="flex-1 relative">
        {/* 任务进度 */}
        <div className="absolute top-6 left-[23.8%] w-[430px] h-51 flex justify-center items-center">
          <span className="text-white text-[54px] font-bold [text-shadow:_0px_0px_4px_#b37921,_6px_6px_4px_#b37921,_6px_6px_4px_#b37921,_6px_6px_4px_#b37921]">
            {allCompleted
              ? "任务进度已完成"
              : `任务进度：(${progress}/${totalTasks})`}
          </span>
        </div>
        {/* 鲁迅精神内核 */}
        <div className="absolute top-[calc(2.4rem+204px)] left-0 w-[995px] h-[525px] pt-16 px-10">
          <div className="flex items-center justify-between">
            {/* 提示图标 - 鲁迅1左侧 */}
            {hintPosition === "luxun1" && !showGuanzhu && (
              <div className="absolute left-80 top-60 flex items-center z-10 pointer-events-none">
                <img
                  className="animate-finger-bounce scale-x-[-1]"
                  draggable={false}
                  src={getStaticImage(
                    `${starName}/reflection/scene1/鲁迅体悟点一点图标`
                  )}
                  alt="点一点图标"
                />
                <img
                  draggable={false}
                  src={getStaticImage(
                    `${starName}/reflection/scene1/鲁迅体悟改版点一点`
                  )}
                  alt="点一点"
                />
              </div>
            )}
            <img
              className="cursor-pointer"
              src={getStaticImage(`${starName}/reflection/scene3/鲁迅1`)}
              alt="鲁迅精神内核"
              onClick={handleLuxun1Click}
            />
            <img
              className="cursor-pointer"
              src={getStaticImage(`${starName}/reflection/scene3/鲁迅2`)}
              alt="鲁迅精神内核"
              onClick={handleLuxun2Click}
            />
            {/* 提示图标 - 鲁迅2旁边 */}
            {hintPosition === "luxun2" && allCompleted && (
              <div className="absolute right-0 top-70  z-10 pointer-events-none">
                <img
                  className="animate-finger-bounce scale-x-[-1]"
                  draggable={false}
                  src={getStaticImage(
                    `${starName}/reflection/scene1/鲁迅体悟点一点图标`
                  )}
                  alt="点一点图标"
                />
                <img
                  draggable={false}
                  src={getStaticImage(
                    `${starName}/reflection/scene1/鲁迅体悟改版点一点`
                  )}
                  alt="点一点"
                />
              </div>
            )}
          </div>
        </div>
        {/* 精神总结 */}
        <div className="absolute bottom-2 right-8 w-[995px] h-[285px] px-2  py-12">
          {showSummary ? (
            // 点击鲁迅2后显示总结内容
            <div className="h-full px-8 overflow-y-auto custom-scrollbar">
              <div className="space-y-0">
                <div className="text-red-600 text-4xl font-bold leading-relaxed">
                  1.关注底层：他笔下的主角多是社会底层
                </div>
                <div className="text-red-600 text-4xl font-bold leading-relaxed">
                  2.批判现实：他以犀利的文笔批判封建传统
                </div>
                <div className="text-red-600 text-4xl font-bold leading-relaxed">
                  3.家国情怀：他致力于唤醒国人、守护家国
                </div>
              </div>
            </div>
          ) : (
            // 未完成时显示提示内容
            <div className="text-center text-black text-4xl font-bold">
              请跟随小手指点一点，拼接鲁迅的精神脉络！
            </div>
          )}
        </div>
      </div>

      {/* 继续前进按钮 - 只在结束语覆盖层关闭后显示 */}
      {endingOverlayFinished && (
        <Image
          className="absolute bottom-45 right-0"
          src={getStaticImage("components/place/离开场景")}
          button
          onClick={() => {
            navigate(`/${moduleName}/${starName}/home`);
          }}
        />
      )}

      {/* 题目1：关注底层 */}
      <SingleChoiceQuizPanel
        visible={showQuiz1}
        title="【单选】从闰土到祥林嫂，先生的文字始终看向："
        options={[
          { value: "A", label: "A. 底层普通百姓" },
          { value: "B", label: "B. 达官贵人" },
        ]}
        correctAnswer="A"
        errorMessage="不是哦，先生的文字从来不是为达官贵人而写哦！回忆闰土、祥林嫂的身份。"
        onSubmit={handleQuiz1Submit}
      />

      {/* 题目2：批判现实 */}
      <SingleChoiceQuizPanel
        visible={showQuiz2}
        title="【单选】先生的作品《狂人日记》《阿Q正传》都在揭露的是:"
        options={[
          { value: "A", label: "A. 旧时代的黑暗与愚昧" },
          { value: "B", label: "B. 生活中的小美好" },
        ]}
        correctAnswer="A"
        errorMessage="不是哦,先生的小说核心是批判而非歌颂哦!请结合阿Q的碎片回忆一下吧!"
        onSubmit={handleQuiz2Submit}
      />

      {/* 题目3：家国情怀 */}
      <SingleChoiceQuizPanel
        visible={showQuiz3}
        title={"【单选】先生辗转多地创作,核心追求是(\xa0\xa0\xa0\xa0)"}
        options={[
          { value: "A", label: "A. 唤醒国人,改变社会" },
          { value: "B", label: "B. 只为个人成名" },
        ]}
        correctAnswer="A"
        errorMessage='不是哦,先生的创作从不是为了自己哦!请回忆先生"弃医从文"的初心。'
        onSubmit={handleQuiz3Submit}
      />

      {/* 成功提示弹窗 */}
      <SuccessAlert
        visible={showSuccessAlert}
        title="恭喜你，答对啦！"
        content={successMessage}
        onClose={() => {
          setShowSuccessAlert(false);
          setSuccessMessage("");
        }}
        onContinue={() => {
          setShowSuccessAlert(false);
          setSuccessMessage("");
        }}
      />

      {/* 通关提示对话 */}
      <GuideSteps
        visible={completionGuideVisible}
        onVisibleChange={(visible) => {
          if (!visible) {
            setCompletionGuideVisible(false);
            setShowEndingOverlay(true);
          }
        }}
        showMask={false}
        highlightSelectors={[]}
        zIndex={10000}
      >
        <GuideStepsItem
          speaker="guide"
          audioSrc={getPublicPath("audio/luxun/mp3_luxun_33_02.mp3")}
        >
          恭喜你读懂了鲁迅的文字与初心,愿这份精神能伴你前行!
        </GuideStepsItem>
      </GuideSteps>

      <EndingOverlay
        visible={showEndingOverlay}
        text="愿你走过我的文学足迹，读懂文字的力量，心怀热望，直面生活！"
        animationSpeed={200}
        onContinue={() => {
          setShowEndingOverlay(false);
          setEndingOverlayFinished(true);
        }}
        audioSrc={getPublicPath("audio/luxun/mp3_luxun_34.mp3")}
      />

      <StudyGuideModal
        visible={showGuideModal}
        onContinue={() => {
          setShowGuideModal(false);
        }}
        verticalAlign="center"
        audioSrc={getPublicPath("audio/luxun/mp3_luxun_33.mp3")}
      >
        先生的每一步足迹、每一篇文字，都藏着不变的精神底色——拼出这份精神脉络，读懂先生的初心！
      </StudyGuideModal>
    </div>
  );
};

export default LuxunReflectionScene3;