import { Box, Group, SimpleGrid, Text } from "@mantine/core";
import {
  CalendarClock,
  CreditCard,
  MapPin,
  Package,
  Tag,
  Train,
} from "lucide-react";
import type { ReactNode } from "react";

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

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

type BookingLike = Freight.IBooking & {
  bookingType?: string;
  paymentStatus?: string;
  trainScheduleId?: string | null;
};

function Fact({
  icon,
  label,
  value,
}: {
  icon: ReactNode;
  label: string;
  value: ReactNode;
}) {
  return (
    <Group gap={10} wrap="nowrap" align="flex-start">
      <Box
        style={{
          width: 34,
          height: 34,
          borderRadius: 9,
          flexShrink: 0,
          background: "#F1F6FA",
          color: "#0A6F4D",
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
        }}
      >
        {icon}
      </Box>
      <Box miw={0}>
        <Text fz="11.5px" fw={600} c="#9AA8B5">
          {label}
        </Text>
        <Text mt={2} fz="14px" fw={700} c="#10202F" truncate>
          {value}
        </Text>
      </Box>
    </Group>
  );
}

/**
 * Compact at-a-glance facts strip at the top of the booking detail page — gives
 * a fast scan of the key attributes before the deeper cards below.
 */
export function KeyFactsStrip({ booking }: { booking: BookingLike }) {
  const isContract = booking.bookingType === "GENERAL_CONTRACT";
  const freight = booking.freightType === "BULK" ? "Bulk" : "Container";
  const payment = booking.paymentStatus
    ? booking.paymentStatus
        .replace(/_/g, " ")
        .toLowerCase()
        .replace(/^\w/, (c) => c.toUpperCase())
    : "—";

  return (
    <SectionCard p="md">
      <SimpleGrid cols={{ base: 1, xs: 2, md: 3, xl: 6 }} spacing="lg">
        <Fact
          icon={<Tag size={17} />}
          label="Type"
          value={isContract ? "General Contract" : "One-Time"}
        />
        <Fact icon={<Package size={17} />} label="Cargo" value={freight} />
        <Fact
          icon={<MapPin size={17} />}
          label="Route"
          value={`${yardLabel(booking.originYard)} → ${yardLabel(booking.destinationYard)}`}
        />
        <Fact icon={<CreditCard size={17} />} label="Payment" value={payment} />
        <Fact
          icon={<Train size={17} />}
          label="Train"
          value={booking.trainScheduleId ? "Assigned" : "Not assigned"}
        />
        <Fact
          icon={<CalendarClock size={17} />}
          label={isContract ? "Ordering until" : "Scheduled"}
          value={
            isContract
              ? fmtDate(booking.expiresAt ?? null)
              : fmtDate(booking.scheduledDate)
          }
        />
      </SimpleGrid>
    </SectionCard>
  );
}
