import { Box, Group, Paper, Text } from "@mantine/core";

import type { Freight } from "@edr/types";

const CONTRACT_CONFIG: Record<
  string,
  {
    title: string;
    description: string;
    buttonLabel?: string;
  }
> = {
  APPROVED_PENDING_SIGNATURE: {
    title: "Your contract is being prepared.",
    description:
      "Your booking has been approved. The contract will be available shortly.",
  },
  CONTRACT_READY: {
    title: "Review and sign your contract to proceed.",
    description:
      "Once all parties sign, we'll issue your payment reference (PNR) and schedule the cargo.",
    buttonLabel: "Review & Sign",
  },
  SIGNED_CUSTOMER: {
    title: "You have signed the contract.",
    description:
      "Your signature has been submitted. Awaiting the final staff signature.",
    buttonLabel: "View contract",
  },
  FULLY_EXECUTED: {
    title: "Contract fully executed — proceed to payment.",
    description:
      "The contract has been signed by all parties. You can now proceed to payment.",
    buttonLabel: "View contract",
  },
};

export function ContractCard({ booking }: { booking: Freight.IBooking }) {
  const c = CONTRACT_CONFIG[booking.status as string];
  if (!c) return null;

  return (
    <Paper
      radius={16}
      px={22}
      py={20}
      bg="white"
      style={{
        border: "1px solid #E6ECF2",
        boxShadow: "0 1px 2px rgba(16,24,40,0.04)",
      }}
    >
      <Group justify="space-between" align="center" wrap="wrap" gap={20}>
        <Box miw={0}>
          <Text
            fz="11px"
            fw={700}
            c="#6B7C8E"
            tt="uppercase"
            style={{ letterSpacing: "0.06em" }}
          >
            What's next
          </Text>
          <Text mt={6} fz="15.5px" fw={700} c="#10202F">
            {c.title}
          </Text>
          <Text mt={2} fz="13px" c="#6B7C8E">
            {c.description}
          </Text>
        </Box>
      </Group>
    </Paper>
  );
}
