import { createConfig } from '@gluestack-style/react';
import { config as defaultConfig } from '@gluestack-ui/config';

// Design System Colors - NO GRADIENTS, solid colors only
export const AppColors = {
  // Primary colors
  deepPurple: '#200028',      // Primary text, titles, important content
  slatePurple: '#8C8EA3',     // Secondary text, placeholders, timestamps
  mediumPurple: '#A177A6',    // Brand color, buttons, headers, user chat bubbles
  lavender: '#CEB0DA',        // Highlights, AI avatar background, subtle emphasis
  blushPink: '#DBBABA',       // User avatar background, warm accents
  cream: '#FAF7F8',           // App background
  white: '#FFFFFF',           // Cards, chat bubbles, content containers

  // Functional colors
  transparent: 'transparent',
  error: '#DC3545',
  success: '#28A745',
};

// Create custom config extending default
export const gluestackConfig = createConfig({
  ...defaultConfig,
  tokens: {
    ...defaultConfig.tokens,
    colors: {
      ...defaultConfig.tokens.colors,
      // App brand colors
      deepPurple: AppColors.deepPurple,
      slatePurple: AppColors.slatePurple,
      mediumPurple: AppColors.mediumPurple,
      lavender: AppColors.lavender,
      blushPink: AppColors.blushPink,
      cream: AppColors.cream,

      // Override primary colors to use medium purple
      primary0: '#FFFFFF',
      primary50: '#F5EEF6',
      primary100: '#E8D9EB',
      primary200: '#D7C0DC',
      primary300: '#C5A7CD',
      primary400: '#B38FBD',
      primary500: AppColors.mediumPurple,  // Main brand color
      primary600: '#8A6490',
      primary700: '#73527A',
      primary800: '#5C4164',
      primary900: '#45304E',
      primary950: AppColors.deepPurple,

      // Background colors
      backgroundLight0: AppColors.white,
      backgroundLight50: AppColors.cream,
      backgroundLight100: AppColors.cream,
      backgroundDark0: AppColors.deepPurple,
      backgroundDark50: '#2D0036',
      backgroundDark100: '#3A004A',

      // Text colors
      textLight0: AppColors.deepPurple,
      textLight50: AppColors.deepPurple,
      textLight100: AppColors.deepPurple,
      textLight400: AppColors.slatePurple,
      textLight500: AppColors.slatePurple,
      textDark0: AppColors.white,
      textDark50: AppColors.white,
      textDark100: AppColors.white,
      textDark400: AppColors.lavender,
      textDark500: AppColors.lavender,
    },
    space: {
      ...defaultConfig.tokens.space,
      'px': '1px',
      '0': 0,
      '0.5': 2,
      '1': 4,
      '1.5': 6,
      '2': 8,
      '2.5': 10,
      '3': 12,
      '3.5': 14,
      '4': 16,
      '5': 20,
      '6': 24,
      '7': 28,
      '8': 32,
      '10': 40,
      '12': 48,
      '16': 64,
      '20': 80,
      '24': 96,
    },
    radii: {
      ...defaultConfig.tokens.radii,
      'none': 0,
      'xs': 4,
      'sm': 6,
      'md': 8,
      'lg': 12,
      'xl': 16,
      '2xl': 20,
      '3xl': 24,
      'full': 9999,
    },
    fontSizes: {
      ...defaultConfig.tokens.fontSizes,
      '2xs': 10,
      'xs': 11,
      'sm': 13,
      'md': 15,
      'lg': 17,
      'xl': 20,
      '2xl': 24,
      '3xl': 28,
      '4xl': 32,
    },
  },
} as const);

// Export type for TypeScript support
type ConfigType = typeof gluestackConfig;

declare module '@gluestack-style/react' {
  interface ICustomConfig extends ConfigType {}
}

// Legacy Colors export for backward compatibility
export const Colors = {
  light: {
    text: AppColors.deepPurple,
    background: AppColors.cream,
    tint: AppColors.mediumPurple,
    icon: AppColors.slatePurple,
    tabIconDefault: AppColors.slatePurple,
    tabIconSelected: AppColors.mediumPurple,
  },
  dark: {
    text: AppColors.white,
    background: AppColors.deepPurple,
    tint: AppColors.lavender,
    icon: AppColors.lavender,
    tabIconDefault: AppColors.lavender,
    tabIconSelected: AppColors.mediumPurple,
  },
};