<template>
  <view class="timeline">
    <view v-for="(step, index) in normalizedSteps" :key="step.key" class="timeline__item">
      <view class="timeline__rail">
        <view class="timeline__mark" :class="`timeline__mark--${String(step.status).toLowerCase()}`">
          <text>{{ index + 1 }}</text>
        </view>
        <view v-if="index < normalizedSteps.length - 1" class="timeline__line" />
      </view>
      <view class="timeline__content">
        <view class="timeline__head">
          <text class="timeline__name">{{ step.name }}</text>
          <text class="timeline__status">{{ statusText(step.status) }}</text>
        </view>
        <text v-if="step.output" class="timeline__output">{{ step.output }}</text>
        <text v-else class="timeline__output muted">{{ stepHint(step.status) }}</text>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { computed } from "vue";
import type { AgentRunStatus, AgentStep } from "@/types/api";
import type { RunModeValue } from "@/utils/constants";
import { statusText } from "@/utils/format";

const props = defineProps<{
  steps?: AgentStep[];
  mode?: RunModeValue;
}>();

const pcRefineFallback = [
  { key: "script_understanding", name: "剧本理解", status: "PENDING" },
  { key: "character_generation", name: "角色设定", status: "PENDING" },
  { key: "storyboard_generation", name: "分镜生成", status: "PENDING" }
] as const;

const quickVideoFallback = [
  ...pcRefineFallback,
  { key: "image_generation", name: "分镜图生成", status: "PENDING" },
  { key: "video_generation", name: "视频生成", status: "PENDING" },
  { key: "video_composition", name: "合成成片", status: "PENDING" }
] as const;

const fallback = computed(() => (props.mode === "quick_video" ? quickVideoFallback : pcRefineFallback));

const normalizedSteps = computed(() => {
  if (!props.steps?.length) return fallback.value.map((item) => ({ ...item, output: "" }));
  return [...props.steps]
    .sort((a, b) => (a.seq || 0) - (b.seq || 0))
    .map((step, index) => ({
      key: step.stepKey || String(step.id || index),
      name: step.stepName || step.stepKey || `步骤 ${index + 1}`,
      status: step.status || "PENDING",
      output: step.output || step.scoreDetail || ""
    }));
});

function stepHint(status?: AgentRunStatus) {
  const normalizedStatus = String(status || "").toUpperCase();
  if (normalizedStatus === "RUNNING") return "Agent 正在处理这一环节";
  if (normalizedStatus === "DONE") return "已完成";
  if (normalizedStatus === "FAILED") return "执行失败，请回到网页端查看详情";
  return "等待开始";
}
</script>

<style scoped lang="scss">
.timeline {
  padding: 8rpx 0;
}

.timeline__item {
  display: flex;
  gap: 18rpx;
}

.timeline__rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
}

.timeline__mark {
  width: 52rpx;
  height: 52rpx;
  border-radius: 50%;
  background: #eef4ff;
  color: #5b5cf6;
  font-size: 22rpx;
  font-weight: 860;
  display: flex;
  align-items: center;
  justify-content: center;
}

.timeline__line {
  width: 2rpx;
  min-height: 62rpx;
  flex: 1;
  background: #e7ebf3;
}

.timeline__mark--running {
  background: #e0f2fe;
  color: #075985;
}

.timeline__mark--done,
.timeline__mark--skipped {
  background: #dcfce7;
  color: #166534;
}

.timeline__mark--failed {
  background: #fee2e2;
  color: #991b1b;
}

.timeline__content {
  flex: 1;
  min-width: 0;
  padding-bottom: 28rpx;
}

.timeline__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16rpx;
}

.timeline__name {
  color: #101828;
  font-size: 28rpx;
  font-weight: 800;
}

.timeline__status {
  color: #667085;
  font-size: 23rpx;
  white-space: nowrap;
}

.timeline__output {
  display: block;
  margin-top: 10rpx;
  color: #475467;
  font-size: 24rpx;
  line-height: 1.55;
}
</style>
