import { createTheme, Theme } from '@mui/material/styles';
import '@fontsource/lato/300.css';
import '@fontsource/lato/400.css';
import '@fontsource/lato/700.css';
import '@fontsource/lato/900.css';

// Función para crear el tema según el modo
export const createAppTheme = (mode: 'light' | 'dark'): Theme => {
  const isDark = mode === 'dark';

  return createTheme({
    palette: {
      mode,
      primary: isDark ? {
        main: '#ffffff',
        light: 'rgba(255, 255, 255, 0.7)',
        dark: 'rgba(255, 255, 255, 0.9)',
      } : {
        main: '#F2994A', // Naranja miel
        light: '#FFA726', // Naranja más claro
        dark: '#E65100', // Naranja más oscuro
        contrastText: '#FFF',
      },
      secondary: {
        main: '#FFD54F', // Amarillo miel
        light: '#FFE082',
        dark: '#FFA000',
        contrastText: '#000',
      },
      background: isDark ? {
        default: '#121212',
        paper: '#1E1E1E',
      } : {
        default: 'rgba(255, 248, 225, 0.01)',
        paper: '#FFFFFF',
      },
      text: isDark ? {
        primary: '#ffffff',
        secondary: 'rgba(255, 255, 255, 0.7)',
      } : {
        primary: '#424242',
        secondary: '#757575',
      },
    },
    typography: {
      fontFamily: 'Lato, Arial, sans-serif',
      h1: {
        fontFamily: 'Lato',
        fontWeight: 900,
        letterSpacing: '-0.01em',
      },
      h2: {
        fontFamily: 'Lato',
        fontWeight: 900,
        letterSpacing: '-0.01em',
      },
      h3: {
        fontFamily: 'Lato',
        fontWeight: 700,
      },
      h4: {
        fontFamily: 'Lato',
        fontWeight: 700,
      },
      h5: {
        fontFamily: 'Lato',
        fontWeight: 700,
      },
      h6: {
        fontFamily: 'Lato',
        fontWeight: 700,
      },
      subtitle1: {
        fontFamily: 'Lato',
        fontWeight: 700,
      },
      subtitle2: {
        fontFamily: 'Lato',
        fontWeight: 400,
      },
      body1: {
        fontFamily: 'Lato',
        fontWeight: 400,
        fontSize: '0.875rem',
      },
      body2: {
        fontFamily: 'Lato',
        fontWeight: 400,
        fontSize: '0.75rem',
      },
      button: {
        fontFamily: 'Lato',
        fontWeight: 700,
        textTransform: 'none',
        letterSpacing: '0.02em',
      },
      caption: {
        fontFamily: 'Lato',
        fontWeight: 400,
      },
      overline: {
        fontFamily: 'Lato',
        fontWeight: 400,
      },
    },
    components: {
      MuiButton: {
        styleOverrides: {
          root: {
            borderRadius: 8,
            textTransform: 'none',
          },
        },
      },
      MuiDrawer: {
        styleOverrides: {
          paper: {
            backgroundColor: isDark ? '#1E1E1E' : '#F2994A',
            borderRight: 'none',
          },
        },
      },
      MuiListItem: {
        styleOverrides: {
          root: {
            borderRadius: '10px',
            marginBottom: '4px',
            '&:hover': {
              backgroundColor: isDark ? 'rgba(255, 255, 255, 0.05)' : 'rgba(0, 0, 0, 0.05)',
            },
          },
        },
      },
      MuiListItemIcon: {
        styleOverrides: {
          root: {
            minWidth: '40px',
            color: isDark ? 'rgba(255, 255, 255, 0.7)' : 'rgba(0, 0, 0, 0.7)',
          },
        },
      },
      MuiTextField: {
        styleOverrides: {
          root: {
            '& .MuiOutlinedInput-root': {
              borderRadius: 8,
              '& fieldset': {
                borderColor: isDark ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)',
              },
              '&:hover fieldset': {
                borderColor: isDark ? 'rgba(255, 255, 255, 0.2)' : 'rgba(0, 0, 0, 0.2)',
              },
              '&.Mui-focused fieldset': {
                borderColor: isDark ? 'rgba(255, 255, 255, 0.3)' : 'rgba(0, 0, 0, 0.3)',
              },
            },
          },
        },
      },
      MuiSwitch: {
        styleOverrides: {
          root: {
            '& .MuiSwitch-switchBase.Mui-checked': {
              color: isDark ? '#ffffff' : '#F2994A',
              '&:hover': {
                backgroundColor: isDark ? 'rgba(255, 255, 255, 0.08)' : 'rgba(242, 153, 74, 0.08)',
              },
            },
            '& .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track': {
              backgroundColor: isDark ? 'rgba(255, 255, 255, 0.5)' : 'rgba(242, 153, 74, 0.5)',
            },
          },
        },
      },
    },
  });
};

// Exportar el tema por defecto (modo claro)
export default createAppTheme('light');