/**
 * UI 样式基础配置
 * 包含所有非颜色相关的样式：布局、大小、间距、圆角等。
 * 默认风格服务后台工作台，不做展示页式大圆角、毛玻璃、浮动光效。
 */

// 基础结构样式（不包含颜色）
export const baseCardStyles = {
  // 基础卡片结构
  base: 'rounded-lg border p-5 transition-colors duration-200',
  
  // 悬停卡片结构
  hover: 'rounded-lg border p-5 transition-colors duration-200',
  
  // 大卡片结构
  large: 'rounded-lg border p-6 transition-colors duration-200',
  
  // 扁平卡片结构
  flat: 'rounded-lg border p-5 transition-colors duration-200',
  
  // 兼容旧 variant，实际降级为普通卡片
  rainbow: 'rounded-lg border p-5 transition-colors duration-200',
  
  // 兼容旧 variant，实际降级为普通卡片
  glass: 'rounded-lg border p-5 transition-colors duration-200',
  
  // 兼容旧 variant，实际降级为普通卡片
  neon: 'rounded-lg border p-5 transition-colors duration-200',
} as const

export const baseButtonStyles = {
  // 主要按钮结构
  primary: 'px-4 py-2 rounded-lg text-white font-medium transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed',
  
  // 次要按钮结构（hover 边框颜色在主题中定义）
  secondary: 'px-4 py-2 rounded-lg border font-medium transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed',
  
  // 幽灵按钮结构
  ghost: 'px-4 py-2 rounded-lg font-medium transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed',
  
  // 危险按钮结构（不包含颜色，颜色由主题提供）
  danger: 'px-4 py-2 rounded-lg text-white font-medium transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed',
  
  // 成功按钮结构
  success: 'px-4 py-2 rounded-lg text-white font-medium transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed',
  
  // 兼容旧 variant，实际降级为普通主按钮
  rainbow: 'px-4 py-2 rounded-lg bg-slate-900 dark:bg-slate-100 text-white dark:text-slate-900 font-medium transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed',
  
  // 兼容旧 variant，实际降级为普通紧凑按钮
  rainbowCompact: 'px-2 py-1 text-xs rounded-md bg-slate-900 dark:bg-slate-100 text-white dark:text-slate-900 font-medium transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed',
  
  // 兼容旧 variant，实际降级为普通主按钮
  neon: 'px-4 py-2 rounded-lg bg-slate-900 dark:bg-slate-100 text-white dark:text-slate-900 font-medium transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed',
  
  // 兼容旧 variant，实际降级为普通次按钮
  glass: 'px-4 py-2 rounded-lg border font-medium transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed',
} as const

export const baseInputStyles = {
  // 基础输入框结构（focus 颜色在主题中定义）
  base: 'w-full px-3 py-2 rounded-lg border focus:ring-2 outline-none transition-colors',
  
  // 错误输入框结构（focus 颜色在主题中定义）
  error: 'w-full px-3 py-2 rounded-lg border-2 focus:ring-2 outline-none transition-colors',
} as const

export const baseNavItemStyles = {
  // 基础导航项结构
  base: 'px-3 py-2 rounded-lg border transition-colors duration-200',
  
  // 悬停导航项结构
  hover: 'px-3 py-2 rounded-lg border transition-colors duration-200',
  
  // 激活导航项结构
  active: 'px-3 py-2 rounded-lg border transition-colors duration-200',
  
  // 兼容旧 variant，实际降级为普通导航项
  rainbow: 'px-3 py-2 rounded-lg border transition-colors duration-200',
  
  // 标签页导航项结构
  tabBase: 'relative pb-4 px-5 font-medium transition-all duration-300 ease-out border-none bg-transparent',
  tabActive: 'relative pb-4 px-5 font-medium transition-all duration-300 ease-out border-none bg-transparent',
} as const

export const baseBadgeStyles = {
  base: 'px-3 py-1 rounded-lg text-xs font-medium',
  primary: 'px-3 py-1 rounded-lg text-xs font-medium',
  success: 'px-3 py-1 rounded-lg text-xs font-medium',
  warning: 'px-3 py-1 rounded-lg text-xs font-medium',
  danger: 'px-3 py-1 rounded-lg text-xs font-medium',
} as const

// 修饰符（不包含颜色）
export const baseButtonModifiers = {
  compact: 'px-3 py-1.5 text-sm',
  compactXs: 'px-2 py-1 text-xs',
  icon: 'p-2 rounded-lg',
  block: 'w-full justify-center',
  pill: 'rounded-full',
} as const

export const baseInputModifiers = {
  compact: 'px-3 py-2 text-sm rounded-lg',
  compactXs: 'px-2.5 py-1.5 text-xs rounded-lg',
} as const

export const baseSpacingStyles = {
  section: 'space-y-8',      // 区块间距
  card: 'space-y-6',         // 卡片内间距
  form: 'space-y-4',         // 表单元素间距
  compact: 'space-y-2',      // 紧密间距
} as const

// Modal 基础样式（不包含颜色）
export const baseModalStyles = {
  // 遮罩层
  overlay: 'fixed inset-0 z-50 flex items-center justify-center px-4 py-8 sm:px-6 sm:py-12 lg:px-10 lg:py-16 bg-slate-950/45 dark:bg-black/65 transition-opacity duration-200',
  
  // 弹窗容器
  container: 'relative w-auto max-w-full max-h-[80vh] sm:max-h-[75vh] overflow-hidden transition-opacity duration-200 flex-none rounded-lg',
  
  // 弹窗内容（阴影在主题颜色中定义，这里不重复定义）
  content: 'w-full rounded-lg bg-white dark:bg-slate-900 overflow-hidden transition-opacity duration-200',
  
  // 弹窗尺寸
  sizes: {
    xs: 'max-w-[20rem]',
    small: 'max-w-sm',
    medium: 'max-w-md',
    large: 'max-w-lg',
    xlarge: 'max-w-2xl',
      xxlarge: 'max-w-7xl',
    fullscreen: 'max-w-full w-full h-full max-h-[85vh]',
  },
  
  // 弹窗头部
  header: 'px-8 py-5 border-b flex items-center justify-between bg-transparent',
  
  // 弹窗标题
  title: 'text-lg font-semibold',
  
  // 弹窗关闭按钮
  closeButton: 'p-1 rounded-lg hover:bg-opacity-10 transition-colors duration-200',
  
  // 弹窗主体
  body: 'px-8 py-6 max-h-[60vh] sm:max-h-[55vh] overflow-y-auto bg-transparent',
  
  // 弹窗底部
  footer: 'px-8 py-5 border-t flex items-center justify-end gap-3 bg-transparent',
} as const

// Section 显示动画样式（来自外观设置）
export const baseSectionRevealStyles = {
  // 基础显示动画类
  base: 'transition-opacity duration-300 ease-out',
  // 可见状态
  visible: 'opacity-100',
  // 隐藏状态
  hidden: 'opacity-0',
} as const

// Hero 区域样式（保留兼容，实际按普通页面区块处理）
export const baseHeroStyles = {
  // Hero 卡片基础结构
  card: 'relative overflow-hidden rounded-lg border transition-colors duration-200 p-5',
  // Hero 标题区域
  header: 'relative z-10 flex flex-col gap-5 xl:flex-row xl:items-center xl:justify-between',
  // Hero 内容区域
  content: 'space-y-3 max-w-2xl',
} as const

// 浮动光球样式（保留兼容，默认隐藏）
export const baseFloatingOrbStyles = {
  // 光球基础样式
  base: 'hidden',
  // 右上角光球
  topRight: '',
  // 左下角光球
  bottomLeft: '',
} as const

// 开关切换器样式（来自外观设置）
export const baseToggleStyles = {
  // 开关容器
  container: 'relative inline-flex items-center cursor-pointer',
  // 开关轨道（颜色在主题中定义）
  track: 'w-11 h-6 peer-focus:outline-none peer-focus:ring-4 rounded-full peer peer-checked:after:translate-x-full after:absolute after:top-[2px] after:left-[2px] after:rounded-full after:h-5 after:w-5 after:transition-all',
  // 开关输入（隐藏）
  input: 'sr-only peer',
} as const