/**
 * 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')

  // 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
  }
}