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

import { Check } from "lucide-react";
import { Paper, Group, Stack, Text, Box } from "@mantine/core";

import {
  WORKFLOW_STAGES,
  getWorkflowStageIndex,
} from "@/features/bookings/booking-status.config";

import { detailStyles, BRAND_GREEN } from "./booking-detail.styles";

export interface BookingLifecycleStepperProps {
  status: string;
}

/** Horizontal lifecycle tracker showing how far the booking has progressed. */
export function BookingLifecycleStepper({ status }: BookingLifecycleStepperProps) {
  const currentStage = getWorkflowStageIndex(status);

  return (
    <Paper radius="md" withBorder p="xl" mb="lg" style={detailStyles.card}>
      <Group gap={0} wrap="nowrap" align="flex-start">
        {WORKFLOW_STAGES.map((stage, index) => {
          const isComplete = currentStage >= 0 && index < currentStage;
          const isActive = index === currentStage;
          const isLast = index === WORKFLOW_STAGES.length - 1;

          const circleBg = isComplete
            ? BRAND_GREEN
            : isActive
              ? "white"
              : "var(--mantine-color-gray-1)";
          const circleBorder = isActive
            ? `2px solid ${BRAND_GREEN}`
            : isComplete
              ? "2px solid transparent"
              : "2px solid var(--mantine-color-gray-2)";

          return (
            <Box key={stage.label} style={{ flex: isLast ? "0 0 auto" : 1, minWidth: 0 }}>
              <Group gap={0} wrap="nowrap" align="center">
                <Stack gap={6} align="center" style={{ flexShrink: 0 }}>
                  <Box
                    style={{
                      display: "flex",
                      alignItems: "center",
                      justifyContent: "center",
                      width: "32px",
                      height: "32px",
                      borderRadius: "50%",
                      background: circleBg,
                      border: circleBorder,
                      color: isComplete
                        ? "white"
                        : isActive
                          ? "var(--freight-brand-dark)"
                          : "var(--mantine-color-gray-5)",
                      transition: "all 0.2s ease",
                    }}
                  >
                    {isComplete ? (
                      <Check size={16} strokeWidth={3} />
                    ) : (
                      <Text size="xs" fw={700}>
                        {index + 1}
                      </Text>
                    )}
                  </Box>
                  <Text
                    size="xs"
                    fw={isActive ? 600 : 500}
                    c={isActive ? "edr-green.7" : isComplete ? "dark" : "dimmed"}
                    ta="center"
                    style={{ whiteSpace: "nowrap" }}
                  >
                    {stage.label}
                  </Text>
                </Stack>

                {!isLast && (
                  <Box
                    style={{
                      flex: 1,
                      height: "2px",
                      marginInline: "8px",
                      marginBottom: "20px",
                      borderRadius: "2px",
                      background: isComplete
                        ? BRAND_GREEN
                        : "var(--mantine-color-gray-2)",
                    }}
                  />
                )}
              </Group>
            </Box>
          );
        })}
      </Group>
    </Paper>
  );
}