import { create } from 'zustand'
import { persist } from 'zustand/middleware'

interface ThemeState {
  isDark: boolean
  toggle: () => void
}

export const useThemeStore = create<ThemeState>()(
  persist(
    (set) => ({
      isDark: false,
      toggle: () => set((s) => {
        const next = !s.isDark
        document.documentElement.classList.toggle('dark', next)
        return { isDark: next }
      }),
    }),
    { name: 'theme' }
  )
)

/** Call once at app startup to apply persisted theme class */
export function initTheme() {
  const raw = localStorage.getItem('theme')
  if (raw) {
    try {
      const parsed = JSON.parse(raw) as { state?: { isDark?: boolean } }
      document.documentElement.classList.toggle('dark', !!parsed.state?.isDark)
    } catch { /* ignore */ }
  }
}