/**
 * 渐变主题配置
 * 提供统一的渐变样式管理
 */

export interface GradientTheme {
  name: string
  primary: string
  secondary?: string
  background: string
  textColor: string
  description: string
}

// 预定义渐变主题
export const gradientThemes: GradientTheme[] = [
  {
    name: 'ocean',
    primary: '#667eea',
    secondary: '#764ba2',
    background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
    textColor: '#ffffff',
    description: '海洋蓝紫 - 科技感与专业感'
  },
  {
    name: 'sunset',
    primary: '#f093fb',
    secondary: '#f5576c',
    background: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)',
    textColor: '#ffffff',
    description: '日落橙红 - 活力与热情'
  },
  {
    name: 'fresh',
    primary: '#4facfe',
    secondary: '#00f2fe',
    background: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)',
    textColor: '#ffffff',
    description: '清新蓝绿 - 清新与活力'
  },
  {
    name: 'nature',
    primary: '#43e97b',
    secondary: '#38f9d7',
    background: 'linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)',
    textColor: '#ffffff',
    description: '自然绿青 - 生机与成长'
  },
  {
    name: 'warm',
    primary: '#fa709a',
    secondary: '#fee140',
    background: 'linear-gradient(135deg, #fa709a 0%, #fee140 100%)',
    textColor: '#ffffff',
    description: '温暖金粉 - 温馨与友好'
  },
  {
    name: 'elegant',
    primary: '#a8edea',
    secondary: '#fed6e3',
    background: 'linear-gradient(135deg, #a8edea 0%, #fed6e3 100%)',
    textColor: '#374151',
    description: '优雅淡彩 - 柔和与精致'
  },
  {
    name: 'royal',
    primary: '#667eea',
    secondary: '#764ba2',
    background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
    textColor: '#ffffff',
    description: '皇家紫蓝 - 高贵与权威'
  },
  {
    name: 'fire',
    primary: '#ff9a9e',
    secondary: '#fecfef',
    background: 'linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%)',
    textColor: '#ffffff',
    description: '火焰粉红 - 激情与浪漫'
  }
]

// 业务场景渐变
export const businessGradients = {
  // 分销商相关
  dealer: {
    header: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
    card: 'linear-gradient(135deg, #ffffff 0%, #f8fafc 100%)',
    success: 'linear-gradient(135deg, #10b981 0%, #34d399 100%)',
    warning: 'linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%)',
    danger: 'linear-gradient(135deg, #ef4444 0%, #f87171 100%)',
    info: 'linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%)'
  },

  // 订单相关
  order: {
    pending: 'linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%)',
    completed: 'linear-gradient(135deg, #10b981 0%, #059669 100%)',
    cancelled: 'linear-gradient(135deg, #ef4444 0%, #dc2626 100%)',
    processing: 'linear-gradient(135deg, #3b82f6 0%, #2563eb 100%)'
  },

  // 金额相关
  money: {
    available: 'linear-gradient(135deg, #10b981 0%, #059669 100%)',
    frozen: 'linear-gradient(135deg, #3b82f6 0%, #2563eb 100%)',
    total: 'linear-gradient(135deg, #f59e0b 0%, #d97706 100%)'
  }
}

// 卡片渐变样式（小程序兼容版本）
export const cardGradients = {
  glass: {
    background: 'linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%)',
    border: '1px solid rgba(255, 255, 255, 0.2)'
    // 注意：小程序不支持 backdropFilter
  },

  subtle: {
    background: 'linear-gradient(135deg, #ffffff 0%, #f8fafc 100%)',
    border: '1px solid rgba(255, 255, 255, 0.8)'
    // 注意：小程序不支持 boxShadow，使用边框和背景替代
  },

  elevated: {
    background: 'linear-gradient(135deg, #ffffff 0%, #ffffff 100%)',
    border: '1px solid rgba(255, 255, 255, 0.9)'
    // 注意：小程序不支持 boxShadow，使用边框和背景替代
  }
}

// 文字渐变样式（小程序兼容版本 - 使用纯色替代）
export const textGradients = {
  primary: {
    color: '#667eea'
    // 注意：小程序不支持 WebkitBackgroundClip 和 WebkitTextFillColor，使用纯色替代
  },

  success: {
    color: '#10b981'
    // 注意：小程序不支持文字渐变，使用纯色替代
  },

  warning: {
    color: '#f59e0b'
    // 注意：小程序不支持文字渐变，使用纯色替代
  },

  danger: {
    color: '#ef4444'
    // 注意：小程序不支持文字渐变，使用纯色替代
  }
}

// 工具函数
export const gradientUtils = {
  // 根据用户ID获取主题
  getThemeByUserId: (userId?: number): GradientTheme => {
    if (!userId) return gradientThemes[0]
    const index = userId % gradientThemes.length
    return gradientThemes[index]
  },

  // 根据主题名获取主题
  getThemeByName: (name: string): GradientTheme | undefined => {
    return gradientThemes.find(theme => theme.name === name)
  },

  // 调整颜色亮度
  adjustColorBrightness: (color: string, percent: number): string => {
    const num = parseInt(color.replace("#", ""), 16)
    const amt = Math.round(2.55 * percent)
    const R = (num >> 16) + amt
    const G = (num >> 8 & 0x00FF) + amt
    const B = (num & 0x0000FF) + amt
    return "#" + (0x1000000 + (R < 255 ? R < 1 ? 0 : R : 255) * 0x10000 +
      (G < 255 ? G < 1 ? 0 : G : 255) * 0x100 +
      (B < 255 ? B < 1 ? 0 : B : 255)).toString(16).slice(1)
  },

  // 生成自定义渐变
  createGradient: (color1: string, color2: string, direction = '135deg'): string => {
    return `linear-gradient(${direction}, ${color1} 0%, ${color2} 100%)`
  },

  // 获取渐变的主色调
  getPrimaryColor: (gradient: string): string => {
    const match = gradient.match(/#[a-fA-F0-9]{6}/)
    return match ? match[0] : '#667eea'
  }
}

// 动画渐变
export const animatedGradients = {
  flowing: {
    background: 'linear-gradient(-45deg, #667eea, #764ba2, #f093fb, #f5576c)',
    backgroundSize: '400% 400%',
    animation: 'gradientFlow 15s ease infinite'
  },

  pulse: {
    background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
    animation: 'gradientPulse 3s ease-in-out infinite'
  }
}

// CSS 动画关键帧（需要在全局样式中定义）
export const gradientAnimations = `
@keyframes gradientFlow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes gradientPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.8; }
}
`
