<template>
  <div v-if="chatStore.isPlanExec" class="phase-indicator">
    <span class="phase-indicator__badge">PLAN_EXEC</span>
    <span class="phase-indicator__label">{{ currentLabel }}</span>
    <ul class="phase-indicator__dots">
      <li
        v-for="p in phases"
        :key="p.key"
        class="phase-indicator__dot"
        :class="{
          'phase-indicator__dot--active': p.key === activeKey,
          'phase-indicator__dot--done': p.done,
        }"
        :title="p.label"
      >
        <span class="phase-indicator__dot-inner" />
      </li>
    </ul>
    <span v-if="chatStore.phaseViolations.length > 0" class="phase-indicator__violations">
      {{ chatStore.phaseViolations.length }} 违规
    </span>
  </div>
</template>

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

const chatStore = useChatStore()

interface PhaseMeta {
  key: string
  label: string
  done: boolean
}

const phases = computed<PhaseMeta[]>(() => {
  const order = ['planning', 'building', 'verification', 'delivery']
  const labels: Record<string, string> = {
    planning: '规划',
    building: '构建',
    verification: '验证',
    delivery: '交付',
  }
  const current = chatStore.currentPhase
  const currentIndex = current ? order.indexOf(current) : -1
  return order.map((key, idx) => ({
    key,
    label: labels[key] ?? key,
    done: currentIndex > idx,
  }))
})

const activeKey = computed(() => chatStore.currentPhase ?? '')

const currentLabel = computed(() => {
  const labels: Record<string, string> = {
    planning: '规划阶段',
    building: '构建阶段',
    verification: '验证阶段',
    delivery: '交付阶段',
  }
  return labels[chatStore.currentPhase ?? ''] ?? 'PLAN_EXEC'
})
</script>

<style scoped>
.phase-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  background: var(--color-bg-elevated, #fafafa);
  border-bottom: 1px solid var(--color-border, #f0f0f0);
  font-size: 12px;
  color: var(--color-text-secondary, #888);
}

.phase-indicator__badge {
  display: inline-block;
  padding: 1px 6px;
  background: var(--accent-board);
  color: var(--text-inverse);
  border-radius: 3px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.phase-indicator__label {
  color: var(--color-text-primary, #333);
  font-weight: 500;
}

.phase-indicator__dots {
  list-style: none;
  display: flex;
  gap: 6px;
  margin: 0;
  padding: 0;
}

.phase-indicator__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-gray-300);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.phase-indicator__dot-inner {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: transparent;
}

.phase-indicator__dot--active {
  background: var(--accent-board);
  box-shadow: 0 0 0 2px var(--accent-board-soft);
}

.phase-indicator__dot--active .phase-indicator__dot-inner {
  background: var(--text-inverse);
}

.phase-indicator__dot--done {
  background: var(--color-success);
}

.phase-indicator__violations {
  margin-left: auto;
  padding: 1px 6px;
  background: var(--color-error-light);
  color: var(--color-error);
  border-radius: 3px;
  font-size: 11px;
}
</style>
