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

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

import { CardTitle, SectionCard } from "./layout";

/**
 * Per-container-type breakdown for container bookings (count, type, VGM).
 * Renders nothing for bulk bookings, which have no container lines.
 */
export function ContainersCard({ booking }: { booking: Freight.IBooking }) {
  const containers = booking.containers ?? [];
  if (booking.freightType === "BULK" || containers.length === 0) return null;

  const totalUnits = containers.reduce((sum, c) => sum + Number(c.qty || 0), 0);
  const totalVgm = containers.reduce(
    (sum, c) => sum + Number(c.vgm || 0) * Number(c.qty || 0),
    0,
  );

  return (
    <SectionCard>
      <Group justify="space-between" align="center" mb="md">
        <Group gap={8} align="center">
          <Boxes size={18} color="#0A6F4D" />
          <CardTitle>Containers</CardTitle>
        </Group>
        <Text fz="12.5px" fw={600} c="#9AA8B5">
          {totalUnits} unit{totalUnits !== 1 ? "s" : ""}
        </Text>
      </Group>

      <Table verticalSpacing="sm" horizontalSpacing={0}>
        <Table.Thead>
          <Table.Tr>
            <Table.Th style={{ color: "#9AA8B5", fontSize: 11.5 }}>Type</Table.Th>
            <Table.Th style={{ color: "#9AA8B5", fontSize: 11.5 }}>Qty</Table.Th>
            <Table.Th style={{ color: "#9AA8B5", fontSize: 11.5 }}>VGM / unit</Table.Th>
            <Table.Th style={{ color: "#9AA8B5", fontSize: 11.5, textAlign: "right" }}>
              Total VGM
            </Table.Th>
          </Table.Tr>
        </Table.Thead>
        <Table.Tbody>
          {containers.map((c, i) => {
            const lineVgm = Number(c.vgm || 0) * Number(c.qty || 0);
            return (
              <Table.Tr key={`${c.type}-${i}`}>
                <Table.Td>
                  <Text fz={14} fw={700} c="#10202F">
                    {c.type}
                  </Text>
                </Table.Td>
                <Table.Td>
                  <Text fz={14} c="#10202F">
                    {c.qty}
                  </Text>
                </Table.Td>
                <Table.Td>
                  <Text fz={14} c="#475569">
                    {c.vgm ? `${c.vgm} t` : "—"}
                  </Text>
                </Table.Td>
                <Table.Td>
                  <Text fz={14} fw={700} c="#10202F" ta="right">
                    {lineVgm ? `${lineVgm.toLocaleString()} t` : "—"}
                  </Text>
                </Table.Td>
              </Table.Tr>
            );
          })}
        </Table.Tbody>
      </Table>

      <Box
        mt="sm"
        pt="sm"
        style={{ borderTop: "1px solid #F2F5F8", display: "flex", justifyContent: "space-between" }}
      >
        <Text fz={13} fw={600} c="#475569">
          Total weight (VGM)
        </Text>
        <Text fz={14} fw={800} c="#0A6F4D">
          {totalVgm.toLocaleString()} t
        </Text>
      </Box>
    </SectionCard>
  );
}
