<template>
  <section class="step-panel-shell">
    <header class="step-panel-header">
      <div>
        <div class="step-panel-heading">
          <h2>{{ title }}</h2>
          <el-tag :type="statusTag(snapshot.status)" effect="plain">{{ statusLabel(snapshot.status) }}</el-tag>
        </div>
        <p>{{ snapshot.message || emptyMessage }}</p>
      </div>
      <div class="step-panel-actions"><slot name="actions" /></div>
    </header>

    <div class="step-progress-row">
      <span>节点进度</span>
      <el-progress :percentage="Number(snapshot.step_progress || 0)" :stroke-width="8" />
      <small>第 {{ snapshot.attempt || 1 }} 次执行</small>
    </div>

    <div v-if="metricItems.length" class="node-metrics">
      <div v-for="item in metricItems" :key="item.label">
        <strong>{{ item.value }}</strong>
        <span>{{ item.label }}</span>
      </div>
    </div>

    <slot />

    <el-alert
      v-if="snapshot.status === 'failed'"
      class="node-error"
      type="error"
      :title="snapshot.title || '节点执行失败'"
      :description="snapshot.message || '请查看节点事件并重试'"
      show-icon
      :closable="false"
    />
  </section>
</template>

<script setup lang="ts">
import { computed } from "vue";
import { formatValue, statusLabel, statusTag, type StepSnapshot } from "../../../types/demo-run";

const props = withDefaults(defineProps<{ title: string; snapshot: StepSnapshot; emptyMessage?: string }>(), {
  emptyMessage: "等待节点开始执行"
});

const metricItems = computed(() => Object.entries(props.snapshot.metrics ?? {}).slice(0, 6).map(([label, value]) => ({
  label,
  value: formatValue(value)
})));
</script>
