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

// KT 브랜드 컬러 시스템
const colors = {
  // Primary: KT Red
  primary: {
    main: '#E31E24',
    light: '#FF4D52',
    dark: '#C71820',
    contrastText: '#FFFFFF',
  },
  // Secondary: AI Blue
  secondary: {
    main: '#0066FF',
    light: '#4D94FF',
    dark: '#004DBF',
    contrastText: '#FFFFFF',
  },
  // Grayscale
  gray: {
    900: '#1A1A1A', // Black
    700: '#4A4A4A',
    500: '#9E9E9E',
    300: '#D9D9D9',
    100: '#F5F5F5',
    50: '#FFFFFF', // White
  },
  // Semantic Colors
  success: {
    main: '#00C853',
  },
  warning: {
    main: '#FFA000',
  },
  error: {
    main: '#D32F2F',
  },
  info: {
    main: '#0288D1',
  },
};

// Breakpoints (Mobile First)
const breakpoints = {
  values: {
    xs: 320,
    sm: 768,
    md: 1024,
    lg: 1280,
    xl: 1920,
  },
};

// Typography (Pretendard)
const typography = {
  fontFamily: '"Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", system-ui, sans-serif',
  // Display
  h1: {
    fontSize: '28px',
    fontWeight: 700,
    lineHeight: 1.3,
    letterSpacing: '-0.5px',
    '@media (min-width:768px)': {
      fontSize: '32px',
    },
    '@media (min-width:1024px)': {
      fontSize: '36px',
    },
  },
  // H1
  h2: {
    fontSize: '24px',
    fontWeight: 700,
    lineHeight: 1.3,
    letterSpacing: '-0.3px',
    '@media (min-width:768px)': {
      fontSize: '28px',
    },
    '@media (min-width:1024px)': {
      fontSize: '32px',
    },
  },
  // H2
  h3: {
    fontSize: '20px',
    fontWeight: 700,
    lineHeight: 1.4,
    letterSpacing: '-0.2px',
    '@media (min-width:768px)': {
      fontSize: '22px',
    },
    '@media (min-width:1024px)': {
      fontSize: '24px',
    },
  },
  // H3
  h4: {
    fontSize: '18px',
    fontWeight: 600,
    lineHeight: 1.4,
    letterSpacing: '0px',
    '@media (min-width:768px)': {
      fontSize: '20px',
    },
  },
  // Body Large
  body1: {
    fontSize: '16px',
    fontWeight: 400,
    lineHeight: 1.5,
    letterSpacing: '0px',
    '@media (min-width:768px)': {
      fontSize: '18px',
    },
  },
  // Body Medium
  body2: {
    fontSize: '14px',
    fontWeight: 400,
    lineHeight: 1.5,
    letterSpacing: '0px',
    '@media (min-width:768px)': {
      fontSize: '16px',
    },
  },
  // Body Small
  caption: {
    fontSize: '12px',
    fontWeight: 400,
    lineHeight: 1.5,
    letterSpacing: '0px',
    '@media (min-width:768px)': {
      fontSize: '14px',
    },
  },
  // Button
  button: {
    fontSize: '16px',
    fontWeight: 600,
    lineHeight: 1.5,
    letterSpacing: '0px',
    textTransform: 'none' as const,
  },
};

// Spacing (4px Grid System)
const spacing = 4;

// Component Overrides
const components = {
  MuiButton: {
    styleOverrides: {
      root: {
        borderRadius: '8px',
        padding: '12px 20px',
        boxShadow: 'none',
        '&:hover': {
          boxShadow: 'none',
        },
      },
      sizeLarge: {
        height: '48px',
        padding: '16px 24px',
      },
      sizeMedium: {
        height: '44px',
        padding: '12px 20px',
      },
      sizeSmall: {
        height: '36px',
        padding: '8px 16px',
      },
      contained: {
        boxShadow: '0 2px 4px rgba(227, 30, 36, 0.2)',
      },
    },
  },
  MuiCard: {
    styleOverrides: {
      root: {
        borderRadius: '12px',
        boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)',
        border: '1px solid #E0E0E0',
      },
    },
  },
  MuiTextField: {
    styleOverrides: {
      root: {
        '& .MuiOutlinedInput-root': {
          borderRadius: '8px',
          '& fieldset': {
            borderColor: '#D9D9D9',
          },
          '&:hover fieldset': {
            borderColor: '#E31E24',
          },
          '&.Mui-focused fieldset': {
            borderColor: '#0066FF',
            borderWidth: '2px',
          },
        },
      },
    },
  },
  MuiCheckbox: {
    styleOverrides: {
      root: {
        '&.Mui-checked': {
          color: '#E31E24',
        },
      },
    },
  },
  MuiRadio: {
    styleOverrides: {
      root: {
        '&.Mui-checked': {
          color: '#E31E24',
        },
      },
    },
  },
};

// Create MUI Theme
export const theme = createTheme({
  palette: {
    primary: colors.primary,
    secondary: colors.secondary,
    success: colors.success,
    warning: colors.warning,
    error: colors.error,
    info: colors.info,
    grey: colors.gray,
    background: {
      default: '#FFFFFF',
      paper: '#FFFFFF',
    },
    text: {
      primary: colors.gray[900],
      secondary: colors.gray[700],
      disabled: colors.gray[500],
    },
  },
  breakpoints,
  typography,
  spacing,
  components,
  shape: {
    borderRadius: 8,
  },
});
