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

// Basic color mode config
const config: ThemeConfig = {
  initialColorMode: 'system',
  useSystemColorMode: true,
};

// Define some basic colors similar to Airflow's scheme
// This is a simplified version. For full consistency, you'd replicate more from Airflow's core theme.ts
const colors = {
  airflow: {
    50: '#EBF8FF',  // Lightest blue
    100: '#BEE3F8',
    200: '#90CDF4',
    300: '#63B3ED',
    400: '#4299E1', // Primary blue
    500: '#3182CE',
    600: '#2B6CB0',
    700: '#2C5282',
    800: '#2A4365',  // Darkest blue
    900: '#1A365D',
  },
  success: {
    500: '#38A169', // Green
  },
  error: {
    500: '#E53E3E', // Red
  },
};

const theme = extendTheme({
  config,
  colors,
  styles: {
    global: (props: any) => ({
      body: {
        bg: props.colorMode === 'dark' ? 'gray.800' : 'gray.50',
        color: props.colorMode === 'dark' ? 'whiteAlpha.900' : 'gray.800',
        height: '100%', // Ensure body takes full height
        margin: 0,
      },
      html: {
        height: '100%',
      },
      '#root': { // Ensure root div also takes full height
        height: '100%',
      }
    }),
  },
  components: {
    Button: {
      baseStyle: {
        // Example: fontWeight: 'bold',
      },
      variants: {
        solid: (props: any) => ({
          bg: props.colorMode === 'dark' ? 'airflow.300' : 'airflow.500',
          color: props.colorMode === 'dark' ? 'gray.800' : 'white',
          _hover: {
            bg: props.colorMode === 'dark' ? 'airflow.400' : 'airflow.600',
          }
        }),
      },
    },
    // You can add more component-specific style overrides here if needed
    // For example, for Markdown components if View.tsx styling needs to be theme-aware
  },
});

export default theme;