import { useState } from "react";
import {
  ExhibitOverlay,
  Title,
  Image,
  Cursor,
  Video,
  Overlay,
} from "@/components";
import { getBackgroundImage, getStaticImage, getPublicPath } from "@/lib/utils";
import { useNavigate, useParams } from "react-router-dom";

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

// 展品 ID 与资源路径映射
const exhibitSrcMap: Record<1 | 2 | 3, string> = {
  1: "chenyun/place5/场景5展品1",
  2: "chenyun/place5/场景5展品2",
  3: "chenyun/place5/场景5展品3",
};
// 展品描述映射
const exhibitDescriptionMap: Record<1 | 2 | 3, string> = {
  1: "",
  2: "延安时期因为国民党的封锁，陕甘宁边区经济困难。陈云转战陕甘宁边区主持财经工作，他遇到了很多经济难题。1944年新春伊始，陈云开始担任西北财经办事处副主任，工作转到财经方面，这是陈云以主要精力从事领导经济工作的开始。当时，陕甘宁边区在国民党严密封锁下，财经状况严峻，边区物价猛涨，老百姓日常生活必需的布匹和粮食十分缺乏。国民党顽固派封锁边区，企图“不让一粒粮、一尺布进入边区”，同时千方百计阻止边区食盐出口。",
  3: "",
};
const ChenyunPlace5 = () => {
  const navigate = useNavigate();
  const { moduleName } = useParams<{
    moduleName: string;
  }>();

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

  const handleOpenExhibit = (index: 1 | 2 | 3) => {
    if (index === 3) {
      // 展品3：播放视频，不打开展品
      setVideoVisible3(true);
      return;
    }
    setActiveExhibitId(index);
  };

  const progressCount = visited.size;
  const total = 3;
  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/place5/场景5`),
      }}
    >
      {/* 标题 */}
      <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}/place4`);
          }
        }}
      />

      {/* 展品1 */}
      <Cursor
        className="absolute left-30 top-70"
        onClick={() => handleOpenExhibit(1)}
        read={visited.has(1)}
      />
      {/* 展品2 */}
      <Cursor
        className="absolute left-107 top-72"
        onClick={() => handleOpenExhibit(2)}
        read={visited.has(2)}
      />

      {/* 展品3 */}
      <Cursor
        className="absolute right-170 top-84"
        onClick={() => handleOpenExhibit(3)}
        read={visited.has(3)}
      />

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

      {/* 展品3视频播放（全屏） */}
      {videoVisible3 && (
        <Video
          src={getPublicPath("video/chenyun/chenyun_07.mp4")}
          className="w-full h-full"
          autoPlay
          playsInline
          showSkipButton
          onEnded={() => {
            setVideoVisible3(false);
            setVisited((prev) => {
              const next = new Set(prev);
              next.add(3);
              return next;
            });
          }}
        />
      )}

      {/* 遮罩层 */}
      <ExhibitOverlay
        visible={activeExhibitId !== null}
        src={activeExhibitId ? exhibitSrcMap[activeExhibitId] : ""}
        description={
          activeExhibitId ? exhibitDescriptionMap[activeExhibitId] : undefined
        }
        autoPlayDescription={activeExhibitId === 2}
        onClose={() => {
          if (activeExhibitId !== null) {
            setVisited((prev) => {
              const next = new Set(prev);
              next.add(activeExhibitId);
              return next;
            });
          }
          setActiveExhibitId(null);
        }}
      />
    </div>
  );
};

export default ChenyunPlace5;