import { ref, watch, onMounted } from 'vue'

export type Theme = 'dark' | 'light'

const theme = ref<Theme>('dark')

export function useTheme() {
  const applyTheme = (t: Theme) => {
    theme.value = t
    document.body.dataset.theme = t
    localStorage.setItem('uiTheme', t)
  }

  const toggleTheme = () => {
    applyTheme(theme.value === 'light' ? 'dark' : 'light')
  }

  const initTheme = () => {
    const saved = localStorage.getItem('uiTheme') as Theme | null
    const prefersLight = window.matchMedia?.('(prefers-color-scheme: light)').matches
    applyTheme(saved || (prefersLight ? 'light' : 'dark'))
  }

  return {
    theme,
    toggleTheme,
    initTheme
  }
}