<script lang="ts" setup>
import type {
  WorkflowDefinitionDetailDto,
  WorkflowEdgeDto,
  WorkflowNodeDto,
} from '#/api/core';

import { onMounted, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';

import { message } from 'ant-design-vue';

import { getWorkflowDefinitionDetailApi } from '#/api/core';

import EdgePropertyDrawer from './components/EdgePropertyDrawer.vue';
import FlowCanvas from './components/FlowCanvas.vue';
import NodePanel from './components/NodePanel.vue';
import NodePropertyDrawer from './components/NodePropertyDrawer.vue';

const route = useRoute();
const router = useRouter();

const definitionId = route.params.id as string;
const definition = ref<WorkflowDefinitionDetailDto | null>(null);

const selectedNodeId = ref<string | null>(null);
const selectedEdgeId = ref<string | null>(null);

async function loadDefinition() {
  try {
    definition.value = await getWorkflowDefinitionDetailApi(definitionId);
  } catch {
    message.error('加载流程定义失败');
  }
}

function handleNodeClick(nodeId: string) {
  selectedNodeId.value = nodeId;
  selectedEdgeId.value = null;
}

function handleEdgeClick(edgeId: string) {
  selectedEdgeId.value = edgeId;
  selectedNodeId.value = null;
}

function handleCanvasClick() {
  selectedNodeId.value = null;
  selectedEdgeId.value = null;
}

function handleNodeUpdated(node: WorkflowNodeDto) {
  if (!definition.value) return;
  const idx = definition.value.nodes.findIndex((n) => n.id === node.id);
  if (idx >= 0) {
    definition.value.nodes[idx] = node;
  }
}

function handleEdgeUpdated(edge: WorkflowEdgeDto) {
  if (!definition.value) return;
  const idx = definition.value.edges.findIndex((e) => e.id === edge.id);
  if (idx >= 0) {
    definition.value.edges[idx] = edge;
  }
}

function handleEdgeDeleted(edgeId: string) {
  if (!definition.value) return;
  definition.value.edges = definition.value.edges.filter(
    (e) => e.id !== edgeId,
  );
  selectedEdgeId.value = null;
}

function handleNodeClose() {
  selectedNodeId.value = null;
  loadDefinition();
}

function handleEdgeClose() {
  selectedEdgeId.value = null;
}

function goBack() {
  router.push('/workflow/definitions');
}

onMounted(() => loadDefinition());
</script>

<template>
  <div class="flex h-screen flex-col">
    <!-- Toolbar -->
    <div class="flex items-center border-b px-4 py-2">
      <button
        class="mr-3 text-sm text-gray-600 hover:text-blue-500"
        @click="goBack"
      >
        &larr; 返回
      </button>
      <span class="text-base font-semibold">
        {{ definition?.name ?? '流程设计器' }}
      </span>
    </div>

    <!-- Content -->
    <div class="flex flex-1 overflow-hidden">
      <!-- Left: Node Panel -->
      <NodePanel :definition-id="definitionId" @created="loadDefinition" />

      <!-- Center: Flow Canvas -->
      <div class="flex-1">
        <FlowCanvas
          v-if="definition"
          :definition-id="definitionId"
          :edges="definition.edges"
          :nodes="definition.nodes"
          @canvas-click="handleCanvasClick"
          @edge-click="handleEdgeClick"
          @node-click="handleNodeClick"
        />
      </div>

      <!-- Right: Property Drawers -->
      <NodePropertyDrawer
        v-if="definition && selectedNodeId"
        :definition-id="definitionId"
        :node-id="selectedNodeId"
        :nodes="definition.nodes"
        @close="handleNodeClose"
        @updated="handleNodeUpdated"
      />

      <EdgePropertyDrawer
        v-if="definition && selectedEdgeId"
        :definition-id="definitionId"
        :edge-id="selectedEdgeId"
        :edges="definition.edges"
        :nodes="definition.nodes"
        @close="handleEdgeClose"
        @deleted="handleEdgeDeleted"
        @updated="handleEdgeUpdated"
      />
    </div>
  </div>
</template>
