edr-platform/apps/edr-freight-web/backoffice/src/components/contracts/detail/RequestDetailCards.tsx

import type { LucideIcon } from "lucide-react";
import {
  Building2,
  FileCheck,
  FileText,
  Mail,
  MapPin,
  Package,
  Phone,
  Ship,
  Truck,
  User,
  Warehouse,
} from "lucide-react";
import { Badge, Box, Divider, Group, Stack, Text } from "@mantine/core";
import type { Freight } from "@edr/types";

import { SectionCard } from "@/components/bookings/detail/SectionCard";

type ReqContract = NonNullable<Freight.IBookingRequest["contract"]>;

interface InfoRowProps {
  icon: LucideIcon;
  label: string;
  value?: string | null;
}

function InfoRow({ icon: Icon, label, value }: InfoRowProps) {
  return (
    <Group justify="space-between" wrap="nowrap" py={6} gap="md">
      <Group gap="xs" wrap="nowrap">
        <Icon size={15} color="var(--mantine-color-gray-5)" />
        <Text size="sm" c="dimmed">
          {label}
        </Text>
      </Group>
      <Text size="sm" fw={600} ta="right" style={{ minWidth: 0 }} truncate>
        {value || "—"}
      </Text>
    </Group>
  );
}

function InfoRows({ rows }: { rows: InfoRowProps[] }) {
  const visible = rows.filter((r) => r.value);
  if (visible.length === 0) {
    return (
      <Text size="sm" c="dimmed">
        No details available.
      </Text>
    );
  }
  return (
    <Stack gap={0}>
      {visible.map((row, i) => (
        <div key={row.label}>
          {i > 0 && <Divider color="var(--mantine-color-gray-2)" />}
          <InfoRow {...row} />
        </div>
      ))}
    </Stack>
  );
}

/** Customer (company) on the request's contract. */
export function RequestCustomerCard({ contract }: { contract?: ReqContract | null }) {
  const company = contract?.company;
  if (!company) {
    return (
      <SectionCard icon={Building2} title="Customer" accent="blue">
        <Text size="sm" c="dimmed">
          No customer linked to this request.
        </Text>
      </SectionCard>
    );
  }
  return (
    <SectionCard
      icon={Building2}
      title="Customer"
      subtitle={company.name ?? undefined}
      accent="blue"
    >
      <InfoRows
        rows={[
          { icon: FileCheck, label: "TIN", value: company.tin },
          { icon: Mail, label: "Email", value: company.email },
          { icon: Phone, label: "Phone", value: company.phone },
          { icon: MapPin, label: "Address", value: company.address },
          { icon: User, label: "Contact", value: company.contactPersonName },
          { icon: Phone, label: "Contact phone", value: company.contactPersonPhone },
        ]}
      />
    </SectionCard>
  );
}

const fmtDate = (iso?: string | null) =>
  iso
    ? new Intl.DateTimeFormat("en-GB", {
        day: "2-digit",
        month: "short",
        year: "numeric",
      }).format(new Date(iso))
    : "—";

const titleCase = (s?: string | null) =>
  s ? s.charAt(0) + s.slice(1).toLowerCase() : "—";

/** Contract identity + commercial terms. */
export function RequestContractSummaryCard({
  contract,
}: {
  contract?: ReqContract | null;
}) {
  if (!contract) return null;
  return (
    <SectionCard
      icon={FileText}
      title="Contract"
      subtitle={contract.reference}
      accent="grape"
    >
      <InfoRows
        rows={[
          {
            icon: FileText,
            label: "Kind",
            value: contract.contractKind === "GENERAL" ? "General" : "One-time",
          },
          {
            icon: Package,
            label: "Cargo",
            value: contract.freightType === "CONTAINER" ? "Container" : "Bulk",
          },
          { icon: Ship, label: "Trade", value: titleCase(contract.tradeDirection) },
          { icon: FileCheck, label: "Currency", value: contract.paymentCurrency },
          {
            icon: FileCheck,
            label: "Customs",
            value: contract.customsClearingEnabled
              ? "Included (Global Logistics)"
              : "Not included",
          },
          {
            icon: FileText,
            label: "Valid until",
            value: contract.contractValidUntil
              ? fmtDate(contract.contractValidUntil)
              : "Not active yet",
          },
        ]}
      />
    </SectionCard>
  );
}

/** Routes + cargo scope of the contract. */
export function RequestRouteCargoCard({
  contract,
}: {
  contract?: ReqContract | null;
}) {
  const routes = contract?.routes ?? [];
  const cargo = contract?.cargoScope ?? [];
  const isContainer = contract?.freightType === "CONTAINER";
  return (
    <SectionCard icon={MapPin} title="Route & cargo" accent="teal">
      <Stack gap="md">
        <Box>
          <Text size="xs" c="dimmed" fw={600} mb={6} tt="uppercase">
            Routes
          </Text>
          {routes.length === 0 ? (
            <Text size="sm" c="dimmed">
              No routes recorded.
            </Text>
          ) : (
            <Stack gap={6}>
              {routes.map((r) => (
                <Group key={r.id} gap={8} wrap="nowrap">
                  <MapPin size={14} color="var(--mantine-color-gray-5)" />
                  <Text size="sm" fw={500} truncate>
                    {r.originYard?.label ?? r.originYardId} →{" "}
                    {r.destinationYard?.label ?? r.destinationYardId}
                  </Text>
                </Group>
              ))}
            </Stack>
          )}
        </Box>
        <Box>
          <Text size="xs" c="dimmed" fw={600} mb={6} tt="uppercase">
            Cargo scope
          </Text>
          {cargo.length === 0 ? (
            <Text size="sm" c="dimmed">
              No cargo scope recorded.
            </Text>
          ) : (
            <Group gap={6} wrap="wrap">
              {cargo.map((c) => (
                <Badge
                  key={c.id}
                  variant="light"
                  color="teal"
                  radius="sm"
                  leftSection={<Package size={11} />}
                >
                  {c.containerSize ??
                    c.cargoFreeText ??
                    (isContainer ? "Container" : "Bulk commodity")}
                </Badge>
              ))}
            </Group>
          )}
        </Box>
      </Stack>
    </SectionCard>
  );
}

/** Service type — what the contracted service bundles (rail-only vs logistics/customs). */
export function RequestServiceTypeCard({
  contract,
}: {
  contract?: ReqContract | null;
}) {
  const st = contract?.serviceType;
  if (!st) return null;

  const firstMile = st.includesFirstMile ?? false;
  const lastMile = st.includesLastMile ?? false;
  const customs = st.includesCustoms ?? false;
  const railOnly = !firstMile && !lastMile && !customs;

  const chips: Array<{ label: string; color: string; icon: LucideIcon }> = [];
  if (railOnly) chips.push({ label: "Rail only", color: "blue", icon: Ship });
  if (firstMile)
    chips.push({ label: "First-mile pickup", color: "teal", icon: Truck });
  if (lastMile)
    chips.push({ label: "Last-mile delivery", color: "teal", icon: Warehouse });
  if (customs)
    chips.push({ label: "Customs clearance (GL)", color: "grape", icon: FileCheck });

  return (
    <SectionCard
      icon={Ship}
      title="Service"
      subtitle={st.serviceName}
      accent="indigo"
    >
      <Stack gap="sm">
        <Group gap={6} wrap="wrap">
          {chips.map((c) => (
            <Badge
              key={c.label}
              variant="light"
              color={c.color}
              radius="sm"
              leftSection={<c.icon size={11} />}
            >
              {c.label}
            </Badge>
          ))}
        </Group>
        {st.description ? (
          <Text size="sm" c="dimmed">
            {st.description}
          </Text>
        ) : null}
      </Stack>
    </SectionCard>
  );
}