// composables/useTheme.ts
export const useTheme = () => {
  const theme = ref<'light' | 'dark'>('light')
  const fontSet = ref<'modern' | 'elegant'>('modern')
  
  const setTheme = (newTheme: 'light' | 'dark') => {
    theme.value = newTheme
    if (import.meta.client) {
      document.documentElement.setAttribute('data-theme', newTheme)
      localStorage.setItem('theme', newTheme)
    }
  }
  
  const toggleTheme = () => {
    const newTheme = theme.value === 'light' ? 'dark' : 'light'
    setTheme(newTheme)
  }
  
  const setFontSet = (newFontSet: 'modern' | 'elegant') => {
    fontSet.value = newFontSet
    if (import.meta.client) {
      document.documentElement.setAttribute('data-font-set', newFontSet)
      localStorage.setItem('font-set', newFontSet)
    }
  }
  
  const toggleFontSet = () => {
    const newFontSet = fontSet.value === 'modern' ? 'elegant' : 'modern'
    setFontSet(newFontSet)
  }
  
  // Инициализация при загрузке
  onMounted(() => {
    if (import.meta.client) {
      const savedTheme = localStorage.getItem('theme') as 'light' | 'dark'
      const savedFontSet = localStorage.getItem('font-set') as 'modern' | 'elegant'
      const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches
      
      const initialTheme = savedTheme || (systemPrefersDark ? 'dark' : 'light')
      const initialFontSet = savedFontSet || 'modern'
      
      setTheme(initialTheme)
      setFontSet(initialFontSet)
    }
  })
  
  return {
    theme: readonly(theme),
    fontSet: readonly(fontSet),
    toggleTheme,
    setTheme,
    toggleFontSet,
    setFontSet
  }
}