import { useState } from "react";
import { Title, Image, Cursor } from "@/components";
import { getBackgroundImage, getStaticImage } from "@/lib/utils";
import { useNavigate, useParams } from "react-router-dom";
import ViseAssemblyDialog from "./scene3/ViseAssemblyDialog";

const starName = "huangyanpei";

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

  const [showDialog, setShowDialog] = useState(false);
  const [visited, setVisited] = useState<Set<number>>(new Set());

  if (!moduleName) {
    return null;
  }

  const progressCount = visited.size;
  const total = 1;
  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/reflection/scene3/11_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={() => {
          navigate(`/${moduleName}/${starName}/home`);
        }}
      />

      {/* 互动展品光标：组装台钳互动 */}
      <Cursor
        className="absolute right-100 bottom-55"
        onClick={() => setShowDialog(true)}
        read={visited.has(1)}
      />

      {/* 组装台钳互动弹窗 */}
      <ViseAssemblyDialog
        visible={showDialog}
        onClose={() => setShowDialog(false)}
        onComplete={() => {
          setVisited((prev) => {
            const next = new Set(prev);
            next.add(1);
            return next;
          });
        }}
      />

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

export default HuangyanpeiReflectionScene3;