// ============================================================================
// THEME SYSTEM TYPES
// Sistema de temas completo para Frontend Library
// ============================================================================

// ----------------------------------------------------------------------------
// 1. COLOR PALETTE (Primitivos)
// ----------------------------------------------------------------------------

export interface ColorPalette {
  // Grays (escala neutral)
  gray50: string
  gray100: string
  gray200: string
  gray300: string
  gray400: string
  gray500: string
  gray600: string
  gray700: string
  gray800: string
  gray900: string
  gray950: string

  // Brand colors (personalizables por tema)
  brand50: string
  brand100: string
  brand200: string
  brand300: string
  brand400: string
  brand500: string
  brand600: string
  brand700: string
  brand800: string
  brand900: string
  brand950: string

  // Status colors
  red500: string
  red600: string
  green500: string
  green600: string
  yellow500: string
  yellow600: string
  blue500: string
  blue600: string

  // Pure colors
  white: string
  black: string
  transparent: string
}

// ----------------------------------------------------------------------------
// 2. SEMANTIC COLORS (Tokens semánticos)
// ----------------------------------------------------------------------------

export interface SemanticColors {
  // Backgrounds
  background: {
    default: string
    subtle: string
    muted: string
    inverse: string
  }

  // Foregrounds
  foreground: {
    default: string
    muted: string
    subtle: string
    disabled: string
    inverse: string
  }

  // Borders
  border: {
    default: string
    muted: string
    strong: string
    focus: string
  }

  // Brand
  brand: {
    primary: string
    primaryForeground: string
    secondary: string
    secondaryForeground: string
    accent: string
    accentForeground: string
  }

  // Status
  status: {
    success: string
    successForeground: string
    successMuted: string
    warning: string
    warningForeground: string
    warningMuted: string
    error: string
    errorForeground: string
    errorMuted: string
    info: string
    infoForeground: string
    infoMuted: string
  }

  // Surfaces (jerarquía de capas)
  surface: {
    base: string        // Fondo principal
    raised: string      // Cards, panels
    overlay: string     // Modals, dropdowns
    sunken: string      // Inputs, wells
  }

  // Sidebar (panel lateral oscuro)
  sidebar: {
    background: string
    foreground: string
    muted: string
    accent: string
    accentForeground: string
    border: string
    ring: string
  }

  // Charts
  chart: {
    1: string
    2: string
    3: string
    4: string
    5: string
    6: string
    7: string
    8: string
  }

  // Interactive
  ring: string
  input: string
}

// ----------------------------------------------------------------------------
// 3. TYPOGRAPHY
// ----------------------------------------------------------------------------

export interface Typography {
  fontFamily: {
    display: string     // Títulos destacados
    heading: string     // Encabezados
    body: string        // Texto general
    mono: string        // Código
  }

  fontSize: {
    xs: string          // 12px
    sm: string          // 14px
    base: string        // 16px
    lg: string          // 18px
    xl: string          // 20px
    '2xl': string       // 24px
    '3xl': string       // 30px
    '4xl': string       // 36px
    '5xl': string       // 48px
    '6xl': string       // 60px
  }

  fontWeight: {
    light: number
    normal: number
    medium: number
    semibold: number
    bold: number
    extrabold: number
  }

  lineHeight: {
    none: number
    tight: number
    snug: number
    normal: number
    relaxed: number
    loose: number
  }

  letterSpacing: {
    tighter: string
    tight: string
    normal: string
    wide: string
    wider: string
  }
}

// ----------------------------------------------------------------------------
// 4. SPACING
// ----------------------------------------------------------------------------

export interface Spacing {
  0: string
  px: string
  0.5: string
  1: string
  1.5: string
  2: string
  2.5: string
  3: string
  3.5: string
  4: string
  5: string
  6: string
  7: string
  8: string
  9: string
  10: string
  11: string
  12: string
  14: string
  16: string
  20: string
  24: string
  28: string
  32: string
  36: string
  40: string
  44: string
  48: string
  52: string
  56: string
  60: string
  64: string
  72: string
  80: string
  96: string
}

// ----------------------------------------------------------------------------
// 5. BORDERS
// ----------------------------------------------------------------------------

export interface Borders {
  width: {
    none: string
    thin: string
    default: string
    medium: string
    thick: string
  }

  radius: {
    none: string
    sm: string
    default: string
    md: string
    lg: string
    xl: string
    '2xl': string
    '3xl': string
    full: string
  }
}

// ----------------------------------------------------------------------------
// 6. SHADOWS (Elevation)
// ----------------------------------------------------------------------------

export interface Shadows {
  none: string
  xs: string
  sm: string
  default: string
  md: string
  lg: string
  xl: string
  '2xl': string
  inner: string
  // Colored shadows for glow effects
  glow: {
    sm: string
    md: string
    lg: string
  }
}

// ----------------------------------------------------------------------------
// 7. MOTION / ANIMATION
// ----------------------------------------------------------------------------

export interface Motion {
  duration: {
    instant: string     // 0ms
    fast: string        // 100ms
    normal: string      // 200ms
    slow: string        // 300ms
    slower: string      // 500ms
    slowest: string     // 1000ms
  }

  easing: {
    linear: string
    default: string
    in: string
    out: string
    inOut: string
    spring: string
    bounce: string
  }
}

// ----------------------------------------------------------------------------
// 8. BREAKPOINTS
// ----------------------------------------------------------------------------

export interface Breakpoints {
  xs: string
  sm: string
  md: string
  lg: string
  xl: string
  '2xl': string
}

// ----------------------------------------------------------------------------
// 9. Z-INDEX
// ----------------------------------------------------------------------------

export interface ZIndex {
  hide: number
  base: number
  raised: number
  dropdown: number
  sticky: number
  overlay: number
  modal: number
  popover: number
  toast: number
  tooltip: number
  max: number
}

// ----------------------------------------------------------------------------
// 10. ICONS
// ----------------------------------------------------------------------------

export interface Icons {
  size: {
    xs: string          // 12px
    sm: string          // 16px
    default: string     // 20px
    md: string          // 24px
    lg: string          // 32px
    xl: string          // 40px
    '2xl': string       // 48px
  }

  strokeWidth: {
    thin: number
    light: number
    regular: number
    bold: number
    fill: number
  }
}

// ----------------------------------------------------------------------------
// THEME CONFIGURATION (Complete)
// ----------------------------------------------------------------------------

export interface ThemeConfig {
  // Metadata
  name: string
  label: string
  description?: string

  // Color system
  palette: ColorPalette
  colors: SemanticColors

  // Typography
  typography: Typography

  // Layout
  spacing: Spacing
  borders: Borders
  shadows: Shadows

  // Interaction
  motion: Motion

  // Responsive
  breakpoints: Breakpoints
  zIndex: ZIndex

  // Icons
  icons: Icons
}

// ----------------------------------------------------------------------------
// LEGACY SUPPORT - ThemeColors (for backward compatibility)
// ----------------------------------------------------------------------------

export interface ThemeColors {
  // Base
  background: string
  foreground: string

  // Cards & Popovers
  card: string
  cardForeground: string
  popover: string
  popoverForeground: string

  // Primary & Secondary
  primary: string
  primaryForeground: string
  secondary: string
  secondaryForeground: string

  // Muted & Accent
  muted: string
  mutedForeground: string
  accent: string
  accentForeground: string

  // Semantic colors
  destructive: string
  destructiveForeground: string
  success: string
  successForeground: string
  warning: string
  warningForeground: string
  info: string
  infoForeground: string

  // Surfaces
  surface: string
  surfaceHover: string
  overlay: string

  // Form elements
  border: string
  input: string
  ring: string

  // Charts
  chart1: string
  chart2: string
  chart3: string
  chart4: string
  chart5: string

  // Sidebar
  sidebar: string
  sidebarForeground: string
  sidebarPrimary: string
  sidebarPrimaryForeground: string
  sidebarAccent: string
  sidebarAccentForeground: string
  sidebarBorder: string
  sidebarRing: string
}

export interface Theme {
  name: string
  label: string
  colors: ThemeColors
}

export type ThemeName = 'default' | 'dark' | 'blue' | 'green' | 'purple' | 'orange' | 'rose' | 'cyan' | 'sunset' | 'midnight'

// ----------------------------------------------------------------------------
// HELPER: Convert ThemeConfig to legacy ThemeColors
// ----------------------------------------------------------------------------

export function themeConfigToColors(config: ThemeConfig): ThemeColors {
  const { colors } = config

  return {
    // Base
    background: colors.background.default,
    foreground: colors.foreground.default,

    // Cards & Popovers
    card: colors.surface.raised,
    cardForeground: colors.foreground.default,
    popover: colors.surface.overlay,
    popoverForeground: colors.foreground.default,

    // Primary & Secondary
    primary: colors.brand.primary,
    primaryForeground: colors.brand.primaryForeground,
    secondary: colors.brand.secondary,
    secondaryForeground: colors.brand.secondaryForeground,

    // Muted & Accent
    muted: colors.background.muted,
    mutedForeground: colors.foreground.muted,
    accent: colors.brand.accent,
    accentForeground: colors.brand.accentForeground,

    // Semantic colors
    destructive: colors.status.error,
    destructiveForeground: colors.status.errorForeground,
    success: colors.status.success,
    successForeground: colors.status.successForeground,
    warning: colors.status.warning,
    warningForeground: colors.status.warningForeground,
    info: colors.status.info,
    infoForeground: colors.status.infoForeground,

    // Surfaces
    surface: colors.surface.raised,
    surfaceHover: colors.background.subtle,
    overlay: colors.surface.overlay,

    // Form elements
    border: colors.border.default,
    input: colors.border.default,
    ring: colors.ring,

    // Charts
    chart1: colors.chart[1],
    chart2: colors.chart[2],
    chart3: colors.chart[3],
    chart4: colors.chart[4],
    chart5: colors.chart[5],

    // Sidebar
    sidebar: colors.sidebar.background,
    sidebarForeground: colors.sidebar.foreground,
    sidebarPrimary: colors.brand.primary,
    sidebarPrimaryForeground: colors.brand.primaryForeground,
    sidebarAccent: colors.sidebar.accent,
    sidebarAccentForeground: colors.sidebar.accentForeground,
    sidebarBorder: colors.sidebar.border,
    sidebarRing: colors.sidebar.ring,
  }
}
