import { ThemeConfig } from 'antd-style';

// ChatGPT UI Kit Colors from Figma
export const chatGPTTheme: ThemeConfig = {
  token: {
    // Background colors - From Figma
    colorBgBase: '#0a0a0a',
    colorBgContainer: '#171717',
    colorBgElevated: '#202020',
    colorBgLayout: '#0a0a0a',

    // Text colors
    colorTextBase: '#ececf1',
    colorText: '#ececf1',
    colorTextSecondary: '#c5c5d2',
    colorTextTertiary: '#8e8ea0',
    colorTextQuaternary: '#565869',

    // Border colors
    colorBorder: 'rgba(255, 255, 255, 0.06)',
    colorBorderSecondary: 'rgba(255, 255, 255, 0.04)',

    // Primary color - Purple from Lobe UI
    colorPrimary: '#667eea',
    colorPrimaryHover: '#7d8ff5',
    colorPrimaryActive: '#5568d3',

    // Success/Info/Warning/Error
    colorSuccess: '#10a37f',
    colorInfo: '#4facfe',
    colorWarning: '#ffd93d',
    colorError: '#ff6b9d',

    // Border radius
    borderRadius: 8,
    borderRadiusLG: 12,
    borderRadiusSM: 6,
    borderRadiusXS: 4,

    // Shadows
    boxShadow: '0 2px 8px rgba(0, 0, 0, 0.3)',
    boxShadowSecondary: '0 4px 16px rgba(0, 0, 0, 0.4)',

    // Font
    fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
    fontSize: 14,
    fontSizeHeading1: 32,
    fontSizeHeading2: 24,
    fontSizeHeading3: 20,
  },
};

// Custom Lobe UI color tokens
export const lobeUIColors = {
  // Glassmorphism
  glass: {
    background: 'rgba(17, 17, 17, 0.7)',
    border: 'rgba(255, 255, 255, 0.08)',
    blur: '20px',
  },

  // Gradients
  gradient: {
    primary: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
    secondary: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)',
    accent: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)',
    success: 'linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)',
  },

  // Message colors (ChatGPT style)
  message: {
    user: {
      background: 'rgba(102, 126, 234, 0.1)',
      border: '#667eea',
    },
    assistant: {
      background: 'rgba(255, 255, 255, 0.03)',
      border: 'transparent',
    },
  },

  // Avatar colors
  avatar: {
    user: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
    assistant: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)',
  },
};

// Spacing system - Following Figma specs
export const spacing = {
  xs: 4,
  sm: 8,
  md: 12,
  lg: 16,
  xl: 20,
  xxl: 24,
  xxxl: 32,
  xxxxl: 48,
};

// Z-index layers
export const zIndex = {
  base: 0,
  content: 1,
  sidebar: 10,
  header: 100,
  overlay: 999,
  modal: 1000,
  tooltip: 1100,
};