import { Check } from "lucide-react";
import { Fragment } from "react";
import { STEPS } from "./schema";

const GREEN = "var(--mantine-color-edr-green-5)";
const GREEN_DEEP = "var(--mantine-color-edr-green-7)";
const BORDER = "var(--mantine-color-edr-border-0)";
const MUTED = "var(--mantine-color-edr-muted-0)";
const INK = "var(--mantine-color-edr-text-0)";

type StepItem = (typeof STEPS)[number];

export function StepIndicator({
  step,
  steps = STEPS as readonly StepItem[],
}: {
  step: number;
  steps?: readonly StepItem[];
}) {
  return (
    <div className="flex items-start">
      {steps.map((item, index) => {
        const done = step > item.id;
        const active = step === item.id;
        return (
          <Fragment key={item.id}>
            <div className="flex shrink-0 flex-col items-center gap-2" style={{ minWidth: 34 }}>
              <div
                style={{
                  width: 34,
                  height: 34,
                  borderRadius: "50%",
                  display: "flex",
                  alignItems: "center",
                  justifyContent: "center",
                  fontSize: 13,
                  fontWeight: 700,
                  flexShrink: 0,
                  transition: "all 0.2s",
                  ...(done
                    ? {
                        background: "linear-gradient(135deg, #12B981, #0A8A5F)",
                        color: "#fff",
                        boxShadow: "0 4px 10px rgba(14,163,113,0.35)",
                      }
                    : active
                      ? {
                          border: `2.5px solid ${GREEN}`,
                          color: GREEN_DEEP,
                          backgroundColor: "#fff",
                          boxShadow: "0 0 0 4px rgba(14,163,113,0.12)",
                        }
                      : {
                          backgroundColor: "#fff",
                          color: MUTED,
                          border: `2px solid ${BORDER}`,
                        }),
                }}
              >
                {done ? <Check style={{ width: 15, height: 15 }} strokeWidth={3} /> : item.id}
              </div>
              <span
                style={{
                  fontSize: 11,
                  fontWeight: active ? 700 : 500,
                  textAlign: "center",
                  lineHeight: 1.2,
                  maxWidth: 72,
                  display: "none",
                  transition: "color 0.2s",
                  color: step >= item.id ? INK : MUTED,
                }}
                className="md:!block"
              >
                {item.short}
              </span>
            </div>
            {index < steps.length - 1 && (
              <div
                style={{
                  flex: 1,
                  height: 3,
                  borderRadius: 999,
                  margin: "16px 8px 0",
                  transition: "background 0.3s",
                  background: done
                    ? "linear-gradient(90deg, #0A8A5F, #12B981)"
                    : BORDER,
                }}
              />
            )}
          </Fragment>
        );
      })}
    </div>
  );
}
