import { Badge } from "@/components/ui/badge";
import type { ClaimState } from "@/types";
import { cn } from "@/lib/utils";
import {
  Send,
  Inbox,
  CheckCircle2,
  AlertTriangle,
  Ban,
  CheckCheck,
  RotateCcw,
} from "lucide-react";
import type { LucideIcon } from "lucide-react";

const STATE_CONFIG: Record<
  ClaimState,
  {
    label: string;
    icon: LucideIcon;
    className: string;
    dot: string;
  }
> = {
  submitted: {
    label: "Submitted",
    icon: Send,
    className: "bg-accent/15 text-accent border-accent/30",
    dot: "bg-accent",
  },
  received: {
    label: "Received",
    icon: Inbox,
    className: "bg-accent/10 text-accent/85 border-accent/20",
    dot: "bg-accent/70",
  },
  paid: {
    label: "Paid",
    icon: CheckCircle2,
    className: "bg-success/15 text-success border-success/30",
    dot: "bg-success",
  },
  partial: {
    label: "Partial",
    icon: AlertTriangle,
    className: "bg-warning/15 text-warning border-warning/30",
    dot: "bg-warning",
  },
  denied: {
    label: "Denied",
    icon: Ban,
    className: "bg-destructive/15 text-destructive border-destructive/30",
    dot: "bg-destructive",
  },
  reconciled: {
    label: "Reconciled",
    icon: CheckCheck,
    className: "bg-success/15 text-success border-success/30",
    dot: "bg-success",
  },
  reversed: {
    label: "Reversed",
    icon: RotateCcw,
    className: "bg-warning/15 text-warning border-warning/30",
    dot: "bg-warning",
  },
};

export function ClaimStateBadge({
  state,
  className,
}: {
  state: ClaimState;
  className?: string;
}) {
  const cfg = STATE_CONFIG[state];
  const Icon = cfg.icon;
  return (
    <Badge
      variant="outline"
      className={cn(
        "gap-1.5 mono uppercase tracking-[0.14em] text-[10.5px] font-medium py-0.5",
        cfg.className,
        className,
      )}
    >
      <Icon className="h-3 w-3" strokeWidth={2} aria-hidden />
      {cfg.label}
    </Badge>
  );
}
