import { Box, Button, Group, Paper, Text } from "@mantine/core";
import { FileSignature } from "lucide-react";
import type { useNavigate } from "react-router-dom";

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,
  navigate,
}: {
  booking: Freight.IBooking;
  navigate: ReturnType<typeof useNavigate>;
}) {
  const c = CONTRACT_CONFIG[booking.status as string];
  if (!c) return null;

  return (
    <Paper
      radius={16}
      px={22}
      py={20}
      bg="#F1FAF6"
      style={{ border: "1px solid #CFEBDD" }}
    >
      <Group justify="space-between" align="center" wrap="wrap" gap={20}>
        <Group gap={16} align="center" wrap="nowrap">
          <Box
            style={{
              flexShrink: 0,
              width: 46,
              height: 46,
              display: "flex",
              alignItems: "center",
              justifyContent: "center",
              borderRadius: 13,
              backgroundColor: "#fff",
              border: "1px solid #CDEBDD",
              color: "#0A6F4D",
            }}
          >
            <FileSignature size={22} />
          </Box>
          <Box miw={0}>
            <Box
              component="span"
              style={{
                display: "inline-flex",
                borderRadius: 999,
                backgroundColor: "#0A6F4D",
                padding: "4px 10px",
                fontSize: 10.5,
                fontWeight: 800,
                letterSpacing: 0.3,
                color: "#fff",
                textTransform: "uppercase",
              }}
            >
              What's next
            </Box>
            <Text mt={6} fz="15.5px" fw={700} c="#10202F">
              {c.title}
            </Text>
            <Text mt={2} fz="13px" c="#5B6B7A">
              {c.description}
            </Text>
          </Box>
        </Group>
        {c.buttonLabel && (
          <Button
            onClick={() => navigate(`/bookings/${booking.id}/contract`)}
            radius={10}
            color="edr-green"
            leftSection={<FileSignature size={18} />}
            styles={{
              root: { height: 42, paddingInline: 18 },
              label: { fontSize: 13, fontWeight: 700 },
            }}
          >
            {c.buttonLabel}
          </Button>
        )}
      </Group>
    </Paper>
  );
}
