import { useEffect } from 'react'
import { getBackgroundImage, getStaticImage } from '@/lib/utils'
import { useNavigate, useParams } from 'react-router-dom'
import { Image } from '@/components'
import { getUserDefine } from '@/lib/utils/api-common'
import { useLuxunStore, LUXUN_LESSON_ID, LUXUN_KEY } from '@/store/luxunStore'

const deserializeVisitedExhibits = (
  data: Record<string, number[]> | undefined
): Record<string, Set<number>> => {
  if (!data || typeof data !== 'object') return {}
  const visitedExhibits: Record<string, Set<number>> = {}
  for (const [place, exhibits] of Object.entries(data)) {
    visitedExhibits[place] = new Set(Array.isArray(exhibits) ? exhibits : [])
  }
  return visitedExhibits
}

const Luxun = () => {
  const navigate = useNavigate()
  const { moduleName } = useParams<{
    moduleName: string
  }>()

  // starName 固定为 luxun
  const starName = 'luxun'

  const lastVisitedPlace = useLuxunStore((state) => state.lastVisitedPlace)
  const reflectionRoute = useLuxunStore((state) => state.reflectionRoute)

  useEffect(() => {
    ;(async () => {
      try {
        const raw = await getUserDefine(LUXUN_LESSON_ID, LUXUN_KEY)
        if (!raw) return

        const data = JSON.parse(raw) as {
          visitedExhibits?: Record<string, number[]>
          lastVisitedPlace?: string | null
          reflectionRoute?: string
        }

        useLuxunStore.setState((prev) => ({
          ...prev,
          visitedExhibits: deserializeVisitedExhibits(data.visitedExhibits),
          lastVisitedPlace:
            data.lastVisitedPlace !== undefined ? data.lastVisitedPlace : prev.lastVisitedPlace,
          reflectionRoute:
            data.reflectionRoute &&
            ['reflection', 'reflection2', 'reflection3'].includes(data.reflectionRoute)
              ? data.reflectionRoute
              : (prev.reflectionRoute ?? 'reflection'),
        }))
      } catch (error) {
        console.error('Failed to load Luxun store', error)
      }
    })()
  }, [])

  if (!moduleName) {
    return null
  }

  return (
    <div
      className="w-full h-full bg-cover bg-center bg-no-repeat"
      style={{
        backgroundImage: getBackgroundImage(`${starName}/首页`),
      }}
    >
      <Image
        className="absolute right-37 top-22"
        src={getStaticImage('components/革命先驱故居-返回')}
        button
        onClick={() => navigate(`/entrance/${moduleName}`)}
      />

      <div className="absolute right-20 top-75 flex flex-col space-y-10">
        {/* 对话 */}
        <Image
          button
          src={getStaticImage('star/一-解锁')}
          onClick={() => navigate(`/${moduleName}/${starName}/${lastVisitedPlace || 'place1'}`)}
        />
        {/* 体悟 */}
        <Image
          button
          src={getStaticImage('star/二-解锁')}
          onClick={() => navigate(`/${moduleName}/${starName}/${reflectionRoute || 'reflection'}`)}
        />
        {/* 内化 */}
        <Image
          button
          src={getStaticImage('star/三-解锁')}
          onClick={() => navigate(`/${moduleName}/${starName}/internalization`)}
        />
      </div>
    </div>
  )
}

export default Luxun