import { Badge, BadgeProps } from "@/components/ui/badge";
import { cn } from "@/lib/utils";
import { McpServerStatus } from "@/types";
import { SERVER_STATUS } from "@/types/mcp-server";
import { cva } from "class-variance-authority";

type ServerStatusBadgeStatus = McpServerStatus | "disabled";

const serverStatusBadgeVariants = cva(
  "h-[22px] rounded-full pl-1.5 pr-2 leading-[18px]",
  {
    variants: {
      status: {
        [SERVER_STATUS.connecting]:
          "border-(--colors-gray-200) bg-(--colors-gray-100) text-(--colors-gray-600)",
        disabled:
          "border-(--colors-gray-200) bg-(--colors-gray-200) text-(--colors-gray-500)",
        [SERVER_STATUS.connected_running]:
          "border-(--color-border-success) bg-(--color-bg-success) text-(--color-fg-success)",
        [SERVER_STATUS.connected_stopped]:
          "border-(--color-border-success) bg-(--color-bg-success) text-(--color-fg-success)",
        [SERVER_STATUS.connected_inactive]:
          "border-(--colors-primary-200) bg-(--colors-primary-50) text-(--colors-primary-700)",
        [SERVER_STATUS.connection_failed]:
          "border-(--colors-error-200) bg-(--colors-error-50) text-(--colors-error-700)",
        [SERVER_STATUS.pending_auth]:
          "border-(--colors-info-200) bg-(--colors-info-50) text-(--colors-info-700)",
        [SERVER_STATUS.pending_input]:
          "border-(--colors-warning-200) bg-(--colors-warning-100) text-(--colors-warning-500)",
      },
    },
  },
);

const SERVER_STATUS_LABELS: Record<ServerStatusBadgeStatus, string> = {
  connecting: "Connecting...",
  disabled: "Disabled",
  connected_running: "Active",
  connected_inactive: "Inactive",
  connected_stopped: "Connected",
  connection_failed: "Connection Error",
  pending_auth: "Pending Auth",
  pending_input: "Missing Configuration",
};

type ServerStatusBadgeProps = Omit<BadgeProps, "children" | "variant"> & {
  status: ServerStatusBadgeStatus;
};

export function ServerStatusBadge({
  className,
  status,
  ...props
}: ServerStatusBadgeProps) {
  return (
    <Badge
      {...props}
      variant="secondary"
      size="md"
      title={SERVER_STATUS_LABELS[status]}
      className={cn(
        serverStatusBadgeVariants({ status }),
        "max-w-full min-w-0",
        className,
      )}
    >
      <span
        className="bg-current w-1.5 h-1.5 shrink-0 rounded-full"
        aria-hidden
      />
      <span className="min-w-0 truncate">{SERVER_STATUS_LABELS[status]}</span>
    </Badge>
  );
}
