import { ref, onMounted, onUnmounted } from 'vue'

export function useCssVariable(variableName: string) {
  const value = ref('')
  let observer: MutationObserver | null = null
  let mediaQuery: MediaQueryList | null = null
  
  const updateValue = () => {
    const computedStyle = getComputedStyle(document.documentElement)
    const cssValue = computedStyle.getPropertyValue(variableName).trim()
    value.value = cssValue
  }
  
  onMounted(() => {
    // Initialize with current value
    updateValue()
    
    // Watch for class changes on document.documentElement (where theme classes are applied)
    observer = new MutationObserver((mutations) => {
      mutations.forEach((mutation) => {
        if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
          updateValue()
        }
      })
    })
    
    observer.observe(document.documentElement, {
      attributes: true,
      attributeFilter: ['class']
    })
    
    // Also watch for system color scheme changes
    if (window.matchMedia) {
      mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
      mediaQuery.addEventListener('change', updateValue)
    }
  })
  
  onUnmounted(() => {
    if (observer) {
      observer.disconnect()
    }
    if (mediaQuery) {
      mediaQuery.removeEventListener('change', updateValue)
    }
  })
  
  return value
}