"use client";

import {
  CheckCircle2,
  Circle,
  Loader2,
  TriangleAlert,
  XCircle,
} from "lucide-react";

import type { BatchCaseStatus } from "@/data/batch-run";
import { cn } from "@/lib/utils";

const STATUS_META: Record<
  BatchCaseStatus,
  { label: string; className: string; Icon: typeof CheckCircle2 }
> = {
  pass: {
    label: "通过",
    className: "text-success",
    Icon: CheckCircle2,
  },
  fail: {
    label: "断言失败",
    className: "text-destructive",
    Icon: XCircle,
  },
  error: {
    label: "执行错误",
    className: "text-amber-600 dark:text-amber-400",
    Icon: TriangleAlert,
  },
  running: {
    label: "运行中",
    className: "text-primary",
    Icon: Loader2,
  },
  waiting: {
    label: "等待",
    className: "text-muted-soft",
    Icon: Circle,
  },
  skipped: {
    label: "未执行",
    className: "text-muted-soft",
    Icon: Circle,
  },
};

export function getBatchCaseStatusLabel(status: BatchCaseStatus): string {
  return STATUS_META[status].label;
}

export function BatchCaseStatusBadge({
  status,
  className,
}: {
  status: BatchCaseStatus;
  className?: string;
}) {
  const meta = STATUS_META[status];
  const Icon = meta.Icon;

  return (
    <span
      className={cn(
        "inline-flex items-center gap-1.5 text-sm font-medium",
        meta.className,
        className,
      )}
    >
      <Icon
        size={16}
        className={cn(status === "running" && "animate-spin")}
      />
      {meta.label}
    </span>
  );
}

export function BatchPhasePill({
  phase,
}: {
  phase: "running" | "completed";
}) {
  if (phase === "running") {
    return (
      <span className="inline-flex items-center rounded-full bg-primary/10 px-2.5 py-0.5 text-xs font-medium text-primary">
        运行中
      </span>
    );
  }

  return (
    <span className="inline-flex items-center rounded-full bg-success/15 px-2.5 py-0.5 text-xs font-medium text-success">
      已完成
    </span>
  );
}