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

const theme = createTheme({
  palette: {
    primary: {
      main: '#4f46e5', // Deep Indigo (SaaS standard)
      light: '#eef2ff',
      dark: '#3730a3',
      contrastText: '#ffffff',
    },
    secondary: {
      main: '#64748b', // Slate
      light: '#f8fafc',
      dark: '#1e293b',
    },
    background: {
      default: '#fcfcfd', // Slightly off-white for premium feel
      paper: '#ffffff',
    },
    text: {
      primary: '#1e293b', // Modern Slate
      secondary: '#64748b',
    },
    divider: 'rgba(226, 232, 240, 0.4)',
  },
  shadows: [
    'none',
    '0 1px 2px 0 rgba(0, 0, 0, 0.03)',
    '0 1px 3px 0 rgba(0, 0, 0, 0.05), 0 1px 2px -1px rgba(0, 0, 0, 0.03)',
    '0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.03)',
    '0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -4px rgba(0, 0, 0, 0.03)',
    '0 20px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.03)',
    ...Array(19).fill('none')
  ],
  typography: {
    fontFamily: '"Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif',
    h4: { fontWeight: 800, letterSpacing: '-0.03em', fontSize: '1.75rem' },
    h5: { fontWeight: 700, letterSpacing: '-0.02em', color: '#1e293b', fontSize: '1.25rem' },
    h6: { fontWeight: 600, letterSpacing: '-0.01em', fontSize: '1rem' },
    subtitle1: { fontWeight: 500, color: '#64748b', fontSize: '0.925rem' },
    body1: { fontSize: '0.875rem', lineHeight: 1.6 },
    body2: { fontSize: '0.8125rem', lineHeight: 1.5, color: '#64748b' },
    button: { textTransform: 'none', fontWeight: 600, letterSpacing: '0.01em', fontSize: '0.875rem' },
    caption: { fontSize: '0.75rem', fontWeight: 500, letterSpacing: '0.01em' },
  },
  shape: {
    borderRadius: 10,
  },
  components: {
    MuiButton: {
      styleOverrides: {
        root: {
          padding: '8px 24px',
          borderRadius: '10px',
          fontWeight: 600,
          transition: 'all 0.15s ease-in-out',
        },
        contained: {
          boxShadow: '0 1px 2px rgba(0, 0, 0, 0.05)',
          '&:hover': {
            boxShadow: '0 4px 12px rgba(79, 70, 229, 0.2)',
            transform: 'translateY(-1px)',
          },
        },
      },
    },
    MuiCard: {
      styleOverrides: {
        root: {
          borderRadius: '16px',
          border: '1px solid rgba(226, 232, 240, 0.6)',
          boxShadow: '0 1px 3px 0 rgba(0, 0, 0, 0.02)',
        },
      },
    },
    MuiPaper: {
      styleOverrides: {
        root: {
          backgroundImage: 'none',
        }
      }
    },
    MuiTextField: {
      defaultProps: {
        variant: 'outlined',
        size: 'small',
      },
      styleOverrides: {
        root: {
          '& .MuiOutlinedInput-root': {
            backgroundColor: '#ffffff',
            borderRadius: '10px',
            '& fieldset': {
              borderColor: 'rgba(226, 232, 240, 0.8)',
            },
            '&:hover fieldset': {
              borderColor: '#4f46e5',
            },
          },
        }
      }
    },
    MuiAutocomplete: {
      styleOverrides: {
        root: {
          '& .MuiOutlinedInput-root': {
            borderRadius: '10px',
            backgroundColor: '#ffffff',
          }
        },
        paper: {
          borderRadius: '12px',
          marginTop: '8px',
          boxShadow: '0 10px 15px -3px rgba(0,0,0,0.1)',
          border: '1px solid #e2e8f0',
        }
      }
    }
  },
});

export default theme;
