import type { ReactNode } from "react";
import { cn } from "@/lib/utils";

type Tone = "neutral" | "success" | "warning" | "danger" | "info";

// Text is mixed toward the foreground colour so the badge keeps WCAG AA contrast in both light and dark themes.
const tones: Record<Tone, string> = {
  neutral: "bg-muted text-muted-foreground",
  success: "bg-success/10 text-[color-mix(in_srgb,var(--success)_55%,var(--foreground))]",
  warning: "bg-warning/10 text-[color-mix(in_srgb,var(--warning)_55%,var(--foreground))]",
  danger: "bg-danger/10 text-[color-mix(in_srgb,var(--danger)_55%,var(--foreground))]",
  info: "bg-primary/10 text-[color-mix(in_srgb,var(--primary)_55%,var(--foreground))]",
};

export function Badge({ tone = "neutral", children }: { tone?: Tone; children: ReactNode }) {
  return (
    <span className={cn("inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium whitespace-nowrap", tones[tone])}>
      {children}
    </span>
  );
}

const STATUS_TONES: Record<string, Tone> = {
  ACTIVE: "success", PUBLISHED: "success", RESOLVED: "success", CLOSED: "neutral",
  SUSPENDED: "danger", ARCHIVED: "neutral", CRITICAL: "danger", HIGH: "warning",
  MEDIUM: "info", LOW: "neutral", DRAFT: "neutral", IN_REVIEW: "warning", SCHEDULED: "info",
  NEW: "info", TRIAGED: "info", ASSIGNED: "info", IN_PROGRESS: "warning", WAITING_FOR_CUSTOMER: "warning",
};

export function StatusBadge({ value }: { value: string }) {
  return <Badge tone={STATUS_TONES[value] ?? "neutral"}>{value.replaceAll("_", " ").toLowerCase()}</Badge>;
}