import { useState, useCallback } from "react";
import {
  ExhibitOverlay,
  Title,
  Image,
  Cursor,
  BambooPuzzleGame,
} from "@/components";
import { SuccessAlert } from "@/components/layout";
import { getBackgroundImage, getStaticImage } from "@/lib/utils";
import { useNavigate, useParams } from "react-router-dom";

const starName = "huangyanpei";

const exhibitSrcMap: Record<1 | 2, string> = {
  1: "huangyanpei/place7/9_004",
  2: "huangyanpei/place7/场景7展品2",
};

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

  const [activeExhibitId, setActiveExhibitId] = useState<1 | 2 | null>(null);
  const [visited, setVisited] = useState<Set<number>>(new Set());
  const [showGame, setShowGame] = useState(false);
  const [gameCompleted, setGameCompleted] = useState(false);
  const [showSuccessAlert, setShowSuccessAlert] = useState(false);

  const handleOpenExhibit = (index: 1 | 2) => {
    setActiveExhibitId(index);
  };

  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(`huangyanpei/place7/9_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}/place6`);
          }
        }}
      />

      <Cursor
        className="absolute left-68 top-55"
        onClick={() => handleOpenExhibit(1)}
        read={visited.has(1)}
      />
      <Cursor
        className="absolute left-160 bottom-50"
        onClick={() => {
          // 如果游戏已完成，不再打开
          if (!gameCompleted) {
            setShowGame(true);
          }
        }}
        read={gameCompleted}
      />

      {completed && (
        <Image
          className="absolute bottom-0 right-0"
          src={getStaticImage("huangyanpei/place7/9btn")}
          button
          onClick={() => {
            navigate(`/${moduleName}/${starName}/home`);
          }}
        />
      )}

      <ExhibitOverlay
        visible={activeExhibitId !== null}
        src={activeExhibitId ? exhibitSrcMap[activeExhibitId] : ""}
        onClose={() => {
          if (activeExhibitId !== null) {
            setVisited((prev) => {
              const next = new Set(prev);
              next.add(activeExhibitId);
              return next;
            });
          }
          setActiveExhibitId(null);
        }}
      />

      <BambooPuzzleGame
        visible={showGame}
        onClose={() => {
          setShowGame(false);
        }}
        onComplete={() => {
          // 游戏完成后，显示成功提示
          setShowGame(false);
          setShowSuccessAlert(true);
        }}
      />

      <SuccessAlert
        visible={showSuccessAlert}
        title="拼单杠成功！"
        onContinue={useCallback(() => {
          console.log("onContinue called, showSuccessAlert:", showSuccessAlert);
          // 直接设置为 false，不使用函数式更新
          setShowSuccessAlert(false);
          setGameCompleted(true);
          setVisited((prev) => {
            const next = new Set(prev);
            next.add(2);
            return next;
          });
        }, [showSuccessAlert])}
        onClose={useCallback(() => {
          console.log("onClose called, showSuccessAlert:", showSuccessAlert);
          // 直接设置为 false，不使用函数式更新
          setShowSuccessAlert(false);
          setGameCompleted(true);
          setVisited((prev) => {
            const next = new Set(prev);
            next.add(2);
            return next;
          });
        }, [showSuccessAlert])}
      />
    </div>
  );
};

export default HuangyanpeiPlace7;