// theme.ts
import { Button, Menu, createTheme, MantineColorsTuple } from "@mantine/core"

/* --------  1. 自定义颜色（可删/可改） -------- */
const brandColors: MantineColorsTuple = [
  "#E8F3FF",
  "#D6E8FF",
  "#B8D5FF",
  "#8DBAFF",
  "#5C9AFF",
  "#3283FF",
  "#1874FF",
  "#0F68EB",
  "#0D59C9",
  "#0B4AA6",
]

const greyColors: MantineColorsTuple = [
  "#FFFFFF",
  "#F7F8F9",
  "#F1F2F4",
  "#DCDFE4",
  "#B5BBC2",
  "#8F979F",
  "#5D6872",
  "#47535F",
  "#1B2A38",
  "#0F151B",
]

const darkColors: MantineColorsTuple = [
  "#FFFFFF",
  "#EBEEF7",
  "#D3D4D8",
  "#7E858F",
  "#3C4859",
  "#2B3648",
  "#212A39",
  "#1A222D",
  "#151C24",
  "#0D0E12",
]

const successColors: MantineColorsTuple = [
  "#E6FCF5",
  "#C3FAE8",
  "#96F2D7",
  "#5BE7B6",
  "#38D9A9",
  "#20C997",
  "#0EA879",
  "#07815B",
  "#076B3F",
  "#043E22",
]

/* --------  2. 创建主题 -------- */
export const theme = createTheme({
  /* ---- 颜色系统 ---- */
  primaryColor: "brand",
  cursorType: "pointer",
  //   primaryShade: { light: 5, dark: 6 },
  colors: {
    brand: brandColors,
    success: successColors,
    grey: greyColors,
    dark: darkColors,
  },

  /* ---- 圆角 ---- */
  defaultRadius: "md",
  radius: {
    xs: "2px",
    sm: "4px",
    md: "8px",
    lg: "12px",
    xl: "16px",
    xxl: "24px",
  },

  /* ---- 字体排版 ---- */
  fontFamily:
    '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif',
  fontFamilyMonospace:
    'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
  fontSizes: {
    xs: "0.75rem",
    sm: "0.875rem",
    md: "1rem",
    lg: "1.125rem",
    xl: "1.25rem",
    xxl: "1.5rem",
  },
  headings: {
    fontFamily:
      '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif',
    fontWeight: "700",
    sizes: {
      h1: { fontSize: "2.25rem", lineHeight: "1.2" },
      h2: { fontSize: "1.875rem", lineHeight: "1.3" },
      h3: { fontSize: "1.5rem", lineHeight: "1.35" },
      h4: { fontSize: "1.25rem", lineHeight: "1.4" },
      h5: { fontSize: "1.125rem", lineHeight: "1.45" },
      h6: { fontSize: "1rem", lineHeight: "1.5" },
    },
  },

  /* ---- 间距 ---- */
  spacing: {
    xs: "8px",
    sm: "12px",
    md: "16px",
    lg: "24px",
    xl: "32px",
    xxl: "48px",
  },

  /* ---- 阴影 ---- */
  shadows: {
    xs: "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
    sm: "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)",
    md: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
    lg: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
    xl: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
  },

  /* ---- 响应式断点 ---- */
  breakpoints: {
    xs: "36em", // 576px
    sm: "48em", // 768px
    md: "62em", // 992px
    lg: "75em", // 1200px
    xl: "88em", // 1408px
  },

  /* ---- 默认渐变 ---- */
  defaultGradient: {
    from: "brand",
    to: "success",
    deg: 45,
  },

  /* ---- 组件默认行为（示例） ---- */
  components: {
    Button: Button.extend({
      styles() {
        return {
          root: {
            outline: "none",
          },
        }
      },
    }),
    Menu: Menu.extend({
      defaultProps: {
        radius: "sm",
        shadow: "sm",
      },
      styles() {
        return {
          dropdown: {
            border: "1px solid #E5E6EB",
            borderRadius: "4px",
            background: "#FFFFFF",
            boxShadow: "0 8px 20px rgba(15, 23, 42, 0.08)",
            padding: "4px",
          },
          item: {
            minHeight: "28px",
            borderRadius: "4px",
            padding: "4px 8px",
            fontSize: "12px",
            lineHeight: "20px",
            color: "#4E5969",
          },
          arrow: {
            borderTopColor: "#E5E6EB",
            borderRightColor: "#E5E6EB",
            borderBottomColor: "#E5E6EB",
            borderLeftColor: "#E5E6EB",
            background: "#FFFFFF",
          },
        }
      },
    }),
  },
})