<template>
  <div>
    <!-- 元器件选择菜单 (Drawer) -->
    <div class="drawer drawer-end z-50">
      <input id="component-drawer" type="checkbox" class="drawer-toggle" v-model="showComponentsMenu" />
      <div class="drawer-side">
        <label for="component-drawer" aria-label="close sidebar" class="drawer-overlay !bg-opacity-50"></label>
        <div class="menu p-0 w-[460px] min-h-full bg-base-100 shadow-xl flex flex-col">
          <!-- 菜单头部 -->
          <div class="p-6 border-b border-base-300 flex justify-between items-center">
            <h3 class="text-xl font-bold text-primary flex items-center gap-2">
              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
                stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                class="text-primary">
                <circle cx="12" cy="12" r="10"></circle>
                <path d="M12 8v8"></path>
                <path d="M8 12h8"></path>
              </svg>
              添加元器件
            </h3>
            <label for="component-drawer" class="btn btn-ghost btn-sm btn-circle" @click="closeMenu">
              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
                stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <line x1="18" y1="6" x2="6" y2="18"></line>
                <line x1="6" y1="6" x2="18" y2="18"></line>
              </svg>
            </label>
          </div>

          <!-- 导航栏 -->
          <div class="tabs tabs-boxed bg-base-200 mx-6 mt-4 rounded-box">
            <a class="tab" :class="{ 'tab-active': activeTab === 'components' }"
              @click="activeTab = 'components'">元器件</a>
            <a class="tab" :class="{ 'tab-active': activeTab === 'templates' }" @click="activeTab = 'templates'">模板</a>
            <a class="tab" :class="{ 'tab-active': activeTab === 'virtual' }" @click="activeTab = 'virtual'">虚拟外设</a>
          </div>

          <!-- 搜索框 -->
          <div class="px-6 py-4 border-b border-base-300">
            <div class="join w-full">
              <div class="join-item flex-1 relative">
                <input type="text" placeholder="搜索..." class="input input-bordered input-sm w-full pl-10"
                  v-model="searchQuery" @keyup.enter="searchComponents" />
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
                  stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                  class="absolute left-3 top-1/2 -translate-y-1/2 text-base-content opacity-60">
                  <circle cx="11" cy="11" r="8"></circle>
                  <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
                </svg>
              </div>
              <button class="btn btn-sm join-item" @click="searchComponents">
                搜索
              </button>
            </div>
          </div>

          <!-- 元器件列表 (组件选项卡) -->
          <div v-if="activeTab === 'components'" class="px-6 py-4 overflow-auto flex-1">
            <div v-if="filteredComponents.length > 0" class="grid grid-cols-2 gap-4">
              <div v-for="(component, index) in filteredComponents" :key="index"
                class="card bg-base-200 hover:bg-base-300 transition-all duration-300 hover:shadow-md cursor-pointer"
                @click="addComponent(component)">
                <div class="card-body p-3 items-center text-center">
                  <div
                    class="bg-base-100 rounded-lg w-full h-[90px] flex items-center justify-center overflow-hidden p-2">
                    <!-- 直接使用组件作为预览 -->
                    <component v-if="componentModules[component.type]" :is="componentModules[component.type].default"
                      class="component-preview" :size="getPreviewSize(component.type)" />
                    <!-- 加载中状态 -->
                    <span v-else class="text-xs text-gray-400">加载中...</span>
                  </div>
                  <h3 class="card-title text-sm mt-2">{{ component.name }}</h3>
                  <p class="text-xs opacity-70">{{ component.type }}</p>
                </div>
              </div>
            </div>
            <!-- 无搜索结果 -->
            <div v-else class="py-16 text-center">
              <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none"
                stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
                class="mx-auto text-base-300 mb-3">
                <circle cx="11" cy="11" r="8"></circle>
                <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
                <line x1="8" y1="11" x2="14" y2="11"></line>
              </svg>
              <p class="text-base-content opacity-70">没有找到匹配的元器件</p>
              <button class="btn btn-sm btn-ghost mt-3" @click="searchQuery = ''">
                清除搜索
              </button>
            </div>
          </div>

          <!-- 模板列表 (模板选项卡) -->
          <div v-if="activeTab === 'templates'" class="px-6 py-4 overflow-auto flex-1">
            <div v-if="filteredTemplates.length > 0" class="grid grid-cols-2 gap-4">
              <div v-for="(template, index) in filteredTemplates" :key="index"
                class="card bg-base-200 hover:bg-base-300 transition-all duration-300 hover:shadow-md cursor-pointer"
                @click="addTemplate(template)">
                <div class="card-body p-3 items-center text-center">
                  <div
                    class="bg-base-100 rounded-lg w-full h-[90px] flex items-center justify-center overflow-hidden p-2">
                    <img :src="template.thumbnailUrl || '/placeholder-template.png'
                      " alt="Template thumbnail" class="max-h-full max-w-full object-contain" />
                  </div>
                  <h3 class="card-title text-sm mt-2">{{ template.name }}</h3>
                  <p class="text-xs opacity-70">
                    {{ template.description || "模板" }}
                  </p>
                </div>
              </div>
            </div>
            <!-- 无搜索结果 -->
            <div v-else class="py-16 text-center">
              <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none"
                stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
                class="mx-auto text-base-300 mb-3">
                <circle cx="11" cy="11" r="8"></circle>
                <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
                <line x1="8" y1="11" x2="14" y2="11"></line>
              </svg>
              <p class="text-base-content opacity-70">没有找到匹配的模板</p>
              <button class="btn btn-sm btn-ghost mt-3" @click="searchQuery = ''">
                清除搜索
              </button>
            </div>
          </div>
          <!-- 虚拟外设列表 (虚拟外设选项卡) -->
          <div v-if="activeTab === 'virtual'" class="px-6 py-4 overflow-auto flex-1">
            <div v-if="filteredVirtualDevices.length > 0" class="grid grid-cols-2 gap-4">
              <div v-for="(device, index) in filteredVirtualDevices" :key="index"
                class="card bg-base-200 hover:bg-base-300 transition-all duration-300 hover:shadow-md cursor-pointer"
                @click="addComponent(device)">
                <div class="card-body p-3 items-center text-center">
                  <div
                    class="bg-base-100 rounded-lg w-full h-[90px] flex items-center justify-center overflow-hidden p-2">
                    <!-- 直接使用组件作为预览 -->
                    <component v-if="componentModules[device.type]" :is="componentModules[device.type].default"
                      class="component-preview" :size="getPreviewSize(device.type)" />
                    <!-- 加载中状态 -->
                    <span v-else class="text-xs text-gray-400">加载中...</span>
                  </div>
                  <h3 class="card-title text-sm mt-2">{{ device.name }}</h3>
                  <p class="text-xs opacity-70">{{ device.type }}</p>
                </div>
              </div>
            </div>
            <!-- 无搜索结果 -->
            <div v-else class="py-16 text-center">
              <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none"
                stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
                class="mx-auto text-base-300 mb-3">
                <circle cx="11" cy="11" r="8"></circle>
                <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
                <line x1="8" y1="11" x2="14" y2="11"></line>
              </svg>
              <p class="text-base-content opacity-70">没有找到匹配的虚拟外设</p>
              <button class="btn btn-sm btn-ghost mt-3" @click="searchQuery = ''">
                清除搜索
              </button>
            </div>
          </div>

          <!-- 底部操作区 -->
          <div class="p-4 border-t border-base-300 bg-base-200 flex justify-between">
            <label for="component-drawer" class="btn btn-sm btn-ghost" @click="closeMenu">
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
                stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-1">
                <path d="M19 12H5M12 19l-7-7 7-7"></path>
              </svg>
              返回
            </label>
            <label for="component-drawer" class="btn btn-sm btn-primary" @click="closeMenu">
              完成
            </label>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, shallowRef, onMounted } from "vue";
import motherboardSvg from "../components/equipments/svg/motherboard.svg";
import buttonSvg from "../components//equipments/svg/button.svg";

// Props 定义
interface Props {
  open: boolean;
}

const props = defineProps<Props>();

// 定义组件发出的事件
const emit = defineEmits([
  "close",
  "add-component",
  "add-template",
  "update:open",
]);

// 当前激活的选项卡
const activeTab = ref("components");

// --- 搜索功能 ---
const searchQuery = ref("");

// --- 可用元器件列表 ---
const availableComponents = [
  { type: "MechanicalButton", name: "机械按钮" },
  { type: "Switch", name: "开关" },
  { type: "Pin", name: "引脚" },
  { type: "SMT_LED", name: "贴片LED" },
  { type: "SevenSegmentDisplay", name: "数码管" },
  { type: "HDMI", name: "HDMI接口" },
  { type: "DDR", name: "DDR内存" },
  { type: "ETH", name: "以太网接口" },
  { type: "SD", name: "SD卡插槽" },
  { type: "SFP", name: "SFP光纤模块" },
  { type: "SMA", name: "SMA连接器" },
  { type: "MotherBoard", name: "主板" },
  { type: "PG2L100H_FBG676", name: "PG2L100H FBG676芯片" },
  { type: "BaseBoard", name: "通用底板" },
];

// --- 可用虚拟外设列表 ---
const availableVirtualDevices = [{ type: "DDS", name: "信号发生器" }];

// --- 可用模板列表 ---
const availableTemplates = ref([
  {
    name: "PG2L100H 基础开发板",
    id: "PG2L100H_Pango100pro",
    description: "包含主板和两个LED的基本设置",
    path: "/EquipmentTemplates/PG2L100H_Pango100pro.json",
    thumbnailUrl: motherboardSvg,
  },
  {
    name: "矩阵键盘",
    id: "MatrixKey",
    description: "包含4x4，共16个按键的矩阵键盘",
    path: "/EquipmentTemplates/MatrixKey.json",
    thumbnailUrl: buttonSvg,
  },
]);

// 显示/隐藏组件菜单
const showComponentsMenu = computed({
  get: () => props.open,
  set: (value) => emit("update:open", value),
});

// 组件模块缓存
const componentModules = shallowRef<Record<string, any>>({});

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

      // 将模块添加到缓存中
      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 preloadComponentModules() {
  // 加载基础组件
  for (const component of availableComponents) {
    try {
      await loadComponentModule(component.type);
    } catch (error) {
      console.error(`Failed to preload component ${component.type}:`, error);
    }
  }

  // 加载虚拟外设组件
  for (const device of availableVirtualDevices) {
    try {
      await loadComponentModule(device.type);
    } catch (error) {
      console.error(`Failed to preload virtual device ${device.type}:`, error);
    }
  }
}

// 获取组件预览时适合的尺寸
function getPreviewSize(componentType: string): number {
  // 根据组件类型返回适当的预览尺寸
  const previewSizes: Record<string, number> = {
    MechanicalButton: 0.4, // 按钮较大，需要更小尺寸
    Switch: 0.35, // 开关较大，需要更小尺寸
    Pin: 0.8, // 引脚较小，可以大一些
    SMT_LED: 0.7, // LED可以保持适中
    SevenSegmentDisplay: 0.4, // 数码管较大，需要较小尺寸
    HDMI: 0.5, // HDMI接口较大
    DDR: 0.5, // DDR内存较大
    ETH: 0.5, // 以太网接口较大
    SD: 0.6, // SD卡插槽适中
    SFP: 0.4, // SFP光纤模块较大
    SMA: 0.7, // SMA连接器可以适中
    MotherBoard: 0.13, // 主板最大，需要最小尺寸
    DDS: 0.3, // 信号发生器较大，需要较小尺寸
  };

  // 返回对应尺寸，如果没有特定配置则返回默认值0.5
  return previewSizes[componentType] || 0.5;
}

// 搜索组件
function searchComponents() {
  // 根据用户输入过滤可用组件列表
  // 实际逻辑已经在 filteredComponents 计算属性中实现
}

// 关闭菜单
function closeMenu() {
  showComponentsMenu.value = false;
  emit("close");
}

// 添加新元器件
async function addComponent(componentTemplate: { type: string; name: string }) {
  // 先加载组件模块
  const moduleRef = await loadComponentModule(componentTemplate.type);
  let defaultProps: Record<string, any> = {};

  // 尝试直接调用组件导出的getDefaultProps方法
  if (moduleRef) {
    if (typeof moduleRef.getDefaultProps === "function") {
      defaultProps = moduleRef.getDefaultProps();
      console.log(
        `Got default props from ${componentTemplate.type}:`,
        defaultProps,
      );
    } else {
      // 回退到配置文件
      console.log(`No getDefaultProps found for ${componentTemplate.type}`);
    }
  } else {
    console.log(`Failed to load module for ${componentTemplate.type}`);
  }

  // 发送添加组件事件给父组件
  emit("add-component", {
    type: componentTemplate.type,
    name: componentTemplate.name,
    props: defaultProps,
  });

  // 关闭菜单
  closeMenu();
}

// 添加模板
async function addTemplate(template: any) {
  try {
    // 加载模板JSON文件
    const response = await fetch(template.path);
    if (!response.ok) {
      throw new Error(`Failed to load template: ${response.statusText}`);
    }

    const templateData = await response.json();
    console.log("加载模板:", templateData);

    // 发出事件，将模板数据传递给父组件
    emit("add-template", {
      id: template.id,
      name: template.name,
      template: templateData,
      capsPage: template.capsPage
    });

    // 关闭菜单
    closeMenu();
  } catch (error) {
    console.error("加载模板出错:", error);
    alert("无法加载模板文件，请检查控制台错误信息");
  }
}

// 过滤后的元器件列表 (用于菜单)
const filteredComponents = computed(() => {
  if (!searchQuery.value || activeTab.value !== "components") {
    return availableComponents;
  }
  const query = searchQuery.value.toLowerCase();
  return availableComponents.filter(
    (component) =>
      component.name.toLowerCase().includes(query) ||
      component.type.toLowerCase().includes(query),
  );
});

// 过滤后的模板列表 (用于菜单)
const filteredTemplates = computed(() => {
  if (!searchQuery.value || activeTab.value !== "templates") {
    return availableTemplates.value;
  }
  const query = searchQuery.value.toLowerCase();
  return availableTemplates.value.filter(
    (template) =>
      template.name.toLowerCase().includes(query) ||
      (template.description &&
        template.description.toLowerCase().includes(query)),
  );
});

// 过滤后的虚拟外设列表 (用于菜单)
const filteredVirtualDevices = computed(() => {
  if (!searchQuery.value || activeTab.value !== "virtual") {
    return availableVirtualDevices;
  }
  const query = searchQuery.value.toLowerCase();
  return availableVirtualDevices.filter(
    (device) =>
      device.name.toLowerCase().includes(query) ||
      device.type.toLowerCase().includes(query),
  );
});

// 生命周期钩子
onMounted(() => {
  // 预加载组件模块
  preloadComponentModules();
});
</script>

<style scoped>
/* 组件预览样式 */
.component-preview {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* 动画效果 */
.animate-slideUp {
  animation: slideUp 0.3s ease-out forwards;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>
