import { Command } from "./Command";
import { createLayer, LayerType, OperationType } from "../utils/layerHelper";
import { createStaticCanvas } from "../utils/canvasFactory";
import { AddObjectToLayerCommand } from "./ObjectLayerCommands";
import { ToolCommand } from "./ToolCommands";

/**
 * 添加图层命令
 */
export class AddLayerCommand extends Command {
  constructor(options) {
    super({
      name: "添加图层",
      saveState: true,
    });
    this.canvas = options.canvas;
    this.layers = options.layers;
    this.newLayer = options.newLayer;
    this.activeLayerId = options.activeLayerId;

    this.insertIndex = options.insertIndex;
    this.oldActiveLayerId = null;
    this.beforeLayers = [...this.layers.value]; // 备份原图层列表
  }

  execute() {
    // 保存当前活动图层ID
    this.oldActiveLayerId = this.activeLayerId.value;

    // 执行添加图层操作
    if (this.insertIndex !== undefined && this.insertIndex !== null) {
      this.layers.value.splice(this.insertIndex, 0, this.newLayer);
    } else {
      this.layers.value.push(this.newLayer);
    }

    // 更新活动图层
    if (!this.newLayer.isBackground) {
      this.activeLayerId.value = this.newLayer.id;
    }

    return this.newLayer.id;
  }

  undo() {
    // 从图层列表删除该图层
    this.layers.value = this.beforeLayers;

    // 恢复原活动图层
    this.activeLayerId.value = this.oldActiveLayerId;
  }

  getInfo() {
    return {
      name: this.name,
      layerName: this.newLayer.name,
      layerId: this.newLayer.id,
    };
  }
}

/**
 * 粘贴并创建图层命令 - 更新为支持异步操作
 */
export class PasteLayerCommand extends Command {
  constructor(options) {
    super({
      name: "粘贴图层",
      saveState: true,
    });
    this.canvas = options.canvas;
    this.layers = options.layers;
    this.activeLayerId = options.activeLayerId;
    this.clipboardData = options.clipboardData;
    this.layerManager = options.layerManager;

    // 新图层相关属性
    this.newLayer = null;
    this.newLayerId = null;
    this.insertIndex = null;
    this.oldActiveLayerId = null;
    this.createdObjects = [];
  }

  async execute() {
    if (!this.clipboardData) {
      console.error("剪贴板中没有图层数据");
      return null;
    }

    const data = this.clipboardData;
    const fabric = window.fabric;

    if (!fabric) {
      console.error("未找到fabric库");
      return null;
    }

    // 生成新的图层ID
    this.newLayerId = `layer_${Date.now()}_${Math.floor(Math.random() * 1000)}`;

    // 创建新图层
    this.newLayer = {
      ...data,
      id: this.newLayerId,
      name: `${data.name} 副本`,
      fabricObjects: [],
      isCut: undefined,
      serializedObjects: undefined,
    };

    // 保存当前活动图层ID
    this.oldActiveLayerId = this.activeLayerId.value;

    // 计算插入位置
    this.insertIndex = this.layerManager._getInsertIndexAboveActiveLayer();

    // 执行添加图层操作
    if (this.insertIndex !== undefined && this.insertIndex !== null) {
      this.layers.value.splice(this.insertIndex, 0, this.newLayer);
    } else {
      this.layers.value.push(this.newLayer);
    }

    // 更新活动图层
    if (!this.newLayer.isBackground) {
      this.activeLayerId.value = this.newLayer.id;
    }

    // 如果有序列化的对象，异步恢复它们
    if (
      data.serializedObjects &&
      Array.isArray(data.serializedObjects) &&
      data.serializedObjects.length > 0
    ) {
      await this._restoreObjectsAsync(data);
    } else {
      this._onObjectsRestored(data);
    }

    return this.newLayerId;
  }

  /**
   * 异步恢复序列化的对象
   * @param {Object} data 剪贴板数据
   * @private
   */
  async _restoreObjectsAsync(data) {
    const fabric = window.fabric;

    return new Promise((resolve, reject) => {
      fabric.util.enlivenObjects(data.serializedObjects, (objects) => {
        try {
          objects.forEach((obj) => {
            // 生成新的对象ID
            const newObjId = `obj_${Date.now()}_${Math.floor(
              Math.random() * 1000
            )}`;
            obj.id = newObjId;
            obj.layerId = this.newLayerId;
            obj.layerName = this.newLayer.name;

            // 如果是复制操作，给对象添加偏移量
            if (!data.isCut) {
              const offset = 10;
              if (obj.left !== undefined) obj.left += offset;
              if (obj.top !== undefined) obj.top += offset;
            }

            // 添加到画布
            this.canvas.add(obj);

            // 添加到图层
            this.newLayer.fabricObjects.push(obj);

            // 记录创建的对象，用于撤销
            this.createdObjects.push(obj);
          });

          this._onObjectsRestored(data);
          resolve();
        } catch (error) {
          console.error("恢复对象时发生错误:", error);
          reject(error);
        }
      });
    });
  }

  /**
   * 对象恢复完成后的处理
   * @param {Object} data 剪贴板数据
   * @private
   */
  _onObjectsRestored(data) {
    // 更新对象交互性
    this.layerManager?.updateLayersObjectsInteractivity?.();

    // 重新排列对象
    this.layerManager?._rearrangeObjects?.();

    // 判断如果是剪切操作，粘贴完后需要删除剪贴板数据
    if (data.isCut && this.layerManager) {
      this.layerManager.clipboardData = null;
      console.log(`已粘贴图层：${this.newLayer.name}（剪切）`);
    } else {
      console.log(`已粘贴图层：${this.newLayer.name}（复制）`);
    }

    // 重新渲染画布
    if (this.canvas) {
      this.canvas.renderAll();
    }
  }

  undo() {
    if (!this.newLayer || !this.newLayerId) return;

    // 从图层列表删除该图层
    const index = this.layers.value.findIndex(
      (layer) => layer.id === this.newLayerId
    );
    if (index !== -1) {
      this.layers.value.splice(index, 1);
    }

    // 恢复原活动图层
    this.activeLayerId.value = this.oldActiveLayerId;

    // 从画布移除所有创建的对象
    this.createdObjects.forEach((obj) => {
      this.canvas.remove(obj);
    });

    // 如果图层有其他fabric对象，也要移除
    if (this.newLayer.fabricObjects && this.newLayer.fabricObjects.length > 0) {
      this.newLayer.fabricObjects.forEach((obj) => {
        if (!this.createdObjects.includes(obj)) {
          this.canvas.remove(obj);
        }
      });
    }

    // 如果是剪切操作的撤销，需要恢复剪贴板数据
    if (this.clipboardData && this.clipboardData.isCut && this.layerManager) {
      this.layerManager.clipboardData = this.clipboardData;
    }

    // 重新渲染画布
    if (this.canvas) {
      this.canvas.renderAll();
    }

    // 更新对象交互性
    if (
      this.layerManager &&
      typeof this.layerManager.updateLayersObjectsInteractivity === "function"
    ) {
      this.layerManager.updateLayersObjectsInteractivity();
    }
  }

  getInfo() {
    return {
      name: this.name,
      layerName: this.newLayer?.name || "未知图层",
      layerId: this.newLayerId,
      objectCount: this.createdObjects.length,
    };
  }
}

/**
 * 移除图层命令
 */
export class RemoveLayerCommand extends Command {
  constructor(options) {
    super({
      name: "移除图层",
      saveState: true,
    });
    this.canvas = options.canvas;
    this.layers = options.layers;
    this.layerId = options.layerId;
    this.activeLayerId = options.activeLayerId;

    // 查找要删除的图层
    this.layerIndex = this.layers.value.findIndex(
      (layer) => layer.id === this.layerId
    );
    this.removedLayer = this.layers.value[this.layerIndex];
    this.isActiveLayer = this.layerId === this.activeLayerId.value;
    // this.beforeLayers = [...this.layers.value]; // 备份原图层列表
  }

  execute() {
    if (this.layerIndex === -1 || !this.removedLayer) {
      console.error(`图层 ${this.layerId} 不存在`);
      return false;
    }

    // 从画布中移除图层中的所有对象
    if (
      this.removedLayer.fabricObjects &&
      this.removedLayer.fabricObjects.length > 0
    ) {
      this.removedLayer.fabricObjects.forEach((obj) => {
        this.canvas.remove(obj);
      });
    }

    // 如果是背景图层，移除特殊对象
    if (this.removedLayer.isBackground && this.removedLayer.fabricObject) {
      this.canvas.remove(this.removedLayer.fabricObject);
    }

    // 从图层列表中删除
    this.layers.value.splice(this.layerIndex, 1);

    // 如果删除的是当前活动图层，需要更新活动图层
    if (this.isActiveLayer) {
      // 查找最近的非背景层作为新的活动图层
      const newActiveLayer = this.layers.value.find(
        (layer) => !layer.isBackground
      );
      if (newActiveLayer) {
        this.activeLayerId.value = newActiveLayer.id;
      } else {
        this.activeLayerId.value = null;
      }
    }

    // 重新渲染画布
    if (this.canvas) {
      this.canvas.renderAll();
    }

    return true;
  }

  undo() {
    // 恢复图层
    if (this.layerIndex !== -1 && this.removedLayer) {
      this.layers.value.splice(this.layerIndex, 0, this.removedLayer);

      // 恢复图层中的所有对象到画布
      if (
        this.removedLayer.fabricObjects &&
        this.removedLayer.fabricObjects.length > 0
      ) {
        this.removedLayer.fabricObjects.forEach((obj) => {
          this.canvas.add(obj);
        });
      }

      // 如果是背景图层，恢复特殊对象
      if (this.removedLayer.isBackground && this.removedLayer.fabricObject) {
        this.canvas.add(this.removedLayer.fabricObject);
      }

      // 如果删除的是当前活动图层，恢复活动图层
      if (this.isActiveLayer) {
        this.activeLayerId.value = this.layerId;
      }

      // 重新渲染画布
      if (this.canvas) {
        this.canvas.renderAll();
      }
    }
  }

  getInfo() {
    return {
      name: this.name,
      layerName: this.removedLayer?.name || "未知图层",
      layerId: this.layerId,
    };
  }
}

/**
 * 移动图层命令
 */
export class MoveLayerCommand extends Command {
  constructor(options) {
    super({
      name: `移动图层 ${options.direction === "up" ? "上移" : "下移"}`,
      saveState: false,
    });
    this.canvas = options.canvas;
    this.layers = options.layers;
    this.layerId = options.layerId;
    this.direction = options.direction; // "up" or "down"

    // 查找图层索引
    this.layerIndex = this.layers.value.findIndex(
      (layer) => layer.id === this.layerId
    );
    // this.beforeLayers = [...this.layers.value]; // 备份原图层列表
  }

  execute() {
    if (this.layerIndex === -1) {
      console.error(`图层 ${this.layerId} 不存在`);
      return false;
    }

    const layer = this.layers.value[this.layerIndex];
    let newIndex = this.layerIndex;

    // 计算新索引
    if (this.direction === "up") {
      // 向上移动（在数组中向前移动）
      if (this.layerIndex > 0) {
        // 确保不会移动到背景层之前
        const prevLayer = this.layers.value[this.layerIndex - 1];
        if (!prevLayer.isBackground) {
          newIndex = this.layerIndex - 1;
        }
      }
    } else if (this.direction === "down") {
      // 向下移动（在数组中向后移动）
      if (this.layerIndex < this.layers.value.length - 1) {
        // 确保不会移动背景层
        if (!layer.isBackground) {
          newIndex = this.layerIndex + 1;
        }
      }
    }

    // 如果位置有变化，执行移动
    if (newIndex !== this.layerIndex) {
      // 移除原位置
      this.layers.value.splice(this.layerIndex, 1);
      // 插入到新位置
      this.layers.value.splice(newIndex, 0, layer);
      this.newIndex = newIndex;

      return true;
    }

    return false;
  }

  undo() {
    if (this.layerIndex !== this.newIndex && this.newIndex !== undefined) {
      // 获取图层
      const layer = this.layers.value[this.newIndex];

      // 移除新位置
      this.layers.value.splice(this.newIndex, 1);

      // 插入到原位置
      this.layers.value.splice(this.layerIndex, 0, layer);
    }
  }

  getInfo() {
    return {
      name: this.name,
      layerId: this.layerId,
      direction: this.direction,
    };
  }
}

/**
 * 切换图层可见性命令
 */
export class ToggleLayerVisibilityCommand extends Command {
  constructor(options) {
    super({
      name: "切换图层可见性",
      saveState: false,
    });
    this.canvas = options.canvas;
    this.layers = options.layers;
    this.layerId = options.layerId;

    // 查找图层
    this.layer = this.layers.value.find((layer) => layer.id === this.layerId);
    this.oldVisibility = this.layer ? this.layer.visible : null;
  }

  execute() {
    if (!this.layer) {
      console.error(`图层 ${this.layerId} 不存在`);
      return false;
    }

    // 切换可见性
    this.layer.visible = !this.oldVisibility;

    // 更新画布上图层对象的可见性
    if (this.canvas) {
      const layerObjects = this.canvas
        .getObjects()
        .filter((obj) => obj.layerId === this.layerId);

      layerObjects.forEach((obj) => {
        obj.visible = this.layer.visible;
      });

      this.canvas.renderAll();
    }

    return true;
  }

  undo() {
    if (this.layer) {
      // 恢复可见性
      this.layer.visible = this.oldVisibility;

      // 更新画布上图层对象的可见性
      if (this.canvas) {
        const layerObjects = this.canvas
          .getObjects()
          .filter((obj) => obj.layerId === this.layerId);

        layerObjects.forEach((obj) => {
          obj.visible = this.oldVisibility;
        });

        this.canvas.renderAll();
      }
    }
  }

  getInfo() {
    return {
      name: this.name,
      layerName: this.layer?.name || "未知图层",
      layerId: this.layerId,
      newVisibility: this.layer?.visible,
    };
  }
}

/**
 * 重命名图层命令
 */
export class RenameLayerCommand extends Command {
  constructor(options) {
    super({
      name: "重命名图层",
      saveState: false,
    });
    this.canvas = options.canvas;
    this.layers = options.layers;
    this.layerId = options.layerId;
    this.newName = options.newName;

    // 查找图层
    this.layer = this.layers.value.find((layer) => layer.id === this.layerId);
    this.oldName = this.layer ? this.layer.name : null;
  }

  execute() {
    if (!this.layer) {
      console.error(`图层 ${this.layerId} 不存在`);
      return false;
    }

    // 更新图层名称
    this.layer.name = this.newName;

    // 更新图层对象上的图层名称
    if (this.canvas) {
      const layerObjects = this.canvas
        .getObjects()
        .filter((obj) => obj.layerId === this.layerId);

      layerObjects.forEach((obj) => {
        obj.layerName = this.newName;
      });
    }

    return true;
  }

  undo() {
    if (this.layer && this.oldName) {
      // 恢复图层名称
      this.layer.name = this.oldName;

      // 恢复图层对象上的图层名称
      if (this.canvas) {
        const layerObjects = this.canvas
          .getObjects()
          .filter((obj) => obj.layerId === this.layerId);

        layerObjects.forEach((obj) => {
          obj.layerName = this.oldName;
        });
      }
    }
  }

  getInfo() {
    return {
      name: this.name,
      layerId: this.layerId,
      oldName: this.oldName,
      newName: this.newName,
    };
  }
}

/**
 * 图层锁定/解锁命令
 */
export class LayerLockCommand extends Command {
  constructor(options) {
    super({
      name: "图层锁定/解锁",
      saveState: false,
    });
    this.canvas = options.canvas;
    this.layers = options.layers;
    this.layerId = options.layerId;

    // 查找图层
    this.layer = this.layers.value.find((layer) => layer.id === this.layerId);
    this.oldLocked = this.layer ? this.layer.locked : null;
  }

  execute() {
    if (!this.layer) {
      console.error(`图层 ${this.layerId} 不存在`);
      return false;
    }

    // 切换锁定状态
    this.layer.locked = !this.oldLocked;

    // 更新画布上对象的可选择状态
    if (this.canvas) {
      const layerObjects = this.canvas
        .getObjects()
        .filter((obj) => obj.layerId === this.layerId);

      layerObjects.forEach((obj) => {
        obj.selectable = !this.layer.locked && this.layer.visible;
        obj.evented = !this.layer.locked && this.layer.visible;
      });

      this.canvas.renderAll();
    }

    return true;
  }

  undo() {
    if (this.layer) {
      // 恢复锁定状态
      this.layer.locked = this.oldLocked;

      // 更新画布上对象的可选择状态
      if (this.canvas) {
        const layerObjects = this.canvas
          .getObjects()
          .filter((obj) => obj.layerId === this.layerId);

        layerObjects.forEach((obj) => {
          obj.selectable = !this.oldLocked && this.layer.visible;
          obj.evented = !this.oldLocked && this.layer.visible;
        });

        this.canvas.renderAll();
      }
    }
  }

  getInfo() {
    return {
      name: this.name,
      layerName: this.layer?.name || "未知图层",
      layerId: this.layerId,
      newLocked: this.layer?.locked,
    };
  }
}

/**
 * 设置图层不透明度命令
 */
export class SetLayerOpacityCommand extends Command {
  constructor(options) {
    super({
      name: "设置图层不透明度",
      saveState: false,
    });
    this.canvas = options.canvas;
    this.layers = options.layers;
    this.layerId = options.layerId;
    this.opacity = options.opacity;

    // 查找图层
    this.layer = this.layers.value.find((layer) => layer.id === this.layerId);
    this.oldOpacity = this.layer ? this.layer.opacity : null;
  }

  execute() {
    if (!this.layer) {
      console.error(`图层 ${this.layerId} 不存在`);
      return false;
    }

    // 设置图层不透明度
    this.layer.opacity = this.opacity;

    // 更新画布上对象的不透明度
    if (this.canvas) {
      const layerObjects = this.canvas
        .getObjects()
        .filter((obj) => obj.layerId === this.layerId);

      layerObjects.forEach((obj) => {
        obj.opacity = this.opacity;
      });

      this.canvas.renderAll();
    }

    return true;
  }

  undo() {
    if (this.layer && this.oldOpacity !== null) {
      // 恢复图层不透明度
      this.layer.opacity = this.oldOpacity;

      // 更新画布上对象的不透明度
      if (this.canvas) {
        const layerObjects = this.canvas
          .getObjects()
          .filter((obj) => obj.layerId === this.layerId);

        layerObjects.forEach((obj) => {
          obj.opacity = this.oldOpacity;
        });

        this.canvas.renderAll();
      }
    }
  }

  getInfo() {
    return {
      name: this.name,
      layerName: this.layer?.name || "未知图层",
      layerId: this.layerId,
      oldOpacity: this.oldOpacity,
      newOpacity: this.opacity,
    };
  }
}

/**
 * 设置图层混合模式命令
 */
export class SetLayerBlendModeCommand extends Command {
  constructor(options) {
    super({
      name: "设置图层混合模式",
      saveState: false,
    });
    this.canvas = options.canvas;
    this.layers = options.layers;
    this.layerId = options.layerId;
    this.blendMode = options.blendMode;

    // 查找图层
    this.layer = this.layers.value.find((layer) => layer.id === this.layerId);
    this.oldBlendMode = this.layer ? this.layer.blendMode : null;
  }

  execute() {
    if (!this.layer) {
      console.error(`图层 ${this.layerId} 不存在`);
      return false;
    }

    // 设置图层混合模式
    this.layer.blendMode = this.blendMode;

    // 更新画布上对象的混合模式
    if (this.canvas) {
      const layerObjects = this.canvas
        .getObjects()
        .filter((obj) => obj.layerId === this.layerId);

      layerObjects.forEach((obj) => {
        obj.globalCompositeOperation = this.blendMode;
      });

      this.canvas.renderAll();
    }

    return true;
  }

  undo() {
    if (this.layer && this.oldBlendMode) {
      // 恢复图层混合模式
      this.layer.blendMode = this.oldBlendMode;

      // 更新画布上对象的混合模式
      if (this.canvas) {
        const layerObjects = this.canvas
          .getObjects()
          .filter((obj) => obj.layerId === this.layerId);

        layerObjects.forEach((obj) => {
          obj.globalCompositeOperation = this.oldBlendMode;
        });

        this.canvas.renderAll();
      }
    }
  }

  getInfo() {
    return {
      name: this.name,
      layerName: this.layer?.name || "未知图层",
      layerId: this.layerId,
      oldBlendMode: this.oldBlendMode,
      newBlendMode: this.blendMode,
    };
  }
}

/**
 * 合并图层命令
 */
export class MergeLayersCommand extends Command {
  constructor(options) {
    super({
      name: "合并图层",
      saveState: true,
    });
    this.canvas = options.canvas;
    this.layers = options.layers;
    this.layerIds = options.layerIds;
    this.newName = options.newName;
    this.activeLayerId = options.activeLayerId; // <--- 新增

    // 备份原图层
    this.originalLayers = [...this.layers.value];
    // 新图层ID
    this.newLayerId = `merged_layer_${Date.now()}_${Math.floor(
      Math.random() * 1000
    )}`;
  }

  execute() {
    if (
      !this.layerIds ||
      !Array.isArray(this.layerIds) ||
      this.layerIds.length < 2
    ) {
      console.error("合并图层至少需要两个图层");
      return null;
    }

    // 查找所有要合并的图层
    const layersToMerge = this.layerIds
      .map((id) => this.layers.value.find((layer) => layer.id === id))
      .filter(Boolean);

    if (layersToMerge.length < 2) {
      console.error("找不到足够的图层进行合并");
      return null;
    }

    // 检查是否包含背景图层
    if (layersToMerge.some((layer) => layer.isBackground)) {
      console.error("不能合并背景图层");
      return null;
    }

    // 查找最顶层图层的索引，用于插入合并后的图层
    const topLayerIndex = Math.min(
      ...layersToMerge.map((layer) => this.layers.value.indexOf(layer))
    );

    // 获取要保留的所有对象
    const allObjects = [];
    layersToMerge.forEach((layer) => {
      if (Array.isArray(layer.fabricObjects)) {
        allObjects.push(...layer.fabricObjects);
      }
    });

    // 创建新的合并图层
    const mergedLayer = createLayer({
      id: this.newLayerId,
      name: this.newName || `合并图层`,
      type: LayerType.BITMAP,
      visible: true,
      locked: false,
      opacity: 1.0,
      fabricObjects: allObjects,
    });

    // 更新对象与新图层的关联
    allObjects.forEach((obj) => {
      obj.layerId = mergedLayer.id;
      obj.layerName = mergedLayer.name;
    });

    // 移除原图层
    this.layers.value = this.layers.value.filter(
      (layer) => !this.layerIds.includes(layer.id)
    );

    // 插入新图层
    this.layers.value.splice(topLayerIndex, 0, mergedLayer);

    // 更新当前活动图层
    this.activeLayerId.value = this.newLayerId;

    // 重新渲染画布
    if (this.canvas) {
      this.canvas.renderAll();
    }

    return this.newLayerId;
  }

  undo() {
    // 恢复原始图层状态
    this.layers.value = [...this.originalLayers];

    // 恢复活动图层
    if (this.activeLayerId) {
      // 恢复到合并前的活动图层（取第一个合并前图层）
      this.activeLayerId.value = this.layerIds[0];
    }

    // 重新渲染画布
    if (this.canvas) {
      this.canvas.renderAll();
    }
  }

  getInfo() {
    return {
      name: this.name,
      layerIds: this.layerIds,
      newLayerId: this.newLayerId,
      newName: this.newName,
    };
  }
}

/**
 * 图层组合命令
 */
export class GroupLayersCommand extends Command {
  constructor(options) {
    super({
      name: "组合图层",
      saveState: true,
    });
    this.canvas = options.canvas;
    this.layers = options.layers;
    this.layerIds = options.layerIds;
    this.groupName = options.groupName;
    this.activeLayerId = options.activeLayerId; // <--- 新增

    // 备份原图层
    this.originalLayers = [...this.layers.value];
    // 新组ID
    this.groupId = `group_layer_${Date.now()}_${Math.floor(
      Math.random() * 1000
    )}`;
  }

  execute() {
    if (
      !this.layerIds ||
      !Array.isArray(this.layerIds) ||
      this.layerIds.length < 2
    ) {
      console.error("组合图层至少需要两个图层");
      return null;
    }

    // 查找所有要组合的图层
    const layersToGroup = this.layerIds
      .map((id) => this.layers.value.find((layer) => layer.id === id))
      .filter(Boolean);

    if (layersToGroup.length < 2) {
      console.error("找不到足够的图层进行组合");
      return null;
    }

    // 检查是否包含背景图层
    if (layersToGroup.some((layer) => layer.isBackground)) {
      console.error("不能组合背景图层");
      return null;
    }

    // 查找最顶层图层的索引，用于插入组图层
    const topLayerIndex = Math.min(
      ...layersToGroup.map((layer) => this.layers.value.indexOf(layer))
    );

    // 创建新的组图层
    const groupLayer = createLayer({
      id: this.groupId,
      name: this.groupName || `图层组`,
      type: LayerType.GROUP,
      visible: true,
      locked: false,
      opacity: 1.0,
      fabricObjects: [],
      children: layersToGroup,
    });

    // 移除原图层
    this.layers.value = this.layers.value.filter(
      (layer) => !this.layerIds.includes(layer.id)
    );

    // 插入新组图层
    this.layers.value.splice(topLayerIndex, 0, groupLayer);

    // 更新当前活动图层
    this.activeLayerId.value = this.groupId;

    return this.groupId;
  }

  undo() {
    // 恢复原始图层状态
    this.layers.value = [...this.originalLayers];
    // 恢复活动图层为原先第一个合并前层
    if (this.activeLayerId) {
      this.activeLayerId.value = this.layerIds[0];
    }
  }

  getInfo() {
    return {
      name: this.name,
      layerIds: this.layerIds,
      groupId: this.groupId,
      groupName: this.groupName,
    };
  }
}

/**
 * 解组图层命令
 */
export class UngroupLayersCommand extends Command {
  constructor(options) {
    super({
      name: "解组图层",
      saveState: true,
    });
    this.canvas = options.canvas;
    this.layers = options.layers;
    this.groupId = options.groupId;
    this.activeLayerId = options.activeLayerId; // <--- 新增

    // 备份原图层
    this.originalLayers = [...this.layers.value];
    // 子图层ID列表
    this.childLayerIds = [];
  }

  execute() {
    // 查找组图层
    const groupIndex = this.layers.value.findIndex(
      (layer) => layer.id === this.groupId
    );

    if (groupIndex === -1) {
      console.error(`找不到组图层 ${this.groupId}`);
      return null;
    }

    const groupLayer = this.layers.value[groupIndex];

    if (!groupLayer.children || groupLayer.children.length === 0) {
      console.error(`组图层 ${this.groupId} 没有子图层`);
      return null;
    }

    // 收集子图层ID
    this.childLayerIds = groupLayer.children.map((layer) => layer.id);

    // 将子图层添加到原位置
    this.layers.value.splice(groupIndex, 1, ...groupLayer.children);

    // 更新当前活动图层为第一个子图层
    if (this.childLayerIds.length > 0 && this.activeLayerId) {
      this.activeLayerId.value = this.childLayerIds[0];
    }

    return this.childLayerIds;
  }

  undo() {
    // 恢复原始图层状态
    this.layers.value = [...this.originalLayers];
    // 恢复活动图层为原始组ID
    if (this.activeLayerId) {
      this.activeLayerId.value = this.groupId;
    }
  }

  getInfo() {
    return {
      name: this.name,
      groupId: this.groupId,
      childLayerIds: this.childLayerIds,
    };
  }
}

/**
 * 合并图层内对象命令（重构版本）
 * 将新的图像与图层内现有对象合并为一个高保真图像对象
 */
export class MergeLayerObjectsCommand extends Command {
  constructor(options) {
    super({
      name: "合并图层内对象",
      saveState: true,
    });
    this.canvas = options.canvas;
    this.layers = options.layers;
    this.fabricImage = options.fabricImage;
    this.activeLayer = options.activeLayer;

    // 备份原始对象，用于撤销
    if (this.activeLayer && Array.isArray(this.activeLayer.fabricObjects)) {
      this.originalObjects =
        this.canvas
          ?.getObjects()
          ?.filter((fItem) => fItem.layerId === this.activeLayer.id) || [];
    } else {
      this.originalObjects = [];
    }

    // 新合并图像对象
    this.mergedImage = null;
    this.newImageId = `merged_image_${Date.now()}_${Math.floor(
      Math.random() * 1000
    )}`;
  }

  async execute() {
    if (!this.activeLayer || !this.canvas) {
      console.error("图层或Canvas未初始化");
      return null;
    }

    // 获取所有需要合并的对象（按正确的层级顺序）
    const objectsToMerge = [];

    // 先添加图层中的现有对象（作为底层）
    if (this.originalObjects.length > 0) {
      objectsToMerge.push(...this.originalObjects);
    }

    // 再添加新的图像对象（作为顶层）
    if (this.fabricImage) {
      objectsToMerge.push(this.fabricImage);
    }

    if (objectsToMerge.length === 0) {
      console.log("没有对象需要合并");
      return null;
    }

    // 计算所有对象的合并边界
    const bounds = this._calculateMergedBounds(objectsToMerge);
    if (!bounds) {
      console.error("无法计算合并边界");
      return null;
    }

    // 异步处理图像合并
    try {
      const mergedImage = await this._createMergedImageAsync(
        objectsToMerge,
        bounds
      );
      this._setupMergedImage(mergedImage, bounds);
      this._replaceObjects(mergedImage);

      console.log("图像合并完成");
      return this.newImageId;
    } catch (error) {
      console.error("图像合并执行失败:", error);
      return null;
    }
  }

  /**
   * 异步创建合并图像
   * @param {Array} objectsToMerge 要合并的对象
   * @param {Object} bounds 边界信息
   * @returns {Promise<fabric.Image>} 合并后的图像
   * @private
   */
  async _createMergedImageAsync(objectsToMerge, bounds) {
    return new Promise((resolve, reject) => {
      try {
        // 创建高保真临时画布
        const tempCanvas = this._createHighQualityTempCanvas(bounds);
        const tempFabricCanvas = createStaticCanvas(tempCanvas, {
          width: bounds.width,
          height: bounds.height,
        });

        // 设置高质量渲染选项
        tempFabricCanvas.enableRetinaScaling = true;
        tempFabricCanvas.imageSmoothingEnabled = true;

        // 将所有对象添加到临时画布并调整位置
        this._addObjectsToTempCanvas(tempFabricCanvas, objectsToMerge, bounds);

        // 渲染临时画布
        tempFabricCanvas.renderAll();

        // 生成高质量图像
        const dataUrl = tempFabricCanvas.toDataURL({
          format: "png",
          quality: 1.0,
          multiplier: 1,
        });

        // 创建新的合并图像
        fabric.Image.fromURL(
          dataUrl,
          (mergedImg) => {
            try {
              // 清理临时资源
              this._cleanupTempCanvas(tempFabricCanvas);
              resolve(mergedImg);
            } catch (error) {
              console.error("设置合并图像时发生错误:", error);
              this._cleanupTempCanvas(tempFabricCanvas);
              reject(error);
            }
          },
          {
            crossOrigin: "anonymous",
          }
        );
      } catch (error) {
        console.error("合并过程中发生错误:", error);
        reject(error);
      }
    });
  }

  /**
   * 计算所有对象的合并边界
   * @param {Array} objects 要合并的对象数组
   * @returns {Object} 边界信息
   * @private
   */
  _calculateMergedBounds(objects) {
    if (!objects || objects.length === 0) return null;

    let minLeft = Infinity;
    let minTop = Infinity;
    let maxRight = -Infinity;
    let maxBottom = -Infinity;

    objects.forEach((obj) => {
      if (!obj) return;

      const bounds = obj.getBoundingRect(true, true);
      minLeft = Math.min(minLeft, bounds.left);
      minTop = Math.min(minTop, bounds.top);
      maxRight = Math.max(maxRight, bounds.left + bounds.width);
      maxBottom = Math.max(maxBottom, bounds.top + bounds.height);
    });

    const padding = 1;

    return {
      left: minLeft - padding,
      top: minTop - padding,
      width: maxRight - minLeft + padding * 2,
      height: maxBottom - minTop + padding * 2,
    };
  }

  /**
   * 创建高质量临时画布
   * @param {Object} bounds 边界信息
   * @returns {HTMLCanvasElement} 临时画布
   * @private
   */
  _createHighQualityTempCanvas(bounds) {
    const tempCanvas = document.createElement("canvas");
    tempCanvas.width = Math.ceil(bounds.width);
    tempCanvas.height = Math.ceil(bounds.height);
    tempCanvas.style.width = bounds.width + "px";
    tempCanvas.style.height = bounds.height + "px";

    const ctx = tempCanvas.getContext("2d");
    ctx.imageSmoothingEnabled = true;
    ctx.imageSmoothingQuality = "high";

    return tempCanvas;
  }

  /**
   * 将对象添加到临时画布并调整位置
   * @param {fabric.Canvas} tempCanvas 临时画布
   * @param {Array} objects 对象数组
   * @param {Object} bounds 边界信息
   * @private
   */
  _addObjectsToTempCanvas(tempCanvas, objects, bounds) {
    objects.forEach((obj, index) => {
      if (!obj) return;

      try {
        const clonedObj = fabric.util.object.clone(obj);
        const objBounds = obj.getBoundingRect(true, true);
        const offsetX = objBounds.left - bounds.left;
        const offsetY = objBounds.top - bounds.top;

        clonedObj.set({
          left: offsetX + (clonedObj.width * clonedObj.scaleX) / 2,
          top: offsetY + (clonedObj.height * clonedObj.scaleY) / 2,
          originX: "center",
          originY: "center",
        });

        tempCanvas.add(clonedObj);
        console.log(
          `添加对象 ${index + 1}/${objects.length}: ${obj.type || "unknown"}`
        );
      } catch (error) {
        console.error(`添加对象到临时画布时发生错误:`, error);
      }
    });
  }

  /**
   * 设置合并后的图像属性
   * @param {fabric.Image} mergedImg 合并后的图像
   * @param {Object} bounds 边界信息
   * @private
   */
  _setupMergedImage(mergedImg, bounds) {
    mergedImg.set({
      id: this.newImageId,
      layerId: this.activeLayer.id,
      layerName: this.activeLayer.name,
      left: bounds.left + bounds.width / 2,
      top: bounds.top + bounds.height / 2,
      originX: "center",
      originY: "center",
      selectable: true,
      evented: true,
    });

    this.mergedImage = mergedImg;
  }

  /**
   * 替换原有对象为合并后的图像
   * @param {fabric.Image} mergedImg 合并后的图像
   * @private
   */
  _replaceObjects(mergedImg) {
    if (!mergedImg || !this.canvas || !this.activeLayer) {
      console.error("_replaceObjects: 缺少必要的参数");
      return;
    }

    const wasRenderOnAddRemove = this.canvas.renderOnAddRemove;
    this.canvas.renderOnAddRemove = false;

    try {
      // 清空图层的对象列表
      this.activeLayer.fabricObjects = [];

      // 添加合并后的图像到画布和图层
      this.canvas.add(mergedImg);
      this.activeLayer.fabricObjects.push(mergedImg);

      // 从画布中移除所有原始对象
      this.originalObjects.forEach((obj) => {
        if (obj && this.canvas.getObjects().includes(obj)) {
          this.canvas.remove(obj);
        }
      });

      // 如果有新的图像对象，也要移除
      if (
        this.fabricImage &&
        this.canvas.getObjects().includes(this.fabricImage)
      ) {
        this.canvas.remove(this.fabricImage);
      }

      console.log(
        `成功替换图层 ${this.activeLayer.name} 中的 ${this.originalObjects.length} 个对象为合并图像`
      );
    } catch (error) {
      console.error("替换对象时发生错误:", error);
    } finally {
      this.canvas.renderOnAddRemove = wasRenderOnAddRemove;
      this.canvas.renderAll(); // 同步渲染画布

      // 更新缩略图
      if (this.canvas.thumbnailManager) {
        setTimeout(() => {
          this.canvas.thumbnailManager.generateLayerThumbnail(
            this.activeLayer.id
          );
        }, 100);
      }
    }
  }

  undo() {
    if (!this.activeLayer || !this.canvas) return;

    const wasRenderOnAddRemove = this.canvas.renderOnAddRemove;
    this.canvas.renderOnAddRemove = false;

    try {
      // 移除合并后的图像
      if (this.mergedImage) {
        this.canvas.remove(this.mergedImage);

        const imageIndex = this.activeLayer.fabricObjects.findIndex(
          (obj) => obj.id === this.newImageId
        );
        if (imageIndex !== -1) {
          this.activeLayer.fabricObjects.splice(imageIndex, 1);
        }
      }

      // 按原始顺序恢复对象到画布
      this.originalObjects.forEach((obj) => {
        if (obj) {
          this.canvas.add(obj);
        }
      });

      // 恢复图层对象列表
      this.activeLayer.fabricObjects = [...this.originalObjects];
      console.log(`成功撤销图层 ${this.activeLayer.name} 的对象合并操作`);
    } catch (error) {
      console.error("撤销合并操作时发生错误:", error);
    } finally {
      this.canvas.renderOnAddRemove = wasRenderOnAddRemove;
      this.canvas.renderAll();

      // 更新缩略图
      if (this.canvas.thumbnailManager) {
        setTimeout(() => {
          this.canvas.thumbnailManager.generateLayerThumbnail(
            this.activeLayer.id
          );
        }, 100);
      }
    }
  }

  /**
   * 安全地清理临时画布资源
   * @param {fabric.Canvas} tempCanvas 临时画布
   * @private
   */
  _cleanupTempCanvas(tempCanvas) {
    if (!tempCanvas) return;

    try {
      tempCanvas.clear();

      const objects = tempCanvas.getObjects();
      objects.forEach((obj) => {
        tempCanvas.remove(obj);
      });

      const canvasEl = tempCanvas.getElement();
      if (canvasEl && canvasEl.getContext) {
        const ctx = canvasEl.getContext("2d");
        if (ctx) {
          ctx.clearRect(0, 0, canvasEl.width, canvasEl.height);
        }
      }

      if (typeof tempCanvas.destroy === "function") {
        tempCanvas.destroy();
      }

      if (canvasEl && canvasEl.parentNode) {
        canvasEl.parentNode.removeChild(canvasEl);
      }

      console.log("临时画布资源已安全清理");
    } catch (error) {
      console.warn("清理临时画布时发生警告:", error);
    }
  }

  getInfo() {
    return {
      name: this.name,
      layerId: this.activeLayer?.id,
      layerName: this.activeLayer?.name || "未知图层",
      originalObjectCount: this.originalObjects.length,
      hasNewImage: !!this.fabricImage,
      mergedImageId: this.newImageId,
    };
  }
}

/**
 * 合并图层内对象成组的命令
 * 将新的图像与图层内现有对象合并为一个组对象
 * 支持向现有组添加对象，以及移除空组
 */
export class LayerObjectsToGroupCommand extends Command {
  constructor(options) {
    super({
      name: "图层内对象合并为组",
      saveState: true,
    });
    this.canvas = options.canvas;
    this.layers = options.layers;
    this.fabricImage = options.fabricImage;
    this.activeLayer = options.activeLayer;

    // 备份原始对象，用于撤销
    if (this.activeLayer && Array.isArray(this.activeLayer.fabricObjects)) {
      this.originalObjects =
        this.canvas
          ?.getObjects()
          ?.filter((fItem) => fItem.layerId === this.activeLayer.id) || [];
    } else {
      this.originalObjects = [];
    }

    // 组对象相关
    this.existingGroup = null; // 现有的组对象
    this.groupObject = null; // 最终的组对象（可能是现有的或新创建的）
    this.newGroupId = `group_${Date.now()}_${Math.floor(Math.random() * 1000)}`;
    this.wasGroupCreated = false; // 是否创建了新组
    this.addedObjectsToGroup = []; // 添加到组中的新对象
    this.originalLayerObjects = [...(this.activeLayer.fabricObjects || [])]; // 备份图层原始对象列表
  }

  async execute() {
    if (!this.activeLayer || !this.canvas) {
      console.error("图层或Canvas未初始化");
      return null;
    }

    // 查找图层中是否已有组对象
    this.existingGroup = this._findExistingGroup();

    // 准备要添加的新对象
    const newObjectsToAdd = [];
    if (this.fabricImage) {
      newObjectsToAdd.push(this.fabricImage);
    }

    if (newObjectsToAdd.length === 0) {
      console.log("没有新对象需要添加到组");
      return this.existingGroup?.id || null;
    }

    try {
      // 暂时禁用画布自动渲染
      const wasRenderOnAddRemove = this.canvas.renderOnAddRemove;
      this.canvas.renderOnAddRemove = false;

      if (this.existingGroup) {
        // 如果已有组，将新对象添加到现有组中
        this.groupObject = this.existingGroup;
        this._addObjectsToExistingGroup(newObjectsToAdd);
        console.log(`✅ 将 ${newObjectsToAdd.length} 个对象添加到现有组中`);
      } else {
        // 如果没有组，创建新组
        this._createNewGroupWithAllObjects(newObjectsToAdd);
        this.wasGroupCreated = true;
        console.log(
          `✅ 创建新组并添加 ${
            this.originalObjects.length + newObjectsToAdd.length
          } 个对象`
        );
      }

      // 恢复画布自动渲染并重新渲染
      this.canvas.renderOnAddRemove = wasRenderOnAddRemove;
      this.canvas.renderAll();

      // 选中组对象
      // this.canvas.setActiveObject(this.groupObject);

      // 更新缩略图
      this._updateThumbnail();

      return this.groupObject.id;
    } catch (error) {
      console.error("执行组合操作时发生错误:", error);
      return null;
    }
  }

  /**
   * 查找图层中现有的组对象
   * @returns {fabric.Group|null}
   * @private
   */
  _findExistingGroup() {
    if (!this.activeLayer.fabricObjects) return null;

    return (
      this.activeLayer.fabricObjects.find(
        (obj) => obj && obj.type === "group"
      ) || null
    );
  }

  /**
   * 将新对象添加到现有组中
   * @param {Array} newObjects 要添加的新对象
   * @private
   */
  _addObjectsToExistingGroup(newObjects) {
    // 先从画布移除新对象（避免重复添加）
    newObjects.forEach((obj) => {
      if (this.canvas.getObjects().includes(obj)) {
        this.canvas.remove(obj);
      }
    });

    // 使用 addWithUpdate 方法正确添加对象到组
    newObjects.forEach((obj) => {
      this.existingGroup.addWithUpdate(obj);
    });

    // 记录添加的对象，用于撤销
    this.addedObjectsToGroup = newObjects;

    // 组对象引用不变，只是内容更新了
    this.groupObject = this.existingGroup;
  }

  /**
   * 创建包含所有对象的新组
   * @param {Array} newObjects 新添加的对象
   * @private
   */
  _createNewGroupWithAllObjects(newObjects) {
    const allObjects = [...this.originalObjects, ...newObjects];

    // 从画布中移除所有要组合的对象
    allObjects.forEach((obj) => {
      if (obj && this.canvas.getObjects().includes(obj)) {
        this.canvas.remove(obj);
      }
    });

    // 创建组对象 - Fabric.js 5 中创建组时会自动将对象从画布移除
    // 不需要手动从画布中移除对象
    this.groupObject = new fabric.Group(allObjects, {
      id: this.newGroupId,
      layerId: this.activeLayer.id,
      layerName: this.activeLayer.name,
      selectable: true,
      evented: true,
    });

    // 添加组对象到画布
    this.canvas.add(this.groupObject);

    // 更新图层的对象列表 - 只包含组对象
    this.activeLayer.fabricObjects = [this.groupObject];

    // 记录添加的对象
    this.addedObjectsToGroup = newObjects;
  }

  undo() {
    if (!this.activeLayer || !this.canvas || !this.groupObject) return;

    try {
      // 暂时禁用画布自动渲染
      const wasRenderOnAddRemove = this.canvas.renderOnAddRemove;
      this.canvas.renderOnAddRemove = false;

      if (this.wasGroupCreated) {
        // 如果是新创建的组，完全撤销到原始状态
        this._undoNewGroupCreation();
      } else {
        // 如果是向现有组添加对象，只移除新添加的对象
        this._undoAddToExistingGroup();
      }

      // 恢复画布自动渲染并重新渲染
      this.canvas.renderOnAddRemove = wasRenderOnAddRemove;
      this.canvas.renderAll();

      // 更新缩略图
      this._updateThumbnail();

      console.log(`↩️ 成功撤销图层 ${this.activeLayer.name} 的对象组合操作`);
    } catch (error) {
      console.error("撤销组合操作时发生错误:", error);
    }
  }

  /**
   * 撤销新组的创建
   * @private
   */
  _undoNewGroupCreation() {
    // 从画布中移除组对象
    if (this.canvas.getObjects().includes(this.groupObject)) {
      this.canvas.remove(this.groupObject);
    }

    // 解散组 - 使用 destroy 方法或直接处理
    if (typeof this.groupObject.destroy === "function") {
      this.groupObject?.destroy?.();
    }

    // 将原始对象重新添加到画布
    // 注意：解散组后，对象会自动恢复到画布上，但需要重新设置属性
    this.originalObjects.forEach((obj) => {
      if (obj && !this.canvas.getObjects().includes(obj)) {
        // 恢复对象的原始属性
        obj.layerId = this.activeLayer.id;
        obj.layerName = this.activeLayer.name;
        this.canvas.add(obj);
      }
    });

    // 恢复图层对象列表
    this.activeLayer.fabricObjects = [...this.originalObjects];
  }

  /**
   * 撤销向现有组添加对象的操作
   * @private
   */
  _undoAddToExistingGroup() {
    // 使用 removeWithUpdate 方法从组中移除新添加的对象
    // 在 Fabric.js 5 中，removeWithUpdate 会自动将对象重新添加到画布
    this.addedObjectsToGroup.forEach((obj) => {
      this.existingGroup.removeWithUpdate(obj);

      // 重新设置对象的图层关联
      obj.layerId = this.activeLayer.id;
      obj.layerName = this.activeLayer.name;

      // 确保对象在图层对象列表中
      if (!this.activeLayer.fabricObjects.includes(obj)) {
        this.activeLayer.fabricObjects.push(obj);
      }
    });

    // 检查组是否变为空或只有一个对象
    const remainingObjects = this.existingGroup.getObjects();
    if (remainingObjects.length === 0) {
      // 组为空，移除组
      this.canvas.remove(this.existingGroup);
      const groupIndex = this.activeLayer.fabricObjects.indexOf(
        this.existingGroup
      );
      if (groupIndex !== -1) {
        this.activeLayer.fabricObjects.splice(groupIndex, 1);
      }
    } else if (remainingObjects.length === 1) {
      // 只剩一个对象，解散组
      const singleObj = remainingObjects[0];

      // 从画布移除组
      this.canvas.remove(this.existingGroup);

      // 使用 removeWithUpdate 移除最后一个对象
      // 这会自动将对象添加回画布
      this.existingGroup.removeWithUpdate(singleObj);

      // 重新设置对象属性
      singleObj.layerId = this.activeLayer.id;
      singleObj.layerName = this.activeLayer.name;

      // 更新图层对象列表
      const groupIndex = this.activeLayer.fabricObjects.indexOf(
        this.existingGroup
      );
      if (groupIndex !== -1) {
        this.activeLayer.fabricObjects[groupIndex] = singleObj;
      }
    }
  }

  /**
   * 更新缩略图
   * @private
   */
  _updateThumbnail() {
    if (this.canvas.thumbnailManager) {
      setTimeout(() => {
        this.canvas.thumbnailManager.generateLayerThumbnail(
          this.activeLayer.id
        );
      }, 100);
    }
  }

  getInfo() {
    return {
      name: this.name,
      layerId: this.activeLayer?.id,
      layerName: this.activeLayer?.name || "未知图层",
      originalObjectCount: this.originalObjects.length,
      hasNewImage: !!this.fabricImage,
      groupId: this.groupObject?.id,
      wasGroupCreated: this.wasGroupCreated,
      addedObjectsCount: this.addedObjectsToGroup.length,
    };
  }
}

/**
 * 创建图片图层复合命令
 * 包含创建图层、添加对象到图层、切换工具等操作的复合命令
 */
export class CreateImageLayerCommand extends Command {
  constructor(options) {
    super({
      name: "创建图片图层",
      saveState: true,
    });
    this.layerManager = options.layerManager;
    this.fabricImage = options.fabricImage;
    this.toolManager = options.toolManager;
    this.layerName = options.layerName || null;

    // 存储执行过程中的结果
    this.newLayerId = null;
    this.commands = [];
    this.executedCommands = [];
  }

  async execute() {
    if (!this.layerManager || !this.fabricImage) {
      throw new Error("图层管理器或图片对象无效");
    }

    try {
      this.commands = [];
      this.executedCommands = [];

      // 生成图层名称
      const fileName =
        this.layerName || `图片 ${new Date().toLocaleTimeString()}`;

      // 1. 创建新图层命令
      const createLayerCmd = new AddLayerCommand({
        canvas: this.layerManager.canvas,
        layers: this.layerManager.layers,
        newLayer: createLayer({
          name: fileName,
          type: LayerType.BITMAP,
          visible: true,
          locked: false,
          opacity: 1.0,
          fabricObjects: [],
        }),
        activeLayerId: this.layerManager.activeLayerId,
        insertIndex: this.layerManager._getInsertIndexAboveActiveLayer(),
      });

      // 执行创建图层命令
      this.newLayerId = await createLayerCmd.execute();
      this.commands.push(createLayerCmd);
      this.executedCommands.push(createLayerCmd);

      // 2. 添加图片对象到图层命令
      const addObjectCmd = new AddObjectToLayerCommand({
        canvas: this.layerManager.canvas,
        layers: this.layerManager.layers,
        layerId: this.newLayerId,
        fabricObject: this.fabricImage,
      });

      // 执行添加对象命令
      await addObjectCmd.execute();
      this.commands.push(addObjectCmd);
      this.executedCommands.push(addObjectCmd);

      // 3. 切换工具到选择模式命令
      if (this.toolManager) {
        const toolCmd = new ToolCommand({
          toolManager: this.toolManager,
          tool: OperationType.SELECT,
          previousTool: this.toolManager.getCurrentTool(),
        });

        // 执行工具切换命令
        await toolCmd.execute();
        this.commands.push(toolCmd);
        this.executedCommands.push(toolCmd);
      }

      console.log(`✅ 创建图片图层完成: ${fileName}, ID: ${this.newLayerId}`);
      return this.newLayerId;
    } catch (error) {
      console.error("创建图片图层失败:", error);
      // 回滚已执行的命令
      await this._rollbackExecutedCommands();
      throw error;
    }
  }

  async undo() {
    if (this.executedCommands.length === 0) {
      console.warn("没有已执行的命令需要撤销");
      return true;
    }

    console.log(
      `↩️ 开始撤销创建图片图层操作，共 ${this.executedCommands.length} 个子命令`
    );

    try {
      // 逆序撤销已执行的命令
      const commands = [...this.executedCommands].reverse();

      for (const command of commands) {
        if (typeof command.undo === "function") {
          try {
            console.log(`↩️ 撤销子命令: ${command.constructor.name}`);
            const result = command.undo();
            if (this._isPromise(result)) {
              await result;
            }
            console.log(`✅ 子命令撤销成功: ${command.constructor.name}`);
          } catch (error) {
            console.error(
              `❌ 子命令撤销失败: ${command.constructor.name}`,
              error
            );
          }
        }
      }

      this.executedCommands = [];
      console.log(`✅ 创建图片图层撤销完成`);
      return true;
    } catch (error) {
      console.error("❌ 撤销创建图片图层过程中发生错误:", error);
      throw error;
    }
  }

  /**
   * 回滚已执行的命令（内部使用）
   * @private
   */
  async _rollbackExecutedCommands() {
    console.log(`🔄 开始回滚已执行的 ${this.executedCommands.length} 个子命令`);

    const commands = [...this.executedCommands].reverse();

    for (const command of commands) {
      if (typeof command.undo === "function") {
        try {
          console.log(`🔄 回滚子命令: ${command.constructor.name}`);
          const result = command.undo();
          if (this._isPromise(result)) {
            await result;
          }
          console.log(`✅ 子命令回滚成功: ${command.constructor.name}`);
        } catch (error) {
          console.error(
            `❌ 子命令回滚失败: ${command.constructor.name}`,
            error
          );
        }
      }
    }

    this.executedCommands = [];
    console.log(`✅ 回滚完成`);
  }

  /**
   * 检查返回值是否为Promise
   * @private
   */
  _isPromise(value) {
    return (
      value &&
      typeof value === "object" &&
      typeof value.then === "function" &&
      typeof value.catch === "function"
    );
  }

  getInfo() {
    return {
      name: this.name,
      layerName: this.layerName,
      layerId: this.newLayerId,
      commandCount: this.commands.length,
      executedCount: this.executedCommands.length,
    };
  }
}

/**
 * 图层重新排序命令
 */
export class ReorderLayersCommand extends Command {
  constructor(options) {
    super({
      name: "图层重新排序",
      saveState: false,
    });
    this.layers = options.layers;
    this.oldIndex = options.oldIndex;
    this.newIndex = options.newIndex;
    this.layerId = options.layerId;

    // 验证参数
    if (this.oldIndex === undefined || this.newIndex === undefined) {
      throw new Error("缺少必要的索引参数");
    }

    if (this.oldIndex === this.newIndex) {
      console.warn("新旧索引相同，无需排序");
    }
  }

  execute() {
    if (
      !this.layers ||
      !this.layers.value ||
      !Array.isArray(this.layers.value)
    ) {
      console.error("图层数组无效");
      return false;
    }

    if (this.oldIndex < 0 || this.oldIndex >= this.layers.value.length) {
      console.error("原始索引超出范围");
      return false;
    }

    if (this.newIndex < 0 || this.newIndex >= this.layers.value.length) {
      console.error("目标索引超出范围");
      return false;
    }

    // 获取要移动的图层
    const layerToMove = this.layers.value[this.oldIndex];

    if (!layerToMove) {
      console.error("找不到要移动的图层");
      return false;
    }

    // 验证图层ID是否匹配
    if (this.layerId && layerToMove.id !== this.layerId) {
      console.error("图层ID不匹配");
      return false;
    }

    // 执行重新排序
    this.layers.value.splice(this.oldIndex, 1);
    this.layers.value.splice(this.newIndex, 0, layerToMove);

    console.log(
      `✅ 图层 "${layerToMove.name}" 从索引 ${this.oldIndex} 移动到 ${this.newIndex}`
    );
    return true;
  }

  undo() {
    if (
      !this.layers ||
      !this.layers.value ||
      !Array.isArray(this.layers.value)
    ) {
      console.error("图层数组无效");
      return false;
    }

    if (this.newIndex < 0 || this.newIndex >= this.layers.value.length) {
      console.error("当前索引超出范围");
      return false;
    }

    // 获取当前在新位置的图层
    const layerToRestore = this.layers.value[this.newIndex];

    if (!layerToRestore) {
      console.error("找不到要恢复的图层");
      return false;
    }

    // 验证图层ID是否匹配
    if (this.layerId && layerToRestore.id !== this.layerId) {
      console.error("图层ID不匹配");
      return false;
    }

    // 恢复原始排序
    this.layers.value.splice(this.newIndex, 1);
    this.layers.value.splice(this.oldIndex, 0, layerToRestore);

    console.log(
      `↩️ 图层 "${layerToRestore.name}" 恢复到原始位置 ${this.oldIndex}`
    );
    return true;
  }

  getInfo() {
    return {
      name: this.name,
      layerId: this.layerId,
      oldIndex: this.oldIndex,
      newIndex: this.newIndex,
    };
  }
}

/**
 * 子图层重新排序命令
 */
export class ReorderChildLayersCommand extends Command {
  constructor(options) {
    super({
      name: "子图层重新排序",
      saveState: false,
    });
    this.layers = options.layers;
    this.parentId = options.parentId;
    this.oldIndex = options.oldIndex;
    this.newIndex = options.newIndex;
    this.layerId = options.layerId;
  }

  execute() {
    // 查找父图层
    const parentLayer = this.layers.value.find(
      (layer) => layer.id === this.parentId
    );

    if (!parentLayer || !parentLayer.children) {
      console.error("找不到父图层或父图层没有子图层");
      return false;
    }

    // 执行重新排序
    const childToMove = parentLayer.children[this.oldIndex];
    parentLayer.children.splice(this.oldIndex, 1);
    parentLayer.children.splice(this.newIndex, 0, childToMove);

    return true;
  }

  undo() {
    // 查找父图层
    const parentLayer = this.layers.value.find(
      (layer) => layer.id === this.parentId
    );

    if (!parentLayer || !parentLayer.children) {
      return false;
    }

    // 恢复原始排序
    const childToRestore = parentLayer.children[this.newIndex];
    parentLayer.children.splice(this.newIndex, 1);
    parentLayer.children.splice(this.oldIndex, 0, childToRestore);

    return true;
  }

  getInfo() {
    return {
      name: this.name,
      parentId: this.parentId,
      layerId: this.layerId,
      oldIndex: this.oldIndex,
      newIndex: this.newIndex,
    };
  }
}

/**
 * 更改固定图层图像命令
 * 用于更换固定图层（红绿图模式、模特图层等）的图像内容
 */
export class ChangeFixedImageCommand extends Command {
  constructor(options) {
    super({
      name: "更改固定图层图像",
      saveState: true,
    });
    this.canvas = options.canvas;
    this.layers = options.layers;
    this.layerId = options.layerId;
    this.newImageFile = options.newImageFile;
    this.layerManager = options.layerManager;

    // 备份原始数据
    this.originalLayer = null;
    this.originalObject = null;
    this.newImageObject = null;
  }

  async execute() {
    if (!this.canvas || !this.layers || !this.layerId || !this.newImageFile) {
      throw new Error("更改固定图层图像命令缺少必要参数");
    }

    // 查找目标固定图层
    this.originalLayer = this.layers.value.find(
      (layer) => layer.id === this.layerId
    );

    if (!this.originalLayer) {
      throw new Error(`找不到图层 ID: ${this.layerId}`);
    }

    // 验证是否为固定图层
    if (!this.originalLayer.isFixed && !this.originalLayer.isBackground) {
      throw new Error("只能更改固定图层或背景图层的图像");
    }

    // 备份原始对象
    if (this.originalLayer.fabricObject) {
      this.originalObject = this.originalLayer.fabricObject;
    }

    // 创建新的图像对象
    this.newImageObject = await this._createImageFromFile(this.newImageFile);

    // 设置新图像的属性
    this._setupNewImageProperties();

    // 替换图层中的对象
    this._replaceLayerObject();

    // 重新渲染画布
    this.canvas.renderAll();

    console.log(`✅ 成功更改固定图层 "${this.originalLayer.name}" 的图像`);
    return this.newImageObject.id;
  }

  /**
   * 从文件创建图像对象
   * @param {File} file 图像文件
   * @returns {Promise<fabric.Image>} 图像对象
   * @private
   */
  async _createImageFromFile(file) {
    return new Promise((resolve, reject) => {
      const reader = new FileReader();
      reader.onload = (e) => {
        fabric.Image.fromURL(
          e.target.result,
          (img) => {
            if (!img) {
              reject(new Error("无法创建图像对象"));
              return;
            }
            resolve(img);
          },
          {
            crossOrigin: "anonymous",
          }
        );
      };
      reader.onerror = () => reject(new Error("文件读取失败"));
      reader.readAsDataURL(file);
    });
  }

  /**
   * 设置新图像的属性
   * @private
   */
  _setupNewImageProperties() {
    if (!this.newImageObject || !this.originalLayer) return;

    // 生成新的ID
    const newId = `fixed_image_${Date.now()}_${Math.floor(
      Math.random() * 1000
    )}`;

    // 基本属性设置
    this.newImageObject.set({
      id: newId,
      layerId: this.originalLayer.id,
      layerName: this.originalLayer.name,
      selectable: false, // 固定图层通常不可选择
      evented: false, // 固定图层通常不响应事件
      visible: this.originalLayer.visible,
      opacity: this.originalLayer.opacity || 1.0,
    });

    // 如果有原始对象，继承其位置和变换属性
    if (this.originalObject) {
      this.newImageObject.set({
        left: this.originalObject.left,
        top: this.originalObject.top,
        scaleX: this.originalObject.scaleX,
        scaleY: this.originalObject.scaleY,
        angle: this.originalObject.angle,
        flipX: this.originalObject.flipX,
        flipY: this.originalObject.flipY,
        originX: this.originalObject.originX || "center",
        originY: this.originalObject.originY || "center",
      });
    } else {
      // 如果没有原始对象，设置默认居中位置
      const canvasCenter = this.canvas.getCenter();
      this.newImageObject.set({
        left: canvasCenter.left,
        top: canvasCenter.top,
        originX: "center",
        originY: "center",
      });
    }

    // 如果是背景图层，可能需要特殊处理
    if (this.originalLayer.isBackground) {
      this.newImageObject.set({
        isBackground: true,
      });
    }
  }

  /**
   * 替换图层中的对象
   * @private
   */
  _replaceLayerObject() {
    // 从画布移除原始对象
    if (
      this.originalObject &&
      this.canvas.getObjects().includes(this.originalObject)
    ) {
      this.canvas.remove(this.originalObject);
    }

    // 添加新对象到画布
    this.canvas.add(this.newImageObject);

    // 更新图层引用
    this.originalLayer.fabricObject = this.newImageObject;

    // 如果图层有 fabricObjects 数组，也要更新
    if (this.originalLayer.fabricObjects) {
      if (this.originalObject) {
        const index = this.originalLayer.fabricObjects.indexOf(
          this.originalObject
        );
        if (index !== -1) {
          this.originalLayer.fabricObjects[index] = this.newImageObject;
        } else {
          this.originalLayer.fabricObjects.push(this.newImageObject);
        }
      } else {
        this.originalLayer.fabricObjects.push(this.newImageObject);
      }
    }

    // 确保图层顺序正确（固定图层通常在特定位置）
    this._adjustObjectZIndex();
  }

  /**
   * 调整对象的Z轴顺序
   * @private
   */
  _adjustObjectZIndex() {
    if (!this.newImageObject || !this.originalLayer) return;

    // 如果是背景图层，确保在最底层
    if (this.originalLayer.isBackground) {
      this.newImageObject.sendToBack();
    } else if (this.originalLayer.isFixed) {
      // 如果是固定图层，放在背景层之上，普通图层之下
      const backgroundObjects = this.canvas
        .getObjects()
        .filter((obj) => obj.isBackground);
      if (backgroundObjects.length > 0) {
        this.newImageObject.bringForward(); // 向前移动一层
      }
    }
  }

  async undo() {
    if (!this.canvas || !this.originalLayer) {
      console.error("无法撤销：缺少必要的状态信息");
      return false;
    }

    try {
      // 从画布移除新对象
      if (
        this.newImageObject &&
        this.canvas.getObjects().includes(this.newImageObject)
      ) {
        this.canvas.remove(this.newImageObject);
      }

      // 恢复原始对象
      if (this.originalObject) {
        this.canvas.add(this.originalObject);
        this.originalLayer.fabricObject = this.originalObject;

        // 恢复 fabricObjects 数组
        if (this.originalLayer.fabricObjects) {
          const newIndex = this.originalLayer.fabricObjects.indexOf(
            this.newImageObject
          );
          if (newIndex !== -1) {
            this.originalLayer.fabricObjects[newIndex] = this.originalObject;
          }
        }
      } else {
        // 如果原来没有对象，清空图层引用
        this.originalLayer.fabricObject = null;
        if (this.originalLayer.fabricObjects) {
          this.originalLayer.fabricObjects =
            this.originalLayer.fabricObjects.filter(
              (obj) => obj !== this.newImageObject
            );
        }
      }

      // 重新渲染画布
      this.canvas.renderAll();

      console.log(
        `↩️ 成功撤销固定图层 "${this.originalLayer.name}" 的图像更改`
      );
      return true;
    } catch (error) {
      console.error("撤销更改固定图层图像时发生错误:", error);
      return false;
    }
  }

  getInfo() {
    return {
      name: this.name,
      layerId: this.layerId,
      layerName: this.originalLayer?.name || "未知图层",
      fileName: this.newImageFile?.name || "未知文件",
      hasOriginalObject: !!this.originalObject,
      newImageId: this.newImageObject?.id,
    };
  }
}

/**
 * 添加图像到图层命令
 * 如果指定图层ID则添加到指定图层，否则创建新图层
 */
export class AddImageToLayerCommand extends Command {
  constructor(options) {
    super({
      name: "添加图像到图层",
      saveState: true,
    });
    this.canvas = options.canvas;
    this.layers = options.layers;
    this.activeLayerId = options.activeLayerId;
    this.imageFile = options.imageFile;
    this.targetLayerId = options.targetLayerId; // 可选：指定目标图层ID
    this.layerManager = options.layerManager;
    this.toolManager = options.toolManager;

    // 执行结果
    this.createdImageObject = null;
    this.usedLayerId = null;
    this.wasLayerCreated = false;
    this.subCommands = [];
    this.executedSubCommands = [];
  }

  async execute() {
    if (!this.canvas || !this.layers || !this.imageFile) {
      throw new Error("添加图像到图层命令缺少必要参数");
    }

    try {
      // 创建图像对象
      this.createdImageObject = await this._createImageFromFile(this.imageFile);

      // 确定目标图层
      const targetLayer = await this._determineTargetLayer();
      this.usedLayerId = targetLayer.id;

      // 添加图像到图层
      await this._addImageToLayer(targetLayer);

      // 切换到选择工具
      await this._switchToSelectTool();

      console.log(`✅ 成功添加图像到图层 "${targetLayer.name}"`);
      return {
        layerId: this.usedLayerId,
        imageId: this.createdImageObject.id,
        wasLayerCreated: this.wasLayerCreated,
      };
    } catch (error) {
      console.error("添加图像到图层失败:", error);
      // 回滚已执行的子命令
      await this._rollbackSubCommands();
      throw error;
    }
  }

  /**
   * 从文件创建图像对象
   * @param {File} file 图像文件
   * @returns {Promise<fabric.Image>} 图像对象
   * @private
   */
  async _createImageFromFile(file) {
    return new Promise((resolve, reject) => {
      const reader = new FileReader();
      reader.onload = (e) => {
        fabric.Image.fromURL(
          e.target.result,
          (img) => {
            if (!img) {
              reject(new Error("无法创建图像对象"));
              return;
            }

            // 设置图像基本属性
            const imageId = `image_${Date.now()}_${Math.floor(
              Math.random() * 1000
            )}`;

            // 获取画布中心点
            const canvasCenter = this.canvas.getCenter();

            img.set({
              id: imageId,
              left: canvasCenter.left,
              top: canvasCenter.top,
              originX: "center",
              originY: "center",
              selectable: true,
              evented: true,
            });

            resolve(img);
          },
          {
            crossOrigin: "anonymous",
          }
        );
      };
      reader.onerror = () => reject(new Error("文件读取失败"));
      reader.readAsDataURL(file);
    });
  }

  /**
   * 确定目标图层
   * @returns {Promise<Object>} 目标图层对象
   * @private
   */
  async _determineTargetLayer() {
    // 如果指定了目标图层ID，查找该图层
    if (this.targetLayerId) {
      const existingLayer = this.layers.value.find(
        (layer) => layer.id === this.targetLayerId
      );

      if (existingLayer) {
        // 验证图层是否可以添加对象
        if (existingLayer.isBackground) {
          throw new Error("不能向背景图层添加对象");
        }
        if (existingLayer.locked) {
          throw new Error("不能向锁定图层添加对象");
        }

        console.log(`使用指定图层: ${existingLayer.name}`);
        return existingLayer;
      } else {
        console.warn(`指定的图层ID不存在: ${this.targetLayerId}，将创建新图层`);
      }
    }

    // 创建新图层
    return await this._createNewLayer();
  }

  /**
   * 创建新图层
   * @returns {Promise<Object>} 新创建的图层对象
   * @private
   */
  async _createNewLayer() {
    // 生成图层名称
    const fileName = this.imageFile.name.replace(/\.[^/.]+$/, ""); // 移除文件扩展名
    const layerName = fileName || `图片 ${new Date().toLocaleTimeString()}`;

    // 创建图层对象
    const newLayer = createLayer({
      name: layerName,
      type: LayerType.BITMAP,
      visible: true,
      locked: false,
      opacity: 1.0,
      fabricObjects: [],
    });

    // 执行添加图层命令
    const addLayerCmd = new AddLayerCommand({
      canvas: this.canvas,
      layers: this.layers,
      newLayer: newLayer,
      activeLayerId: this.activeLayerId,
      insertIndex: this.layerManager?._getInsertIndexAboveActiveLayer?.(),
    });

    const layerId = await addLayerCmd.execute();
    this.subCommands.push(addLayerCmd);
    this.executedSubCommands.push(addLayerCmd);
    this.wasLayerCreated = true;

    console.log(`创建新图层: ${layerName}, ID: ${layerId}`);
    return newLayer;
  }

  /**
   * 添加图像到图层
   * @param {Object} targetLayer 目标图层
   * @private
   */
  async _addImageToLayer(targetLayer) {
    // 设置图像与图层的关联
    this.createdImageObject.set({
      layerId: targetLayer.id,
      layerName: targetLayer.name,
    });

    // 执行添加对象到图层命令
    const addObjectCmd = new AddObjectToLayerCommand({
      canvas: this.canvas,
      layers: this.layers,
      layerId: targetLayer.id,
      fabricObject: this.createdImageObject,
    });

    await addObjectCmd.execute();
    this.subCommands.push(addObjectCmd);
    this.executedSubCommands.push(addObjectCmd);

    console.log(`图像已添加到图层: ${targetLayer.name}`);
  }

  /**
   * 切换到选择工具
   * @private
   */
  async _switchToSelectTool() {
    if (!this.toolManager) return;

    const toolCmd = new ToolCommand({
      toolManager: this.toolManager,
      tool: OperationType.SELECT,
      previousTool: this.toolManager.getCurrentTool(),
    });

    await toolCmd.execute();
    this.subCommands.push(toolCmd);
    this.executedSubCommands.push(toolCmd);

    console.log("已切换到选择工具");
  }

  /**
   * 回滚已执行的子命令
   * @private
   */
  async _rollbackSubCommands() {
    console.log(`🔄 开始回滚 ${this.executedSubCommands.length} 个子命令`);

    const commands = [...this.executedSubCommands].reverse();

    for (const command of commands) {
      if (typeof command.undo === "function") {
        try {
          console.log(`🔄 回滚子命令: ${command.constructor.name}`);
          const result = command.undo();
          if (this._isPromise(result)) {
            await result;
          }
          console.log(`✅ 子命令回滚成功: ${command.constructor.name}`);
        } catch (error) {
          console.error(
            `❌ 子命令回滚失败: ${command.constructor.name}`,
            error
          );
        }
      }
    }

    this.executedSubCommands = [];
    console.log(`✅ 回滚完成`);
  }

  async undo() {
    if (this.executedCommands.length === 0) {
      console.warn("没有已执行的命令需要撤销");
      return true;
    }

    console.log(
      `↩️ 开始撤销创建图片图层操作，共 ${this.executedCommands.length} 个子命令`
    );

    try {
      // 逆序撤销已执行的命令
      const commands = [...this.executedCommands].reverse();

      for (const command of commands) {
        if (typeof command.undo === "function") {
          try {
            console.log(`↩️ 撤销子命令: ${command.constructor.name}`);
            const result = command.undo();
            if (this._isPromise(result)) {
              await result;
            }
            console.log(`✅ 子命令撤销成功: ${command.constructor.name}`);
          } catch (error) {
            console.error(
              `❌ 子命令撤销失败: ${command.constructor.name}`,
              error
            );
          }
        }
      }

      this.executedCommands = [];
      console.log(`✅ 创建图片图层撤销完成`);
      return true;
    } catch (error) {
      console.error("❌ 撤销创建图片图层过程中发生错误:", error);
      throw error;
    }
  }

  /**
   * 检查返回值是否为Promise
   * @private
   */
  _isPromise(value) {
    return (
      value &&
      typeof value === "object" &&
      typeof value.then === "function" &&
      typeof value.catch === "function"
    );
  }

  getInfo() {
    return {
      name: this.name,
      layerName: this.layerName,
      layerId: this.newLayerId,
      commandCount: this.commands.length,
      executedCount: this.executedCommands.length,
    };
  }
}