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

/** Wait4Me brand book v1.0 — Pantone 7687C / 485C · Gotham */
const gotham = '"Gotham", "Gotham Book", sans-serif';

const theme = createTheme({
  palette: {
    primary: {
      main: "#1D428A",
      dark: "#152e61",
      light: "#2A5A9E",
      contrastText: "#ffffff",
    },
    secondary: {
      main: "#DA291C",
      contrastText: "#ffffff",
    },
    background: {
      default: "#F0EEE9",
      paper: "#ffffff",
    },
    text: {
      primary: "#171717",
      secondary: "#968C83",
    },
  },
  typography: {
    fontFamily: gotham,
    fontWeightLight: 400,
    fontWeightRegular: 400,
    fontWeightMedium: 500,
    fontWeightBold: 700,
    h1: { fontFamily: gotham, fontWeight: 700 },
    h2: { fontFamily: gotham, fontWeight: 700 },
    h3: { fontFamily: gotham, fontWeight: 700 },
    h4: { fontFamily: gotham, fontWeight: 500 },
    h5: { fontFamily: gotham, fontWeight: 500 },
    h6: { fontFamily: gotham, fontWeight: 500 },
    subtitle1: { fontFamily: gotham, fontWeight: 500 },
    subtitle2: { fontFamily: gotham, fontWeight: 500 },
    body1: { fontFamily: gotham, fontWeight: 400 },
    body2: { fontFamily: gotham, fontWeight: 400 },
    button: {
      fontFamily: gotham,
      fontWeight: 500,
      textTransform: "none",
    },
    caption: { fontFamily: gotham, fontWeight: 400 },
    overline: { fontFamily: gotham, fontWeight: 500 },
  },
  components: {
    MuiButton: {
      styleOverrides: {
        root: {
          fontFamily: gotham,
          fontWeight: 500,
          textTransform: "none",
          borderRadius: "8px",
          minHeight: 34,
          boxShadow: "0 2px 6px rgba(15, 23, 42, 0.1)",
          transition:
            "opacity 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease",
          "&:hover": {
            opacity: 0.92,
            transform: "translateY(-1px)",
            boxShadow: "0 4px 12px rgba(15, 23, 42, 0.16)",
          },
          "&:active": {
            opacity: 1,
            transform: "translateY(0)",
            boxShadow: "0 2px 6px rgba(15, 23, 42, 0.1)",
          },
          "&.Mui-disabled": {
            opacity: 0.45,
            transform: "none",
            boxShadow: "none",
          },
        },
        containedPrimary: {
          background: "linear-gradient(126deg, #1D428A 0%, #152e61 100%)",
          border: "1px solid #152e61",
          boxShadow: "0 3px 8px rgba(29, 66, 138, 0.22)",
          "&:hover": {
            background: "linear-gradient(126deg, #1D428A 0%, #152e61 100%)",
            opacity: 0.92,
            transform: "translateY(-1px)",
            boxShadow: "0 6px 14px rgba(29, 66, 138, 0.3)",
          },
        },
        outlinedPrimary: {
          borderWidth: "1px",
          "&:hover": {
            background: "#f8fafc",
            boxShadow: "0 4px 12px rgba(29, 66, 138, 0.18)",
          },
        },
      },
    },
    MuiButtonBase: {
      styleOverrides: {
        root: {
          fontFamily: gotham,
        },
      },
    },
    MuiChip: {
      styleOverrides: {
        root: {
          fontFamily: gotham,
        },
        label: {
          fontFamily: gotham,
        },
      },
    },
    MuiPaper: {
      styleOverrides: {
        root: {
          backgroundImage: "none",
        },
      },
    },
    MuiCssBaseline: {
      styleOverrides: {
        body: {
          fontFamily: gotham,
        },
        "input, textarea, select, button, .MuiButton-root, .MuiButtonBase-root": {
          fontFamily: `${gotham} !important`,
        },
      },
    },
    MuiInputBase: {
      styleOverrides: {
        root: {
          fontFamily: gotham,
        },
        input: {
          fontFamily: gotham,
        },
      },
    },
    // DataGrid component styles (from @mui/x-data-grid)
    MuiDataGrid: {
      styleOverrides: {
        root: {
          backgroundColor: "#ffffff",
          "--DataGrid-containerBackground": "#ffffff",
          "--DataGrid-rowBorderColor": "rgba(0, 0, 0, 0.08)",
          border: "none",
          fontFamily: gotham,
        },
        main: {
          backgroundColor: "#ffffff",
        },
        columnHeaders: {
          backgroundColor: "#ffffff",
        },
        columnHeader: {
          backgroundColor: "#ffffff",
        },
        columnHeaderTitle: {
          fontWeight: 500,
          fontFamily: gotham,
        },
        filler: {
          backgroundColor: "#ffffff",
        },
        scrollbarFiller: {
          backgroundColor: "#ffffff",
        },
        toolbarContainer: {
          backgroundColor: "#ffffff",
          padding: "8px 12px",
          borderBottom: "1px solid rgba(0, 0, 0, 0.08)",
        },
        footerContainer: {
          backgroundColor: "#ffffff",
          borderTop: "1px solid rgba(0, 0, 0, 0.08)",
        },
      },
    },
  },
} as any);

export default theme;