import { computed, type Ref } from 'vue'
import { useSettingsStore } from '../stores/settings'

export interface UseThemeReturn {
  isDark: Ref<boolean>
  toggleTheme: () => void
  setTheme: (theme: 'light' | 'dark') => void
}

/** Reads and toggles the active theme (light/dark/system) with reactivity to OS preference changes. */
export function useTheme(): UseThemeReturn {
  const settings = useSettingsStore()

  // Load persisted theme from localStorage (idempotent — safe to call multiple times)
  settings.initialize()

  const isDark = computed(() => settings.isDark())

  function toggleTheme() {
    settings.theme = isDark.value ? 'light' : 'dark'
  }

  function setTheme(theme: 'light' | 'dark') {
    settings.theme = theme
  }

  return {
    isDark,
    toggleTheme,
    setTheme,
  }
}