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

const THEME_KEY = 'momentry_theme'
const saved = localStorage.getItem(THEME_KEY) || 'auto'
const theme = ref(saved)

function applyTheme(t: string) {
  if (t === 'auto') {
    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches
    document.documentElement.setAttribute('data-theme', prefersDark ? 'dark' : 'light')
  } else {
    document.documentElement.setAttribute('data-theme', t)
  }
}

watch(theme, (v) => {
  localStorage.setItem(THEME_KEY, v)
  applyTheme(v)
})

export function useTheme() {
  onMounted(() => applyTheme(theme.value))

  function toggleTheme() {
    const current = theme.value === 'auto' 
      ? (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light')
      : theme.value
    theme.value = current === 'dark' ? 'light' : 'dark'
  }

  return { theme, toggleTheme }
}