<template>
  <div class="flow-detail-page">
    <el-page-header @back="$router.back()" :content="flow?.name || '流详情'" />

    <el-row :gutter="20" style="margin-top: 20px">
      <el-col :span="16">
        <el-card>
          <template #header>流定义</template>
          <el-descriptions :column="2" border>
            <el-descriptions-item label="名称">{{ flow?.name }}</el-descriptions-item>
            <el-descriptions-item label="状态">
              <el-tag :type="flow?.status === 'published' ? 'success' : 'info'">{{ flow?.status }}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="创建者">{{ flow?.created_by || '-' }}</el-descriptions-item>
            <el-descriptions-item label="创建时间">{{ flow?.created_at ? new Date(flow.created_at).toLocaleString() : '-' }}</el-descriptions-item>
            <el-descriptions-item label="描述" :span="2">{{ flow?.description || '无' }}</el-descriptions-item>
          </el-descriptions>

          <el-divider>节点列表</el-divider>
          <el-table :data="nodes" stripe size="small">
            <el-table-column prop="id" label="ID" width="120" />
            <el-table-column prop="type" label="类型" width="120">
              <template #default="{ row }"><el-tag size="small">{{ row.type }}</el-tag></template>
            </el-table-column>
            <el-table-column prop="label" label="名称" min-width="160" />
          </el-table>
        </el-card>
      </el-col>

      <el-col :span="8">
        <el-card>
          <template #header>操作</template>
          <el-button type="primary" style="width: 100%; margin-bottom: 12px" @click="installFlow" :loading="installing">
            安装到我的工作流
          </el-button>
          <el-button style="width: 100%; margin-bottom: 12px" @click="testRun" :loading="testing">
            测试运行
          </el-button>
          <el-button style="width: 100%" @click="$router.push(`/admin/flow/editor/${flowId}`)">
            编辑此流
          </el-button>
        </el-card>

        <el-card style="margin-top: 20px">
          <template #header>连接关系</template>
          <div v-for="(edge, i) in edges" :key="i" style="padding: 4px 0; border-bottom: 1px solid #f0f0f0; font-size: 13px">
            {{ edge.source }} → {{ edge.target }}
          </div>
          <el-empty v-if="!edges.length" description="无连接" :image-size="40" />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { flowApi } from '@/api'

const route = useRoute()
const router = useRouter()
const flowId = computed(() => route.params.id as string)
const flow = ref<any>(null)
const nodes = ref<any[]>([])
const edges = ref<any[]>([])
const installing = ref(false)
const testing = ref(false)

onMounted(async () => {
  const res: any = await flowApi.getFlow(flowId.value)
  flow.value = res?.data || res || {}
  const def = flow.value.definition_json || {}
  nodes.value = def.nodes || []
  edges.value = def.edges || []
})

async function installFlow() {
  installing.value = true
  try {
    const res: any = await flowApi.createFlow({
      name: flow.value.name + ' (副本)',
      description: flow.value.description,
      nodes: nodes.value,
      edges: edges.value,
      trigger: {},
    })
    const newFlow = res?.data || res || {}
    ElMessage.success('已安装到我的工作流')
    router.push(`/admin/flow/editor/${newFlow.id}`)
  } catch { ElMessage.error('安装失败') }
  finally { installing.value = false }
}

async function testRun() {
  testing.value = true
  try {
    await flowApi.testFlow(flowId.value)
    ElMessage.success('测试运行完成')
  } catch { ElMessage.error('测试失败') }
  finally { testing.value = false }
}
</script>