const FLAG_CONFIG = {
  // RED — At Risk: supply may be interrupted, immediate action required
  SUPPLY_LAPSED: {
    label: "At Risk",
    bg: "bg-[rgba(176,0,0,0.12)]",
    text: "text-[#B00000]",
    border: "border-[#B00000]",
    weight: "font-bold",
    icon: "⚠",
  },
  VISIT_REQUIRED: {
    label: "At Risk",
    bg: "bg-[rgba(204,34,34,0.10)]",
    text: "text-[#CC2222]",
    border: "border-[#CC2222]",
    weight: "font-bold",
    icon: "⚠",
  },
  RENEWAL_CRITICAL: {
    label: "At Risk",
    bg: "bg-[rgba(220,60,0,0.10)]",
    text: "text-[#DC3C00]",
    border: "border-[#DC3C00]",
    weight: "font-bold",
    icon: "⚠",
  },
  // AMBER — Action Needed: confirm requirements before patient's specific deadline
  RENEWAL_ELEVATED: {
    label: "Action Needed",
    bg: "bg-[rgba(203,107,32,0.12)]",
    text: "text-[#CB6B20]",
    border: "border-[#CB6B20]",
    weight: "font-semibold",
    icon: "→",
  },
  RENEWAL_SOON: {
    label: "Action Needed",
    bg: "bg-[rgba(203,107,32,0.08)]",
    text: "text-[#CB6B20]",
    border: "border-[#CB6B20]",
    weight: "font-normal",
    icon: "→",
  },
  TRANSFER_PENDING: {
    label: "Action Needed",
    bg: "bg-[rgba(203,107,32,0.08)]",
    text: "text-[#CB6B20]",
    border: "border-[#CB6B20]",
    weight: "font-semibold",
    icon: "→",
  },
  // GRAY — dormant, stale patient requiring prescriber status check
  NO_RECENT_SHIPMENT: {
    label: "No Recent Shipment",
    bg: "bg-[rgba(120,120,120,0.08)]",
    text: "text-[var(--text-muted)]",
    border: "border-[var(--border-color)]",
    weight: "font-normal",
    icon: "○",
  },
  // AMBER — in resupply window but documentation gaps block shipment; shows same label as other action states
  DOCS_REQUIRED: {
    label: "Action Needed",
    bg: "bg-[rgba(203,107,32,0.12)]",
    text: "text-[#CB6B20]",
    border: "border-[#CB6B20]",
    weight: "font-semibold",
    icon: "→",
  },
  // GREEN — no action needed
  RESUPPLY_READY: {
    label: "Clear to Ship",
    bg: "bg-[rgba(46,163,163,0.12)]",
    text: "text-[#1A7070]",
    border: "border-[#2EA3A3]",
    weight: "font-semibold",
    icon: "✓",
  },
  ACTIVE: {
    label: "On Track",
    bg: "bg-[rgba(40,160,80,0.10)]",
    text: "text-[#1A8040]",
    border: "border-[#28A050]",
    weight: "font-normal",
    icon: "●",
  },
};

// P6 verdict badges — the FIVE sanctioned line/rollup statuses, verbatim.
// Colors per the Kisa-approved mockup (2026-07-07): stoplight for the four
// locked labels; purple for Plan Type Needed (configuration, not urgency).
const VERDICT_CONFIG = {
  "At Risk": {
    bg: "bg-[rgba(204,34,34,0.10)]", text: "text-[#CC2222]",
    border: "border-[#CC2222]", weight: "font-bold", icon: "⚠",
  },
  "Action Needed": {
    bg: "bg-[rgba(203,107,32,0.12)]", text: "text-[#CB6B20]",
    border: "border-[#CB6B20]", weight: "font-semibold", icon: "→",
  },
  "On Track": {
    bg: "bg-[rgba(46,163,163,0.10)]", text: "text-[#147A7A]",
    border: "border-[#2EA3A3]", weight: "font-normal", icon: "●",
  },
  "Clear to Ship": {
    bg: "bg-[rgba(34,197,94,0.12)]", text: "text-[#166534]",
    border: "border-[#22C55E]", weight: "font-bold", icon: "✓",
  },
  "Plan Type Needed": {
    bg: "bg-[rgba(122,94,160,0.10)]", text: "text-[#6B4F9A]",
    border: "border-[#9B8EC4]", weight: "font-semibold", icon: "◆",
  },
};

export function VerdictBadge({ status }) {
  if (!status) {
    return (
      <span className="inline-flex items-center gap-[3px] px-[8px] py-[3px] rounded-full text-[11px] border bg-[rgba(120,120,120,0.07)] text-[var(--text-warm)] border-[var(--border-color)] font-normal whitespace-nowrap">
        Informational
      </span>
    );
  }
  const cfg = VERDICT_CONFIG[status];
  if (!cfg) return null;
  return (
    <span
      className={`inline-flex items-center gap-[3px] px-[8px] py-[3px] rounded-full text-[11px] border ${cfg.bg} ${cfg.text} ${cfg.border} ${cfg.weight} whitespace-nowrap`}
    >
      <span className="text-[10px]">{cfg.icon}</span>
      {status}
    </span>
  );
}

export default function Badge({ flag }) {
  const cfg = FLAG_CONFIG[flag] || {
    label: flag,
    bg: "bg-gray-100",
    text: "text-gray-600",
    border: "border-gray-300",
    weight: "font-normal",
    icon: "",
  };
  return (
    <span
      className={`inline-flex items-center gap-[3px] px-[8px] py-[3px] rounded-full text-[11px] border ${cfg.bg} ${cfg.text} ${cfg.border} ${cfg.weight} whitespace-nowrap`}
    >
      {cfg.icon && <span className="text-[10px]">{cfg.icon}</span>}
      {cfg.label}
    </span>
  );
}
