import { createTheme } from '@mui/material/styles';
import { enUS as xGridEnUS } from '@mui/x-data-grid/locales';
import { enUS as coreEnUS } from '@mui/material/locale';

// Company branding colors extracted from web_prototype CSS
const brandColors = {
  primary: '#E20074',
  primaryHover: '#C40062',
  background: '#F0F0F0',
  surface: '#FFFFFF',
  text: '#222',
  textSecondary: '#555',
  border: '#E2E2E2',
  borderStrong: '#CFCFCF',
  success: '#1E9E59',
  danger: '#D22C32',
  warning: '#D89200',
};

export const theme = createTheme({
  palette: {
    primary: {
      main: brandColors.primary,
      dark: brandColors.primaryHover,
      contrastText: '#FFFFFF',
    },
    secondary: {
      main: brandColors.primary,
      dark: brandColors.primaryHover,
    },
    background: {
      default: brandColors.background,
      paper: brandColors.surface,
    },
    text: {
      primary: brandColors.text,
      secondary: brandColors.textSecondary,
    },
    success: {
      main: brandColors.success,
    },
    error: {
      main: brandColors.danger,
    },
    warning: {
      main: brandColors.warning,
    },
    divider: brandColors.border,
  },
  typography: {
    fontFamily: '"Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif',
    h1: {
      fontWeight: 700,
      letterSpacing: '0.5px',
    },
    h2: {
      fontWeight: 600,
      letterSpacing: '0.5px',
    },
    h3: {
      fontWeight: 600,
      letterSpacing: '0.3px',
    },
    body1: {
      fontSize: '0.875rem',
    },
    body2: {
      fontSize: '0.75rem',
    },
    button: {
      fontWeight: 600,
      letterSpacing: '0.3px',
      textTransform: 'none',
    },
  },
  shape: {
    borderRadius: 10,
  },
  shadows: [
    'none',
    '0 2px 4px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.06)',
    '0 2px 4px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.06)',
    '0 2px 4px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.06)',
    '0 4px 12px -2px rgba(226,0,116,0.45)',
    '0 6px 14px -2px rgba(226,0,116,0.5)',
    '0 2px 4px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.06)',
    '0 2px 4px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.06)',
    '0 2px 4px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.06)',
    '0 2px 4px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.06)',
    '0 2px 4px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.06)',
    '0 2px 4px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.06)',
    '0 2px 4px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.06)',
    '0 2px 4px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.06)',
    '0 2px 4px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.06)',
    '0 2px 4px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.06)',
    '0 2px 4px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.06)',
    '0 2px 4px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.06)',
    '0 2px 4px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.06)',
    '0 2px 4px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.06)',
    '0 2px 4px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.06)',
    '0 2px 4px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.06)',
    '0 2px 4px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.06)',
    '0 2px 4px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.06)',
    '0 2px 4px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.06)',
  ],
  components: {
    MuiButton: {
      styleOverrides: {
        root: {
          borderRadius: '8px',
          padding: '0.65rem 1.1rem',
          fontSize: '0.8rem',
          fontWeight: 600,
          letterSpacing: '0.3px',
        },
        contained: {
          boxShadow: '0 4px 10px -2px rgba(226,0,116,0.45)',
          '&:hover': {
            transform: 'translateY(-2px)',
            boxShadow: '0 6px 14px -2px rgba(226,0,116,0.5)',
          },
        },
      },
    },
    MuiCard: {
      styleOverrides: {
        root: {
          borderRadius: '10px',
          border: `1px solid ${brandColors.border}`,
          boxShadow: '0 2px 4px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.06)',
        },
      },
    },
    MuiTextField: {
      styleOverrides: {
        root: {
          '& .MuiOutlinedInput-root': {
            borderRadius: '8px',
            '&:hover .MuiOutlinedInput-notchedOutline': {
              borderColor: brandColors.primary,
            },
            '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
              borderColor: brandColors.primary,
              boxShadow: `0 0 0 3px rgba(226,0,116,0.25)`,
            },
          },
        },
      },
    },
    MuiLinearProgress: {
      styleOverrides: {
        root: {
          height: '8px',
          borderRadius: '4px',
          backgroundColor: '#ECECEC',
        },
        bar: {
          borderRadius: '4px',
          background: `linear-gradient(90deg, ${brandColors.primary}, #FF4DA8)`,
        },
      },
    },
    MuiTypography: {
      styleOverrides: {
        root: {
          variants: [
            {
              props: { className: 'ellipsis1' },
              style: {
                lineClamp: 1,
                WebkitLineClamp: 1,
                WebkitBoxOrient: 'vertical',
                display: '-webkit-box',
                overflow: 'hidden',
              },
            },
            {
              props: { className: 'ellipsis2' },
              style: {
                lineClamp: 2,
                WebkitLineClamp: 2,
                WebkitBoxOrient: 'vertical',
                display: '-webkit-box',
                overflow: 'hidden',
              },
            },
            {
              props: { className: 'ellipsis3' },
              style: {
                lineClamp: 3,
                WebkitLineClamp: 3,
                WebkitBoxOrient: 'vertical',
                display: '-webkit-box',
                overflow: 'hidden',
              },
            },
            {
              props: { className: 'no-ellipsis' },
              style: {
                lineClamp: 'unset',
                WebkitLineClamp: 'unset',
                WebkitBoxOrient: 'unset',
                display: 'unset',
                overflow: 'unset',
              },
            },
          ],
        },
      },
    },
  },
},
  xGridEnUS,
  coreEnUS,
);

export default theme;