<template>
  <nav class="stage-navigator" aria-label="全链路运行阶段">
    <button
      v-for="(stage, index) in stages"
      :key="stage.key"
      type="button"
      class="stage-nav-item"
      :class="[`stage-${stage.status || 'pending'}`, { selected: selectedStepKey === stage.key }]"
      @click="$emit('select', stage.key)"
    >
      <i>{{ index + 1 }}</i>
      <span><strong>{{ stage.name }}</strong><small>{{ statusLabel(stage.status) }} · {{ formatDuration(stage.elapsed_ms) }}</small></span>
      <em v-if="stage.status === 'running' || stage.status === 'retrying'">{{ stage.step_progress || 0 }}%</em>
    </button>
  </nav>
</template>

<script setup lang="ts">
import { formatDuration, statusLabel, type RunStage } from "../../types/demo-run";
defineProps<{ stages: RunStage[]; selectedStepKey: string }>();
defineEmits<{ select: [stepKey: string] }>();
</script>
