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

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

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

export function ActivityCard({ booking }: { booking: Freight.IBooking }) {
  const events = [
    booking.signedByCeoAt && {
      at: booking.signedByCeoAt,
      title: "Contract fully executed",
      note: "Signed by all parties",
    },
    booking.signedByDirectorAt && {
      at: booking.signedByDirectorAt,
      title: "Director signed contract",
      note: "Awaiting final signature",
    },
    booking.approvedByStaffAt && {
      at: booking.approvedByStaffAt,
      title: "Booking approved",
      note: "Cleared by EDR staff",
    },
    {
      at: booking.createdAt,
      title: "Booking created",
      note: "Request drafted by customer",
    },
  ].filter(Boolean) as { at: string; title: string; note: string }[];

  if (events.length === 0) return null;

  return (
    <SectionCard>
      <Group justify="space-between" align="center" pb={18}>
        <CardTitle>Activity</CardTitle>
        <Text fz="13px" fw={700} c="#0A6F4D">
          Full history
        </Text>
      </Group>
      <Box>
        {events.map((e, i) => {
          const first = i === 0;
          const lastItem = i === events.length - 1;
          return (
            <Group key={i} gap={14} align="stretch" wrap="nowrap">
              <Box
                w={22}
                style={{
                  display: "flex",
                  flexDirection: "column",
                  alignItems: "center",
                  gap: 4,
                }}
              >
                <Box
                  style={{
                    width: 18,
                    height: 18,
                    borderRadius: 999,
                    backgroundColor: first ? "#0EA371" : "#D4E9DF",
                    boxShadow: first ? "0 0 0 4px #BFE8D4" : undefined,
                  }}
                />
                {!lastItem && (
                  <Box
                    flex={1}
                    style={{
                      width: 2,
                      borderRadius: 999,
                      backgroundColor: "#D4E9DF",
                    }}
                  />
                )}
              </Box>
              <Box miw={0} flex={1} pb={lastItem ? 0 : 20}>
                <Group gap={9} align="center">
                  <Text fz="14px" fw={800} c={first ? "#0A6F4D" : "#10202F"}>
                    {e.title}
                  </Text>
                  {first && (
                    <Box
                      component="span"
                      style={{
                        borderRadius: 999,
                        backgroundColor: "#ECF6F1",
                        border: "1px solid #CDEBDD",
                        padding: "3px 9px",
                        fontSize: 10.5,
                        fontWeight: 800,
                        letterSpacing: 0.3,
                        color: "#0A6F4D",
                      }}
                    >
                      Current
                    </Box>
                  )}
                </Group>
                <Text mt={3} fz="12px" c="#9AA8B5">
                  {fmtDate(e.at)} · {e.note}
                </Text>
              </Box>
            </Group>
          );
        })}
      </Box>
    </SectionCard>
  );
}
