import { StrictMode, useEffect } from 'react'
import { createRoot } from 'react-dom/client'
import App from './App'
import './index.css'
import 'katex/dist/katex.min.css'
import 'prismjs/themes/prism-tomorrow.css'
import { useUIStore } from './stores/uiStore'

const ThemeSync = () => {
  const theme = useUIStore((state) => state.theme)
  
  useEffect(() => {
    const root = document.documentElement
    root.classList.toggle('dark', theme === 'dark')
    root.style.colorScheme = theme === 'dark' ? 'dark' : 'light'
    
    if (window.electronAPI?.updateTitlebarButtons) {
      const symbolColor = theme === 'dark' ? '#ffffff' : '#000000'
      window.electronAPI.updateTitlebarButtons(symbolColor)
    }
  }, [theme])
  
  return null
}

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <ThemeSync />
    <App />
  </StrictMode>,
)