edr-platform/apps/edr-freight-web/backoffice/src/components/bookings/BookingStatusBadge.tsx

import { Badge, Group } from "@mantine/core";
import { Link2 } from "lucide-react";
import { BOOKING_STATUS_STYLES } from "@/features/bookings/booking-status.config";
import { humanize } from "@/lib/format";

const statusColorMap: Record<string, string> = {
  DRAFT: "gray",
  SUBMITTED: "yellow",
  CHANGES_REQUESTED: "orange",
  PENDING_APPROVAL: "yellow",
  APPROVED_PENDING_SIGNATURE: "cyan",
  APPROVED: "edr-green",
  CONTRACT_READY: "indigo",
  SIGNED_CUSTOMER: "cyan",
  FULLY_EXECUTED: "indigo",
  PNR_GENERATED: "violet",
  PAYMENT_VERIFICATION_IN_PROGRESS: "yellow",
  SELECTED_FOR_BATCH: "orange",
  EXPIRED: "red",
  PAID: "edr-green",
  IN_TRANSIT: "cyan",
  ARRIVED: "teal",
  COMPLETED: "indigo",
  REJECTED: "red",
  CANCELLED: "red",
  PENDING_CONSOLIDATION: "yellow",
  CONSOLIDATED: "indigo",
};

interface BookingStatusBadgeProps {
  status: string;
  /** When the booking is part of a consolidation, show a sibling badge. */
  consolidated?: boolean;
  /** Partner booking reference for the consolidated badge tooltip. */
  partnerReference?: string | null;
}

export function BookingStatusBadge({
  status,
  consolidated,
  partnerReference,
}: BookingStatusBadgeProps) {
  const style = BOOKING_STATUS_STYLES[status] ?? {
    label: humanize(status),
    color: "gray",
  };
  const color = statusColorMap[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 (!consolidated) return statusBadge;

  return (
    <Group gap={4} wrap="nowrap">
      {statusBadge}
      <Badge
        color="indigo"
        variant="light"
        size="sm"
        radius="md"
        tt="uppercase"
        fw={600}
        leftSection={<Link2 size={12} />}
        title={
          partnerReference
            ? `Consolidated with ${partnerReference}`
            : "Part of a consolidation"
        }
        style={{
          fontSize: "0.7rem",
          letterSpacing: "0.05em",
          display: "inline-flex",
          whiteSpace: "nowrap",
        }}
      >
        Consolidated
      </Badge>
    </Group>
  );
}