import React from 'react'
import ReactDOM from 'react-dom/client'
import { MantineProvider } from '@mantine/core'
import { Notifications } from '@mantine/notifications'
import '@mantine/core/styles.css'
import '@mantine/notifications/styles.css'
import '@mantine/dates/styles.css'
import App from './App'
import 'animate.css'
import '@maotu/ui/styles/base'
import '@maotu/ui/styles/ticket'
import '@/styles/index.scss'
import '@/styles/tailwind.css'
import { getMaoTuConfig, setConfig, getConfig, setupSafariViewportRepaintFix } from '@maotu/shared'
import { mergeServerConfigCFromApi } from '@maotu/shared/common'
import { setupGlobalUnhandledRejection, initClientMonitoring } from '@maotu/shared/common'
import { ErrorBoundary } from '@maotu/shared/react'
import { setupStore, usePreferencesStore, syncConfigToStore } from '@maotu/core/store'
import { setupI18n } from '@maotu/i18n'
import { setupRouter } from './router'
import { getClientConfigForC } from '@maotu/api'

const root = ReactDOM.createRoot(document.getElementById('root')!)

// 创建响应主题变化的 MantineProvider 包装组件
const ThemedMantineProvider: React.FC<{ router: any }> = ({ router }) => {
  const isDark = usePreferencesStore((state) => state.isDark)

  // 动态更新 Mantine 主题和 DOM 属性
  React.useEffect(() => {
    const html = document.documentElement
    if (isDark) {
      html.classList.add('dark')
      html.setAttribute('data-mantine-color-scheme', 'dark')
      html.setAttribute('data-prefers-color-scheme', 'dark')
    } else {
      html.classList.remove('dark')
      html.setAttribute('data-mantine-color-scheme', 'light')
      html.setAttribute('data-prefers-color-scheme', 'light')
    }
  }, [isDark])

  return (
    <MantineProvider>
      <Notifications position="bottom-center" containerWidth={400} zIndex={10050} />
      <App router={router} />
    </MantineProvider>
  )
}

// 拉取服务端 C 端配置，并合并到全局 config 中
const loadServerConfigForC = async () => {
  try {
    const res = await getClientConfigForC()
    if (res && res.code === 200 && res.data) {
      const serverConfigC = mergeServerConfigCFromApi(res.data)
      setConfig({
        ...getConfig(),
        serverConfigC,
      })
    }
  } catch (error) {
    console.error('加载 C 端服务端配置失败:', error)
  }
}

// 注册子应用
getMaoTuConfig().then(async () => {
  // setupSafariViewportRepaintFix('root')

  // 拉取服务端 C 端配置
  await loadServerConfigForC()

  // 初始化 store
  setupStore()

  await initClientMonitoring({
    dsn: import.meta.env.VITE_SENTRY_DSN,
    environment: import.meta.env.MODE,
  })
  
  // 从配置文件同步更新 store 的初始值
  syncConfigToStore()
  
  // 初始化主题（在渲染前应用）
  const preferencesStore = usePreferencesStore.getState()
  const htmlElement = document.documentElement
  if (preferencesStore.isDark) {
    htmlElement.classList.add('dark')
    htmlElement.setAttribute('data-mantine-color-scheme', 'dark')
    htmlElement.setAttribute('data-prefers-color-scheme', 'dark')
  } else {
    htmlElement.classList.remove('dark')
    htmlElement.setAttribute('data-mantine-color-scheme', 'light')
    htmlElement.setAttribute('data-prefers-color-scheme', 'light')
  }
  
  // 初始化 i18n
  setupI18n()

  setupGlobalUnhandledRejection()

  // 设置路由
  const router = setupRouter()

  root.render(
    // <React.StrictMode>
      <ErrorBoundary>
        <ThemedMantineProvider router={router} />
      </ErrorBoundary>
    // </React.StrictMode>
  )

})