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

import type { BookingDetail } from "../booking-detail-types";
import {
  commodityLabel,
  containerSummary,
  fmtDate,
  fmtWeight,
  serviceTypeLabel,
  shippingLineLabel,
  totalVgmTons,
  yardLabel,
} from "../utils";
import { CardTitle, SectionCard } from "./layout";

function Badge({ label, tone }: { label: string; tone: "amber" | "blue" }) {
  const palette =
    tone === "amber"
      ? { bg: "#FFFBEB", border: "#FDE68A", color: "#92400E" }
      : { bg: "#EAF1FE", border: "#CFDDFB", color: "#1E40AF" };
  return (
    <Box
      component="span"
      style={{
        display: "inline-flex",
        borderRadius: 999,
        backgroundColor: palette.bg,
        border: `1px solid ${palette.border}`,
        padding: "3px 10px",
        fontSize: 11,
        fontWeight: 700,
        color: palette.color,
      }}
    >
      {label}
    </Box>
  );
}

export function ShipmentDetailsCard({ booking }: { booking: BookingDetail }) {
  const weight = totalVgmTons(booking);
  const rows: [string, string][][] = [
    [
      ["Origin yard", yardLabel(booking.originYard)],
      ["Destination yard", yardLabel(booking.destinationYard)],
    ],
    [
      ["Freight type", booking.freightType === "BULK" ? "Bulk" : "Container"],
      ["Commodity", commodityLabel(booking)],
    ],
    [
      ["Containers / load", containerSummary(booking)],
      ["Total weight (VGM)", fmtWeight(weight)],
    ],
    [
      ["Service type", serviceTypeLabel(booking)],
      [
        "Equipment return",
        booking.equipmentReturn === "WITH_RETURN"
          ? "With return"
          : "Without return",
      ],
    ],
    [
      [
        "Trade direction",
        booking.tradeDirection === "IMPORT" ? "Import" : "Export",
      ],
      ["Scheduled date", fmtDate(booking.scheduledDate)],
    ],
    [
      ["Shipping line", shippingLineLabel(booking)],
      ["Assigned train", booking.trainId ?? "Not yet assigned"],
    ],
  ];

  const badges: string[] = [];
  if (booking.isHazardous) badges.push("Hazardous");
  if (booking.isRefrigerated) badges.push("Refrigerated");
  if (booking.customsClearingEnabled) badges.push("Customs clearance");

  return (
    <SectionCard>
      <Group justify="space-between" align="center" pb={3}>
        <CardTitle>Shipment Details</CardTitle>
        <Group gap={6} wrap="wrap" justify="flex-end">
          {badges.map((b) => (
            <Badge
              key={b}
              label={b}
              tone={b === "Customs clearance" ? "blue" : "amber"}
            />
          ))}
          <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>
      </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>
  );
}
