<template>
  <div v-if="teamStore.isTeamMode" class="expert-team-view">
    <div class="expert-team-view__header">
      <div class="expert-team-view__title">
        <span class="expert-team-view__label">专家团</span>
        <span class="expert-team-view__count">{{ completedCount }}/{{ totalCount }} 阶段完成</span>
      </div>
      <div class="expert-team-view__experts">
        <span
          v-for="expert in teamStore.activeExperts"
          :key="expert.id"
          class="expert-team-view__expert"
          :class="{ 'expert-team-view__expert--lead': expert.is_lead }"
        >
          {{ expert.name }}
        </span>
      </div>
    </div>

    <div v-if="phases.length > 0" class="expert-team-view__plan">
      <div
        v-for="phase in phases"
        :key="phase.id"
        class="expert-team-view__phase"
        :class="`expert-team-view__phase--${phase.status}`"
      >
        <span class="expert-team-view__phase-num">{{ phases.indexOf(phase) + 1 }}</span>
        <span class="expert-team-view__phase-name">{{ phase.name }}</span>
        <span class="expert-team-view__phase-expert">{{ phase.assigned_expert }}</span>
        <span class="expert-team-view__phase-status">{{ statusLabel(phase.status) }}</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useTeamStore } from '@/stores/team'

const teamStore = useTeamStore()

const phases = computed(() => teamStore.teamState?.plan_phases || [])
const completedCount = computed(() => phases.value.filter((p) => p.status === 'completed').length)
const totalCount = computed(() => phases.value.length)

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

<style scoped>
.expert-team-view {
  margin: 0 var(--space-5);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border-color);
}

.expert-team-view__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.expert-team-view__title {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}

.expert-team-view__label {
  font-size: var(--font-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-primary);
}

.expert-team-view__count {
  font-size: var(--font-xs);
  color: var(--text-tertiary);
}

.expert-team-view__experts {
  display: flex;
  gap: var(--space-3);
  font-size: var(--font-xs);
  color: var(--text-tertiary);
}

.expert-team-view__expert {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.expert-team-view__expert--lead {
  color: var(--accent-team);
}

.expert-team-view__plan {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.expert-team-view__phase {
  display: grid;
  grid-template-columns: 18px 1fr 120px 60px;
  gap: var(--space-2);
  align-items: baseline;
  padding: 4px 0;
  font-size: var(--font-sm);
  color: var(--text-secondary);
}

.expert-team-view__phase-num {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  color: var(--text-tertiary);
}

.expert-team-view__phase-name {
  color: var(--text-primary);
}

.expert-team-view__phase-expert {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--font-xs);
  color: var(--text-tertiary);
}

.expert-team-view__phase-status {
  font-size: var(--font-xs);
  color: var(--text-tertiary);
  text-align: right;
}

.expert-team-view__phase--in_progress .expert-team-view__phase-status {
  color: var(--accent-team);
}

.expert-team-view__phase--completed .expert-team-view__phase-status {
  color: var(--text-tertiary);
}

.expert-team-view__phase--failed .expert-team-view__phase-status {
  color: #ef4444;
}
</style>
