import { Badge } from "@/components/ui/badge"
import { PurchaseOrderStatus, RequisitionStatus, RfqStatus } from "@/types/procurement"

// Fixed width (not w-fit) so every status pill is the same size regardless of
// label length, same convention as components/receiving/status-badges.tsx.
const badgeSize = "h-6 w-32 justify-center px-2.5 py-1 text-sm"

function requisitionClass(status: RequisitionStatus) {
  return status === "Draft" ? "bg-warning/10 text-warning border-transparent" : "bg-success/10 text-success border-transparent"
}

export function RequisitionStatusBadge({ status }: { status: RequisitionStatus }) {
  return (
    <Badge variant="outline" className={`${badgeSize} ${requisitionClass(status)}`}>
      {status}
    </Badge>
  )
}

function rfqClass(status: RfqStatus) {
  return status === "Open" ? "bg-success/10 text-success border-transparent" : "bg-muted text-muted-foreground border-transparent"
}

export function RfqStatusBadge({ status }: { status: RfqStatus }) {
  return (
    <Badge variant="outline" className={`${badgeSize} ${rfqClass(status)}`}>
      {status}
    </Badge>
  )
}

function poClass(status: PurchaseOrderStatus) {
  if (status === "Draft" || status === "PendingApproval") return "bg-warning/10 text-warning border-transparent"
  if (status === "Cancelled") return "bg-destructive/10 text-destructive border-transparent"
  if (status === "Closed") return "bg-muted text-muted-foreground border-transparent"
  return "bg-success/10 text-success border-transparent" // Approved / PartiallyReceived / FullyReceived
}

export function PoStatusBadge({ status }: { status: PurchaseOrderStatus }) {
  return (
    <Badge variant="outline" className={`${badgeSize} ${poClass(status)}`}>
      {status}
    </Badge>
  )
}
