import { useQuasar } from 'quasar'

export const useThemeMode = () => {
  const $q = useQuasar()

  // deterministic on SSR: default = light
  const isDark = useState<boolean>('theme:isDark', () => false)

  const applyTheme = (value: boolean) => {
    if (!process.client) return
    document.documentElement.classList.toggle('dark', value)
    $q.dark.set(value)
    localStorage.setItem('theme', value ? 'dark' : 'light')
  }

  const initTheme = () => {
    if (!process.client) return
    const saved = localStorage.getItem('theme') // 'dark' | 'light' | null
    const prefersDark = window.matchMedia?.('(prefers-color-scheme: dark)')?.matches ?? false

    const value = saved ? saved === 'dark' : prefersDark
    isDark.value = value
    applyTheme(value)
  }

  onMounted(initTheme)

  watch(isDark, (v) => applyTheme(v))

  const toggle = () => {
    isDark.value = !isDark.value
  }

  const set = (v: boolean) => {
    isDark.value = v
  }

  return { isDark, toggle, set }
}