import { Badge } from "@/components/ui/badge";
import { ClaimStateBadge } from "@/components/ui/claim-state-badge";
import type { ClaimState, ClaimStatus, RemittanceStatus } from "@/types";
import { CLAIM_STATES } from "@/types";
import { cn } from "@/lib/utils";

const claimStyles: Record<ClaimStatus, { dot: string; label: string }> = {
  draft: { dot: "bg-muted-foreground", label: "Draft" },
  submitted: { dot: "bg-[hsl(var(--accent))]", label: "Submitted" },
  accepted: { dot: "bg-[hsl(var(--success))]", label: "Accepted" },
  denied: { dot: "bg-destructive", label: "Denied" },
  paid: { dot: "bg-[hsl(var(--success))]", label: "Paid" },
  pending: { dot: "bg-[hsl(var(--warning))]", label: "Pending" },
};

const remitStyles: Record<RemittanceStatus, { dot: string; label: string }> = {
  received: { dot: "bg-[hsl(var(--accent))]", label: "Received" },
  posted: { dot: "bg-[hsl(var(--warning))]", label: "Posted" },
  reconciled: { dot: "bg-[hsl(var(--success))]", label: "Reconciled" },
};

/**
 * Generic status badge: delegates to `ClaimStateBadge` when the value is one
 * of the seven canonical `ClaimState` values from the reconciliation model,
 * otherwise falls back to a plain Badge with the legacy color. This is the
 * single entry point that pages should use; it lets the live API's 7-state
 * `state` field drive the visual while still tolerating legacy `status`
 * strings like "draft" / "pending" that aren't part of the new model.
 */
export function StatusBadge({
  status,
  className,
}: {
  status: string;
  className?: string;
}) {
  if (CLAIM_STATES.includes(status as ClaimState)) {
    return (
      <ClaimStateBadge state={status as ClaimState} className={className} />
    );
  }
  return (
    <Badge
      variant="outline"
      className={cn(
        "uppercase tracking-wider text-[10px]",
        "bg-muted text-muted-foreground border-border",
        className,
      )}
    >
      {status}
    </Badge>
  );
}

export function ClaimStatusBadge({ status }: { status: ClaimStatus }) {
  // Forward to the canonical 7-state primitive when possible; fall back to
  // the legacy dot+label for the three non-ClaimState values (draft,
  // accepted, pending).
  if (CLAIM_STATES.includes(status as ClaimState)) {
    return <ClaimStateBadge state={status as ClaimState} />;
  }
  const s = claimStyles[status];
  return (
    <Badge variant="outline" className="bg-transparent border-border/60">
      <span className={cn("h-1.5 w-1.5 rounded-full", s.dot)} />
      <span className="font-normal">{s.label}</span>
    </Badge>
  );
}

export function RemitStatusBadge({ status }: { status: RemittanceStatus }) {
  if (CLAIM_STATES.includes(status as ClaimState)) {
    return <ClaimStateBadge state={status as ClaimState} />;
  }
  const s = remitStyles[status];
  return (
    <Badge variant="outline" className="bg-transparent border-border/60">
      <span className={cn("h-1.5 w-1.5 rounded-full", s.dot)} />
      <span className="font-normal">{s.label}</span>
    </Badge>
  );
}