edr-platform/apps/edr-freight-web/backoffice/src/components/bookings/detail/BookingRouteServiceCard.tsx

import { Train, MapPin, ArrowRight } from "lucide-react";
import { Group, Stack, Text, Badge, Box, SimpleGrid } from "@mantine/core";

import type { BookingDetail } from "@/types/booking";

import { SectionCard } from "./SectionCard";
import { MetricTile } from "./MetricTile";

export interface BookingRouteServiceCardProps {
  booking: BookingDetail;
  originLabel: string;
  destinationLabel: string;
}

function Endpoint({
  label,
  station,
  align = "left",
}: {
  label: string;
  station: string;
  align?: "left" | "right";
}) {
  return (
    <Stack gap={2} style={{ flex: 1, minWidth: 0 }} align={align === "right" ? "flex-end" : "flex-start"}>
      <Text size="xs" c="dimmed" fw={500} tt="uppercase" lts="0.04em">
        {label}
      </Text>
      <Group gap={6} wrap="nowrap">
        <MapPin size={15} color="var(--freight-brand)" />
        <Text fw={600} truncate>
          {station}
        </Text>
      </Group>
    </Stack>
  );
}

export function BookingRouteServiceCard({
  booking,
  originLabel,
  destinationLabel,
}: BookingRouteServiceCardProps) {
  const serviceLabel =
    booking.serviceType?.label ?? booking.serviceType?.code ?? "Rail service";

  const metrics = [
    { label: "Trade direction", value: booking.tradeDirection },
    { label: "Freight type", value: booking.freightType },
    { label: "Equipment return", value: booking.equipmentReturn ?? "—" },
    ...(booking.shippingLine
      ? [
          {
            label: "Shipping line",
            value:
              booking.shippingLine.label ??
              booking.shippingLine.name ??
              booking.shippingLine.code ??
              "—",
          },
        ]
      : []),
  ];

  return (
    <SectionCard icon={Train} title="Route & service">
      <Group justify="space-between" align="center" wrap="nowrap" gap="md">
        <Endpoint label="Origin" station={originLabel} />
        <Stack gap={6} align="center" style={{ flexShrink: 0 }}>
          <Box
            style={{
              display: "flex",
              alignItems: "center",
              justifyContent: "center",
              width: 36,
              height: 36,
              borderRadius: "50%",
              background: "var(--mantine-color-gray-1)",
              border: "1px solid var(--mantine-color-gray-3)",
            }}
          >
            <Train size={18} color="var(--mantine-color-gray-7)" />
          </Box>
          <Badge variant="light" color="gray" size="sm" radius="sm" tt="uppercase">
            {serviceLabel}
          </Badge>
        </Stack>
        <Group gap={6} wrap="nowrap" style={{ flex: 1, justifyContent: "flex-end" }}>
          <ArrowRight size={16} color="var(--mantine-color-gray-4)" style={{ flexShrink: 0 }} />
          <Endpoint label="Destination" station={destinationLabel} align="right" />
        </Group>
      </Group>

      <SimpleGrid cols={{ base: 1, sm: 2, lg: 3 }} spacing="sm" mt="lg">
        {metrics.map((m) => (
          <MetricTile key={m.label} label={m.label} value={m.value} />
        ))}
      </SimpleGrid>
    </SectionCard>
  );
}