<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"
        @click="openDetail(warning)"
      >
        <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>
    </div>

    <!-- Detail Drawer -->
    <a-drawer
      v-model:open="drawerVisible"
      :title="selectedWarning ? selectedWarning.step : '预警详情'"
      placement="right"
      :width="520"
      :destroy-on-close="true"
    >
      <template v-if="selectedWarning">
        <a-descriptions :column="1" bordered size="small">
          <a-descriptions-item label="步骤">{{ selectedWarning.step }}</a-descriptions-item>
          <a-descriptions-item label="风险等级">
            <a-tag :color="riskColor(selectedWarning.risk_level)">{{ riskLabel(selectedWarning.risk_level) }}</a-tag>
          </a-descriptions-item>
          <a-descriptions-item label="历史失败率">{{ (selectedWarning.historical_failure_rate * 100).toFixed(1) }}%</a-descriptions-item>
        </a-descriptions>
        <div v-if="selectedWarning.reason" class="detail-block">
          <div class="detail-block__title">原因</div>
          <div class="detail-block__text">{{ selectedWarning.reason }}</div>
        </div>
        <div v-if="selectedWarning.suggestion" class="detail-block">
          <div class="detail-block__title">建议</div>
          <div class="detail-block__text">{{ selectedWarning.suggestion }}</div>
        </div>
      </template>
    </a-drawer>
  </div>
</template>

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

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

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

const taskTypeInput = ref('')
const drawerVisible = ref(false)
const selectedWarning = ref<PitfallWarning | null>(null)

function openDetail(warning: PitfallWarning) {
  selectedWarning.value = warning
  drawerVisible.value = true
}

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: var(--bg-secondary);
  border: 1px solid var(--border-color-split);
  border-radius: 6px;
  padding: 10px 12px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: box-shadow var(--transition-fast);
}

.pitfall-item:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.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: var(--text-tertiary);
  margin-bottom: 4px;
}

.pitfall-item__reason {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 4px;
}

.pitfall-item__suggestion {
  font-size: 12px;
  color: var(--color-primary);
  line-height: 1.5;
}

.suggestion-icon {
  font-size: 12px;
}

.detail-block {
  margin-top: var(--space-4);
}

.detail-block__title {
  font-size: var(--font-sm);
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: var(--space-1);
}

.detail-block__text {
  font-size: var(--font-sm);
  color: var(--text-tertiary);
  line-height: var(--leading-normal);
}
</style>
