perfil/nuxt4/app/composables/useTheme.ts

/**
 * Composable para manejar el tema día/noche
 * Persiste la preferencia del usuario en localStorage
 */

export type Theme = 'day' | 'night'

export const useTheme = () => {
  // Estado del tema con persistencia
  const currentTheme = useState<Theme>('theme', () => {
    if (import.meta.client && typeof window !== 'undefined') {
      const saved = localStorage.getItem('theme')
      if (saved === 'day' || saved === 'night') {
        return saved
      }
      // Detectar preferencia del sistema
      const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches
      return prefersDark ? 'night' : 'day'
    }
    return 'day'
  })

  // Computed para saber si es modo noche
  const isNight = computed(() => currentTheme.value === 'night')

  // Función para aplicar la clase dark al HTML
  const applyThemeClass = (theme: Theme) => {
    if (import.meta.client && typeof window !== 'undefined') {
      const html = document.documentElement
      if (theme === 'night') {
        html.classList.add('dark')
        html.classList.remove('light')
      } else {
        html.classList.add('light')
        html.classList.remove('dark')
      }
    }
  }

  // Aplicar clase inicial al montar
  if (import.meta.client) {
    onMounted(() => {
      applyThemeClass(currentTheme.value)
    })

    // Sincronizar clase cuando cambie el tema
    watch(currentTheme, (newTheme) => {
      applyThemeClass(newTheme)
    })
  }

  // Alternar tema
  const toggleTheme = () => {
    currentTheme.value = currentTheme.value === 'day' ? 'night' : 'day'
    if (import.meta.client && typeof window !== 'undefined') {
      localStorage.setItem('theme', currentTheme.value)
    }
  }

  // Establecer tema específico
  const setTheme = (theme: Theme) => {
    currentTheme.value = theme
    if (import.meta.client && typeof window !== 'undefined') {
      localStorage.setItem('theme', theme)
    }
  }

  return {
    currentTheme: readonly(currentTheme),
    isNight,
    toggleTheme,
    setTheme
  }
}