/**
 * UI 样式组合器
 * 将基础样式和颜色主题组合成完整的样式配置
 */

import * as baseStyles from './ui-styles-base'
import * as lightColors from './ui-theme-colors-light'
import * as darkColors from './ui-theme-colors-dark'

// 定义颜色主题的通用类型结构
type ColorTheme = {
  card: {
    border: string
    bg: string
    shadow: string
    shadowHover: string
    shadowLarge: string
    shadowLargeHover: string
    shadowRainbow: string
    shadowRainbowHover: string
    shadowGlass: string
    shadowGlassHover: string
    shadowNeon: string
    shadowNeonHover: string
    borderNeon: string
    bgRainbow: string
    bgGlass: string
    borderGlass: string
  }
  button: {
    primary: { bg: string; hover: string; shadow: string; shadowHover: string }
    secondary: { border: string; bg: string; text: string; hover: string }
    ghost: { text: string; hover: string }
    danger: { bg: string; hover: string; shadow: string; shadowHover: string }
    success: { bg: string; hover: string; shadow: string; shadowHover: string }
    glass: { bg: string; hover: string; border: string }
  }
  input: {
    border: string
    bg: string
    text: string
    placeholder: string
    focusRing: string
    errorBorder: string
    errorBg: string
    errorText: string
    errorPlaceholder: string
    errorFocusRing: string
  }
  navItem: {
    border: string
    bg: string
    text: string
    hoverBg: string
    hoverShadow: string
    activeBg: string
    activeText: string
    activeShadow: string
    rainbowBg: string
    rainbowShadow: string
    tabText: string
    tabTextHover: string
    tabTextActive: string
  }
  badge: {
    primary: { bg: string; text: string }
    success: { bg: string; text: string }
    warning: { bg: string; text: string }
    danger: { bg: string; text: string }
  }
  modal: {
    overlay: string
    bg: string
    border: string
    shadow: string
    headerBorder: string
    title: string
    body: string
    footerBorder: string
    closeButton: string
  }
  toggle: {
    trackBg: string
    trackChecked: string
    thumbBg: string
    thumbBorder: string
  }
  accent: {
    pink: { bg: string; text: string; border: string; hover: string }
    purple: { bg: string; text: string; border: string; hover: string }
    blue: { bg: string; text: string; border: string; hover: string }
    cyan: { bg: string; text: string; border: string; hover: string }
    emerald: { bg: string; text: string; border: string; hover: string }
    orange: { bg: string; text: string; border: string; hover: string }
    rainbow: { bg: string; text: string; border: string; hover: string }
  }
}

/**
 * 组合卡片样式
 */
function composeCardStyles(colors: ColorTheme) {
  return {
    base: `${baseStyles.baseCardStyles.base} ${colors.card.border} ${colors.card.bg} ${colors.card.shadow}`,
    hover: `${baseStyles.baseCardStyles.hover} ${colors.card.border} ${colors.card.bg} ${colors.card.shadow} ${colors.card.shadowHover}`,
    large: `${baseStyles.baseCardStyles.large} ${colors.card.border} ${colors.card.bg} ${colors.card.shadowLarge} ${colors.card.shadowLargeHover}`,
    flat: `${baseStyles.baseCardStyles.flat} ${colors.card.border} ${colors.card.bg}`,
    rainbow: `${baseStyles.baseCardStyles.rainbow} ${colors.card.border} ${colors.card.bgRainbow} ${colors.card.shadowRainbow} ${colors.card.shadowRainbowHover}`,
    glass: `${baseStyles.baseCardStyles.glass} ${colors.card.bgGlass} ${colors.card.borderGlass} ${colors.card.shadowGlass} ${colors.card.shadowGlassHover}`,
    neon: `${baseStyles.baseCardStyles.neon} ${colors.card.borderNeon} ${colors.card.bg} ${colors.card.shadowNeon} ${colors.card.shadowNeonHover}`,
  } as const
}

/**
 * 组合按钮样式
 */
function composeButtonStyles(colors: ColorTheme) {
  return {
    primary: `${baseStyles.baseButtonStyles.primary} ${colors.button.primary.bg} ${colors.button.primary.hover} ${colors.button.primary.shadow} ${colors.button.primary.shadowHover}`,
    secondary: `${baseStyles.baseButtonStyles.secondary} ${colors.button.secondary.border} ${colors.button.secondary.bg} ${colors.button.secondary.text} ${colors.button.secondary.hover} hover:border-slate-400 dark:hover:border-slate-500`,
    ghost: `${baseStyles.baseButtonStyles.ghost} ${colors.button.ghost.text} ${colors.button.ghost.hover}`,
    danger: `${baseStyles.baseButtonStyles.danger} ${colors.button.danger.bg} ${colors.button.danger.hover} ${colors.button.danger.shadow} ${colors.button.danger.shadowHover}`,
    success: `${baseStyles.baseButtonStyles.success} ${colors.button.success.bg} ${colors.button.success.hover} ${colors.button.success.shadow} ${colors.button.success.shadowHover}`,
    rainbow: baseStyles.baseButtonStyles.rainbow, // 渐变按钮颜色固定（标准尺寸）
    rainbowCompact: baseStyles.baseButtonStyles.rainbowCompact, // 渐变按钮颜色固定（紧凑尺寸，用于角标）
    neon: baseStyles.baseButtonStyles.neon, // 霓虹按钮颜色固定
    glass: `${baseStyles.baseButtonStyles.glass} ${colors.button.glass.bg} ${colors.button.glass.hover} ${colors.button.glass.border}`,
  } as const
}

/**
 * 组合输入框样式
 */
function composeInputStyles(colors: ColorTheme) {
  return {
    base: `${baseStyles.baseInputStyles.base} ${colors.input.border} ${colors.input.bg} ${colors.input.text} ${colors.input.placeholder} ${colors.input.focusRing} focus:border-slate-500 dark:focus:border-slate-300`,
    error: `${baseStyles.baseInputStyles.error} ${colors.input.errorBorder} ${colors.input.errorBg} ${colors.input.errorText} ${colors.input.errorPlaceholder} ${colors.input.errorFocusRing}`,
  } as const
}

/**
 * 组合导航项样式
 */
function composeNavItemStyles(colors: ColorTheme) {
  return {
    base: `${baseStyles.baseNavItemStyles.base} ${colors.navItem.border} ${colors.navItem.bg} ${colors.navItem.text}`,
    hover: `${baseStyles.baseNavItemStyles.hover} ${colors.navItem.border} ${colors.navItem.bg} ${colors.navItem.hoverBg} ${colors.navItem.hoverShadow} ${colors.navItem.text} hover:border-slate-400 dark:hover:border-slate-500`,
    active: `${baseStyles.baseNavItemStyles.active} ${colors.navItem.activeBg} ${colors.navItem.activeText} ${colors.navItem.activeShadow} border-slate-900 dark:border-slate-100`,
    rainbow: `${baseStyles.baseNavItemStyles.rainbow} ${colors.navItem.border} ${colors.navItem.rainbowBg} ${colors.navItem.rainbowShadow} ${colors.navItem.text}`,
    tabBase: `${baseStyles.baseNavItemStyles.tabBase} ${colors.navItem.tabText} ${colors.navItem.tabTextHover}`,
    tabActive: `${baseStyles.baseNavItemStyles.tabActive} ${colors.navItem.tabTextActive}`,
  } as const
}

/**
 * 组合徽章样式
 */
function composeBadgeStyles(colors: ColorTheme) {
  return {
    base: baseStyles.baseBadgeStyles.base,
    primary: `${baseStyles.baseBadgeStyles.primary} ${colors.badge.primary.bg} ${colors.badge.primary.text}`,
    success: `${baseStyles.baseBadgeStyles.success} ${colors.badge.success.bg} ${colors.badge.success.text}`,
    warning: `${baseStyles.baseBadgeStyles.warning} ${colors.badge.warning.bg} ${colors.badge.warning.text}`,
    danger: `${baseStyles.baseBadgeStyles.danger} ${colors.badge.danger.bg} ${colors.badge.danger.text}`,
  } as const
}

/**
 * 组合Modal样式
 */
function composeModalStyles(colors: ColorTheme) {
  return {
    overlay: `${baseStyles.baseModalStyles.overlay} ${colors.modal.overlay}`,
    container: baseStyles.baseModalStyles.container,
    content: `${baseStyles.baseModalStyles.content} ${colors.modal.bg} ${colors.modal.border} ${colors.modal.shadow}`,
    sizes: baseStyles.baseModalStyles.sizes,
    header: `${baseStyles.baseModalStyles.header} ${colors.modal.headerBorder}`,
    title: `${baseStyles.baseModalStyles.title} ${colors.modal.title}`,
    closeButton: `${baseStyles.baseModalStyles.closeButton} ${colors.modal.closeButton}`,
    body: `${baseStyles.baseModalStyles.body} ${colors.modal.body}`,
    footer: `${baseStyles.baseModalStyles.footer} ${colors.modal.footerBorder}`,
  } as const
}

/**
 * 组合低饱和度炫彩元素样式
 */
function composeAccentStyles(colors: ColorTheme) {
  return {
    pink: colors.accent.pink,
    purple: colors.accent.purple,
    blue: colors.accent.blue,
    cyan: colors.accent.cyan,
    emerald: colors.accent.emerald,
    orange: colors.accent.orange,
    rainbow: colors.accent.rainbow,
  } as const
}

/**
 * 组合开关切换器样式
 */
function composeToggleStyles(colors: ColorTheme) {
  return {
    container: baseStyles.baseToggleStyles.container,
    track: `${baseStyles.baseToggleStyles.track} ${colors.toggle.trackBg} ${colors.toggle.trackChecked} ${colors.toggle.thumbBg} ${colors.toggle.thumbBorder}`,
    input: baseStyles.baseToggleStyles.input,
  } as const
}

/**
 * 组合完整的样式配置
 */
export function composeThemeStyles(colors: ColorTheme) {
  return {
    cardStyles: composeCardStyles(colors),
    buttonStyles: composeButtonStyles(colors),
    buttonModifiers: baseStyles.baseButtonModifiers,
    inputStyles: composeInputStyles(colors),
    inputModifiers: baseStyles.baseInputModifiers,
    navItemStyles: composeNavItemStyles(colors),
    badgeStyles: composeBadgeStyles(colors),
    modalStyles: composeModalStyles(colors),
    toggleStyles: composeToggleStyles(colors),
    accentStyles: composeAccentStyles(colors),
    spacingStyles: baseStyles.baseSpacingStyles,
  } as const
}

// 导出浅色和深色主题的完整样式
export const lightThemeStyles = composeThemeStyles(lightColors.themeColors)
export const darkThemeStyles = composeThemeStyles(darkColors.themeColors)