"use client";

import { Badge } from "@/components/ui/Badge";
import { Card } from "@/components/ui/Card";
import type { BadgeVariant } from "@/lib/ui/variants";
import type { ChainPhase, ChainResultView } from "@/lib/chain/chain";

interface ChainProgressProps {
  phase: ChainPhase;
  progress: number;
  result: ChainResultView;
}

const PHASE_LABEL: Record<ChainPhase, string> = {
  running: "运行中",
  awaiting: "等待裁决",
  completed: "已完成",
  failed: "已失败",
};

// 相位 → 语义色：失败用危险色而非朱砂品牌色，运行/等待/完成各取信息/警示/成功。
const PHASE_VARIANT: Record<ChainPhase, BadgeVariant> = {
  running: "info",
  awaiting: "warning",
  completed: "success",
  failed: "danger",
};

// 链进度视图：相位徽标 + 进度条 + 已写章号清单（token/正文绝不展示，result 只含元数据）。
export function ChainProgress({ phase, progress, result }: ChainProgressProps) {
  return (
    <Card
      as="section"
      className="flex flex-col gap-3 p-5"
      aria-label="链进度"
    >
      <div className="flex items-center justify-between gap-3">
        <h2 className="font-serif text-lg text-ink">链进度</h2>
        <Badge variant={PHASE_VARIANT[phase]} aria-live="polite">
          {PHASE_LABEL[phase]}
        </Badge>
      </div>

      <div
        className="h-2 w-full overflow-hidden rounded bg-bg"
        role="progressbar"
        aria-label="链写章进度"
        aria-valuenow={progress}
        aria-valuemin={0}
        aria-valuemax={100}
        aria-valuetext={`已完成 ${result.written.length} 章`}
      >
        <div
          className="h-full bg-cinnabar motion-safe:transition-all"
          style={{ width: `${progress}%` }}
        />
      </div>

      <p className="text-sm text-ink-soft">
        已完成 {result.written.length} 章
        {result.written.length > 0 ? (
          <span className="ml-1 font-mono text-ink">
            （{result.written.join("、")}）
          </span>
        ) : null}
      </p>
      {phase === "awaiting" && result.awaitingChapter !== null ? (
        <p className="text-sm text-conflict">
          第 {result.awaitingChapter} 章存在未决冲突，请在下方逐条裁决后续跑。
        </p>
      ) : null}
    </Card>
  );
}
