<template>
  <div class="pitfall-panel">
    <div class="pitfall-header">
      <h3>避坑预警</h3>
    </div>
    <div class="pitfall-input">
      <a-input
        v-model:value="taskTypeInput"
        placeholder="输入任务类型"
        size="small"
        style="flex: 1"
        @press-enter="onCheck"
      />
      <a-button type="primary" size="small" :loading="loading" @click="onCheck">
        检查
      </a-button>
    </div>
    <div v-if="warnings.length === 0 && !loading" class="pitfall-empty">
      <a-empty description="暂无预警信息" :image-style="{ height: '40px' }" />
    </div>
    <div v-else class="pitfall-list">
      <div
        v-for="(warning, index) in warnings"
        :key="index"
        class="pitfall-item"
      >
        <div class="pitfall-item__header">
          <a-tag :color="riskColor(warning.risk_level)" size="small">
            {{ riskLabel(warning.risk_level) }}
          </a-tag>
          <span class="pitfall-item__step">{{ warning.step }}</span>
        </div>
        <div class="pitfall-item__rate">
          历史失败率: <strong>{{ (warning.historical_failure_rate * 100).toFixed(1) }}%</strong>
        </div>
        <div v-if="warning.reason" class="pitfall-item__reason">
          {{ warning.reason }}
        </div>
        <div v-if="warning.suggestion && warning.suggestion !== warning.reason" class="pitfall-item__suggestion">
          <span class="suggestion-icon">💡</span> {{ warning.suggestion }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Input as AInput, Button as AButton, Tag as ATag, Empty as AEmpty } from 'ant-design-vue'
import type { PitfallWarning } from '@/api/evolution'

const props = defineProps<{
  warnings: PitfallWarning[]
  loading?: boolean
}>()

const emit = defineEmits<{
  (e: 'check', taskType: string): void
}>()

const taskTypeInput = ref('')

function onCheck() {
  if (taskTypeInput.value.trim()) {
    emit('check', taskTypeInput.value.trim())
  }
}

function riskColor(level: string): string {
  switch (level) {
    case 'high': return 'red'
    case 'medium': return 'orange'
    case 'low': return 'blue'
    default: return 'default'
  }
}

function riskLabel(level: string): string {
  switch (level) {
    case 'high': return '高风险'
    case 'medium': return '中风险'
    case 'low': return '低风险'
    default: return level
  }
}
</script>

<style scoped>
.pitfall-panel {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.pitfall-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.pitfall-header h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
}

.pitfall-input {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.pitfall-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pitfall-list {
  flex: 1;
  overflow-y: auto;
}

.pitfall-item {
  background: #fafafa;
  border: 1px solid #f0f0f0;
  border-radius: 6px;
  padding: 10px 12px;
  margin-bottom: 8px;
}

.pitfall-item__header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.pitfall-item__step {
  font-size: 13px;
  font-weight: 500;
}

.pitfall-item__rate {
  font-size: 12px;
  color: #8c8c8c;
  margin-bottom: 4px;
}

.pitfall-item__reason {
  font-size: 12px;
  color: #595959;
  line-height: 1.5;
  margin-bottom: 4px;
}

.pitfall-item__suggestion {
  font-size: 12px;
  color: #1890ff;
  line-height: 1.5;
}

.suggestion-icon {
  font-size: 12px;
}
</style>
