edr-platform/apps/edr-freight-web/backoffice/src/components/contracts/ContractStatusBadge.tsx

import { Badge, Group } from "@mantine/core";
import { Building2, Repeat, UserRound } from "lucide-react";

import {
  CONTRACT_STATUS_COLOR,
  CONTRACT_STATUS_STYLES,
  contractCourt,
} from "@/features/contracts/contract-status.config";

interface ContractStatusBadgeProps {
  status: string;
  /** When the contract is a renewal of a prior one, show a sibling badge. */
  isRenewal?: boolean;
}

export function ContractStatusBadge({
  status,
  isRenewal,
}: ContractStatusBadgeProps) {
  const style = CONTRACT_STATUS_STYLES[status] ?? {
    label: status,
    color: "gray",
  };
  const color = CONTRACT_STATUS_COLOR[status] ?? "gray";

  const statusBadge = (
    <Badge
      color={color}
      variant="light"
      size="sm"
      radius="md"
      tt="uppercase"
      fw={600}
      title={style.label}
      style={{
        fontSize: "0.7rem",
        letterSpacing: "0.05em",
        display: "inline-flex",
        maxWidth: "100%",
        whiteSpace: "nowrap",
      }}
    >
      {style.label}
    </Badge>
  );

  if (!isRenewal) return statusBadge;

  return (
    <Group gap={4} wrap="nowrap">
      {statusBadge}
      <Badge
        color="indigo"
        variant="light"
        size="sm"
        radius="md"
        tt="uppercase"
        fw={600}
        leftSection={<Repeat size={12} />}
        title="Renewal of a prior contract"
        style={{
          fontSize: "0.7rem",
          letterSpacing: "0.05em",
          display: "inline-flex",
          whiteSpace: "nowrap",
        }}
      >
        Renewal
      </Badge>
    </Group>
  );
}

/** Whose court the contract sits in: customer, EDR, or nobody ("—"). */
export function ContractCourtBadge({ status }: { status: string }) {
  const court = contractCourt(status);
  if (!court) {
    return (
      <span className="text-sm text-muted-foreground" title="No party is awaited">
        —
      </span>
    );
  }
  const isCustomer = court === "customer";
  return (
    <Badge
      color={isCustomer ? "orange" : "edr-green"}
      variant="light"
      size="sm"
      radius="md"
      tt="uppercase"
      fw={600}
      leftSection={
        isCustomer ? <UserRound size={12} /> : <Building2 size={12} />
      }
      title={
        isCustomer
          ? "Waiting on the customer to act"
          : "Waiting on EDR staff to act"
      }
      style={{
        fontSize: "0.7rem",
        letterSpacing: "0.05em",
        display: "inline-flex",
        whiteSpace: "nowrap",
      }}
    >
      {isCustomer ? "With customer" : "With EDR"}
    </Badge>
  );
}