import { extendTheme } from "@mui/joy/styles";

// Palette tokens sourced from the v0.9 design mockups (canvas/surface/ink/brand/etc.)

export const theme = extendTheme({
  cssVarPrefix: "joy",
  colorSchemes: {
    light: {
      palette: {
        primary: {
          50: "#eef3fe",
          100: "#dbe6fc",
          200: "#b0c8f8",
          300: "#7fa3f0",
          400: "#4c7de0",
          500: "#2159c9",
          600: "#1c48a3",
          700: "#163a82",
          800: "#122e68",
          900: "#0e2453",
          solidBg: "#2159c9",
          solidHoverBg: "#1c48a3",
          solidActiveBg: "#163a82",
          outlinedBorder: "#7fa3f0",
          outlinedColor: "#163a82",
          softBg: "#eef3fe", // Color in sidebar for selected view
          softColor: "#163a82",
        },
        success: {
          50: "#ecfdf5",
          100: "#d1faee",
          200: "#a6f4dc",
          300: "#6ee7c9",
          400: "#34d0ac",
          500: "#0d9488",
          600: "#0b7c73",
          700: "#0a655e",
          800: "#0b514c",
          900: "#0a423f",
          solidBg: "#0d9488",
          solidHoverBg: "#0b7c73",
          outlinedBorder: "#a6f4dc",
          outlinedColor: "#0b7c73",
          softBg: "#d1faee",
          softColor: "#0a655e",
        },
        warning: {
          50: "#fdf1e0",
          100: "#fbe3c1",
          200: "#f6c98a",
          300: "#eeab54",
          400: "#e2932c",
          500: "#d98014",
          600: "#b46810",
          700: "#92530f",
          800: "#734111",
          900: "#5c350f",
          solidBg: "#d98014",
          solidHoverBg: "#b46810",
          outlinedBorder: "#f6c98a",
          outlinedColor: "#b46810",
          softBg: "#fdf1e0",
          softColor: "#734111",
        },
        danger: {
          50: "#fbeae9",
          100: "#f6d2cf",
          200: "#eaa39c",
          300: "#dc746a",
          400: "#cd4f42",
          500: "#c4342c",
          600: "#a32a24",
          700: "#84221f",
          800: "#691c1b",
          900: "#551818",
          solidBg: "#c4342c",
          solidHoverBg: "#a32a24",
          outlinedBorder: "#eaa39c",
          outlinedColor: "#a32a24",
          softBg: "#fbeae9",
          softColor: "#84221f",
        },
        neutral: {
          50: "#f6f7f9",
          100: "#f2f4f6",
          200: "#e4e7ec",
          300: "#dfe3e8",
          400: "#7b8494",
          500: "#667283",
          600: "#4a5364",
          700: "#39414f",
          800: "#232833",
          900: "#10151f",
          plainColor: "#4a5364",
          outlinedColor: "#4a5364",
          outlinedBorder: "#e4e7ec",
          outlinedHoverBg: "#fbfcfd",
          softColor: "#4a5364",
          softBg: "#f2f4f6",
        },
        background: {
          body: "#f6f7f9",
          surface: "#ffffff",
          level1: "#fbfcfd",
          level2: "#f2f4f6",
          level3: "#e4e7ec",
        },
        text: {
          primary: "#10151f",
          secondary: "#4a5364",
          tertiary: "#667283",
        },
        divider: "#e4e7ec",
      },
    },
    dark: {
      palette: {
        primary: {
          50: "#0e2453",
          100: "#122e68",
          200: "#163a82",
          300: "#1c48a3",
          400: "#2159c9",
          500: "#5b8def",
          600: "#82a8f2",
          700: "#a9c3f6",
          800: "#cddcfa",
          900: "#eef3fe",
          solidBg: "#5b8def",
          solidHoverBg: "#82a8f2",
          solidActiveBg: "#1c48a3",
          outlinedBorder: "#1c48a3",
          outlinedColor: "#a9c3f6",
          softBg: "#16233d", // Color in sidebar for selected view
          softColor: "#a9c3f6",
        },
        success: {
          50: "#0a423f",
          100: "#0b514c",
          200: "#0a655e",
          300: "#0b7c73",
          400: "#0d9488",
          500: "#2dc8b1",
          600: "#6ee7c9",
          700: "#a6f4dc",
          800: "#d1faee",
          900: "#ecfdf5",
          solidBg: "#0d9488",
          solidHoverBg: "#2dc8b1",
          outlinedBorder: "#0a655e",
          outlinedColor: "#6ee7c9",
          softBg: "rgba(13, 148, 136, 0.18)",
          softColor: "#6ee7c9",
        },
        warning: {
          50: "#5c350f",
          100: "#734111",
          200: "#92530f",
          300: "#b46810",
          400: "#d98014",
          500: "#e3a054",
          600: "#edbb82",
          700: "#f4d3ac",
          800: "#f9e6d3",
          900: "#fdf1e0",
          solidBg: "#e3a054",
          solidHoverBg: "#edbb82",
          outlinedBorder: "#92530f",
          outlinedColor: "#edbb82",
          softBg: "rgba(227, 160, 84, 0.16)",
          softColor: "#f4d3ac",
        },
        danger: {
          50: "#551818",
          100: "#691c1b",
          200: "#84221f",
          300: "#a32a24",
          400: "#c4342c",
          500: "#f07168",
          600: "#f4948d",
          700: "#f8b7b2",
          800: "#fbd6d3",
          900: "#fdeceb",
          solidBg: "#f07168",
          solidHoverBg: "#f4948d",
          outlinedBorder: "#84221f",
          outlinedColor: "#f4948d",
          softBg: "rgba(240, 113, 104, 0.16)",
          softColor: "#f8b7b2",
        },
        neutral: {
          50: "#0e1116",
          100: "#161b22",
          200: "#1b212a",
          300: "#20262f",
          400: "#272e39",
          500: "#8590a0",
          600: "#aab4c2",
          700: "#c7cfd9",
          800: "#e8ecf2",
          900: "#f6f8fa",
          plainColor: "#aab4c2",
          outlinedColor: "#aab4c2",
          outlinedBorder: "#272e39",
          outlinedHoverBg: "#1b212a",
          softColor: "#aab4c2",
          softBg: "#20262f",
        },
        background: {
          body: "#0e1116",
          surface: "#161b22",
          level1: "#1b212a",
          level2: "#20262f",
          level3: "#272e39",
        },
        text: {
          primary: "#e8ecf2",
          secondary: "#aab4c2",
          tertiary: "#8590a0",
        },
        divider: "#272e39",
      },
    },
  },
  fontFamily: {
    body: "'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif",
    display: "'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif",
    code: "'IBM Plex Mono', ui-monospace, monospace",
  },
  radius: {
    xs: "6px",
    sm: "10px",
    md: "14px",
    lg: "20px",
    xl: "28px",
  },
  typography: {
    h1: {
      fontSize: "30px",
      fontWeight: 700,
      letterSpacing: "-0.03em",
      lineHeight: 1.2,
    },
    h2: {
      fontSize: "22px",
      fontWeight: 700,
      letterSpacing: "-0.02em",
      lineHeight: 1.25,
    },
    "title-lg": {
      fontSize: "15px",
      fontWeight: 600,
      lineHeight: 1.4,
    },
    "title-md": {
      fontSize: "13px",
      fontWeight: 600,
      lineHeight: 1.4,
    },
    "body-lg": {
      fontSize: "13.5px",
      fontWeight: 400,
      lineHeight: 1.5,
    },
    "body-md": {
      fontSize: "13.5px",
      fontWeight: 400,
      lineHeight: 1.5,
    },
    "body-sm": {
      fontSize: "11.5px",
      fontWeight: 600,
      lineHeight: 1.4,
    },
  },
  components: {
    JoyInput: {
      styleOverrides: {
        input: ({ theme }) => ({
          color: theme.vars.palette.text.primary,
          "&::placeholder": {
            color: theme.vars.palette.text.tertiary,
            opacity: 1,
          },
        }),
      },
    },
    JoySelect: {
      styleOverrides: {
        button: ({ theme }) => ({
          color: theme.vars.palette.text.primary,
        }),
        listbox: ({ theme }) => ({
          color: theme.vars.palette.text.primary,
          backgroundColor: theme.vars.palette.background.surface,
        }),
      },
    },
    JoySheet: {
      styleOverrides: {
        root: ({ theme }) => ({
          backgroundColor: theme.vars.palette.background.surface,
          borderColor: theme.vars.palette.divider,
        }),
      },
    },
    JoyOption: {
      styleOverrides: {
        root: ({ theme }) => ({
          color: theme.vars.palette.text.primary,
          backgroundColor: theme.vars.palette.background.surface,
          "&:hover": {
            backgroundColor: theme.vars.palette.background.level1,
          },
          '&[aria-selected="true"]': {
            backgroundColor: theme.vars.palette.background.level2,
          },
        }),
      },
    },
    JoyButton: {
      styleOverrides: {
        root: {
          transition: "all 0.15s ease",
        },
      },
    },
  },
});