import PropTypes from 'prop-types';
import { useMemo } from 'react';

// material-ui
import { CssBaseline, GlobalStyles, StyledEngineProvider } from '@mui/material';
import { createTheme, ThemeProvider } from '@mui/material/styles';

// project import
import useConfig from 'hooks/useConfig';
import Palette from './palette';
import Typography from './typography';
import CustomShadows from './shadows';
import componentsOverride from './overrides';

// Refined enterprise elevation ramp — soft, layered, low-contrast shadows
// (Stripe/Linear feel) instead of MUI's default hard grey drop-shadows.
// MUI requires exactly 25 entries (index 0 = 'none').
const softShadows = [
  'none',
  '0 1px 2px rgba(15, 23, 42, 0.04)',
  '0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04)',
  '0 2px 6px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04)',
  '0 4px 10px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.05)',
  '0 6px 14px rgba(15, 23, 42, 0.07), 0 2px 4px rgba(15, 23, 42, 0.05)',
  '0 8px 18px rgba(15, 23, 42, 0.08), 0 2px 5px rgba(15, 23, 42, 0.05)',
  '0 10px 22px rgba(15, 23, 42, 0.08), 0 3px 6px rgba(15, 23, 42, 0.05)',
  '0 12px 26px rgba(15, 23, 42, 0.09), 0 4px 8px rgba(15, 23, 42, 0.06)',
  '0 14px 30px rgba(15, 23, 42, 0.10), 0 4px 9px rgba(15, 23, 42, 0.06)',
  '0 16px 34px rgba(15, 23, 42, 0.10), 0 5px 10px rgba(15, 23, 42, 0.06)',
  '0 18px 38px rgba(15, 23, 42, 0.11), 0 6px 11px rgba(15, 23, 42, 0.07)',
  '0 20px 42px rgba(15, 23, 42, 0.11), 0 6px 12px rgba(15, 23, 42, 0.07)',
  '0 22px 46px rgba(15, 23, 42, 0.12), 0 7px 13px rgba(15, 23, 42, 0.07)',
  '0 24px 50px rgba(15, 23, 42, 0.12), 0 8px 14px rgba(15, 23, 42, 0.08)',
  '0 26px 54px rgba(15, 23, 42, 0.13), 0 8px 15px rgba(15, 23, 42, 0.08)',
  '0 28px 58px rgba(15, 23, 42, 0.13), 0 9px 16px rgba(15, 23, 42, 0.08)',
  '0 30px 62px rgba(15, 23, 42, 0.14), 0 10px 17px rgba(15, 23, 42, 0.09)',
  '0 32px 66px rgba(15, 23, 42, 0.14), 0 10px 18px rgba(15, 23, 42, 0.09)',
  '0 34px 70px rgba(15, 23, 42, 0.15), 0 11px 19px rgba(15, 23, 42, 0.09)',
  '0 36px 74px rgba(15, 23, 42, 0.15), 0 12px 20px rgba(15, 23, 42, 0.10)',
  '0 38px 78px rgba(15, 23, 42, 0.16), 0 12px 21px rgba(15, 23, 42, 0.10)',
  '0 40px 82px rgba(15, 23, 42, 0.16), 0 13px 22px rgba(15, 23, 42, 0.10)',
  '0 42px 86px rgba(15, 23, 42, 0.17), 0 14px 23px rgba(15, 23, 42, 0.11)',
  '0 44px 90px rgba(15, 23, 42, 0.18), 0 14px 24px rgba(15, 23, 42, 0.11)'
];

// ==============================|| DEFAULT THEME - MAIN  ||============================== //

export default function ThemeCustomization({ children }) {
  const { themeDirection, mode, presetColor, fontFamily } = useConfig();

  const theme = useMemo(() => Palette(mode, presetColor), [mode, presetColor]);

  // eslint-disable-next-line react-hooks/exhaustive-deps
  const themeTypography = useMemo(() => Typography(fontFamily), [fontFamily]);
  const themeCustomShadows = useMemo(() => CustomShadows(theme), [theme]);

  const themeOptions = useMemo(
    () => ({
      breakpoints: {
        values: {
          xs: 0, // Extra-small: 0px and up
          custom300: 300, // above 350
          custom350: 350, // above 350
          custom400: 400, // above 400
          custom450: 450, // above 450
          custom500: 500, // above 450
          custom550: 550, // above 450
          custom600: 600, // above 450
          custom650: 650, // above 450
          custom700: 700, // above 450
          custom750: 750, // above 450
          sm: 768, // Small: 768px and up
          custom800: 800, // above 450,
          custom850: 850, // above 450,
          custom900: 900, // above 450
          custom950: 950, // above 450
          custom1000: 1000, // above 450
          md: 1024, // Medium: 1024px and up
          lg: 1266, // Large: 1266px and up
          custom1300: 1300, // Large: 1266px and up
          custom1350: 1350, // Large: 1266px and up
          xl: 1440 // Extra-large: 1440px and up
        }
      },
      direction: themeDirection,
      shape: {
        borderRadius: 8
      },
      mixins: {
        toolbar: {
          minHeight: 60,
          paddingTop: 8,
          paddingBottom: 8
        }
      },
      palette: theme.palette,
      customShadows: themeCustomShadows,
      typography: themeTypography,
      shadows: softShadows
    }),
    [themeDirection, theme, themeTypography, themeCustomShadows]
  );

  const themes = createTheme(themeOptions);
  themes.components = componentsOverride(themes);

  return (
    <StyledEngineProvider injectFirst>
      <ThemeProvider theme={themes}>
        <CssBaseline />
        <GlobalStyles
          styles={{
            // Crisp font rendering across the app (enterprise polish).
            body: {
              WebkitFontSmoothing: 'antialiased',
              MozOsxFontSmoothing: 'grayscale',
              textRendering: 'optimizeLegibility'
            },
            // Thin, unobtrusive scrollbars (Stripe/Linear style) instead of the
            // chunky 14px solid-purple bar. Track is transparent; the thumb is a
            // soft slate that tints toward brand purple on hover.
            '*': {
              scrollbarWidth: 'thin', // Firefox
              scrollbarColor: 'rgba(102, 37, 130, 0.28) transparent'
            },
            '*::-webkit-scrollbar': {
              width: '10px',
              height: '10px'
            },
            '*::-webkit-scrollbar-track': {
              backgroundColor: 'transparent'
            },
            '*::-webkit-scrollbar-thumb': {
              backgroundColor: 'rgba(102, 37, 130, 0.26)',
              borderRadius: '8px',
              border: '2px solid transparent',
              backgroundClip: 'padding-box'
            },
            '*::-webkit-scrollbar-thumb:hover': {
              backgroundColor: 'rgba(102, 37, 130, 0.45)'
            },
            '*::-webkit-scrollbar-corner': {
              backgroundColor: 'transparent'
            }
          }}
        />

        {children}
      </ThemeProvider>
    </StyledEngineProvider>
  );
}

ThemeCustomization.propTypes = {
  children: PropTypes.node
};