import { useEffect, useRef } from 'react'
import { useEditorStore } from '../stores/editorStore'
import { settingsRepository } from '../db/settingsRepository'

export function useTheme() {
  const darkMode = useEditorStore(s => s.darkMode)
  const setDarkMode = useEditorStore(s => s.setDarkMode)
  const isInitialized = useRef(false)

  // B-05: 从 IndexedDB 加载主题设置
  useEffect(() => {
    settingsRepository.load().then(settings => {
      const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches
      setDarkMode(settings.darkMode !== undefined ? settings.darkMode : prefersDark)
      isInitialized.current = true
    }).catch(err => console.error('Failed to load theme settings:', err))
  }, [setDarkMode])

  // B-05: 首次加载完成后才保存主题设置
  useEffect(() => {
    if (!isInitialized.current) return
    document.documentElement.classList.toggle('dark', darkMode)
    settingsRepository.save({ darkMode })
  }, [darkMode])

  const toggleDarkMode = useEditorStore(s => s.toggleDarkMode)

  return { darkMode, toggleDarkMode }
}