<script setup lang="ts">
import { computed, defineAsyncComponent, ref } from 'vue';

import { X } from '@vben/icons';
import { $t } from '@vben/locales';

import { useVueFlow } from '@vue-flow/core';
import { ElButton, ElScrollbar } from 'element-plus';

const props = defineProps<{
  node: any;
}>();

const emit = defineEmits(['close', 'update:node']);

const { updateNodeData } = useVueFlow();

// 全屏状态
const isFullscreen = ref(false);

const toggleFullscreen = () => {
  isFullscreen.value = !isFullscreen.value;
};

// 动态加载面板组件
const components: Record<string, any> = {
  start: defineAsyncComponent(() => import('../panels/StartPanel.vue')),
  llm: defineAsyncComponent(() => import('../panels/LLMPanel.vue')),
  end: defineAsyncComponent(() => import('../panels/EndPanel.vue')),
  http: defineAsyncComponent(() => import('../panels/HttpPanel.vue')),
  code: defineAsyncComponent(() => import('../panels/CodePanel.vue')),
  condition: defineAsyncComponent(() => import('../panels/ConditionPanel.vue')),
  template: defineAsyncComponent(() => import('../panels/TemplatePanel.vue')),
  parallel: defineAsyncComponent(() => import('../panels/ParallelPanel.vue')),
  merge: defineAsyncComponent(() => import('../panels/MergePanel.vue')),
  // 对话流节点
  question: defineAsyncComponent(() => import('../panels/QuestionPanel.vue')),
  choice: defineAsyncComponent(() => import('../panels/ChoicePanel.vue')),
  message: defineAsyncComponent(() => import('../panels/MessagePanel.vue')),
  confirm: defineAsyncComponent(() => import('../panels/ConfirmPanel.vue')),
  // 意图识别节点
  intent: defineAsyncComponent(() => import('../panels/IntentPanel.vue')),
  // Snowflake Cortex 节点
  // 循环节点
  loop: defineAsyncComponent(() => import('../panels/LoopPanel.vue')),
  // 表单节点
  // 应用节点
  // 仪表盘节点
  // 系统总结节点
  // 子流程节点
  subflow: defineAsyncComponent(() => import('../panels/SubflowPanel.vue')),
  // 表单数据节点
  // Text-to-SQL 节点
  // 知识库节点
  knowledge_retrieval: defineAsyncComponent(
    () => import('../panels/KnowledgeRetrievalPanel.vue'),
  ),
};

const CurrentPanel = computed(() => {
  if (!props.node) return null;
  return components[props.node.type] || null;
});

const handleUpdate = (newData: any) => {
  // 使用 VueFlow 的 updateNodeData 方法安全更新节点数据
  // 这样不会触发节点重新渲染导致消失
  if (props.node?.id) {
    updateNodeData(props.node.id, newData);
  }
};
</script>

<template>
  <aside
    class="bg-card z-20 flex h-full flex-col rounded-[8px] py-3 transition-all duration-300"
    :class="isFullscreen ? 'w-full' : 'w-96'"
  >
    <div class="flex items-center justify-between px-4 pb-4 pt-1">
      <div class="text-foreground font-medium">
        {{ node.data.label || node.label }}
        {{ $t('ai-platform.workflow.editor.panel.propertyConfig') }}
      </div>
      <div class="flex items-center gap-1">
        <!-- <ElButton
          link
          :icon="isFullscreen ? Minimize : Maximize"
          @click="toggleFullscreen"
        /> -->
        <ElButton link :icon="X" @click="$emit('close')" />
      </div>
    </div>

    <ElScrollbar class="flex-1">
      <div class="p-4">
        <component
          :is="CurrentPanel"
          v-if="CurrentPanel"
          :key="node.id"
          :data="node.data"
          :node-id="node.id"
          :node-type="node.type"
          @update="handleUpdate"
        />
        <div v-else class="text-muted-foreground py-10 text-center">
          {{ $t('ai-platform.workflow.editor.panel.noConfig') }}
        </div>
      </div>
    </ElScrollbar>
  </aside>
</template>
