import { Box, Group, Text } from "@mantine/core";
import { FileText } from "lucide-react";

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

import { containerSummary, fmtDate, yardLabel } from "../utils";
import { CardTitle, SectionCard } from "./layout";

export function ShipmentDetailsCard({ booking }: { booking: Freight.IBooking }) {
  const rows: [string, string][][] = [
    [
      ["Origin yard", yardLabel(booking.originYard)],
      ["Destination yard", yardLabel(booking.destinationYard)],
    ],
    [
      ["Freight type", booking.freightType === "BULK" ? "Bulk" : "Container"],
      ["Commodity", booking.freightSubtype || "—"],
    ],
    [
      ["Containers / load", containerSummary(booking)],
      [
        "Total weight (VGM)",
        booking.cargoTotalWeightVgm ? `${booking.cargoTotalWeightVgm} t` : "—",
      ],
    ],
    [
      [
        "Service type",
        booking.serviceType === "RAIL_AND_FORWARDING"
          ? "Rail + Forwarding"
          : "Rail only",
      ],
      [
        "Equipment return",
        booking.equipmentReturn === "WITH_RETURN"
          ? "With return"
          : "Without return",
      ],
    ],
    [
      [
        "Trade direction",
        booking.tradeDirection === "IMPORT" ? "Import" : "Export",
      ],
      ["Scheduled date", fmtDate(booking.scheduledDate)],
    ],
    [["Assigned train", booking.trainId ?? "Not yet assigned"]],
  ];

  return (
    <SectionCard>
      <Group justify="space-between" align="center" pb={3}>
        <CardTitle>Shipment Details</CardTitle>
        <Group
          component="span"
          gap={6}
          align="center"
          wrap="nowrap"
          style={{
            display: "inline-flex",
            borderRadius: 999,
            backgroundColor: "#F1F4F7",
            padding: "5px 11px",
            fontSize: 11.5,
            fontWeight: 700,
            color: "#475569",
          }}
        >
          <FileText size={13} />
          {booking.contractType === "RENEWAL"
            ? "Renewal contract"
            : "New contract"}
        </Group>
      </Group>
      <Box>
        {rows.map((pair, i) => (
          <Group
            key={i}
            gap={24}
            align="flex-start"
            wrap="nowrap"
            py={13}
            style={{
              borderBottom:
                i < rows.length - 1 ? "1px solid #F2F5F8" : undefined,
            }}
          >
            {pair.map(([k, v]) => (
              <Box key={k} miw={0} flex={1}>
                <Text fz="11.5px" fw={600} c="#9AA8B5">
                  {k}
                </Text>
                <Text truncate mt={4} fz="14px" fw={700} c="#10202F">
                  {v}
                </Text>
              </Box>
            ))}
          </Group>
        ))}
      </Box>
    </SectionCard>
  );
}
