<!--
  SPEC: PJ2026-010405 云端控制台。
  Implementation reference: draft-2026-07-13-p0-cloud-console.
  Responsibility: 展示后端提供的 Node 分阶段 readiness，不在浏览器推断完成状态。
-->
<script setup lang="ts">
import type { HwpodNodeReadinessStage } from "@/types";

defineProps<{ stages: HwpodNodeReadinessStage[] }>();
</script>

<template>
  <ol class="readiness-rail" aria-label="HWPOD Node 接入 readiness">
    <li v-for="(stage, index) in stages" :key="stage.id" :data-status="stage.status">
      <span class="stage-index" aria-hidden="true">{{ String(index + 1).padStart(2, '0') }}</span>
      <div>
        <strong>{{ stage.label }}</strong>
        <small>{{ stage.authority }}</small>
        <p v-if="stage.blocker">{{ stage.blocker.summary }}</p>
        <p v-if="stage.nextAction" class="stage-action"><strong>下一步</strong>{{ stage.nextAction.label }}</p>
      </div>
      <span class="stage-status">{{ stage.status === 'ready' ? '已就绪' : stage.status === 'blocked' ? '阻塞' : '待观测' }}</span>
    </li>
  </ol>
</template>

<style scoped>
.readiness-rail { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.readiness-rail li { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 12px; align-items: start; min-height: 66px; padding: 8px 0 14px; }
.readiness-rail li:not(:last-child)::after { content: ""; position: absolute; left: 17px; top: 40px; bottom: -1px; width: 2px; background: #ccd5d1; }
.stage-index { position: relative; z-index: 1; display: grid; place-items: center; width: 34px; height: 34px; border: 2px solid #aebbb7; border-radius: 50%; background: #f7f7f3; color: #66736f; font: 700 .66rem/1 ui-monospace, SFMono-Regular, Consolas, monospace; }
li[data-status="ready"] .stage-index { border-color: #3d907f; background: #e6f6ef; color: #24695b; }
li[data-status="blocked"] .stage-index { border-color: #b46b4b; background: #fff0e9; color: #8b4326; }
.readiness-rail strong { display: block; color: #1d302c; font-size: .86rem; }
.readiness-rail small { color: #71807b; font: .67rem/1.4 ui-monospace, SFMono-Regular, Consolas, monospace; }
.readiness-rail p { margin: 4px 0 0; color: #79503b; font-size: .75rem; line-height: 1.4; }
.stage-action { display: grid; gap: 2px; color: #31564d !important; }
.stage-action strong { font-size: .7rem; }
.stage-status { margin-top: 4px; color: #5e6f69; font-size: .7rem; font-weight: 800; }
li[data-status="ready"] .stage-status { color: #2c7567; }
li[data-status="blocked"] .stage-status { color: #9b4f2d; }
@media (max-width: 560px) { .readiness-rail li { grid-template-columns: 32px minmax(0, 1fr); } .stage-status { grid-column: 2; margin-top: -8px; } }
</style>
