import { Command } from "./Command";
import { isGroupLayer } from "../utils/layerHelper";

/**
 * 跨层级移动命令基类
 */
export class CrossLevelMoveCommand extends Command {
  constructor(options) {
    super({
      name: "跨层级移动",
      undoable: true,
    });

    this.layers = options.layers;
    this.layerManager = options.layerManager;
    this.canvas = options.canvas;

    // 移动相关参数
    this.layerId = options.layerId;
    this.fromContainerType = options.fromContainerType; // 'root' | 'child'
    this.toContainerType = options.toContainerType; // 'root' | 'child'
    this.fromParentId = options.fromParentId;
    this.toParentId = options.toParentId;
    this.newIndex = options.newIndex;
    this.oldIndex = options.oldIndex;

    // 保存状态用于撤销
    this.beforeState = null;
    this.afterState = null;
  }

  /**
   * 保存移动前的状态
   */
  saveBeforeState() {
    this.beforeState = {
      layerStructure: this.cloneLayerStructure(),
      fabricObjects: this.saveFabricObjectStates(),
    };
  }

  /**
   * 保存移动后的状态
   */
  saveAfterState() {
    this.afterState = {
      layerStructure: this.cloneLayerStructure(),
      fabricObjects: this.saveFabricObjectStates(),
    };
  }

  /**
   * 克隆图层结构
   */
  cloneLayerStructure() {
    return JSON.parse(
      JSON.stringify(
        this.layers.value.map((layer) => ({
          id: layer.id,
          name: layer.name,
          parentId: layer.parentId,
          children: layer.children
            ? layer.children.map((child) => ({
                id: child.id,
                name: child.name,
                parentId: child.parentId,
              }))
            : [],
          isBackground: layer.isBackground,
          isFixed: layer.isFixed,
          visible: layer.visible,
          locked: layer.locked,
        }))
      )
    );
  }

  /**
   * 保存fabric对象状态
   */
  saveFabricObjectStates() {
    const states = {};

    // 只保存fabric对象的容器关系，不保存具体的属性
    this.layers.value.forEach((layer) => {
      if (layer.fabricObject) {
        states[layer.id] = {
          isInCanvas: this.canvas
            ? this.canvas.contains(layer.fabricObject)
            : false,
          parentGroupId: null,
          visible: layer.fabricObject.visible,
        };

        // 检查是否在某个组中
        this.layers.value.forEach((otherLayer) => {
          if (
            otherLayer.fabricObject &&
            otherLayer.fabricObject.type === "group" &&
            otherLayer.fabricObject.contains &&
            otherLayer.fabricObject.contains(layer.fabricObject)
          ) {
            states[layer.id].parentGroupId = otherLayer.id;
            states[layer.id].isInCanvas = false;
          }
        });
      }
    });

    return states;
  }

  /**
   * 查找图层
   */
  findLayer(layerId, containerType, parentId) {
    if (containerType === "root") {
      return this.layers.value.find((layer) => layer.id === layerId);
    } else if (containerType === "child" && parentId) {
      const parent = this.layers.value.find((layer) => layer.id === parentId);
      return parent?.children?.find((child) => child.id === layerId);
    }
    return null;
  }

  /**
   * 验证移动的有效性
   */
  validateMove() {
    const layer = this.findLayer(
      this.layerId,
      this.fromContainerType,
      this.fromParentId
    );

    if (!layer) {
      throw new Error(`找不到要移动的图层: ${this.layerId}`);
    }

    // 检查是否为不可移动的图层
    if (layer.isBackground || layer.isFixed) {
      throw new Error("背景层和固定层不能移动");
    }

    // 检查是否试图将图层移动到自己的子层级中（防止循环引用）
    if (
      this.toContainerType === "child" &&
      this.toParentId &&
      this.isDescendantOf(this.toParentId, this.layerId)
    ) {
      throw new Error("不能将图层移动到自己的子层级中");
    }

    // 检查目标父图层是否为组
    if (this.toContainerType === "child") {
      const targetParent = this.layers.value.find(
        (layer) => layer.id === this.toParentId
      );
      if (!targetParent || !isGroupLayer(targetParent)) {
        throw new Error("目标图层不是组图层");
      }
    }

    return layer;
  }

  /**
   * 检查是否为子层级关系（防止循环引用）
   */
  isDescendantOf(ancestorId, layerId) {
    const checkChildren = (children) => {
      if (!children) return false;
      for (const child of children) {
        if (child.id === layerId) return true;
        if (child.children && checkChildren(child.children)) return true;
      }
      return false;
    };

    const ancestor = this.layers.value.find((layer) => layer.id === ancestorId);
    return ancestor ? checkChildren(ancestor.children) : false;
  }

  execute() {
    console.log("🎯 执行跨层级移动命令:", {
      layerId: this.layerId,
      from: this.fromContainerType,
      to: this.toContainerType,
      fromParentId: this.fromParentId,
      toParentId: this.toParentId,
    });

    // 验证移动
    const draggedLayer = this.validateMove();

    // 保存移动前状态
    this.saveBeforeState();

    try {
      // 根据移动类型执行对应操作
      if (
        this.fromContainerType === "root" &&
        this.toContainerType === "child"
      ) {
        this.moveRootToGroup(draggedLayer);
      } else if (
        this.fromContainerType === "child" &&
        this.toContainerType === "root"
      ) {
        this.moveGroupToRoot(draggedLayer);
      } else if (
        this.fromContainerType === "child" &&
        this.toContainerType === "child" &&
        this.fromParentId !== this.toParentId
      ) {
        this.moveGroupToGroup(draggedLayer);
      }

      // 保存移动后状态
      this.saveAfterState();

      // 刷新画布
      if (this.canvas) {
        this.canvas.renderAll();
        console.log("🎨 画布已刷新");
      }

      console.log("✅ 跨层级移动命令执行成功");
      return true;
    } catch (error) {
      console.error("❌ 跨层级移动命令执行失败:", error);

      // 如果执行失败，尝试恢复到之前的状态
      if (this.beforeState) {
        try {
          this.restoreLayerStructure(this.beforeState.layerStructure);
          this.restoreFabricObjectStates(this.beforeState.fabricObjects);
          if (this.canvas) {
            this.canvas.renderAll();
          }
          console.log("🔄 已恢复到移动前状态");
        } catch (restoreError) {
          console.error("❌ 恢复状态失败:", restoreError);
        }
      }

      throw error;
    }
  }

  undo() {
    if (!this.beforeState) {
      throw new Error("没有保存的前置状态，无法撤销");
    }

    console.log("🔄 撤销跨层级移动命令");

    try {
      // 恢复图层结构
      this.restoreLayerStructure(this.beforeState.layerStructure);

      // 恢复fabric对象状态
      this.restoreFabricObjectStates(this.beforeState.fabricObjects);

      // 刷新画布
      if (this.canvas) {
        // 使用 requestAnimationFrame 确保DOM更新完成后再渲染
        requestAnimationFrame(() => {
          this.canvas.renderAll();
        });
      }

      console.log("✅ 跨层级移动命令撤销成功");
      return true;
    } catch (error) {
      console.error("❌ 跨层级移动命令撤销失败:", error);

      // 尝试基本的恢复操作
      try {
        console.log("🔄 尝试基本恢复操作");
        this.basicRestore();
      } catch (restoreError) {
        console.error("❌ 基本恢复也失败:", restoreError);
      }

      throw error;
    }
  }

  /**
   * 基本恢复操作（当标准撤销失败时使用）
   */
  basicRestore() {
    // 重新组织所有图层的fabric对象
    this.layers.value.forEach((layer) => {
      if (layer.fabricObject) {
        try {
          // 先从所有容器中移除
          this.removeFromAllContainers(layer.fabricObject);

          // 根据图层的parentId重新放置
          if (layer.parentId) {
            const parentLayer = this.layers.value.find(
              (l) => l.id === layer.parentId
            );
            if (
              parentLayer &&
              parentLayer.fabricObject &&
              parentLayer.fabricObject.type === "group"
            ) {
              this.safeAddToContainer(
                layer.fabricObject,
                parentLayer.fabricObject,
                `父组${layer.parentId}`
              );
            }
          } else {
            this.safeAddToContainer(layer.fabricObject, this.canvas, "画布");
          }
        } catch (error) {
          console.error(`❌ 基本恢复图层 ${layer.id} 失败:`, error);
        }
      }
    });

    if (this.canvas) {
      this.canvas.renderAll();
    }
  }

  /**
   * 重做命令
   */
  redo() {
    if (!this.afterState) {
      throw new Error("没有保存的后置状态，无法重做");
    }

    console.log("🔄 重做跨层级移动命令");

    try {
      // 恢复图层结构
      this.restoreLayerStructure(this.afterState.layerStructure);

      // 恢复fabric对象状态
      this.restoreFabricObjectStates(this.afterState.fabricObjects);

      // 刷新画布
      if (this.canvas) {
        // 使用 requestAnimationFrame 确保DOM更新完成后再渲染
        requestAnimationFrame(() => {
          this.canvas.renderAll();
        });
      }

      console.log("✅ 跨层级移动命令重做成功");
      return true;
    } catch (error) {
      console.error("❌ 跨层级移动命令重做失败:", error);

      // 尝试基本的恢复操作
      try {
        console.log("🔄 尝试基本恢复操作");
        this.basicRestore();
      } catch (restoreError) {
        console.error("❌ 基本恢复也失败:", restoreError);
      }

      throw error;
    }
  }

  /**
   * 恢复图层结构
   */
  restoreLayerStructure(layerStructure) {
    // 保存原始图层数组的引用
    const originalLayers = [...this.layers.value];

    // 清空当前图层
    this.layers.value.splice(0);

    // 重建图层结构
    layerStructure.forEach((layerData) => {
      // 首先从原始图层数组中查找图层
      let layer = originalLayers.find((l) => l.id === layerData.id);

      // 如果没找到，尝试在嵌套结构中查找
      if (!layer) {
        layer = this.findLayerInOriginalStructure(layerData.id, originalLayers);
      }

      if (layer) {
        // 更新图层属性
        layer.parentId = layerData.parentId;
        layer.visible = layerData.visible;
        layer.locked = layerData.locked;

        // 重建children数组
        if (layerData.children && layerData.children.length > 0) {
          layer.children = layerData.children
            .map((childData) => {
              // 从原始图层数组中查找子图层
              let childLayer = originalLayers.find(
                (l) => l.id === childData.id
              );
              if (!childLayer) {
                childLayer = this.findLayerInOriginalStructure(
                  childData.id,
                  originalLayers
                );
              }
              if (childLayer) {
                // 更新子图层属性
                childLayer.parentId = childData.parentId;
                childLayer.visible = childData.visible;
                childLayer.locked = childData.locked;
                return childLayer;
              }
              return null;
            })
            .filter(Boolean);
        } else {
          layer.children = [];
        }

        this.layers.value.push(layer);
      }
    });
  }

  /**
   * 在原始结构中查找图层
   */
  findLayerInOriginalStructure(layerId, layers = null) {
    const layersToSearch = layers || this.layers.value;

    const findInLayers = (layersList) => {
      for (const layer of layersList) {
        if (layer.id === layerId) return layer;
        if (layer.children) {
          const found = findInLayers(layer.children);
          if (found) return found;
        }
      }
      return null;
    };

    return findInLayers(layersToSearch);
  }

  /**
   * 恢复fabric对象状态
   */
  restoreFabricObjectStates(fabricStates) {
    if (!this.canvas || !fabricStates) return;

    console.log("🔧 开始恢复fabric对象状态");

    // 重新组织fabric对象的层级关系
    this.layers.value.forEach((layer) => {
      if (layer.fabricObject && fabricStates[layer.id]) {
        const targetState = fabricStates[layer.id];
        console.log(`🔍 恢复图层 ${layer.id} 的fabric对象状态:`, targetState);

        try {
          // 首先从所有容器中移除对象
          this.removeFromAllContainers(layer.fabricObject);

          // 根据目标状态放置对象
          if (targetState.parentGroupId) {
            // 应该在特定组中
            const parentLayer = this.layers.value.find(
              (l) => l.id === targetState.parentGroupId
            );
            if (
              parentLayer &&
              parentLayer.fabricObject &&
              parentLayer.fabricObject.type === "group"
            ) {
              this.safeAddToContainer(
                layer.fabricObject,
                parentLayer.fabricObject,
                `父组${targetState.parentGroupId}`
              );
            }
          } else if (targetState.isInCanvas) {
            // 应该在画布中
            this.safeAddToContainer(layer.fabricObject, this.canvas, "画布");
          }

          // 恢复可见性
          if (layer.fabricObject.visible !== targetState.visible) {
            layer.fabricObject.visible = targetState.visible;
          }
        } catch (error) {
          console.error(`❌ 恢复图层 ${layer.id} 的fabric对象时出错:`, error);
        }
      }
    });

    // 强制重新渲染画布
    if (this.canvas) {
      this.canvas.renderAll();
      console.log("✅ 画布已重新渲染");
    }
  }

  /**
   * 安全地处理fabric对象操作
   */
  safeFabricOperation(operation, operationName = "fabric操作") {
    try {
      return operation();
    } catch (error) {
      console.error(`❌ ${operationName}失败:`, error);
      return false;
    }
  }

  /**
   * 安全地添加fabric对象到容器
   */
  safeAddToContainer(fabricObject, container, containerName) {
    return this.safeFabricOperation(() => {
      if (container && container.add && !container.contains(fabricObject)) {
        container.add(fabricObject);
        console.log(`✅ 成功将对象添加到${containerName}`);
        return true;
      }
      return false;
    }, `添加对象到${containerName}`);
  }

  /**
   * 安全地从容器移除fabric对象
   */
  safeRemoveFromContainer(fabricObject, container, containerName) {
    return this.safeFabricOperation(() => {
      if (
        container &&
        container.remove &&
        container.contains &&
        container.contains(fabricObject)
      ) {
        container.remove(fabricObject);
        console.log(`✅ 成功从${containerName}移除对象`);
        return true;
      }
      return false;
    }, `从${containerName}移除对象`);
  }

  /**
   * 从所有容器中移除fabric对象
   */
  removeFromAllContainers(fabricObject) {
    // 从画布中移除
    this.safeRemoveFromContainer(fabricObject, this.canvas, "画布");

    // 从所有组中移除
    this.layers.value.forEach((layer) => {
      if (layer.fabricObject && layer.fabricObject.type === "group") {
        this.safeRemoveFromContainer(
          fabricObject,
          layer.fabricObject,
          `组${layer.id}`
        );
      }
    });
  }

  /**
   * 从顶级图层移动到组图层内
   */
  moveRootToGroup(draggedLayer) {
    console.log("📥 执行顶级图层移动到组内:", {
      layerId: draggedLayer.id,
      toParentId: this.toParentId,
      newIndex: this.newIndex,
    });

    const targetParent = this.layers.value.find(
      (layer) => layer.id === this.toParentId
    );
    if (!targetParent) {
      throw new Error(`找不到目标父图层: ${this.toParentId}`);
    }

    // 确保父图层有children数组
    if (!targetParent.children) {
      targetParent.children = [];
    }

    // 从顶级图层数组中移除
    const rootIndex = this.layers.value.findIndex(
      (layer) => layer.id === draggedLayer.id
    );
    if (rootIndex !== -1) {
      this.layers.value.splice(rootIndex, 1);
      console.log(`🗑️ 从顶级图层数组中移除图层 ${draggedLayer.id}`);
    }

    // 更新图层关系
    draggedLayer.parentId = this.toParentId;
    targetParent.children.splice(this.newIndex, 0, draggedLayer);
    console.log(
      `📂 将图层 ${draggedLayer.id} 添加到父图层 ${this.toParentId} 的children中`
    );

    // 处理fabric对象的层级关系
    if (draggedLayer.fabricObject && targetParent.fabricObject) {
      console.log(`🎨 处理fabric对象层级关系`);

      // 从画布中移除
      this.safeRemoveFromContainer(
        draggedLayer.fabricObject,
        this.canvas,
        "画布"
      );

      // 添加到父组
      this.safeAddToContainer(
        draggedLayer.fabricObject,
        targetParent.fabricObject,
        `父组${this.toParentId}`
      );
    }

    console.log("✅ 顶级图层移动到组内完成");
  }

  /**
   * 从组图层内移动到顶级图层
   */
  moveGroupToRoot(draggedLayer) {
    console.log("📤 执行组内图层移动到顶级:", {
      layerId: draggedLayer.id,
      fromParentId: this.fromParentId,
      newIndex: this.newIndex,
    });

    const sourceParent = this.layers.value.find(
      (layer) => layer.id === this.fromParentId
    );
    if (!sourceParent || !sourceParent.children) {
      throw new Error(`找不到源父图层或其children数组: ${this.fromParentId}`);
    }

    // 从源父图层的children中移除
    const childIndex = sourceParent.children.findIndex(
      (child) => child.id === draggedLayer.id
    );
    if (childIndex !== -1) {
      sourceParent.children.splice(childIndex, 1);
      console.log(
        `🗑️ 从父图层 ${this.fromParentId} 的children中移除图层 ${draggedLayer.id}`
      );
    }

    // 处理fabric对象的层级关系
    if (draggedLayer.fabricObject && sourceParent.fabricObject) {
      console.log(`🎨 处理fabric对象层级关系`);

      // 从父组中移除
      this.safeRemoveFromContainer(
        draggedLayer.fabricObject,
        sourceParent.fabricObject,
        `父组${this.fromParentId}`
      );

      // 添加到画布
      this.safeAddToContainer(draggedLayer.fabricObject, this.canvas, "画布");
    }

    // 清除图层的parentId
    delete draggedLayer.parentId;
    console.log(`🔗 清除图层 ${draggedLayer.id} 的parentId`);

    // 计算在顶级图层中的插入位置
    const targetIndex = Math.min(this.newIndex, this.layers.value.length);
    this.layers.value.splice(targetIndex, 0, draggedLayer);
    console.log(
      `📂 将图层 ${draggedLayer.id} 添加到顶级图层数组位置 ${targetIndex}`
    );

    console.log("✅ 组内图层移动到顶级完成");
  }

  /**
   * 在不同组之间移动
   */
  moveGroupToGroup(draggedLayer) {
    console.log("🔄 执行在不同组间移动:", {
      layerId: draggedLayer.id,
      fromParentId: this.fromParentId,
      toParentId: this.toParentId,
      newIndex: this.newIndex,
    });

    const sourceParent = this.layers.value.find(
      (layer) => layer.id === this.fromParentId
    );
    const targetParent = this.layers.value.find(
      (layer) => layer.id === this.toParentId
    );

    if (!sourceParent || !targetParent) {
      throw new Error("找不到源父图层或目标父图层");
    }

    // 从源父图层中移除
    const childIndex = sourceParent.children.findIndex(
      (child) => child.id === draggedLayer.id
    );
    if (childIndex !== -1) {
      sourceParent.children.splice(childIndex, 1);
      console.log(
        `🗑️ 从源父图层 ${this.fromParentId} 中移除图层 ${draggedLayer.id}`
      );

      // 从源父组的fabricObject中移除
      if (draggedLayer.fabricObject && sourceParent.fabricObject) {
        this.safeRemoveFromContainer(
          draggedLayer.fabricObject,
          sourceParent.fabricObject,
          `源父组${this.fromParentId}`
        );
      }
    }

    // 更新图层的parentId
    draggedLayer.parentId = this.toParentId;
    console.log(
      `🔗 更新图层 ${draggedLayer.id} 的parentId为 ${this.toParentId}`
    );

    // 确保目标父图层有children数组
    if (!targetParent.children) {
      targetParent.children = [];
    }

    // 将图层添加到目标组
    targetParent.children.splice(this.newIndex, 0, draggedLayer);
    console.log(
      `📂 将图层 ${draggedLayer.id} 添加到目标父图层 ${this.toParentId} 的位置 ${this.newIndex}`
    );

    // 将图层的fabricObject添加到目标父组中
    if (draggedLayer.fabricObject && targetParent.fabricObject) {
      this.safeAddToContainer(
        draggedLayer.fabricObject,
        targetParent.fabricObject,
        `目标父组${this.toParentId}`
      );
    }

    console.log("✅ 不同组间移动完成");
  }
}

/**
 * 创建跨层级移动命令的工厂函数
 */
export function createCrossLevelMoveCommand(options) {
  return new CrossLevelMoveCommand(options);
}