import { RouterProvider } from 'react-router-dom'
import { Suspense, useEffect } from 'react'
import router from './router'
import { ScaleProvider, useScale } from './contexts/ScaleContext'
import { RotateHint } from './components/RotateHint'
import { HintHost } from './components'
import { useUserStore } from './store'
import { getUserDefine } from '@/lib/utils/api-common'
import {
  usePuzzleStore,
  deserializePuzzles,
  PUZZLE_LESSON_ID,
  PUZZLE_KEY,
} from '@/store/puzzleStore'

/**
 * 应用内容组件
 * 使用 useScale 获取缩放样式
 */
function AppContent() {
  const { scaleStyle } = useScale()
  const setCourseInfo = useUserStore((state) => state.setCourseInfo)

  useEffect(() => {
    const params = new URLSearchParams(window.location.search)
    const courseId = params.get('courseid')
    const uid = params.get('uid')

    if (courseId || uid) {
      setCourseInfo({
        courseId: courseId ?? null,
        uid: uid ?? null,
      })
    }
  }, [setCourseInfo])

  useEffect(() => {
    ;(async () => {
      try {
        const raw = await getUserDefine(PUZZLE_LESSON_ID, PUZZLE_KEY)
        if (!raw) return
        const data = JSON.parse(raw) as { puzzles?: Record<string, number[]> }
        if (data.puzzles) {
          usePuzzleStore.setState((prev) => ({
            ...prev,
            puzzles: deserializePuzzles(data.puzzles),
          }))
        }
      } catch (e) {
        console.error('Failed to load puzzle store', e)
      }
    })()
  }, [])

  return (
    <>
      <div className="relative w-screen h-screen overflow-hidden">
        <div
          style={{
            ...scaleStyle,
            overflow: 'hidden',
          }}
        >
          <Suspense fallback={<div>Loading...</div>}>
            <RouterProvider router={router} />
            <HintHost />
          </Suspense>
        </div>
      </div>
      <RotateHint />
    </>
  )
}

/**
 * 应用根组件
 * ScaleProvider 自动处理所有缩放逻辑
 */
function App() {
  return (
    <ScaleProvider>
      <AppContent />
    </ScaleProvider>
  )
}

export default App