<template>
  <div class="flow-list-page">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>流列表</span>
          <el-button type="primary" @click="$router.push('/admin/flow/editor')" v-if="userStore.hasPermission('flow:create')">创建新流</el-button>
        </div>
      </template>

      <el-table :data="flows" v-loading="loading">
        <el-table-column prop="name" label="名称" min-width="200" />
        <el-table-column prop="description" label="描述" min-width="200" />
        <el-table-column prop="version" label="版本" width="80">
          <template #default="{ row }">v{{ row.version }}</template>
        </el-table-column>
        <el-table-column prop="status" label="状态" width="100">
          <template #default="{ row }">
            <el-tag :type="row.status === 'published' ? 'success' : 'info'">{{ row.status === 'published' ? '已上架' : '草稿' }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="340">
          <template #default="{ row }">
            <el-button size="small" @click="$router.push(`/admin/flow/market/${row.id}`)">详情</el-button>
            <el-button size="small" @click="$router.push(`/admin/flow/editor/${row.id}`)">编辑</el-button>
            <el-button size="small" @click="handleTest(row)">测试</el-button>
            <el-button v-if="row.status === 'draft'" size="small" type="success" @click="handlePublish(row)">上架</el-button>
            <el-button v-else size="small" type="warning" @click="handleUnpublish(row)">下架</el-button>
            <el-button size="small" type="danger" @click="handleDelete(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { flowApi } from '@/api'
import { useUserStore } from '@/stores/user'

const userStore = useUserStore()
const loading = ref(false)
const flows = ref<any[]>([])

onMounted(async () => {
  loading.value = true
  try {
    const res: any = await flowApi.getFlows()
    flows.value = res || []
  } finally {
    loading.value = false
  }
})

async function handlePublish(row: any) {
  await flowApi.publishFlow(row.id)
  ElMessage.success('流已上架到企微')
  await refreshList()
}

async function handleUnpublish(row: any) {
  await flowApi.unpublishFlow(row.id)
  ElMessage.success('流已下架')
  await refreshList()
}

async function handleTest(row: any) {
  try {
    const res: any = await flowApi.testFlow(row.id)
    const data = res?.data || res || {}
    if (data.valid) {
      ElMessage.success(`测试通过: ${data.node_count}个节点, ${data.edge_count}条边`)
    } else {
      ElMessage.warning(`测试发现问题: ${(data.issues || []).join(', ')}`)
    }
  } catch { /**/ }
}

async function handleDelete(row: any) {
  try {
    await ElMessageBox.confirm('确认删除该流？', '提示', { type: 'warning' })
    await flowApi.deleteFlow(row.id)
    ElMessage.success('已删除')
    await refreshList()
  } catch { /**/ }
}

async function refreshList() {
  loading.value = true
  try {
    const res: any = await flowApi.getFlows()
    flows.value = res || []
  } finally {
    loading.value = false
  }
}
</script>

<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>