import {
  colorsTuple,
  createTheme,
  type MantineColorsTuple,
} from "@mantine/core";

const edrGreen: MantineColorsTuple = [
  "#ecfdf5",
  "#d1fae5",
  "#a7f3d0",
  "#6ee7b7",
  "#34d399",
  "#0EA371",
  "#0A8A5F",
  "#0A6F4D",
  "#065f46",
  "#064e3b",
];

const neutral: MantineColorsTuple = [
  "#F4F7FA",
  "#eef2f7",
  "#E6ECF2",
  "#d0dae6",
  "#b0bfce",
  "#8fa0b2",
  "#6B7C8E",
  "#4b5a6a",
  "#10202F",
  "#0C1A2B",
];

export const mantineTheme = createTheme({
  colors: {
    "edr-green": edrGreen,
    gray: neutral,

    // Brand surface + text tokens (single-value semantic colors).
    // Each generates --mantine-color-{name}-{0..9} CSS variables.
    "edr-bg": colorsTuple("#F7FAFC"),
    "edr-card": colorsTuple("#FFFFFF"),
    "edr-border": colorsTuple("#E6ECF2"),
    "edr-divider": colorsTuple("#EEF1F5"),
    "edr-text": colorsTuple("#10202F"),
    "edr-muted": colorsTuple("#6B7C8E"),
    "edr-soft": colorsTuple("#ECF6F1"),
    "edr-ink": colorsTuple("#0C1A2B"),
    "edr-accent": colorsTuple("#F2A516"),

    // Semantic status shades (from the design system).
    "edr-amber-soft": colorsTuple("#FDF3E0"),
    "edr-amber-text": colorsTuple("#9A5B00"),
    "edr-blue": colorsTuple("#2E5B96"),
    "edr-blue-soft": colorsTuple("#E9F0F8"),
    "edr-blue-dot": colorsTuple("#3B6FB0"),
    "edr-red": colorsTuple("#C0392B"),
    "edr-red-soft": colorsTuple("#FBEAE7"),
    "edr-slate": colorsTuple("#475569"),
    "edr-slate-soft": colorsTuple("#F1F4F7"),
    "edr-slate-soft2": colorsTuple("#EEF2F6"),
    "edr-step": colorsTuple("#94A3B8"),
    "edr-step-idle": colorsTuple("#D5DBE2"),
    "edr-conn-idle": colorsTuple("#E6EAEF"),
  },
  primaryColor: "edr-green",
  primaryShade: { light: 5, dark: 4 },

  white: "#ffffff",
  black: "#10202F",

  fontFamily:
    '"Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',

  defaultRadius: "md",

  radius: {
    xs: "4px",
    sm: "6px",
    md: "8px",
    lg: "12px",
    xl: "18px",
  },

  spacing: {
    xs: "8px",
    sm: "12px",
    md: "16px",
    lg: "24px",
    xl: "32px",
  },

  fontSizes: {
    xs: "12px",
    sm: "14px",
    md: "16px",
    lg: "20px",
    xl: "24px",
  },

  lineHeights: {
    xs: "1.4",
    sm: "1.45",
    md: "1.55",
    lg: "1.55",
    xl: "1.5",
  },

  headings: {
    fontFamily: '"Inter", var(--mantine-font-family)',
    fontWeight: "700",
    sizes: {
      h1: { fontSize: "36px", lineHeight: "1.1", fontWeight: "800" },
      h2: { fontSize: "28px", lineHeight: "1.2", fontWeight: "700" },
      h3: { fontSize: "22px", lineHeight: "1.3", fontWeight: "600" },
      h4: { fontSize: "18px", lineHeight: "1.4", fontWeight: "600" },
      h5: { fontSize: "15px", lineHeight: "1.45", fontWeight: "600" },
      h6: { fontSize: "13px", lineHeight: "1.45", fontWeight: "600" },
    },
  },

  shadows: {
    xs: "0 1px 2px rgba(16, 24, 40, 0.04)",
    sm: "0 1px 3px rgba(16, 24, 40, 0.06)",
    md: "0 4px 12px rgba(16, 24, 40, 0.06)",
  },

  components: {
    Card: {
      defaultProps: {
        radius: "xl",
        withBorder: true,
        shadow: "none",
        padding: "lg",
      },
      styles: {
        root: { borderColor: "#E6ECF2" },
      },
    },
    Button: {
      defaultProps: { radius: "md" },
      styles: { root: { fontWeight: 600 } },
    },
    Badge: {
      defaultProps: { radius: "xl", variant: "light" },
      styles: { root: { fontWeight: 600, textTransform: "none" } },
    },
    Paper: {
      defaultProps: { radius: "xl", shadow: "none", withBorder: true },
      styles: { root: { borderColor: "#E6ECF2" } },
    },
    Table: {
      defaultProps: { verticalSpacing: "sm", horizontalSpacing: "md" },
    },
    Title: {
      styles: { root: { letterSpacing: "-0.01em" } },
    },
  },
});