-- COLOR THEME SYSTEM
-- Functions for light/dark/auto color theme switching
-- IMPORTANT: This is SEPARATE from layout theme (.theme-clean)
-- Color theme: Controls backgrounds, text colors (light/dark/auto)
-- Layout theme: Controls sidebars, layout structure (default/clean)

-- SET COLOR THEME
def setColorTheme(mode)
  -- Save preference to localStorage
  call localStorage.setItem('color-theme-mode', mode)

  -- Apply theme to document
  call document.documentElement.setAttribute('data-color-theme', mode)

  -- Update button icon based on mode
  if mode is 'light' then call document.querySelector('#themeIcon').setAttribute('icon', 'mdi:white-balance-sunny') end
  if mode is 'dark' then call document.querySelector('#themeIcon').setAttribute('icon', 'mdi:moon-waning-crescent') end
  if mode is 'auto' then call document.querySelector('#themeIcon').setAttribute('icon', 'mdi:theme-light-dark') end

  -- Update button active states (for hidden compatibility buttons)
  set buttons to .theme-option-btn
  for btn in buttons
    if btn's @data-theme-mode is mode
      add .active to btn
    else
      remove .active from btn
    end
  end
end

-- INITIALIZE COLOR THEME
def initColorTheme()
  -- Get saved preference or default to 'auto'
  set savedTheme to localStorage['color-theme-mode'] or 'auto'

  -- Save preference to localStorage
  call localStorage.setItem('color-theme-mode', savedTheme)

  -- Apply theme to document
  call document.documentElement.setAttribute('data-color-theme', savedTheme)

  -- Update button icon based on mode
  if savedTheme is 'light' then call document.querySelector('#themeIcon').setAttribute('icon', 'mdi:white-balance-sunny') end
  if savedTheme is 'dark' then call document.querySelector('#themeIcon').setAttribute('icon', 'mdi:moon-waning-crescent') end
  if savedTheme is 'auto' then call document.querySelector('#themeIcon').setAttribute('icon', 'mdi:theme-light-dark') end
end

-- SYSTEM THEME CHANGE LISTENER (Optional Enhancement)
-- Listen for system theme changes when in 'auto' mode
-- This is automatically handled by CSS media queries, but we update UI
def watchSystemTheme()
  set darkModeQuery to window.matchMedia('(prefers-color-scheme: dark)')

  -- Update UI when system preference changes (if in auto mode)
  on change from darkModeQuery
    set currentMode to localStorage['color-theme-mode']
    if currentMode is 'auto' or currentMode is null then call setColorTheme('auto') end
  end
end