import { createTheme } from '@mui/material/styles';
import { red, amber, grey, deepPurple } from '@mui/material/colors';
import { useMemo } from 'react';
import { useAppSelector } from '../hooks/reduxHooks';
import { selectDarkMode } from '../features/ui/uiSlice';

// Create a theme instance based on the dark mode state
export const createAppTheme = (darkMode) => {
  return createTheme({
    palette: {
      mode: darkMode ? 'dark' : 'light',
      primary: {
        main: deepPurple[400],
        light: deepPurple[300],
        dark: deepPurple[600],
      },
      secondary: {
        main: amber[500],
        light: amber[300],
        dark: amber[700],
      },
      error: {
        main: red.A400,
      },
      background: {
        default: darkMode ? grey[900] : '#f5f5f5',
        paper: darkMode ? grey[800] : '#fff',
      },
    },
    typography: {
      fontFamily: [
        'Roboto',
        '-apple-system',
        'BlinkMacSystemFont',
        '"Segoe UI"',
        'Arial',
        'sans-serif',
      ].join(','),
      h1: {
        fontSize: '2.5rem',
        fontWeight: 500,
      },
      h2: {
        fontSize: '2rem',
        fontWeight: 500,
      },
      h3: {
        fontSize: '1.75rem',
        fontWeight: 500,
      },
      h4: {
        fontSize: '1.5rem',
        fontWeight: 500,
      },
      h5: {
        fontSize: '1.25rem',
        fontWeight: 500,
      },
      h6: {
        fontSize: '1rem',
        fontWeight: 500,
      },
    },
    components: {
      MuiButton: {
        styleOverrides: {
          root: {
            borderRadius: 6,
            textTransform: 'none',
          },
        },
      },
      MuiCard: {
        styleOverrides: {
          root: {
            borderRadius: 8,
            boxShadow: darkMode 
              ? '0 4px 20px rgba(0, 0, 0, 0.5)'
              : '0 4px 20px rgba(0, 0, 0, 0.1)',
          },
        },
      },
      MuiAppBar: {
        styleOverrides: {
          root: {
            boxShadow: darkMode 
              ? '0 4px 20px rgba(0, 0, 0, 0.5)'
              : '0 2px 10px rgba(0, 0, 0, 0.05)',
          },
        },
      },
    },
  });
};

// Default theme instance
const defaultTheme = createAppTheme(true);

// Custom hook to create theme based on current dark mode setting
export const useAppTheme = () => {
  const darkMode = useAppSelector(selectDarkMode);
  
  return useMemo(() => createAppTheme(darkMode), [darkMode]);
};

export default defaultTheme;