import { create } from 'zustand'

type ThemeMode = 'light' | 'dark' | 'system'

interface ThemeState {
  mode: ThemeMode
  resolved: 'light' | 'dark'
}

function getSystemTheme(): 'light' | 'dark' {
  return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
}

function resolveTheme(mode: ThemeMode): 'light' | 'dark' {
  return mode === 'system' ? getSystemTheme() : mode
}

function applyTheme(resolved: 'light' | 'dark') {
  const html = document.documentElement
  html.classList.toggle('dark', resolved === 'dark')
  html.setAttribute('data-theme', resolved)
}

function getInitialMode(): ThemeMode {
  const stored = localStorage.getItem('zclaw_admin_theme')
  if (stored === 'light' || stored === 'dark' || stored === 'system') return stored
  return 'system'
}

const initialMode = getInitialMode()
const initialResolved = resolveTheme(initialMode)
applyTheme(initialResolved)

export const useThemeStore = create<ThemeState>(() => ({
  mode: initialMode,
  resolved: initialResolved,
}))

export function setThemeMode(mode: ThemeMode) {
  const resolved = resolveTheme(mode)
  localStorage.setItem('zclaw_admin_theme', mode)
  applyTheme(resolved)
  useThemeStore.setState({ mode, resolved })
}

// Listen for system theme changes
if (typeof window !== 'undefined') {
  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
    const { mode } = useThemeStore.getState()
    if (mode === 'system') {
      const resolved = getSystemTheme()
      applyTheme(resolved)
      useThemeStore.setState({ resolved })
    }
  })
}