import { useState, useEffect } from "react";
import { createPortal } from "react-dom";
import { Image } from "@/components";
import ExperimentTitle from "./ExperimentTitle";
import { selectableTools, correctAnswers } from "./constants";
import { useDragAndDrop, useDropZone } from "@/hooks/useDragAndDrop";
import { getStaticImage } from "@/utils";

interface Tool {
  src: string;
  name: string;
}

interface SelectedTool extends Tool {
  id: string;
}

interface Step2SelectPageProps {
  onNext?: () => void;
}

export default function Step2SelectPage({ onNext }: Step2SelectPageProps) {
  const [selectedTools, setSelectedTools] = useState<SelectedTool[]>([]);
  const [isSubmitted, setIsSubmitted] = useState(false);
  const [isCorrect, setIsCorrect] = useState(false);
  const {
    isDragging,
    dragData,
    mousePosition,
    startDrag,
    endDrag,
    isPointInElement,
  } = useDragAndDrop<Tool>();
  const { dropZoneRef, isOver, checkIsOver } = useDropZone();

  // 获取可用的工具列表（过滤掉已选择的）
  const availableTools = selectableTools.filter(
    (tool) => !selectedTools.some((selected) => selected.name === tool.name)
  );

  // 开始拖拽工具
  const handleMouseDown = (tool: Tool, e: React.MouseEvent) => {
    // 如果已经提交且答案正确，则不允许拖拽
    if (isSubmitted && isCorrect) {
      return;
    }
    startDrag(tool, e);
  };

  // 监听鼠标位置，检查是否在放置区域上
  useEffect(() => {
    if (isDragging) {
      checkIsOver(mousePosition.x, mousePosition.y);
    }
  }, [isDragging, mousePosition, checkIsOver]);

  // 监听鼠标释放，处理拖拽结束
  useEffect(() => {
    if (!isDragging) return;

    const handleMouseUp = () => {
      if (
        dragData &&
        isPointInElement(mousePosition.x, mousePosition.y, dropZoneRef.current)
      ) {
        // 检查是否已经添加过这个工具
        const isAlreadyAdded = selectedTools.some(
          (tool) => tool.name === dragData.name
        );

        if (!isAlreadyAdded) {
          const newTool: SelectedTool = {
            ...dragData,
            id: `selected-${Date.now()}`,
          };
          setSelectedTools([...selectedTools, newTool]);
        }
      }
      endDrag();
    };

    window.addEventListener("mouseup", handleMouseUp);
    return () => window.removeEventListener("mouseup", handleMouseUp);
  }, [
    isDragging,
    dragData,
    mousePosition,
    selectedTools,
    endDrag,
    isPointInElement,
    dropZoneRef,
  ]);

  // 清空选择
  const handleClear = () => {
    setSelectedTools([]);
    setIsSubmitted(false);
    setIsCorrect(false);
  };

  // 提交选择
  const handleSubmit = () => {
    if (selectedTools.length === 0) {
      // alert("请至少选择一个工具！");
      return;
    }

    // 验证答案
    const selectedNames = selectedTools.map((tool) => tool.name);

    // 检查数量是否一致
    if (selectedNames.length !== correctAnswers.length) {
      setIsSubmitted(true);
      setIsCorrect(false);
      return;
    }

    // 检查每个选择的工具是否都在正确答案中
    const allCorrect = selectedNames.every((name) =>
      correctAnswers.includes(name)
    );

    setIsSubmitted(true);
    setIsCorrect(allCorrect);
  };

  // 删除已选工具
  const handleRemoveTool = (id: string) => {
    // 如果已经提交且答案正确，则不允许删除
    if (isSubmitted && isCorrect) {
      return;
    }
    setSelectedTools(selectedTools.filter((tool) => tool.id !== id));
  };

  return (
    <>
      <ExperimentTitle
        title="02实验工具选择"
        description="我们刚刚学习了实验所需要的所有工具，现在来手动选择一下哪些工具是需要应用在本次实验中的。"
      />

      {/* 主要内容区域 */}
      <div className="flex gap-8 mt-10">
        {/* 左侧：可拖拽选项 */}
        <div className="flex-1">
          <div className="bg-[#3d98cd] text-white text-center py-3 rounded-t-lg">
            <h2 className="text-2xl font-bold">可拖拽选项</h2>
          </div>
          <div className="backdrop-blur-sm border-2 border-[#3d98cd] rounded-b-lg p-6 min-h-[500px]">
            {availableTools.length === 0 ? (
              <div className="flex items-center justify-center h-full text-gray-400 text-xl">
                所有工具已选择完毕
              </div>
            ) : (
              <div className="grid grid-cols-3 gap-6">
                {availableTools.map((tool, index) => {
                  const isBeingDragged =
                    isDragging && dragData?.name === tool.name;
                  const isDragDisabled = isSubmitted && isCorrect;

                  return (
                    <div
                      key={index}
                      onMouseDown={(e) => handleMouseDown(tool, e)}
                      className={`flex flex-col items-center transition-transform select-none ${
                        isDragDisabled
                          ? "cursor-not-allowed opacity-50"
                          : "cursor-move hover:scale-105"
                      } ${isBeingDragged ? "opacity-30" : ""}`}
                    >
                      <div className="rounded-lg p-4 w-full">
                        <Image
                          src={tool.src}
                          className="w-full h-32 object-contain mb-2 pointer-events-none"
                        />
                      </div>
                      <p className="text-center text-lg font-semibold text-gray-700 mt-2">
                        {tool.name}
                      </p>
                    </div>
                  );
                })}
              </div>
            )}
          </div>
        </div>

        {/* 右侧：实验工具区域 */}
        <div className="flex-1 relative">
          <div className="bg-[#3d98cd] text-white text-center py-3 rounded-t-lg">
            <h2 className="text-2xl font-bold">实验工具区域</h2>
          </div>
          <div
            ref={dropZoneRef}
            className={`backdrop-blur-sm border-2 border-[#3d98cd] rounded-b-lg p-6 min-h-[500px] transition-colors ${
              isOver ? "bg-blue-50 border-blue-400" : ""
            }`}
          >
            {/* 提交后的结果显示 */}
            {isSubmitted ? (
              <div className="flex flex-col items-center justify-center h-full">
                {isCorrect ? (
                  <>
                    <p className="text-green-500 text-3xl font-bold mb-4">
                      选择正确，继续实验吧
                    </p>
                  </>
                ) : (
                  <>
                    <p className="text-red-500 text-3xl font-bold mb-8">
                      选择错误，请重新选择
                    </p>
                    <div className="text-center">
                      <p className="text-blue-400 text-2xl font-semibold mb-4">
                        答案提示
                      </p>
                      <p className="text-blue-400 text-xl">
                        {correctAnswers.join("、")}
                      </p>
                    </div>
                  </>
                )}
              </div>
            ) : selectedTools.length === 0 ? (
              <div className="flex items-center justify-center h-full text-gray-400 text-xl">
                拖拽工具到这里
              </div>
            ) : (
              <div className="grid grid-cols-3 gap-6">
                {selectedTools.map((tool) => (
                  <div
                    key={tool.id}
                    className="flex flex-col items-center relative group"
                  >
                    <div className="rounded-lg p-4 w-full">
                      <Image
                        src={tool.src}
                        className="w-full h-32 object-contain mb-2"
                      />
                    </div>
                    <p className="text-center text-lg font-semibold text-gray-700 mt-2">
                      {tool.name}
                    </p>
                    {/* 删除按钮 - 答案正确后隐藏 */}
                    {!(isSubmitted && isCorrect) && (
                      <button
                        onClick={() => handleRemoveTool(tool.id)}
                        className="absolute top-2 right-2 bg-red-500 hover:bg-red-600 text-white rounded-full w-8 h-8 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity shadow-lg"
                        title="删除"
                      >
                        ×
                      </button>
                    )}
                  </div>
                ))}
              </div>
            )}
          </div>

          {/* 底部按钮 */}
          {!isSubmitted || !isCorrect ? (
            <div className="absolute bottom-0 left-1/2 translate-y-1/2 -translate-x-1/2 flex justify-center gap-8 mt-8">
              <button
                onClick={handleClear}
                className="bg-gray-400 hover:bg-gray-500 text-white px-12 py-4 rounded-full text-2xl font-bold shadow-lg transition-colors"
              >
                清空
              </button>
              <button
                onClick={handleSubmit}
                className="bg-[#3d98cd] hover:bg-[#2d7aad] text-white px-12 py-4 rounded-full text-2xl font-bold shadow-lg transition-colors"
              >
                提交
              </button>
            </div>
          ) : null}
        </div>
      </div>

      {/* 底部提示文字或下一步按钮 */}
      <div className="text-center mt-20">
        {isSubmitted && isCorrect ? (
          <Image
            onClick={onNext}
            className="absolute bottom-4 right-6 cursor-pointer"
            src={getStaticImage("components/按钮-下一步.png")}
            button={true}
          />
        ) : (
          // <button
          //   className="bg-blue-400 hover:bg-blue-500 text-white px-20 py-5 rounded-full text-3xl font-bold shadow-2xl transition-all hover:scale-105"
          // >
          //   下一步
          // </button>
          <p className="text-blue-400 text-3xl font-semibold">
            通过拖拽的方式，将正确选择拖拽到实验工具区域内吧。
          </p>
        )}
      </div>

      {/* 拖拽预览 - 使用 Portal 渲染到 body，避免受 scale 影响 */}
      {isDragging &&
        dragData &&
        createPortal(
          <div
            className="fixed pointer-events-none z-[9999]"
            style={{
              left: mousePosition.x,
              top: mousePosition.y,
              transform: "translate(-50%, -50%)",
            }}
          >
            <div className="flex flex-col items-center opacity-80 bg-white rounded-lg shadow-xl p-4">
              <Image src={dragData.src} className="w-24 h-24 object-contain" />
              <p className="text-sm font-semibold text-gray-700 mt-2">
                {dragData.name}
              </p>
            </div>
          </div>,
          document.body
        )}
    </>
  );
}