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

const FONT_BODY = "'Plus Jakarta Sans', system-ui, sans-serif";
const FONT_HEADING = "'Urbanist', sans-serif";
const FONT_MONO = "'DM Mono', Menlo, monospace";

// Standard Material easing (matches the legacy --transition cubic-bezier).
const EASE = "cubic-bezier(0.4, 0, 0.2, 1)";

export const theme = createTheme({
  cssVariables: {
    colorSchemeSelector: "[data-theme='%s']",
  },
  colorSchemes: {
    light: {
      palette: {
        mode: "light",
        primary: { main: "#c73030" },
        success: { main: "#15803d" },
        warning: { main: "#b45309" },
        error: { main: "#b91c1c" },
        info: { main: "#1d4ed8" },
        background: { default: "#f4f3f1", paper: "#ffffff" },
        text: { primary: "#1a1a1a", secondary: "#555555" },
        divider: "rgba(0,0,0,0.1)",
      },
    },
    dark: {
      palette: {
        mode: "dark",
        primary: { main: "#d63031" },
        success: { main: "#22c55e" },
        warning: { main: "#f59e0b" },
        error: { main: "#ef4444" },
        info: { main: "#3b82f6" },
        background: { default: "#0f0f0f", paper: "#1a1a1a" },
        text: { primary: "#ffffff", secondary: "#a0a0a0" },
        divider: "rgba(255,255,255,0.08)",
      },
    },
  },
  shape: { borderRadius: 10 },
  typography: {
    fontFamily: FONT_BODY,
    h1: { fontFamily: FONT_HEADING, fontWeight: 800 },
    h2: { fontFamily: FONT_HEADING, fontWeight: 800 },
    h3: { fontFamily: FONT_HEADING, fontWeight: 800 },
    h4: { fontFamily: FONT_HEADING, fontWeight: 700 },
    h5: { fontFamily: FONT_HEADING, fontWeight: 700 },
    h6: { fontFamily: FONT_HEADING, fontWeight: 700 },
    button: { textTransform: "none", fontWeight: 600 },
  },
  components: {
    MuiButton: {
      defaultProps: { disableElevation: true },
      styleOverrides: {
        root: {
          borderRadius: 999,
          paddingInline: "0.95rem",
          // Snappy press (150ms) + smooth color/shadow (250ms).
          transition: [
            `background-color 250ms ${EASE}`,
            `border-color 250ms ${EASE}`,
            `color 200ms ${EASE}`,
            `box-shadow 250ms ${EASE}`,
            `transform 150ms ${EASE}`,
            `filter 200ms ${EASE}`,
          ].join(", "),
          "&:active": { transform: "scale(0.97)" },
          "@media (prefers-reduced-motion: reduce)": { transition: "none" },
        },
        containedPrimary: {
          backgroundImage: "linear-gradient(135deg, #e23a3a, #c01f1f)",
          boxShadow: "0 5px 14px rgba(214,48,49,0.32)",
          // The gradient can't transition, so animate lift + glow instead.
          "&:hover": {
            transform: "translateY(-1px)",
            filter: "brightness(1.04)",
            boxShadow: "0 8px 20px rgba(214,48,49,0.42)",
          },
          "&:active": { transform: "translateY(0) scale(0.97)" },
        },
      },
    },
    MuiCard: {
      styleOverrides: {
        root: {
          borderRadius: 16,
          boxShadow:
            "0 6px 20px rgba(20,20,40,0.06), 0 1px 2px rgba(0,0,0,0.03)",
          transition: `box-shadow 250ms ${EASE}, transform 250ms ${EASE}`,
        },
      },
    },
    MuiChip: {
      styleOverrides: {
        root: {
          borderRadius: 999,
          fontWeight: 700,
          transition: `background-color 200ms ${EASE}, box-shadow 200ms ${EASE}`,
        },
      },
    },
    MuiOutlinedInput: {
      styleOverrides: {
        root: {
          // Soft brand focus ring fades in over 200ms.
          transition: `box-shadow 200ms ${EASE}`,
          "&.Mui-focused": {
            boxShadow: "0 0 0 3px rgba(199, 48, 48, 0.12)",
          },
          "@media (prefers-reduced-motion: reduce)": { transition: "none" },
        },
        notchedOutline: {
          transition: `border-color 200ms ${EASE}`,
        },
      },
    },
  },
});

export const fonts = {
  body: FONT_BODY,
  heading: FONT_HEADING,
  mono: FONT_MONO,
};