/**
 * Redirect Intelligence v2 - Custom Chakra UI Theme
 * 
 * Modern dark/light theme with brand colors and components
 */

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

const config: ThemeConfig = {
  initialColorMode: 'light',
  useSystemColorMode: true,
};

const colors = {
  brand: {
    50: '#f0f9ff',
    100: '#e0f2fe',
    200: '#bae6fd',
    300: '#7dd3fc',
    400: '#38bdf8',
    500: '#0ea5e9',
    600: '#0284c7',
    700: '#0369a1',
    800: '#075985',
    900: '#0c4a6e',
  },
  redirect: {
    50: '#fef2f2',
    100: '#fee2e2',
    200: '#fecaca',
    300: '#fca5a5',
    400: '#f87171',
    500: '#ef4444',
    600: '#dc2626',
    700: '#b91c1c',
    800: '#991b1b',
    900: '#7f1d1d',
  },
  success: {
    50: '#f0fdf4',
    100: '#dcfce7',
    200: '#bbf7d0',
    300: '#86efac',
    400: '#4ade80',
    500: '#22c55e',
    600: '#16a34a',
    700: '#15803d',
    800: '#166534',
    900: '#14532d',
  },
  warning: {
    50: '#fffbeb',
    100: '#fef3c7',
    200: '#fde68a',
    300: '#fcd34d',
    400: '#fbbf24',
    500: '#f59e0b',
    600: '#d97706',
    700: '#b45309',
    800: '#92400e',
    900: '#78350f',
  },
};

const fonts = {
  heading: '"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif',
  body: '"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif',
  mono: '"JetBrains Mono", "Fira Code", "Consolas", monospace',
};

const components = {
  Button: {
    defaultProps: {
      colorScheme: 'brand',
    },
    variants: {
      solid: {
        borderRadius: 'md',
        fontWeight: 'medium',
      },
      ghost: {
        borderRadius: 'md',
        fontWeight: 'medium',
      },
      outline: {
        borderRadius: 'md',
        fontWeight: 'medium',
      },
    },
  },
  Card: {
    baseStyle: {
      container: {
        borderRadius: 'lg',
        boxShadow: 'sm',
        border: '1px solid',
        borderColor: 'gray.200',
        _dark: {
          borderColor: 'gray.700',
          bg: 'gray.800',
        },
      },
    },
  },
  Badge: {
    variants: {
      status: {
        OK: {
          bg: 'success.100',
          color: 'success.800',
          _dark: {
            bg: 'success.800',
            color: 'success.100',
          },
        },
        ERROR: {
          bg: 'red.100',
          color: 'red.800',
          _dark: {
            bg: 'red.800',
            color: 'red.100',
          },
        },
        TIMEOUT: {
          bg: 'warning.100',
          color: 'warning.800',
          _dark: {
            bg: 'warning.800',
            color: 'warning.100',
          },
        },
        LOOP: {
          bg: 'purple.100',
          color: 'purple.800',
          _dark: {
            bg: 'purple.800',
            color: 'purple.100',
          },
        },
      },
      redirectType: {
        HTTP_301: { bg: 'blue.100', color: 'blue.800' },
        HTTP_302: { bg: 'green.100', color: 'green.800' },
        HTTP_307: { bg: 'yellow.100', color: 'yellow.800' },
        HTTP_308: { bg: 'purple.100', color: 'purple.800' },
        FINAL: { bg: 'gray.100', color: 'gray.800' },
      },
    },
  },
  Stat: {
    baseStyle: {
      container: {
        bg: 'white',
        _dark: { bg: 'gray.800' },
        borderRadius: 'lg',
        p: 4,
        border: '1px solid',
        borderColor: 'gray.200',
        _dark: { borderColor: 'gray.700' },
      },
    },
  },
};

const styles = {
  global: (props: any) => ({
    body: {
      bg: props.colorMode === 'dark' ? 'gray.900' : 'gray.50',
      color: props.colorMode === 'dark' ? 'white' : 'gray.900',
    },
    '*::placeholder': {
      color: props.colorMode === 'dark' ? 'gray.400' : 'gray.500',
    },
    '*, *::before, &::after': {
      borderColor: props.colorMode === 'dark' ? 'gray.700' : 'gray.200',
    },
  }),
};

export const theme = extendTheme({
  config,
  colors,
  fonts,
  components,
  styles,
  space: {
    '4.5': '1.125rem',
    '5.5': '1.375rem',
  },
  breakpoints: {
    sm: '30em',
    md: '48em',
    lg: '62em',
    xl: '80em',
    '2xl': '96em',
  },
});
