<template>
  <div class="experience-timeline">
    <div class="timeline-header">
      <h3>经验时间线</h3>
      <a-select
        v-model:value="filterOutcome"
        style="width: 120px"
        size="small"
        @change="onFilterChange"
      >
        <a-select-option value="">全部</a-select-option>
        <a-select-option value="success">成功</a-select-option>
        <a-select-option value="failure">失败</a-select-option>
      </a-select>
    </div>
    <div v-if="experiences.length === 0" class="timeline-empty">
      <a-empty description="暂无经验记录" />
    </div>
    <div v-else class="timeline-list">
      <div
        v-for="(exp, index) in experiences"
        :key="exp.id"
        class="timeline-item"
        :class="{ 'timeline-item--left': index % 2 === 0, 'timeline-item--right': index % 2 !== 0 }"
      >
        <div class="timeline-dot" :class="`timeline-dot--${exp.outcome}`" />
        <div class="timeline-card" @click="toggleExpand(exp.id)">
          <div class="timeline-card__header">
            <span class="timeline-card__goal">{{ exp.goal || exp.task_type }}</span>
            <a-tag :color="exp.outcome === 'success' ? 'success' : 'error'" size="small">
              {{ exp.outcome === 'success' ? '成功' : '失败' }}
            </a-tag>
          </div>
          <div class="timeline-card__meta">
            <span class="timeline-card__type">{{ exp.task_type }}</span>
            <span class="timeline-card__duration">{{ formatDuration(exp.duration) }}</span>
            <span class="timeline-card__time">{{ formatTime(exp.created_at) }}</span>
          </div>
          <div v-if="expandedId === exp.id" class="timeline-card__detail">
            <div v-if="exp.steps_summary" class="detail-section">
              <div class="detail-label">步骤摘要</div>
              <div class="detail-text">{{ exp.steps_summary }}</div>
            </div>
            <div v-if="exp.failure_reasons?.length" class="detail-section">
              <div class="detail-label">失败原因</div>
              <ul class="detail-list">
                <li v-for="(reason, i) in exp.failure_reasons" :key="i">{{ reason }}</li>
              </ul>
            </div>
            <div v-if="exp.optimization_tips?.length" class="detail-section">
              <div class="detail-label">优化建议</div>
              <ul class="detail-list">
                <li v-for="(tip, i) in exp.optimization_tips" :key="i">{{ tip }}</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import { Select as ASelect, SelectOption as ASelectOption, Tag as ATag, Empty as AEmpty } from 'ant-design-vue'
import type { Experience } from '@/api/evolution'

const props = defineProps<{
  experiences: Experience[]
}>()

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

const expandedId = ref<string | null>(null)
const filterOutcome = ref('')

function toggleExpand(id: string) {
  expandedId.value = expandedId.value === id ? null : id
}

function onFilterChange() {
  emit('filter', filterOutcome.value)
}

function formatDuration(seconds: number): string {
  if (seconds < 60) return `${seconds.toFixed(1)}秒`
  if (seconds < 3600) return `${(seconds / 60).toFixed(1)}分钟`
  return `${(seconds / 3600).toFixed(1)}小时`
}

function formatTime(isoStr: string): string {
  if (!isoStr) return ''
  const d = new Date(isoStr)
  return `${d.getMonth() + 1}/${d.getDate()} ${d.getHours().toString().padStart(2, '0')}:${d.getMinutes().toString().padStart(2, '0')}`
}
</script>

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

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

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

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

.timeline-list {
  flex: 1;
  overflow-y: auto;
  position: relative;
  padding-left: 20px;
}

.timeline-list::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #e8e8e8;
}

.timeline-item {
  position: relative;
  margin-bottom: 12px;
}

.timeline-dot {
  position: absolute;
  left: -16px;
  top: 12px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid #fff;
  z-index: 1;
}

.timeline-dot--success {
  background: #52c41a;
}

.timeline-dot--failure {
  background: #ff4d4f;
}

.timeline-card {
  background: #fafafa;
  border: 1px solid #f0f0f0;
  border-radius: 6px;
  padding: 10px 12px;
  cursor: pointer;
  transition: box-shadow 0.2s;
}

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

.timeline-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.timeline-card__goal {
  font-size: 13px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}

.timeline-card__meta {
  display: flex;
  gap: 12px;
  margin-top: 4px;
  font-size: 12px;
  color: #8c8c8c;
}

.timeline-card__type {
  color: #1890ff;
}

.timeline-card__detail {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid #f0f0f0;
}

.detail-section {
  margin-bottom: 8px;
}

.detail-label {
  font-size: 12px;
  font-weight: 600;
  color: #595959;
  margin-bottom: 4px;
}

.detail-text {
  font-size: 12px;
  color: #8c8c8c;
  line-height: 1.5;
}

.detail-list {
  margin: 0;
  padding-left: 16px;
  font-size: 12px;
  color: #8c8c8c;
  line-height: 1.6;
}
</style>
