<template>
  <div v-if="phases.length > 0" class="plan-visualization">
    <div class="plan-visualization__title">协作计划时间线</div>
    <a-timeline>
      <a-timeline-item
        v-for="phase in phases"
        :key="phase.id"
        :color="timelineColor(phase.status)"
      >
        <div class="plan-visualization__phase">
          <div class="plan-visualization__phase-header">
            <span class="plan-visualization__phase-name">{{ phase.name }}</span>
            <a-tag :color="statusColor(phase.status)" size="small">{{ statusLabel(phase.status) }}</a-tag>
          </div>
          <div class="plan-visualization__phase-detail">
            <span>执行者: {{ phase.assigned_expert }}</span>
            <span v-if="phase.milestone"> | 里程碑: {{ phase.milestone }}</span>
          </div>
          <div v-if="phase.parallel_type && phase.parallel_type !== 'serial'" class="plan-visualization__phase-type">
            <a-tag size="small">{{ parallelLabel(phase.parallel_type) }}</a-tag>
          </div>
        </div>
      </a-timeline-item>
    </a-timeline>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { Timeline as ATimeline, Tag as ATag } from 'ant-design-vue'
import { useTeamStore } from '@/stores/team'

const ATimelineItem = ATimeline.Item

const teamStore = useTeamStore()
const phases = computed(() => teamStore.teamState?.plan_phases || [])

function timelineColor(status: string): string {
  const colors: Record<string, string> = { pending: 'gray', in_progress: 'blue', completed: 'green', failed: 'red' }
  return colors[status] || 'gray'
}

function statusColor(status: string): string {
  const colors: Record<string, string> = { pending: 'default', in_progress: 'processing', completed: 'success', failed: 'error' }
  return colors[status] || 'default'
}

function statusLabel(status: string): string {
  const labels: Record<string, string> = { pending: '待执行', in_progress: '执行中', completed: '已完成', failed: '失败' }
  return labels[status] || status
}

function parallelLabel(type: string): string {
  const labels: Record<string, string> = { subtask_parallel: '子任务并行', competitive_parallel: '竞标并行' }
  return labels[type] || type
}
</script>

<style scoped>
.plan-visualization {
  padding: var(--space-3);
}

.plan-visualization__title {
  font-weight: var(--font-weight-medium);
  margin-bottom: var(--space-3);
  font-size: var(--font-md);
}

.plan-visualization__phase-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.plan-visualization__phase-name {
  font-weight: var(--font-weight-medium);
}

.plan-visualization__phase-detail {
  font-size: var(--font-xs);
  color: var(--text-secondary);
  margin-top: 2px;
}

.plan-visualization__phase-type {
  margin-top: var(--space-1);
}
</style>
