import { createTheme } from "@mui/material/styles";

const token = (name) => `var(--${name})`;

export const theme = createTheme({
  palette: {
    mode: "light",
    primary: {
      main: "hsl(221, 83%, 53%)",
      contrastText: "hsl(0, 0%, 100%)"
    },
    success: {
      main: "hsl(142, 76%, 36%)"
    },
    warning: {
      main: "hsl(32, 95%, 44%)"
    },
    error: {
      main: "hsl(0, 72%, 51%)"
    },
    background: {
      default: "hsl(215, 47%, 97%)",
      paper: "hsl(0, 0%, 100%)"
    },
    text: {
      primary: "hsl(222, 47%, 11%)",
      secondary: "hsl(215, 25%, 35%)",
      disabled: "hsl(215, 16%, 47%)"
    },
    divider: "hsl(216, 37%, 89%)"
  },
  typography: {
    fontFamily: '-apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif',
    fontSize: 14,
    allVariants: {
      fontSize: 14
    },
    button: {
      fontSize: 14,
      textTransform: "none",
      fontWeight: 650
    }
  },
  shape: {
    borderRadius: 8
  },
  components: {
    MuiButton: {
      defaultProps: {
        disableRipple: false
      },
      styleOverrides: {
        root: {
          minWidth: 0,
          height: token("control-height"),
          borderRadius: token("radius-control"),
          padding: `0 ${token("space-3")}`,
          fontSize: 14,
          transition:
            "background-color 150ms cubic-bezier(0.2, 0, 0, 1), border-color 150ms cubic-bezier(0.2, 0, 0, 1), box-shadow 150ms cubic-bezier(0.2, 0, 0, 1), transform 220ms cubic-bezier(0.16, 1, 0.3, 1)"
        },
        outlined: {
          borderColor: token("border"),
          color: token("text-secondary"),
          backgroundColor: token("bg-card"),
          "&:hover": {
            borderColor: token("primary-border-strong"),
            backgroundColor: token("primary-hover"),
            color: token("text-primary")
          }
        },
        containedPrimary: {
          backgroundColor: token("primary"),
          "&:hover": {
            backgroundColor: token("primary-strong")
          }
        }
      }
    },
    MuiCard: {
      styleOverrides: {
        root: {
          border: `1px solid ${token("border")}`,
          borderRadius: token("radius-card"),
          backgroundColor: token("bg-card"),
          backgroundImage: "none",
          color: token("text-primary"),
          transition:
            "border-color 220ms cubic-bezier(0.2, 0, 0, 1), box-shadow 220ms cubic-bezier(0.2, 0, 0, 1), transform 220ms cubic-bezier(0.16, 1, 0.3, 1)"
        }
      }
    },
    MuiChip: {
      styleOverrides: {
        root: {
          height: token("admin-tag-height"),
          border: `1px solid ${token("admin-tag-border")}`,
          borderRadius: token("admin-tag-radius"),
          backgroundColor: token("admin-tag-bg"),
          color: token("admin-tag-color"),
          fontSize: token("admin-tag-font-size"),
          fontWeight: token("admin-tag-font-weight"),
          transition:
            "background-color 150ms cubic-bezier(0.2, 0, 0, 1), border-color 150ms cubic-bezier(0.2, 0, 0, 1), color 150ms cubic-bezier(0.2, 0, 0, 1), transform 220ms cubic-bezier(0.16, 1, 0.3, 1)"
        },
        icon: {
          marginLeft: 8,
          marginRight: -2
        },
        label: {
          paddingLeft: token("admin-tag-padding-x"),
          paddingRight: token("admin-tag-padding-x")
        }
      }
    },
    MuiIconButton: {
      styleOverrides: {
        root: {
          borderRadius: token("radius-control"),
          color: token("text-secondary"),
          transition:
            "background-color 150ms cubic-bezier(0.2, 0, 0, 1), border-color 150ms cubic-bezier(0.2, 0, 0, 1), color 150ms cubic-bezier(0.2, 0, 0, 1), transform 220ms cubic-bezier(0.16, 1, 0.3, 1)"
        }
      }
    },
    MuiInputBase: {
      styleOverrides: {
        root: {
          fontSize: 14
        },
        input: {
          fontSize: 14,
          "&[type='number']": {
            MozAppearance: "textfield"
          },
          "&[type='number']::-webkit-outer-spin-button, &[type='number']::-webkit-inner-spin-button": {
            WebkitAppearance: "none",
            margin: 0
          },
          "&::placeholder": {
            color: token("text-tertiary"),
            opacity: 1
          }
        }
      }
    },
    MuiMenu: {
      styleOverrides: {
        paper: {
          border: `1px solid ${token("border")}`,
          backgroundImage: "none",
          backgroundColor: token("bg-card"),
          transformOrigin: "top right"
        }
      }
    },
    MuiSelect: {
      styleOverrides: {
        root: {
          color: token("text-secondary"),
          fontSize: 14
        },
        icon: {
          color: token("text-secondary")
        }
      }
    },
    MuiSwitch: {
      defaultProps: {
        disableRipple: true
      },
      styleOverrides: {
        root: {
          width: token("switch-width"),
          height: token("switch-height"),
          padding: 0,
          margin: `0 ${token("space-2")}`,
          overflow: "visible"
        },
        switchBase: {
          padding: token("switch-padding"),
          color: token("active-contrast"),
          transition: "transform 220ms cubic-bezier(0.16, 1, 0.3, 1)",
          "&.Mui-checked": {
            color: token("active-contrast"),
            transform: `translateX(${token("switch-translate-x")})`,
            "& + .MuiSwitch-track": {
              borderColor: token("primary-border"),
              background: token("brand-gradient"),
              boxShadow: token("shadow-soft"),
              opacity: 1
            },
            "& .MuiSwitch-thumb": {
              boxShadow: token("shadow-soft")
            }
          },
          "&.Mui-disabled": {
            color: token("active-contrast"),
            "& + .MuiSwitch-track": {
              opacity: 0.5
            }
          }
        },
        thumb: {
          width: token("switch-thumb-size"),
          height: token("switch-thumb-size"),
          backgroundColor: token("active-contrast"),
          boxShadow: token("shadow-soft")
        },
        track: {
          border: `1px solid ${token("border")}`,
          borderRadius: token("radius-pill"),
          backgroundColor: token("bg-card-strong"),
          boxShadow: "none",
          opacity: 1,
          transition:
            "background 220ms cubic-bezier(0.2, 0, 0, 1), border-color 220ms cubic-bezier(0.2, 0, 0, 1), box-shadow 220ms cubic-bezier(0.2, 0, 0, 1)"
        }
      }
    },
    MuiOutlinedInput: {
      styleOverrides: {
        notchedOutline: {
          borderColor: token("border")
        },
        root: {
          backgroundColor: token("bg-input"),
          backdropFilter: token("glass-blur"),
          transition:
            "background-color 150ms cubic-bezier(0.2, 0, 0, 1), border-color 220ms cubic-bezier(0.2, 0, 0, 1)",
          "&:hover .MuiOutlinedInput-notchedOutline": {
            borderColor: token("primary-border-strong")
          },
          "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
            borderColor: token("primary")
          },
          "&.Mui-focused": {
            boxShadow: "none"
          }
        }
      }
    },
    MuiFormLabel: {
      styleOverrides: {
        root: {
          fontSize: 14
        },
        asterisk: {
          color: token("danger"),
          marginLeft: 2
        }
      }
    },
    MuiFormHelperText: {
      styleOverrides: {
        root: {
          fontSize: 14
        }
      }
    },
    MuiMenuItem: {
      styleOverrides: {
        root: {
          fontSize: 14
        }
      }
    }
  }
});