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

export const theme = createTheme({
  palette: {
    primary: {
      main: '#0B5A73',
      light: '#0E7490',
      dark: '#073B4C',
      contrastText: '#FFFFFF',
    },
    secondary: {
      main: '#475569',
      light: '#64748B',
      dark: '#334155',
      contrastText: '#FFFFFF',
    },
    success: {
      main: '#2E7D32',
      light: '#DCFCE7',
      dark: '#1B5E20',
      contrastText: '#FFFFFF',
    },
    warning: {
      main: '#F97316',
      light: '#FFEDD5',
      dark: '#C2410C',
      contrastText: '#FFFFFF',
    },
    error: {
      main: '#DC2626',
      light: '#FEE2E2',
      dark: '#991B1B',
      contrastText: '#FFFFFF',
    },
    info: {
      main: '#0284C7',
      light: '#E0F2FE',
      dark: '#075985',
      contrastText: '#FFFFFF',
    },
    background: {
      default: '#F4F7FA',
      paper: '#FFFFFF',
    },
    text: {
      primary: '#1E293B',
      secondary: '#475569',
      disabled: '#94A3B8',
    },
    divider: '#E2E8F0',
  },

  typography: {
    fontFamily: '"Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif',
    fontSize: 14,
    h4: {
      fontWeight: 700,
      fontSize: '24px',
      lineHeight: 1.25,
      letterSpacing: '-0.02em',
    },
    h5: {
      fontWeight: 700,
      fontSize: '18px',
      lineHeight: 1.3,
    },
    h6: {
      fontWeight: 700,
      fontSize: '16px',
      lineHeight: 1.4,
    },
    subtitle1: {
      fontWeight: 600,
      fontSize: '14px',
      lineHeight: 1.4,
    },
    body1: {
      fontSize: '14px',
      lineHeight: 1.5,
    },
    body2: {
      fontSize: '13px',
      lineHeight: 1.45,
    },
    caption: {
      fontSize: '12px',
      lineHeight: 1.35,
      color: '#64748B',
    },
    button: {
      fontSize: '14px',
      fontWeight: 700,
      textTransform: 'none' as const,
    },
    overline: {
      fontSize: '11px',
      lineHeight: '16px',
      fontWeight: 700,
      letterSpacing: '0.08em',
      textTransform: 'uppercase' as const,
      color: '#94A3B8',
    },
  },

  shape: {
    borderRadius: 8,
  },

  components: {
    MuiCssBaseline: {
      styleOverrides: {
        body: {
          fontFeatureSettings: '"tnum"',
          backgroundColor: '#F4F7FA',
        },
      },
    },

    MuiAppBar: {
      defaultProps: {
        elevation: 0,
      },
      styleOverrides: {
        root: {
          backgroundColor: '#073B4C',
          boxShadow: 'none',
          borderBottom: '1px solid rgba(255,255,255,0.08)',
        },
      },
    },

    MuiDrawer: {
      styleOverrides: {
        paper: {
          backgroundColor: '#FFFFFF',
          borderRight: '1px solid #DDE3E8',
          width: 216,
        },
      },
    },

    MuiCard: {
      defaultProps: {
        elevation: 0,
      },
      styleOverrides: {
        root: {
          border: '1px solid #D6E0EA',
          boxShadow: '0 1px 2px rgba(15, 23, 42, 0.06)',
          borderRadius: 8,
        },
      },
    },

    MuiPaper: {
      defaultProps: {
        elevation: 0,
      },
      styleOverrides: {
        root: {
          backgroundImage: 'none',
          borderRadius: 6,
        },
      },
    },

    MuiButton: {
      styleOverrides: {
        root: {
          borderRadius: 6,
          boxShadow: 'none',
          textTransform: 'none' as const,
          fontWeight: 600,
          height: 36,
          paddingLeft: 14,
          paddingRight: 14,
        },
        contained: {
          boxShadow: 'none',
          '&:hover': {
            boxShadow: 'none',
          },
        },
        outlined: {
          borderColor: '#BFD0DF',
          '&:hover': {
            borderColor: '#0B5A73',
            backgroundColor: '#E6F3F7',
          },
        },
      },
    },

    MuiTextField: {
      defaultProps: {
        size: 'small' as const,
      },
      styleOverrides: {
        root: {
          '& .MuiOutlinedInput-root': {
            borderRadius: 6,
          },
        },
      },
    },

    MuiOutlinedInput: {
      styleOverrides: {
        root: {
          borderRadius: 6,
          minHeight: 38,
          '& .MuiOutlinedInput-notchedOutline': {
            borderColor: '#BFD0DF',
          },
          '&:hover .MuiOutlinedInput-notchedOutline': {
            borderColor: '#0E7490',
          },
          '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
            borderColor: '#0B5A73',
            borderWidth: 2,
          },
        },
        input: {
          fontSize: 14,
          padding: '9px 12px',
        },
      },
    },

    MuiInputLabel: {
      styleOverrides: {
        root: {
          fontSize: 13,
          color: '#64748B',
          '&.Mui-focused': {
            color: '#0B5A73',
          },
        },
      },
    },

    MuiTableHead: {
      styleOverrides: {
        root: {
          '& .MuiTableCell-head': {
            color: '#334155',
            fontWeight: 700,
            fontSize: 13,
            paddingTop: 12,
            paddingBottom: 12,
            borderBottom: '1px solid #DDE3E8',
            backgroundColor: '#F8FAFC',
            whiteSpace: 'nowrap',
          },
        },
      },
    },

    MuiTableCell: {
      styleOverrides: {
        root: {
          color: '#1E293B',
          fontSize: 14,
          padding: '12px 14px',
          borderBottom: '1px solid #E2E8F0',
        },
      },
    },

    MuiTableRow: {
      styleOverrides: {
        root: {
          '&:hover': {
            backgroundColor: '#F8FAFC',
          },
        },
      },
    },

    MuiChip: {
      styleOverrides: {
        root: {
          height: 24,
          borderRadius: 6,
          fontSize: 12,
          fontWeight: 700,
        },
        sizeSmall: {
          height: 22,
          fontSize: 12,
        },
        label: {
          paddingLeft: 8,
          paddingRight: 8,
        },
        icon: {
          fontSize: 14,
          marginLeft: 6,
        },
      },
    },

    MuiListItemButton: {
      styleOverrides: {
        root: {
          borderRadius: 6,
          marginLeft: 8,
          marginRight: 8,
          marginBottom: 4,
          color: '#374151',
          '&.Mui-selected': {
            backgroundColor: '#E6F2F8',
            borderLeft: '3px solid #0B80B5',
            color: '#1F2933',
            '&:hover': {
              backgroundColor: '#DCECF5',
            },
          },
          '&:hover': {
            backgroundColor: '#F1F5F9',
          },
        },
      },
    },

    MuiListItemIcon: {
      styleOverrides: {
        root: {
          color: '#8A949E',
          minWidth: 36,
        },
      },
    },

    MuiTooltip: {
      styleOverrides: {
        tooltip: {
          fontSize: 12,
          backgroundColor: '#1F2933',
        },
      },
    },
  },
});