import { useState, useEffect, useMemo, useCallback } from "react";
import { createPortal } from "react-dom";
import { AnimatePresence, motion } from "framer-motion";
import { cn, getStaticImage } from "@/lib/utils";
import { Image } from "@/components";
import { useScale } from "@/contexts/ScaleContext";

export interface ChoiceDialog1Props {
  /** 是否可见 */
  visible?: boolean;
  /** 关闭回调 */
  onClose?: () => void;
  /** 选择回调 */
  onSelect?: (choice: "读书" | "没出息" | "女子不能上学") => void;
}

/**
 * 第一个选择弹窗：人物和三个选择
 * - 使用蒙版遮罩作为背景
 * - 显示人物10_004和三个选择选项
 */
const ChoiceDialog1 = ({
  visible = true,
  onClose,
  onSelect,
}: ChoiceDialog1Props) => {
  const maskSrc = getStaticImage("components/蒙版遮罩");
  const backSrc = getStaticImage("components/关闭");
  const characterSrc = getStaticImage("huangyanpei/reflection/scene2/10_004");
  const choice1Src = getStaticImage("huangyanpei/reflection/scene2/10_005");
  const choice2Src = getStaticImage("huangyanpei/reflection/scene2/10_006");
  const choice3Src = getStaticImage("huangyanpei/reflection/scene2/10_007");

  const { scale, offsetX, offsetY, DESIGN_WIDTH, DESIGN_HEIGHT } = useScale();
  const [mounted, setMounted] = useState(false);

  // SSR 兼容
  useEffect(() => {
    setMounted(true);
  }, []);

  const handleClose = useCallback(
    (e: React.MouseEvent<HTMLImageElement>) => {
      e.stopPropagation();
      onClose?.();
    },
    [onClose]
  );

  const handleChoiceClick = useCallback(
    (choice: "读书" | "没出息" | "女子不能上学") => {
      onSelect?.(choice);
      onClose?.();
    },
    [onSelect, onClose]
  );

  // 样式
  const overlayStyle = useMemo<React.CSSProperties>(
    () => ({
      position: "fixed",
      inset: 0,
      zIndex: 9999,
      pointerEvents: "none",
    }),
    []
  );

  const scaledContainerStyle = useMemo<React.CSSProperties>(
    () => ({
      position: "absolute",
      width: `${DESIGN_WIDTH}px`,
      height: `${DESIGN_HEIGHT}px`,
      left: `${offsetX}px`,
      top: `${offsetY}px`,
      transform: `scale(${scale})`,
      transformOrigin: "top left",
      overflow: "hidden",
    }),
    [scale, offsetX, offsetY, DESIGN_WIDTH, DESIGN_HEIGHT]
  );

  if (!mounted) return null;

  const content = (
    <AnimatePresence>
      {visible && (
        <motion.div
          key="choice-dialog-1"
          style={overlayStyle}
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          exit={{ opacity: 0 }}
          transition={{ duration: 0.3, ease: "easeInOut" }}
        >
          <div style={scaledContainerStyle}>
            <div
              className={cn(
                "absolute inset-0 flex flex-col items-center justify-center",
                "bg-black/70"
              )}
              style={{ pointerEvents: "auto" }}
            >
              {/* 背景蒙版 */}
              {maskSrc && (
                <Image
                  src={maskSrc}
                  className="absolute inset-0 w-full h-full object-cover select-none pointer-events-none"
                  aria-hidden
                />
              )}

              {/* 返回按钮 */}
              {onClose && (
                <Image
                  src={backSrc}
                  onClick={handleClose}
                  alt="返回"
                  className="absolute top-5 right-5 z-20"
                  button
                />
              )}

              {/* 内容区域 */}
              <div className="relative z-10 w-full h-full flex items-center justify-between px-20">
                {/* 人物 - 左侧 */}
                <div className="flex-shrink-0">
                  <img src={characterSrc} alt="人物" />
                </div>

                {/* 三个选择选项 - 右侧水平排列 */}
                <div className="flex items-center justify-center gap-16 flex-1">
                  {/* 选择A：读书 */}
                  <div
                    className="flex flex-col items-center cursor-pointer transition-transform duration-200 hover:scale-105 active:scale-95"
                    onClick={() => handleChoiceClick("读书")}
                  >
                    {/* 标签A */}
                    <div className="text-7xl font-bold text-[#ffa500] mb-3 [text-shadow:_3px_3px_0_#fff,_-3px_-3px_0_#fff,_3px_-3px_0_#fff,_-3px_3px_0_#fff]">
                      A
                    </div>
                    {/* 图标 */}
                    <img src={choice1Src} alt="读书" className="mb-3" />
                    {/* 文字说明 */}
                    <div className="text-black text-4xl text-center leading-relaxed font-bold">
                      读书只为
                      <br />
                      升官发财
                    </div>
                  </div>

                  {/* 选择B：没出息 */}
                  <div
                    className="flex flex-col items-center cursor-pointer transition-transform duration-200 hover:scale-105 active:scale-95"
                    onClick={() => handleChoiceClick("没出息")}
                  >
                    {/* 标签B */}
                    <div className="text-7xl font-bold text-[#ffa500] mb-3 [text-shadow:_3px_3px_0_#fff,_-3px_-3px_0_#fff,_3px_-3px_0_#fff,_-3px_3px_0_#fff]">
                      B
                    </div>
                    {/* 图标 */}
                    <img src={choice2Src} alt="没出息" className="mb-3" />
                    {/* 文字说明 */}
                    <div className="text-black text-4xl text-center leading-relaxed font-bold">
                      手工劳作
                      <br />
                      没出息
                    </div>
                  </div>

                  {/* 选择C：女子不能上学 */}
                  <div
                    className="flex flex-col items-center cursor-pointer transition-transform duration-200 hover:scale-105 active:scale-95"
                    onClick={() => handleChoiceClick("女子不能上学")}
                  >
                    {/* 标签C */}
                    <div className="text-7xl font-bold text-[#ffa500] mb-3 [text-shadow:_3px_3px_0_#fff,_-3px_-3px_0_#fff,_3px_-3px_0_#fff,_-3px_3px_0_#fff]">
                      C
                    </div>
                    {/* 图标 */}
                    <img src={choice3Src} alt="女子不能上学" className="mb-3" />
                    {/* 文字说明 */}
                    <div className="text-black text-4xl text-center leading-relaxed font-bold">
                      女子
                      <br />
                      不能上学
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </motion.div>
      )}
    </AnimatePresence>
  );

  return createPortal(content, document.body);
};

export default ChoiceDialog1;