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

export interface TowelSalesDialogProps {
  /** 是否可见 */
  visible?: boolean;
  /** 关闭回调 */
  onClose?: () => void;
  /** 完成回调 */
  onComplete?: () => void;
}

/**
 * 毛巾推销语拖拽弹窗
 * - 左边显示4个可选话术
 * - 右边显示3个毛巾（堆叠显示）
 * - 拖拽话术到毛巾上，点亮对应的毛巾
 * - 3个都点亮后完成
 */
const TowelSalesDialog = ({
  visible = true,
  onClose,
  onComplete,
}: TowelSalesDialogProps) => {
  const maskSrc = getStaticImage("components/蒙版遮罩");
  const backSrc = getStaticImage("components/关闭");

  // 毛巾图片资源（未点亮）
  const towel1 = getStaticImage("huangyanpei/reflection/scene4/12_002");
  const towel2 = getStaticImage("huangyanpei/reflection/scene4/12_003");
  const towel3 = getStaticImage("huangyanpei/reflection/scene4/12_004");

  // 毛巾图片资源（点亮）
  const towel1Lit = getStaticImage("huangyanpei/reflection/scene4/12_002_02");
  const towel2Lit = getStaticImage("huangyanpei/reflection/scene4/12_003_02");
  const towel3Lit = getStaticImage("huangyanpei/reflection/scene4/12_004_03");

  const { scale, offsetX, offsetY, DESIGN_WIDTH, DESIGN_HEIGHT } = useScale();
  const [mounted, setMounted] = useState(false);
  const [value, setValue] = useState<DragFillResult[]>([]);
  const completedRef = useRef(false);

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

  // 重置游戏状态
  useEffect(() => {
    if (visible) {
      setValue([]);
      completedRef.current = false;
    }
  }, [visible]);

  // 检查是否完成（3个毛巾都点亮）
  useEffect(() => {
    if (value.length === 3 && !completedRef.current) {
      completedRef.current = true;
      // 延迟一点时间让用户看到效果，然后完成
      setTimeout(() => {
        onComplete?.();
        onClose?.();
      }, 500);
    }
  }, [value, onComplete, onClose]);

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

  // 可选话术选项
  const options = useMemo(
    () => [
      {
        value: "option1",
        label: "这是中华职校生产的国货,质量比洋货还好!",
      },
      {
        value: "option2",
        label: "价格便宜,量大从优,诚信经营绝不掺假",
      },
      {
        value: "option3",
        label: "买国货就是支持实业救国,为国家出一份力!",
      },
      {
        value: "option4",
        label: "我只管赚钱,东西好不好不管哦",
      },
    ],
    []
  );

  // 处理拖拽结果变化
  const handleValueChange = useCallback((newValue: DragFillResult[]) => {
    // 限制最多3个
    if (newValue.length <= 3) {
      setValue(newValue);
    }
  }, []);

  // 检查毛巾是否被点亮
  const isTowelLit = useCallback(
    (towelId: string) => {
      return value.some((result) => result.blankId === towelId);
    },
    [value]
  );

  // 拖拽悬停状态
  const [hoveredTowel, setHoveredTowel] = useState<string | null>(null);

  // 样式
  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="towel-sales-dialog"
          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", "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-center px-30 py-16 pt-30 text-[#432800]">
                <div className="w-full h-full">
                  {/* 左侧：题目和可选话术 */}
                  <div className="flex justify-between gap-10">
                    {/* 题目文本 */}
                    <div className="mb-8">
                      <div className="text-5xl font-bold  mb-6">题目文本</div>
                      <div className="text-4xl  leading-relaxed">
                        从以下话术里，挑选3句组成你的推销语 (拖拽至对话框)
                      </div>
                    </div>

                    {/* 右侧：毛巾区域 */}
                    <div className="w-180 flex flex-col items-center">
                      {/* 答题区标签 */}
                      {/* <div className="text-4xl font-bold text-white mb-8">
                        答题区
                      </div> */}

                      {/* 毛巾堆叠区域 */}
                      <div className="relative w-full flex flex-col ">
                        {/* 毛巾1 */}
                        <div
                          className={cn(
                            "relative w-full  flex items-center justify-center transition-all duration-300 rounded-2xl"
                            // isTowelLit("towel1")
                            //   ? "opacity-100 border-[#f0be75]"
                            //   : hoveredTowel === "towel1"
                            //   ? "opacity-100 border-[#f0be75] bg-[#f0be75]/20"
                            //   : "opacity-100 border-transparent"
                          )}
                          onDragOver={(e) => {
                            e.preventDefault();
                            e.dataTransfer.dropEffect = "move";
                            if (!isTowelLit("towel1")) {
                              setHoveredTowel("towel1");
                            }
                          }}
                          onDragLeave={() => {
                            setHoveredTowel(null);
                          }}
                          onDrop={(e) => {
                            e.preventDefault();
                            setHoveredTowel(null);
                            const optionValue =
                              e.dataTransfer.getData("text/plain");
                            if (optionValue && !isTowelLit("towel1")) {
                              // 检查是否已经使用过这个选项
                              const alreadyUsed = value.some(
                                (r) => r.optionValue === optionValue
                              );
                              if (!alreadyUsed) {
                                handleValueChange([
                                  ...value,
                                  { blankId: "towel1", optionValue },
                                ]);
                              }
                            }
                          }}
                        >
                          <img
                            src={isTowelLit("towel1") ? towel1Lit : towel1}
                            alt="毛巾1"
                            className="w-full h-full object-contain"
                          />
                        </div>

                        {/* 毛巾2 */}
                        <div
                          className={cn(
                            "relative w-full  flex items-center justify-center transition-all duration-300 rounded-2xl"
                          )}
                          onDragOver={(e) => {
                            e.preventDefault();
                            e.dataTransfer.dropEffect = "move";
                            if (!isTowelLit("towel2")) {
                              setHoveredTowel("towel2");
                            }
                          }}
                          onDragLeave={() => {
                            setHoveredTowel(null);
                          }}
                          onDrop={(e) => {
                            e.preventDefault();
                            setHoveredTowel(null);
                            const optionValue =
                              e.dataTransfer.getData("text/plain");
                            if (optionValue && !isTowelLit("towel2")) {
                              // 检查是否已经使用过这个选项
                              const alreadyUsed = value.some(
                                (r) => r.optionValue === optionValue
                              );
                              if (!alreadyUsed) {
                                handleValueChange([
                                  ...value,
                                  { blankId: "towel2", optionValue },
                                ]);
                              }
                            }
                          }}
                        >
                          <img
                            src={isTowelLit("towel2") ? towel2Lit : towel2}
                            alt="毛巾2"
                            className="w-full h-full object-contain"
                          />
                        </div>

                        {/* 毛巾3 */}
                        <div
                          className={cn(
                            "relative w-full flex items-center justify-center transition-all duration-300 rounded-2xl"
                          )}
                          onDragOver={(e) => {
                            e.preventDefault();
                            e.dataTransfer.dropEffect = "move";
                            if (!isTowelLit("towel3")) {
                              setHoveredTowel("towel3");
                            }
                          }}
                          onDragLeave={() => {
                            setHoveredTowel(null);
                          }}
                          onDrop={(e) => {
                            e.preventDefault();
                            setHoveredTowel(null);
                            const optionValue =
                              e.dataTransfer.getData("text/plain");
                            if (optionValue && !isTowelLit("towel3")) {
                              // 检查是否已经使用过这个选项
                              const alreadyUsed = value.some(
                                (r) => r.optionValue === optionValue
                              );
                              if (!alreadyUsed) {
                                handleValueChange([
                                  ...value,
                                  { blankId: "towel3", optionValue },
                                ]);
                              }
                            }
                          }}
                        >
                          <img
                            src={isTowelLit("towel3") ? towel3Lit : towel3}
                            alt="毛巾3"
                            className="w-full h-full object-contain"
                          />
                        </div>
                      </div>
                    </div>
                  </div>

                  {/* 可选话术区域 */}
                  <div className="flex-1">
                    <div className="text-5xl font-bold  mb-6">答题区</div>
                    <div className="grid grid-cols-2 gap-y-8 gap-x-26 mt-12">
                      {options.map((option, index) => {
                        const isUsed = value.some(
                          (r) => r.optionValue === option.value
                        );
                        return (
                          <div
                            key={option.value}
                            className={cn(
                              " px-10 py-10 rounded-2xl border-3 text-3xl font-medium transition-all",
                              isUsed
                                ? "border-[#8b7355] bg-[#3d3329] text-[#a89378] cursor-not-allowed opacity-50"
                                : "border-[#79471f] bg-black/20 to-[#3a2f25] text-white cursor-move hover:border-[#f0be75] hover:shadow-[0_12px_40px_rgba(240,190,117,0.7)]"
                            )}
                            draggable={!isUsed}
                            onDragStart={(e) => {
                              if (isUsed) {
                                e.preventDefault();
                                return;
                              }
                              e.dataTransfer.setData(
                                "text/plain",
                                option.value
                              );
                            }}
                          >
                            {index + 1}. {option.label}
                          </div>
                        );
                      })}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </motion.div>
      )}
    </AnimatePresence>
  );

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

export default TowelSalesDialog;