import { extendTheme, type ThemeConfig } from '@chakra-ui/react'
import { theme as saasTheme } from '@saas-ui/react'

const config: ThemeConfig = {
  initialColorMode: 'system',
  useSystemColorMode: false,
}

// Thème Omnex Ultra-Sombre : étend Saas UI avec un dark mode extrêmement sombre
// Fond noir pur, surfaces très sombres, texte très contrasté
export const theme = extendTheme(
  {
    config,
    colors: {
      // Override des couleurs de base pour un look ultra-sombre
      black: '#000000',
      gray: {
        50: '#f7f7f8',
        100: '#e8e8ea',
        200: '#c5c5c9',
        300: '#a2a2a9',
        400: '#7f7f88',
        500: '#5c5c66',
        600: '#43434c',
        700: '#2a2a33',
        800: '#15151b',
        900: '#0a0a0f',
      },
      // Bleu nuit : remplace le violet (colors.purple, palette "primary" de
      // Saas UI) en dark mode uniquement — voir semanticTokens ci-dessous.
      midnight: {
        50: '#e9ebf5',
        100: '#c7cce6',
        200: '#a3abd6',
        300: '#7f8ac6',
        400: '#5b69b6',
        500: '#2d3a7d',
        600: '#232e63',
        700: '#1a2249',
        800: '#11172f',
        900: '#080b16',
      },
    },
    semanticTokens: {
      colors: {
        // Fond principal (body) : noir pur
        'chakra-body-bg': { _light: 'white', _dark: '#000000' },
        // Fond secondaire (layouts, footer) : presque noir
        'chakra-subtle-bg': { _light: 'gray.50', _dark: '#050508' },
        // Surface élevée (cartes) : très sombre mais distinct
        'bg-surface': { _light: 'white', _dark: '#08080c' },
        // Texte principal : blanc très clair pour contraste maximal
        'chakra-body-text': { _light: 'gray.800', _dark: '#f5f5f7' },
        // Bordures : très discrètes, presque invisibles
        'chakra-border-color': { _light: 'gray.200', _dark: 'whiteAlpha.100' },

        // "primary" (colorScheme des boutons/badges principaux du site) est
        // violet (purple) par défaut via Saas UI — en dark mode, on le
        // remplace par le bleu nuit défini ci-dessus. Chaque nuance est
        // interceptée individuellement : tout ce qui utilise colorScheme=
        // "primary" (Button, Badge...) ou une couleur littérale "primary.500"
        // bascule automatiquement, sans toucher au reste du code.
        'primary.50': { default: 'purple.50', _dark: 'midnight.50' },
        'primary.100': { default: 'purple.100', _dark: 'midnight.100' },
        'primary.200': { default: 'purple.200', _dark: 'midnight.200' },
        'primary.300': { default: 'purple.300', _dark: 'midnight.300' },
        'primary.400': { default: 'purple.400', _dark: 'midnight.400' },
        'primary.500': { default: 'purple.500', _dark: 'midnight.500' },
        'primary.600': { default: 'purple.600', _dark: 'midnight.600' },
        'primary.700': { default: 'purple.700', _dark: 'midnight.700' },
        'primary.800': { default: 'purple.800', _dark: 'midnight.800' },
        'primary.900': { default: 'purple.900', _dark: 'midnight.900' },
      },
    },
    styles: {
      global: {
        body: {
          bg: 'chakra-body-bg',
          color: 'chakra-body-text',
        },
      },
    },
    components: {
      // Assombrir les composants Saas UI
      Card: {
        baseStyle: {
          container: {
            bg: 'bg-surface',
            borderColor: 'whiteAlpha.50',
          },
        },
      },
      Button: {
        baseStyle: {
          _dark: {
            bg: 'gray.800',
            _hover: { bg: 'gray.700' },
          },
        },
      },
      Input: {
        baseStyle: {
          field: {
            _dark: {
              bg: 'gray.900',
              borderColor: 'whiteAlpha.200',
              _focus: {
                borderColor: 'whiteAlpha.400',
              },
            },
          },
        },
      },
      Select: {
        baseStyle: {
          field: {
            _dark: {
              bg: 'gray.900',
              borderColor: 'whiteAlpha.200',
            },
          },
        },
      },
      Textarea: {
        baseStyle: {
          _dark: {
            bg: 'gray.900',
            borderColor: 'whiteAlpha.200',
          },
        },
      },
      Modal: {
        baseStyle: {
          overlay: {
            _dark: {
              bg: 'blackAlpha.800',
            },
          },
          content: {
            _dark: {
              bg: '#08080c',
            },
          },
        },
      },
    },
  },
  saasTheme,
)