<template>
  <div class="app-container">
    <el-row :gutter="16" class="mb8">
      <el-col :span="6"><el-card shadow="hover"><div class="stat-card"><div class="stat-value">{{ metrics.totalInteractions || 0 }}</div><div class="stat-label">总交互次数</div></div></el-card></el-col>
      <el-col :span="6"><el-card shadow="hover"><div class="stat-card"><div class="stat-value" style="color:#67C23A">{{ metrics.appliedSuggestions || 0 }}</div><div class="stat-label">已应用优化</div></div></el-card></el-col>
      <el-col :span="6"><el-card shadow="hover"><div class="stat-card"><div class="stat-value" style="color:#E6A23C">{{ metrics.pendingSuggestions || 0 }}</div><div class="stat-label">待审核建议</div></div></el-card></el-col>
      <el-col :span="6"><el-card shadow="hover"><div class="stat-card"><div class="stat-value">{{ metrics.avgQualityScore || '-' }}</div><div class="stat-label">平均质量分</div></div></el-card></el-col>
    </el-row>

    <el-form :inline="true" class="mb8">
      <el-form-item label="工作流ID">
        <el-input v-model="workflowId" placeholder="输入工作流ID" size="small" style="width:160px" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-data-analysis" size="mini" @click="handleAnalyze">触发进化分析</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="loadMetrics">刷新指标</el-button>
      </el-form-item>
    </el-form>

    <el-card shadow="hover" v-if="suggestion">
      <div slot="header"><span>最新进化建议</span></div>
      <el-descriptions :column="2" border size="small">
        <el-descriptions-item label="建议ID">{{ suggestion.id || suggestion.suggestionId }}</el-descriptions-item>
        <el-descriptions-item label="置信度">{{ suggestion.confidence }}</el-descriptions-item>
        <el-descriptions-item label="节点" :span="2">{{ suggestion.nodeCode }}</el-descriptions-item>
        <el-descriptions-item label="原因" :span="2">{{ suggestion.reason }}</el-descriptions-item>
        <el-descriptions-item label="优化内容" :span="2">{{ suggestion.suggestedContent }}</el-descriptions-item>
      </el-descriptions>
      <div style="margin-top:12px">
        <el-button type="success" size="mini" @click="handleApply" :disabled="!(suggestion.id || suggestion.suggestionId)">应用建议</el-button>
      </div>
    </el-card>
  </div>
</template>
<script>
import { getEvolutionMetrics, analyzeEvolution, applyEvolution } from '@/api/workflow/lobster'
export default {
  name: 'LobsterEvolution',
  data() {
    return { metrics: {}, workflowId: '', suggestion: null }
  },
  created() { this.loadMetrics() },
  methods: {
    loadMetrics() {
      getEvolutionMetrics().then(res => { this.metrics = res.data || {} }).catch(() => {})
    },
    handleAnalyze() {
      if (!this.workflowId) { this.$message.warning('请输入工作流ID'); return }
      analyzeEvolution(this.workflowId).then(res => {
        this.suggestion = res.data || null
        this.$message.success('分析完成')
        this.loadMetrics()
      })
    },
    handleApply() {
      if (!this.suggestion || !(this.suggestion.id || this.suggestion.suggestionId)) return
      applyEvolution(this.suggestion.id || this.suggestion.suggestionId).then(() => {
        this.$message.success('建议已应用')
        this.loadMetrics()
      })
    }
  }
}
</script>
<style scoped>
.stat-card { text-align:center; padding:10px 0 }
.stat-value { font-size:32px; font-weight:bold; color:#409EFF }
.stat-label { font-size:13px; color:#909399; margin-top:4px }
</style>
