import { StrictMode, useState, useEffect } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App'
import { initDB } from './db/db'
import { Loader2 } from 'lucide-react'

function AppWithDBInit() {
  const [isDBReady, setIsDBReady] = useState(false)
  const [dbError, setDbError] = useState<string | null>(null)

  useEffect(() => {
    console.log('[main.tsx] 开始初始化数据库...')
    initDB()
      .then(() => {
        console.log('[main.tsx] 数据库初始化成功')
        setIsDBReady(true)
      })
      .catch((err) => {
        console.error('[main.tsx] 数据库初始化失败:', err)
        setDbError('数据库初始化失败，请刷新页面重试')
      })
  }, [])

  if (!isDBReady) {
    return (
      <div className="min-h-screen bg-[#F9FAFB] dark:bg-gray-900 flex items-center justify-center">
        <div className="text-center">
          <Loader2 className="w-12 h-12 text-[#0066FF] animate-spin mx-auto mb-4" />
          <p className="text-gray-600 dark:text-gray-400">正在初始化...</p>
          {dbError && (
            <p className="text-red-500 mt-2">{dbError}</p>
          )}
        </div>
      </div>
    )
  }

  return <App />
}

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