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

function StepCircle({
  index,
  done,
  active,
}: {
  index: number;
  done?: boolean;
  active?: boolean;
}) {
  const style: React.CSSProperties = done
    ? { backgroundColor: "#0EA371", color: "#fff" }
    : active
      ? { backgroundColor: "#0C1A2B", color: "#fff" }
      : { backgroundColor: "#EEF2F6", color: "#9AA8B5" };

  return (
    <Box
      style={{
        flexShrink: 0,
        width: 26,
        height: 26,
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        borderRadius: 999,
        fontSize: 12,
        fontWeight: 700,
        ...style,
      }}
    >
      {done ? <Check size={16} strokeWidth={3} /> : index}
    </Box>
  );
}

export function StepLine({
  index,
  title,
  desc,
  action,
  done,
  active,
}: {
  index: number;
  title: string;
  desc?: string;
  action?: ReactNode;
  done?: boolean;
  active?: boolean;
}) {
  if (active) {
    return (
      <Group
        gap={14}
        align="center"
        justify="space-between"
        wrap="nowrap"
        px={14}
        py={12}
        style={{ borderRadius: 12, backgroundColor: "#F4F7FA" }}
      >
        <Group gap={14} align="center" wrap="nowrap" miw={0}>
          <StepCircle index={index} active />
          <Box miw={0}>
            <Text fz="14px" fw={800} c="#10202F">
              {title}
            </Text>
            {desc && (
              <Text mt={2} fz="12.5px" c="#6B7C8E">
                {desc}
              </Text>
            )}
          </Box>
        </Group>
        {action}
      </Group>
    );
  }

  return (
    <Group gap={14} align="center" wrap="nowrap" px={12} py={10}>
      <StepCircle index={index} done={done} />
      <Text fz="14px" fw={700} c={done ? "#6B7C8E" : "#9AA8B5"}>
        {title}
      </Text>
    </Group>
  );
}

export function StepGhostButton({
  children,
  onClick,
  icon,
}: {
  children: ReactNode;
  onClick?: () => void;
  icon?: ReactNode;
}) {
  return (
    <Button
      variant="white"
      radius={9}
      onClick={onClick}
      leftSection={icon}
      styles={{
        root: {
          height: 34,
          paddingInline: 14,
          border: "1.5px solid #CBD5E1",
          flexShrink: 0,
        },
        label: { fontSize: 12.5, fontWeight: 700, color: "#334155" },
      }}
    >
      {children}
    </Button>
  );
}
