<template>
  <div class="ai-plan-generator">
    <el-card class="input-card" shadow="never">
      <template #header>
        <div class="card-header">
          <span class="title">AI\u667a\u80fd\u65b9\u6848\u751f\u6210</span>
          <el-tag type="info" size="small">Kimi k3</el-tag>
        </div>
      </template>
      <el-input
        v-model="requirement"
        type="textarea"
        :rows="5"
        placeholder="\u7528\u81ea\u7136\u8bed\u8a00\u63cf\u8ff0\u4f60\u7684\u4eff\u771f\u9700\u6c42\uff0c\u4f8b\u5982\uff1a\u6211\u9700\u8981\u505a\u4e00\u4e2aSSSR\u62d3\u6251\u7684\u8f74\u5411\u78c1\u901a\u7535\u673a\u4eff\u771f\uff0c\u5916\u5f84100mm\uff0c\u8f6c\u901f3000rpm\uff0c\u4f18\u5316\u6c14\u9699\u548c\u78c1\u94a2\u539a\u5ea6\uff0c\u76ee\u6807\u6548\u7387>92%..."
      />
      <div class="actions">
        <el-button type="primary" :loading="generating" @click="generatePlan">
          <el-icon><MagicStick /></el-icon> \u751f\u6210\u65b9\u6848
        </el-button>
        <el-button @click="loadExample">\u52a0\u8f7d\u793a\u4f8b</el-button>
      </div>
    </el-card>

    <el-card v-if="plan" class="result-card" shadow="never">
      <template #header>
        <div class="card-header">
          <span>\u751f\u6210\u7ed3\u679c</span>
          <div>
            <el-button size="small" @click="showRefine = true">\u4f18\u5316\u65b9\u6848</el-button>
            <el-button size="small" type="primary" @click="savePlan">\u4fdd\u5b58\u65b9\u6848</el-button>
          </div>
        </div>
      </template>
      <el-descriptions :column="2" border>
        <el-descriptions-item label="\u65b9\u6848\u540d\u79f0">{{ plan.plan_name }}</el-descriptions-item>
        <el-descriptions-item label="\u62d3\u6251">{{ plan.topology }}</el-descriptions-item>
        <el-descriptions-item label="\u63cf\u8ff0" :span="2">{{ plan.description }}</el-descriptions-item>
      </el-descriptions>
      <el-divider content-position="left">\u626b\u63cf\u53d8\u91cf</el-divider>
      <el-table :data="plan.scan_variables || []" border size="small">
        <el-table-column prop="name" label="\u53d8\u91cf\u540d" width="180" />
        <el-table-column prop="display_name" label="\u663e\u793a\u540d" width="120" />
        <el-table-column prop="min_value" label="\u6700\u5c0f\u503c" width="100" />
        <el-table-column prop="max_value" label="\u6700\u5927\u503c" width="100" />
        <el-table-column prop="step" label="\u6b65\u957f" width="80" />
        <el-table-column prop="unit" label="\u5355\u4f4d" width="80" />
      </el-table>
      <el-divider content-position="left">\u641c\u7d22\u7b56\u7565</el-divider>
      <el-descriptions :column="3" border size="small" v-if="plan.search_strategy">
        <el-descriptions-item label="\u65b9\u6cd5">{{ plan.search_strategy.method }}</el-descriptions-item>
        <el-descriptions-item label="\u521d\u59cb\u6837\u672c">{{ plan.search_strategy.initial_samples }}</el-descriptions-item>
        <el-descriptions-item label="\u6279\u6b21\u5927\u5c0f">{{ plan.search_strategy.batch_size }}</el-descriptions-item>
        <el-descriptions-item label="\u603b\u9884\u7b97">{{ plan.search_strategy.max_solver_calls }}</el-descriptions-item>
        <el-descriptions-item label="\u4fe1\u4efb\u57df">{{ plan.search_strategy.local_trust_region ? '\u542f\u7528' : '\u5173\u95ed' }}</el-descriptions-item>
      </el-descriptions>
      <el-divider content-position="left">AI\u8bbe\u8ba1\u601d\u8def</el-divider>
      <el-alert :title="plan.reasoning" type="info" :closable="false" show-icon />
    </el-card>

    <el-dialog v-model="showRefine" title="\u4f18\u5316\u65b9\u6848" width="500px">
      <el-input v-model="refineFeedback" type="textarea" :rows="4" placeholder="\u8bf4\u660e\u4f60\u5e0c\u671b\u5982\u4f55\u8c03\u6574\u65b9\u6848..." />
      <template #footer>
        <el-button @click="showRefine = false">\u53d6\u6d88</el-button>
        <el-button type="primary" :loading="refining" @click="doRefine">\u63d0\u4ea4</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { MagicStick } from '@element-plus/icons-vue'
import { planGenApi } from '@/api/ai'

const requirement = ref('')
const plan = ref<any>(null)
const generating = ref(false)
const showRefine = ref(false)
const refineFeedback = ref('')
const refining = ref(false)

const loadExample = () => {
  requirement.value = '\u6211\u9700\u8981\u505a\u4e00\u4e2aSSSR\u62d3\u6251\u7684\u8f74\u5411\u78c1\u901a\u7535\u673a\u4eff\u771f\uff0c\u5916\u5f84100mm\uff0c\u5185\u5f8440mm\uff0c\u8f6c\u901f3000rpm\u3002\u91cd\u70b9\u4f18\u5316\u6c14\u9699\uff080.5-2.0mm\uff09\u548c\u78c1\u94a2\u539a\u5ea6\uff083-8mm\uff09\uff0c\u76ee\u6807\u662f\u6548\u7387>92%\uff0c\u8f6c\u77e9>10Nm\u3002\u7535\u6d41\u8303\u56f410-25A\uff0c\u9884\u7b9780\u6b21\u4eff\u771f\u3002'
}

const generatePlan = async () => {
  if (!requirement.value.trim()) {
    ElMessage.warning('\u8bf7\u8f93\u5165\u4eff\u771f\u9700\u6c42')
    return
  }
  generating.value = true
  try {
    const res: any = await planGenApi.generate({ requirement: requirement.value })
    plan.value = res.plan || res
    ElMessage.success('\u65b9\u6848\u751f\u6210\u6210\u529f')
  } catch (e: any) {
    ElMessage.error('\u751f\u6210\u5931\u8d25: ' + (e.message || e))
  } finally {
    generating.value = false
  }
}

const doRefine = async () => {
  if (!refineFeedback.value.trim()) {
    ElMessage.warning('\u8bf7\u8f93\u5165\u4f18\u5316\u53cd\u9988')
    return
  }
  refining.value = true
  try {
    const res: any = await planGenApi.refine({ original_plan: plan.value, feedback: refineFeedback.value })
    plan.value = res.plan || res
    showRefine.value = false
    refineFeedback.value = ''
    ElMessage.success('\u65b9\u6848\u5df2\u4f18\u5316')
  } catch (e: any) {
    ElMessage.error('\u4f18\u5316\u5931\u8d25: ' + (e.message || e))
  } finally {
    refining.value = false
  }
}

const savePlan = () => {
  ElMessage.success('\u65b9\u6848\u5df2\u4fdd\u5b58\uff08\u5f00\u53d1\u4e2d\uff09')
}
</script>

<style scoped>
.ai-plan-generator { padding: 20px; }
.input-card { margin-bottom: 20px; }
.card-header { display: flex; justify-content: space-between; align-items: center; }
.title { font-weight: 600; font-size: 16px; }
.actions { margin-top: 16px; display: flex; gap: 12px; }
.result-card { margin-top: 20px; }
</style>
