import { ReactNode } from "react";
import { cn } from "../utils/cn";

interface StatusBadgeProps {
  status: string;
  className?: string;
  size?: "sm" | "md";
}

export default function StatusBadge({ status, className, size = "md" }: StatusBadgeProps) {
  const normalized = (status || "").toUpperCase();

  let colorClasses = "bg-zinc-800 text-zinc-300 border-zinc-700";
  let dotColor = "bg-zinc-400";
  let pulse = false;

  switch (normalized) {
    case "ACTIVE":
    case "CONNECTED":
    case "EXCELLENT":
    case "INTERESTED":
    case "MEETING_BOOKED":
      colorClasses = "bg-emerald-500/10 text-emerald-400 border-emerald-500/20";
      dotColor = "bg-emerald-400 shadow-[0_0_8px_rgba(52,211,153,0.6)]";
      pulse = true;
      break;

    case "PAUSED":
    case "GOOD":
    case "REPLIED":
    case "RECONNECTING":
    case "WARMING":
      colorClasses = "bg-amber-500/10 text-amber-400 border-amber-500/20";
      dotColor = "bg-amber-400 shadow-[0_0_8px_rgba(251,191,36,0.6)]";
      break;

    case "STOPPED":
    case "ERROR":
    case "POOR":
    case "BOUNCED":
    case "NOT_INTERESTED":
    case "UNSUBSCRIBED":
    case "DO_NOT_CONTACT":
      colorClasses = "bg-rose-500/10 text-rose-400 border-rose-500/20";
      dotColor = "bg-rose-400 shadow-[0_0_8px_rgba(244,63,94,0.6)]";
      break;

    case "MEETING_DONE":
    case "COMPLETED":
      colorClasses = "bg-indigo-500/10 text-indigo-400 border-indigo-500/20";
      dotColor = "bg-indigo-400";
      break;

    default:
      colorClasses = "bg-zinc-800/80 text-zinc-300 border-zinc-700";
      dotColor = "bg-zinc-400";
      break;
  }

  const formatText = (text: string) => {
    return text.replace(/_/g, " ");
  };

  return (
    <span
      className={cn(
        "inline-flex items-center gap-1.5 font-medium rounded-full border transition-all",
        size === "sm" ? "px-2 py-0.5 text-[11px]" : "px-2.5 py-1 text-xs",
        colorClasses,
        className
      )}
    >
      <span
        className={cn(
          "w-1.5 h-1.5 rounded-full shrink-0",
          dotColor,
          pulse && "animate-pulse"
        )}
      />
      <span className="capitalize">{formatText(status)}</span>
    </span>
  );
}