import { Box, Group, Text } from "@mantine/core";
import type { ReactNode } from "react";

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

import { fmtDate, isDraftLike, isNegative } from "../utils";
import { CardTitle, SectionCard } from "./layout";

type Row = { label: string; value: ReactNode; muted?: boolean };

function StatusPill({ status }: { status: string }) {
  const negative = isNegative(status);
  const draft = isDraftLike(status);
  const dot = negative ? "#C0392B" : draft ? "#94A3B8" : "#0EA371";
  const color = negative ? "#A93226" : draft ? "#475569" : "#0A6F4D";
  const bg = negative ? "#FBEAE7" : draft ? "#F1F4F7" : "#ECF6F1";
  const border = negative ? "#F3C8C1" : draft ? "#E1E7EE" : "#CDEBDD";
  const label = status
    .replace(/_/g, " ")
    .toLowerCase()
    .replace(/\b\w/g, (m) => m.toUpperCase());

  return (
    <Group
      component="span"
      gap={6}
      align="center"
      wrap="nowrap"
      style={{
        display: "inline-flex",
        borderRadius: 999,
        backgroundColor: bg,
        border: `1px solid ${border}`,
        padding: "4px 10px",
        fontSize: 11.5,
        fontWeight: 700,
        color,
      }}
    >
      <Box
        component="span"
        style={{ width: 6, height: 6, borderRadius: 999, backgroundColor: dot }}
      />
      {label}
    </Group>
  );
}

export function ScheduleCard({
  booking,
  title,
  consignment,
}: {
  booking: Freight.IBooking;
  title: string;
  consignment?: boolean;
}) {
  const service =
    booking.serviceType === "RAIL_AND_FORWARDING"
      ? "Rail + Forwarding"
      : "Rail only";
  const equipmentReturn =
    booking.equipmentReturn === "WITH_RETURN" ? "With return" : "Without return";
  const assignedTrain: Row = {
    label: "Assigned train",
    value: booking.trainId ?? "Not yet assigned",
    muted: !booking.trainId,
  };

  const statusRow: Row = {
    label: "Status",
    value: <StatusPill status={booking.status as string} />,
  };

  const rows: Row[] = consignment
    ? [
        { label: "Consignment ID", value: booking.reference },
        { label: "Service", value: service },
        { label: "Equipment return", value: equipmentReturn },
        assignedTrain,
        { label: "Scheduled", value: fmtDate(booking.scheduledDate) },
      ]
    : [
        statusRow,
        { label: "Service", value: service },
        { label: "Equipment return", value: equipmentReturn },
        { label: "Proposed date", value: fmtDate(booking.scheduledDate) },
        assignedTrain,
      ];

  return (
    <SectionCard p={22}>
      <Box pb={8}>
        <CardTitle>{title}</CardTitle>
      </Box>
      <Box>
        {rows.map((r, i) => (
          <Group
            key={r.label}
            justify="space-between"
            align="center"
            wrap="nowrap"
            py="sm"
            style={{
              borderBottom:
                i < rows.length - 1 ? "1px solid #F2F5F8" : undefined,
            }}
          >
            <Text fz="13px" c="#9AA8B5">
              {r.label}
            </Text>
            <Text
              fz="13px"
              fw={700}
              c={r.muted ? "#9AA8B5" : "#10202F"}
              fs={r.muted ? "italic" : undefined}
            >
              {r.value}
            </Text>
          </Group>
        ))}
      </Box>
    </SectionCard>
  );
}
