<template>
  <div class="h-screen flex flex-col overflow-hidden">
    <div class="flex flex-1 overflow-hidden relative">
      <!-- 左侧图形化区域 -->
      <div
        class="relative bg-base-200 overflow-hidden h-full"
        :style="{ width: leftPanelWidth + '%' }"
      >
        <DiagramCanvas
          ref="diagramCanvas"
          :componentModules="componentModules"
          :showDocPanel="showDocPanel"
          @component-selected="handleComponentSelected"
          @component-moved="handleComponentMoved"
          @component-delete="handleComponentDelete"
          @wire-created="handleWireCreated"
          @wire-deleted="handleWireDeleted"
          @diagram-updated="handleDiagramUpdated"
          @open-components="openComponentsMenu"
          @load-component-module="handleLoadComponentModule"
          @toggle-doc-panel="toggleDocPanel"
        />
      </div>

      <!-- 拖拽分割线 -->
      <div
        class="resizer bg-base-100 hover:bg-primary hover:opacity-70 active:bg-primary active:opacity-90 transition-colors"
        @mousedown="startResize"
      ></div>

      <!-- 右侧编辑区域 -->
      <div
        class="bg-base-200 h-full overflow-hidden flex flex-col"
        :style="{ width: 100 - leftPanelWidth + '%' }"
      >
        <div class="overflow-y-auto flex-1">
          <!-- 使用条件渲染显示不同的面板 -->
          <PropertyPanel
            v-if="!showDocPanel"
            :componentData="selectedComponentData"
            :componentConfig="selectedComponentConfig"
            @updateProp="updateComponentProp"
            @updateDirectProp="updateComponentDirectProp"
          />
          <div
            v-else
            class="doc-panel overflow-y-auto bg-base-100 rounded-md h-full"
          >
            <MarkdownRenderer :content="documentContent" />
          </div>
        </div>
      </div>
    </div>
    <!-- 元器件选择组件 -->
    <ComponentSelector
      :open="showComponentsMenu"
      @update:open="showComponentsMenu = $event"
      @add-component="handleAddComponent"
      @add-template="handleAddTemplate"
      @close="showComponentsMenu = false"
    />
  </div>
</template>

<script setup lang="ts">
// 引入wokwi-elements和组件
// import "@wokwi/elements"; // 不再需要全局引入 wokwi
import { ref, computed, onMounted, onUnmounted, shallowRef } from "vue"; // 引入 defineAsyncComponent 和 shallowRef
import DiagramCanvas from "@/components/DiagramCanvas.vue";
import ComponentSelector from "@/components/ComponentSelector.vue";
import PropertyPanel from "@/components/PropertyPanel.vue";
import MarkdownRenderer from "@/components/MarkdownRenderer.vue";
import type { DiagramData, DiagramPart } from "@/components/diagramManager";
import {
  type PropertyConfig,
  generatePropertyConfigs,
  generatePropsFromDefault,
  generatePropsFromAttrs,
} from "@/components/equipments/componentConfig"; // 引入组件配置工具

// --- 文档面板控制 ---
const showDocPanel = ref(false);
const documentContent = ref("");

// 切换文档面板和属性面板
async function toggleDocPanel() {
  showDocPanel.value = !showDocPanel.value;

  // 如果切换到文档面板，则获取文档内容
  if (showDocPanel.value) {
    const response = await fetch("/doc/01_water_led/water_led.md");
    documentContent.value = (await response.text()).replace(
      /.\/images/gi,
      "/doc/01_water_led/images",
    );
  }
}

// --- 元器件管理 ---
const showComponentsMenu = ref(false);
const diagramData = ref<DiagramData>({
  version: 1,
  author: "admin",
  editor: "me",
  parts: [],
  connections: [],
});

const selectedComponentId = ref<string | null>(null);
const selectedComponentData = computed(() => {
  return (
    diagramData.value.parts.find((p) => p.id === selectedComponentId.value) ||
    null
  );
});
const diagramCanvas = ref(null);

// 存储动态导入的组件模块
interface ComponentModule {
  default: any;
  getDefaultProps?: () => Record<string, any>;
  config?: {
    props?: Array<PropertyConfig>;
  };
}

const componentModules = shallowRef<Record<string, ComponentModule>>({});
const selectedComponentConfig = shallowRef<{ props: PropertyConfig[] } | null>(
  null,
); // 存储选中组件的配置

// 动态加载组件定义
async function loadComponentModule(type: string) {
  if (!componentModules.value[type]) {
    try {
      // 假设组件都在 src/components/equipments/ 目录下，且文件名与 type 相同
      const module = await import(`../components/equipments/${type}.vue`);

      // 使用 markRaw 包装模块，避免不必要的响应式处理
      componentModules.value = {
        ...componentModules.value,
        [type]: module,
      };

      console.log(`Loaded module for ${type}:`, module);
    } catch (error) {
      console.error(`Failed to load component module ${type}:`, error);
      return null;
    }
  }
  return componentModules.value[type];
}

// 处理组件模块加载请求
async function handleLoadComponentModule(type: string) {
  console.log("Handling load component module request for:", type);
  await loadComponentModule(type);
}

// --- 分割面板 ---
const leftPanelWidth = ref(60);
const isResizing = ref(false);

// 分割面板拖拽相关函数
function startResize(e: MouseEvent) {
  isResizing.value = true;
  document.addEventListener("mousemove", onResize);
  document.addEventListener("mouseup", stopResize);
  e.preventDefault(); // 防止文本选择
}

function onResize(e: MouseEvent) {
  if (!isResizing.value) return;

  // 获取容器宽度和鼠标位置
  const container = document.querySelector(
    ".flex-1.overflow-hidden",
  ) as HTMLElement;
  if (!container) return;

  const containerWidth = container.clientWidth;
  const mouseX = e.clientX;

  // 计算左侧面板应占的百分比
  let newWidth = (mouseX / containerWidth) * 100;

  // 限制最小宽度和最大宽度
  newWidth = Math.max(20, Math.min(newWidth, 80));

  // 更新宽度
  leftPanelWidth.value = newWidth;
}

function stopResize() {
  isResizing.value = false;
  document.removeEventListener("mousemove", onResize);
  document.removeEventListener("mouseup", stopResize);
}

// --- 元器件操作 ---
function openComponentsMenu() {
  showComponentsMenu.value = true;
}

// 处理 ComponentSelector 组件添加元器件事件
async function handleAddComponent(componentData: {
  type: string;
  name: string;
  props: Record<string, any>;
}) {
  // 加载组件模块以便后续使用
  const componentModule = await loadComponentModule(componentData.type);

  // 获取画布容器和位置信息
  const canvasInstance = diagramCanvas.value as any;

  // 获取当前画布的位置信息
  let position = { x: 100, y: 100 };
  let scale = 1;

  try {
    if (
      canvasInstance &&
      canvasInstance.getCanvasPosition &&
      canvasInstance.getScale
    ) {
      position = canvasInstance.getCanvasPosition();
      scale = canvasInstance.getScale();

      // 获取画布容器
      const canvasContainer = canvasInstance.$el as HTMLElement;
      if (canvasContainer) {
        // 计算可视区域中心点在画布坐标系中的位置
        const viewportWidth = canvasContainer.clientWidth;
        const viewportHeight = canvasContainer.clientHeight;

        // 计算画布中心点的坐标
        position.x = (viewportWidth / 2 - position.x) / scale;
        position.y = (viewportHeight / 2 - position.y) / scale;
      }
    }
  } catch (error) {
    console.error("获取画布位置时出错:", error);
  }

  // 添加一些随机偏移，避免元器件重叠
  const offsetX = Math.floor(Math.random() * 100) - 50;
  const offsetY = Math.floor(Math.random() * 100) - 50;

  // 获取组件的能力页面
  let capsPage = null;
  if (
    componentModule &&
    componentModule.default &&
    typeof componentModule.default.getCapabilities === "function"
  ) {
    try {
      capsPage = componentModule.default.getCapabilities();
      console.log(`获取到${componentData.type}组件的能力页面`);
    } catch (error) {
      console.error(`获取${componentData.type}组件能力页面失败:`, error);
    }
  }

  // 创建新组件，使用diagramManager接口定义
  const newComponent: DiagramPart = {
    id: `component-${Date.now()}`,
    type: componentData.type,
    x: Math.round(position.x + offsetX),
    y: Math.round(position.y + offsetY),
    attrs: componentData.props,
    rotate: 0,
    group: "",
    positionlock: false,
    hidepins: true,
    isOn: true,
    index: 0,
  };

  console.log("添加新组件:", newComponent);
  // 通过画布实例添加组件
  if (
    canvasInstance &&
    canvasInstance.getDiagramData &&
    canvasInstance.updateDiagramDataDirectly
  ) {
    const currentData = canvasInstance.getDiagramData();
    currentData.parts.push(newComponent);
    canvasInstance.updateDiagramDataDirectly(currentData);
  }
}

// 处理模板添加事件
async function handleAddTemplate(templateData: {
  id: string;
  name: string;
  template: any;
}) {
  console.log("添加模板:", templateData);
  console.log("=== 模板组件数量:", templateData.template?.parts?.length || 0);
  // 获取画布实例
  const canvasInstance = diagramCanvas.value as any;
  if (
    !canvasInstance ||
    !canvasInstance.getDiagramData ||
    !canvasInstance.updateDiagramDataDirectly
  ) {
    console.error("没有可用的画布实例添加模板");
    return;
  }

  // 获取当前图表数据
  const currentData = canvasInstance.getDiagramData();
  console.log("=== 当前图表组件数量:", currentData.parts.length);

  // 生成唯一ID前缀，以确保添加的组件ID不重复
  const idPrefix = `template-${Date.now()}-`;
  // 处理模板组件并添加到图表
  if (templateData.template && templateData.template.parts) {
    // 获取当前视口中心位置
    let viewportCenter = { x: 300, y: 200 }; // 默认值
    try {
      if (
        canvasInstance &&
        canvasInstance.getCanvasPosition &&
        canvasInstance.getScale
      ) {
        const position = canvasInstance.getCanvasPosition();
        const scale = canvasInstance.getScale();

        // 获取画布容器
        const canvasContainer = canvasInstance.$el as HTMLElement;
        if (canvasContainer) {
          // 计算可视区域中心点在画布坐标系中的位置
          const viewportWidth = canvasContainer.clientWidth;
          const viewportHeight = canvasContainer.clientHeight;

          // 计算视口中心点的坐标 (与handleAddComponent函数中的方法相同)
          viewportCenter.x = (viewportWidth / 2 - position.x) / scale;
          viewportCenter.y = (viewportHeight / 2 - position.y) / scale;
          console.log(
            `=== 计算的视口中心: x=${viewportCenter.x}, y=${viewportCenter.y}, scale=${scale}`,
          );
        }
      }
    } catch (error) {
      console.error("获取视口中心位置时出错:", error);
    }

    console.log("=== 使用视口中心添加模板组件:", viewportCenter);

    // 找到模板中的主要组件（假设是第一个组件）
    const mainPart = templateData.template.parts[0];

    // 创建带有新位置的组件
    const newParts = await Promise.all(
      templateData.template.parts.map(async (part: any) => {
        // 创建组件副本并分配新ID
        const newPart = JSON.parse(JSON.stringify(part));
        newPart.id = `${idPrefix}${part.id}`;

        // 尝试加载组件模块并获取能力页面
        try {
          const componentModule = await loadComponentModule(part.type);
          if (
            componentModule &&
            componentModule.default &&
            typeof componentModule.default.getCapabilities === "function"
          ) {
            newPart.capsPage = componentModule.default.getCapabilities();
            console.log(`加载模板组件${part.type}组件的能力页面成功`);
          }
        } catch (error) {
          console.error(`加载模板组件${part.type}的能力页面失败:`, error);
        }

        // 计算相对于主要组件的偏移量，保持模板内部组件的相对位置关系
        if (typeof newPart.x === "number" && typeof newPart.y === "number") {
          const oldX = newPart.x;
          const oldY = newPart.y;

          // 计算相对位置（相对于主要组件）
          const relativeX = part.x - mainPart.x;
          const relativeY = part.y - mainPart.y;

          // 应用到视口中心位置
          newPart.x = viewportCenter.x + relativeX;
          newPart.y = viewportCenter.y + relativeY;

          console.log(
            `=== 组件[${newPart.id}]位置调整: (${oldX},${oldY}) -> (${newPart.x},${newPart.y})`,
          );
        }

        return newPart;
      }),
    );

    // 向图表添加新组件
    currentData.parts.push(...newParts);

    // 处理连接关系
    if (templateData.template.connections) {
      // 创建一个映射表用于转换旧组件ID到新组件ID
      const idMap: Record<string, string> = {};
      templateData.template.parts.forEach((part: any) => {
        idMap[part.id] = `${idPrefix}${part.id}`;
      });

      // 添加连接，更新组件ID引用
      const newConnections = templateData.template.connections.map(
        (conn: any) => {
          // 处理连接数据 (格式为 [from, to, type, path])
          if (Array.isArray(conn)) {
            const [from, to, type, path] = conn;

            // 从连接字符串中提取组件ID和引脚ID
            const fromParts = from.split(":");
            const toParts = to.split(":");

            if (fromParts.length === 2 && toParts.length === 2) {
              const fromComponentId = fromParts[0];
              const fromPinId = fromParts[1];
              const toComponentId = toParts[0];
              const toPinId = toParts[1];

              // 创建新的连接字符串，使用新的组件ID
              const newFrom = `${idMap[fromComponentId] || fromComponentId}:${fromPinId}`;
              const newTo = `${idMap[toComponentId] || toComponentId}:${toPinId}`;

              return [newFrom, newTo, type, path];
            }
          }
          return conn; // 如果格式不匹配，保持原样
        },
      );

      // 添加到当前连接列表
      currentData.connections.push(...newConnections);
    }
    // 更新图表数据
    canvasInstance.updateDiagramDataDirectly(currentData);
    console.log("=== 更新图表数据完成，新组件数量:", currentData.parts.length);

    // 显示成功消息
    showToast(`已添加 ${templateData.name} 模板`, "success");
  } else {
    console.error("模板格式错误，缺少parts数组");
    showToast("模板格式错误", "error");
  }
}

// 处理组件选中事件
async function handleComponentSelected(componentData: DiagramPart | null) {
  selectedComponentId.value = componentData ? componentData.id : null;
  selectedComponentConfig.value = null; // 重置配置

  if (componentData) {
    // 先加载组件模块
    const moduleRef = await loadComponentModule(componentData.type);

    if (moduleRef) {
      try {
        // 创建属性配置数组
        const propConfigs: PropertyConfig[] = [];

        // 创建一个映射来跟踪已添加的属性名
        const addedProps = new Set<string>();

        // 1. 首先从getDefaultProps方法获取默认配置
        if (typeof moduleRef.getDefaultProps === "function") {
          const defaultProps = moduleRef.getDefaultProps();
          const defaultPropConfigs = generatePropsFromDefault(defaultProps);

          // 添加默认配置并记录属性名
          defaultPropConfigs.forEach((config) => {
            propConfigs.push(config);
            addedProps.add(config.name);
          });
        }

        // 2. 添加组件直接属性，这些属性会覆盖默认配置
        const directPropConfigs = generatePropertyConfigs(componentData);

        // 过滤掉已经添加过的属性名
        const newDirectProps = directPropConfigs.filter(
          (config) => !addedProps.has(config.name),
        );
        propConfigs.push(...newDirectProps);

        // 3. 最后添加attrs中的属性
        if (componentData.attrs) {
          const attrs = componentData.attrs;
          const attrPropConfigs = generatePropsFromAttrs(attrs);

          // 更新已存在的属性值，或添加新属性
          attrPropConfigs.forEach((attrConfig) => {
            const existingIndex = propConfigs.findIndex(
              (p) => p.name === attrConfig.name,
            );
            if (existingIndex >= 0) {
              // 更新已存在的属性值
              propConfigs[existingIndex] = attrConfig;
            } else {
              // 添加新属性
              propConfigs.push(attrConfig);
            }
          });
        }

        selectedComponentConfig.value = { props: propConfigs };
        console.log(
          `Built config for ${componentData.type}:`,
          selectedComponentConfig.value,
        );
      } catch (error) {
        console.error(
          `Error building config for ${componentData.type}:`,
          error,
        );
        selectedComponentConfig.value = { props: [] };
      }
    } else {
      console.warn(`Module for component ${componentData.type} not found.`);
      selectedComponentConfig.value = { props: [] };
    }
  }
}

// 处理图表数据更新事件
function handleDiagramUpdated(data: DiagramData) {
  diagramData.value = data;
  console.log("Diagram data updated:", data);
}

// 处理组件移动事件
function handleComponentMoved(moveData: { id: string; x: number; y: number }) {
  const part = diagramData.value.parts.find((p) => p.id === moveData.id);
  if (part) {
    part.x = moveData.x;
    part.y = moveData.y;
  }
}

// 处理组件删除事件
function handleComponentDelete(componentId: string) {
  // 查找要删除的组件
  const component = diagramData.value.parts.find((p) => p.id === componentId);
  if (!component) return;

  // 收集需要删除的组件ID列表（包括当前组件和同组组件）
  const componentsToDelete: string[] = [componentId];

  // 如果组件属于一个组，则找出所有同组的组件
  if (component.group && component.group !== "") {
    const groupMembers = diagramData.value.parts.filter(
      (p) => p.group === component.group && p.id !== componentId,
    );

    // 将同组组件ID添加到删除列表
    componentsToDelete.push(...groupMembers.map((p) => p.id));
    console.log(
      `删除组件 ${componentId} 及其组 ${component.group} 中的 ${groupMembers.length} 个组件`,
    );
  }

  // 删除所有标记的组件
  diagramData.value.parts = diagramData.value.parts.filter(
    (p) => !componentsToDelete.includes(p.id),
  );

  // 同时删除与这些组件相关的所有连接
  diagramData.value.connections = diagramData.value.connections.filter(
    (connection) => {
      for (const id of componentsToDelete) {
        if (
          connection[0].startsWith(`${id}:`) ||
          connection[1].startsWith(`${id}:`)
        ) {
          return false;
        }
      }
      return true;
    },
  );

  // 如果删除的是当前选中的组件，清除选中状态
  if (
    selectedComponentId.value &&
    componentsToDelete.includes(selectedComponentId.value)
  ) {
    selectedComponentId.value = null;
    selectedComponentConfig.value = null;
  }
}

// 更新组件属性的方法
function updateComponentProp(
  componentId: string,
  propName: string,
  value: any,
) {
  const canvasInstance = diagramCanvas.value as any;
  if (
    !canvasInstance ||
    !canvasInstance.getDiagramData ||
    !canvasInstance.updateDiagramDataDirectly
  ) {
    console.error("没有可用的画布实例进行属性更新");
    return;
  }

  // 检查值是否为对象，如果是对象并有value属性，则使用该属性值
  if (value !== null && typeof value === "object" && "value" in value) {
    value = value.value;
  }

  const currentData = canvasInstance.getDiagramData();
  const part = currentData.parts.find((p: DiagramPart) => p.id === componentId);

  if (part) {
    // 检查是否为基本属性
    if (propName in part) {
      (part as any)[propName] = value;
    } else {
      // 否则当作attrs中的属性处理
      if (!part.attrs) {
        part.attrs = {};
      }
      part.attrs[propName] = value;
    }

    canvasInstance.updateDiagramDataDirectly(currentData);
    console.log(
      `更新组件${componentId}的属性${propName}为:`,
      value,
      typeof value,
    );
  }
}

// 更新组件的直接属性
function updateComponentDirectProp(
  componentId: string,
  propName: string,
  value: any,
) {
  const canvasInstance = diagramCanvas.value as any;
  if (
    !canvasInstance ||
    !canvasInstance.getDiagramData ||
    !canvasInstance.updateDiagramDataDirectly
  ) {
    console.error("没有可用的画布实例进行属性更新");
    return;
  }

  const currentData = canvasInstance.getDiagramData();
  const part = currentData.parts.find((p: DiagramPart) => p.id === componentId);

  if (part) {
    // @ts-ignore: 动态属性赋值
    part[propName] = value;

    canvasInstance.updateDiagramDataDirectly(currentData);
    console.log(
      `更新组件${componentId}的直接属性${propName}为:`,
      value,
      typeof value,
    );
  }
}

// 专门用于更新组件的显示层级 - 这个方法可以删除，直接使用updateComponentProp即可

// 处理连线创建事件
function handleWireCreated(wireData: any) {
  console.log("Wire created:", wireData);
}

// 处理连线删除事件
function handleWireDeleted(wireId: string) {
  console.log("Wire deleted:", wireId);
}

// 导出当前diagram数据
function exportDiagram() {
  // 直接使用DiagramCanvas组件提供的导出功能
  const canvasInstance = diagramCanvas.value as any;
  if (canvasInstance && canvasInstance.exportDiagram) {
    canvasInstance.exportDiagram();
  }
}

// --- 消息提示 ---
const showNotification = ref(false);
const notificationMessage = ref("");
const notificationType = ref<"success" | "error" | "info">("info");

function showToast(
  message: string,
  type: "success" | "error" | "info" = "info",
  duration = 3000,
) {
  const canvasInstance = diagramCanvas.value as any;
  if (canvasInstance && canvasInstance.showToast) {
    canvasInstance.showToast(message, type, duration);
  } else {
    // 后备方案：使用原来的通知系统
    notificationMessage.value = message;
    notificationType.value = type;
    showNotification.value = true;

    // 设置自动消失
    setTimeout(() => {
      showNotification.value = false;
    }, duration);
  }
}
// 显示通知

// --- 组件属性处理辅助函数 ---
// 直接使用 componentConfig.ts 中导入的 getPropValue 函数

// --- 生命周期钩子 ---
onMounted(async () => {
  // 初始化画布设置
  console.log("ProjectView mounted, diagram canvas ref:", diagramCanvas.value);

  // 获取初始图表数据
  const canvasInstance = diagramCanvas.value as any;
  if (canvasInstance && canvasInstance.getDiagramData) {
    diagramData.value = canvasInstance.getDiagramData();

    // 预加载所有使用的组件模块，以确保它们在渲染时可用
    const componentTypes = new Set<string>();
    diagramData.value.parts.forEach((part) => {
      componentTypes.add(part.type);
    });

    console.log("Preloading component modules:", Array.from(componentTypes));

    // 并行加载所有组件模块
    await Promise.all(
      Array.from(componentTypes).map((type) => loadComponentModule(type)),
    );

    console.log("All component modules loaded");
  }
});

onUnmounted(() => {
  document.removeEventListener("mousemove", onResize);
  document.removeEventListener("mouseup", stopResize);
});
</script>

<style scoped lang="postcss">
/* 样式保持不变 */
@import "../assets/main.css";

/* 分割线样式 */
.resizer {
  width: 6px;
  height: 100%;
  cursor: col-resize;
  transition: background-color 0.3s;
  z-index: 10;
}

.resizer:hover,
.resizer:active {
  width: 6px;
}

/* 调整大小时应用全局样式 */
:global(body.resizing) {
  cursor: col-resize;
  user-select: none;
}

.animate-slideRight {
  animation: slideRight 0.3s ease-out forwards;
}

@keyframes slideRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* 确保滚动行为仅在需要时出现 */
html,
body {
  overflow: hidden;
  height: 100%;
  margin: 0;
  padding: 0;
}

/* 文档面板样式 */
.doc-panel {
  padding: 1.5rem;
  max-width: 800px;
  margin: 0 auto;
}

/* 文档切换按钮样式 */
.doc-toggle-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 50;
}

/* Markdown渲染样式调整 */
:deep(.markdown-content) {
  padding: 1rem;
  background-color: hsl(var(--b1));
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
</style>
