import { extendTheme, type ThemeConfig } from '@chakra-ui/react';

// Theme configuration
const config: ThemeConfig = {
  initialColorMode: 'light',
  useSystemColorMode: false,
};

// Color palette
const colors = {
  brand: {
    50: '#e6f7ff',
    100: '#b3e0ff',
    200: '#80caff',
    300: '#4db3ff',
    400: '#1a9cff',
    500: '#0080ff', // Primary brand color
    600: '#0066cc',
    700: '#004d99',
    800: '#003366',
    900: '#001a33',
    primary: '#0080ff', // Alias for semantic usage
  },
  gray: {
    50: '#f9fafb',
    100: '#f3f4f6',
    200: '#e5e7eb',
    300: '#d1d5db',
    400: '#9ca3af',
    500: '#6b7280',
    600: '#4b5563',
    700: '#3a4252',
    800: '#242831',
    850: '#1f242d',
    900: '#1a1d25',
  },
  text: {
    onPrimary: '#ffffff', // Text color on primary brand background
    onSecondary: '#ffffff',
  },
};

// Component styles
const components = {
  Button: {
    baseStyle: {
      fontWeight: 'medium',
      borderRadius: 'md',
      _focus: {
        boxShadow: 'outline',
      },
    },
    variants: {
      solid: (props: any) => ({
        bg: 'brand.500',
        color: 'white',
        _hover: {
          bg: 'brand.600',
          _disabled: {
            bg: 'brand.500',
          },
        },
        _active: {
          bg: 'brand.700',
        },
      }),
      outline: (props: any) => ({
        borderColor: 'gray.200',
        _hover: {
          bg: 'gray.50',
        },
        _dark: {
          borderColor: 'gray.600',
          _hover: {
            bg: 'gray.700',
          },
        },
      }),
    },
  },
  Input: {
    baseStyle: {
      field: {
        _focus: {
          borderColor: 'brand.500',
          boxShadow: '0 0 0 1px var(--chakra-colors-brand-500)',
        },
      },
    },
  },
  Table: {
    variants: {
      simple: {
        th: {
          color: 'gray.600',
          textTransform: 'uppercase',
          fontSize: 'xs',
          letterSpacing: 'wider',
          borderBottom: '1px',
          borderColor: 'gray.100',
          _dark: {
            color: 'gray.400',
            borderColor: 'gray.700',
          },
        },
        td: {
          borderColor: 'gray.100',
          _dark: {
            borderColor: 'gray.700',
          },
        },
      },
    },
  },
  Card: {
    baseStyle: {
      container: {
        bg: 'white',
        borderRadius: 'lg',
        boxShadow: 'sm',
        borderWidth: '1px',
        borderColor: 'gray.200',
        _dark: {
          bg: 'gray.800',
          borderColor: 'gray.700',
          boxShadow: 'lg',
        },
      },
    },
  },

  // Admin modal defaults: make dialogs cover ~90% of the viewport so the underlying page remains slightly visible
  Modal: {
    baseStyle: {
      overlay: {
        bg: 'rgba(0, 0, 0, 0.5)',
        backdropFilter: 'auto',
        WebkitBackdropFilter: 'blur(4px)',
      },
      dialog: {
        maxW: '90vw',
        maxH: '90vh',
        width: '90vw',
        height: 'auto',
        overflowY: 'auto',
        borderRadius: 'md',
      },
      dialogContainer: {
        px: 4,
      },
    },
    defaultProps: {
      isCentered: true,
      size: 'xl',
    },
  },
};

// Global styles
const styles = {
  global: (props: any) => ({
    body: {
      fontFeatureSettings: '"rlig" 1, "calt" 1, "ss01" 1',
      WebkitFontSmoothing: 'antialiased',
      textRendering: 'optimizeLegibility',
      minHeight: '100vh',
      bg: props.colorMode === 'dark' ? 'gray.900' : 'gray.50',
      color: props.colorMode === 'dark' ? 'gray.100' : 'gray.900',
    },
    '*, *::before, *::after': {
      borderColor: 'gray.200',
      _dark: {
        borderColor: 'gray.700',
      },
    },
  }),
};

// Extend the theme
export const adminTheme = extendTheme({
  config,
  colors,
  components,
  styles,
  fonts: {
    heading: 'Inter, -apple-system, system-ui, sans-serif',
    body: 'Inter, -apple-system, system-ui, sans-serif',
  },
  shadows: {
    outline: '0 0 0 3px rgba(66, 153, 225, 0.6)',
  },
  sizes: {
    container: {
      '2xl': '1440px',
    },
  },
});
