import { Check } from "lucide-react";
import { Box, Group, Stack, Text } from "@mantine/core";
import type { Freight } from "@edr/types";

const BRAND_GREEN = "var(--freight-brand, #0A6F4D)";

const PHASE_LABELS: Record<string, string> = {
  CUSTOMER_INTAKE: "Customer docs",
  GL_ET_REVIEW: "GL ET review",
  GL_DJ_COLLECTION: "GL Djibouti DO",
  GL_ET_OUTPUT: "Declaration",
  CUSTOMER_DUTY: "Duty / customer pays",
  GL_ET_POST_CLEARANCE: "Transit & finalize",
  GL_DJ_LOADING: "Loading",
  POST_TRANSIT: "Transit",
};

/** One-line hint under each phase label, for the vertical layout. */
const PHASE_HINTS: Record<string, string> = {
  CUSTOMER_INTAKE: "You upload the required clearance documents",
  GL_ET_REVIEW: "Global Logistics reviews your documents in Ethiopia",
  GL_DJ_COLLECTION: "Delivery order collected in Djibouti",
  GL_ET_OUTPUT: "Customs declaration prepared",
  CUSTOMER_DUTY: "You pay the assessed duty / tax",
  GL_ET_POST_CLEARANCE: "Transit cleared and paperwork finalised",
  GL_DJ_LOADING: "Cargo loaded for departure",
  POST_TRANSIT: "In transit",
};

const IMPORT_PHASES = [
  "CUSTOMER_INTAKE",
  "GL_ET_REVIEW",
  "GL_ET_OUTPUT",
  "CUSTOMER_DUTY",
  "GL_ET_POST_CLEARANCE",
  "GL_DJ_COLLECTION",
] as const;

const EXPORT_PHASES = [
  "CUSTOMER_INTAKE",
  "GL_ET_REVIEW",
  "GL_DJ_COLLECTION",
  "GL_ET_OUTPUT",
  "GL_ET_POST_CLEARANCE",
] as const;

function phaseIndex(phases: readonly string[], current?: string | null): number {
  if (!current) return 0;
  const idx = phases.indexOf(current);
  return idx >= 0 ? idx : 0;
}

export function ClearancePhaseStepper({
  clearance,
  tradeDirection,
  compact = false,
}: {
  clearance?: Freight.ContractClearanceView | null;
  tradeDirection?: string;
  compact?: boolean;
}) {
  const phases = tradeDirection === "EXPORT" ? EXPORT_PHASES : IMPORT_PHASES;
  const current = clearance?.phase ?? phases[0];
  const activeIdx = phaseIndex(phases, current);

  const dot = compact ? 26 : 30;
  const rowGap = compact ? 18 : 24;

  // Vertical timeline: every phase is a row, so all steps stay visible on any
  // width without horizontal scrolling. The connector runs down between dots.
  return (
    <Stack gap={0}>
      {phases.map((phase, index) => {
        const isComplete = index < activeIdx;
        const isActive = index === activeIdx;
        const isLast = index === phases.length - 1;
        // const doneOrActive = isComplete || isActive;

        return (
          <Group key={phase} gap={12} wrap="nowrap" align="flex-start">
            {/* Dot + connector column */}
            <Stack gap={0} align="center" style={{ flexShrink: 0, alignSelf: "stretch" }}>
              <Box
                style={{
                  display: "flex",
                  alignItems: "center",
                  justifyContent: "center",
                  width: dot,
                  height: dot,
                  borderRadius: "50%",
                  flexShrink: 0,
                  background: isComplete
                    ? BRAND_GREEN
                    : isActive
                      ? "white"
                      : "var(--mantine-color-gray-1)",
                  border: isActive
                    ? `2px solid ${BRAND_GREEN}`
                    : isComplete
                      ? "2px solid transparent"
                      : "2px solid var(--mantine-color-gray-3)",
                  color: isComplete
                    ? "white"
                    : isActive
                      ? BRAND_GREEN
                      : "var(--mantine-color-gray-5)",
                }}
              >
                {isComplete ? (
                  <Check size={compact ? 14 : 16} strokeWidth={3} />
                ) : (
                  <Text size="xs" fw={700}>
                    {index + 1}
                  </Text>
                )}
              </Box>
              {!isLast && (
                <Box
                  style={{
                    width: 2,
                    flex: 1,
                    minHeight: rowGap,
                    marginBlock: 4,
                    borderRadius: 2,
                    background: isComplete
                      ? BRAND_GREEN
                      : "var(--mantine-color-gray-2)",
                  }}
                />
              )}
            </Stack>

            {/* Label + hint */}
            <Box pb={isLast ? 0 : rowGap} style={{ minWidth: 0, paddingTop: 3 }}>
              <Text
                size="sm"
                fw={isActive ? 700 : 500}
                c={isActive ? "edr-green.7" : isComplete ? "dark" : "dimmed"}
                lh={1.2}
              >
                {PHASE_LABELS[phase] ?? phase}
              </Text>
              {PHASE_HINTS[phase] && (
                <Text size="xs" c="dimmed" mt={2} lh={1.3}>
                  {PHASE_HINTS[phase]}
                </Text>
              )}
            </Box>
          </Group>
        );
      })}
    </Stack>
  );
}
