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 { useChenyunStore, CHENYUN_LESSON_ID, CHENYUN_KEY } from '@/store/chenyunStore'

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 Chenyun = () => {
  const navigate = useNavigate()
  const { moduleName } = useParams<{
    moduleName: string
  }>()

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

  const lastVisitedPlace = useChenyunStore((state) => state.lastVisitedPlace)

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

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

        useChenyunStore.setState((prev) => ({
          ...prev,
          visitedExhibits: deserializeVisitedExhibits(data.visitedExhibits),
          isYinyuanSolved:
            data.isYinyuanSolved !== undefined ? data.isYinyuanSolved : prev.isYinyuanSolved,
          isMimianSolved:
            data.isMimianSolved !== undefined ? data.isMimianSolved : prev.isMimianSolved,
          lastVisitedPlace:
            data.lastVisitedPlace !== undefined ? data.lastVisitedPlace : prev.lastVisitedPlace,
        }))
      } catch (error) {
        console.error('Failed to load Chenyun 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}/reflection`)}
        />
        {/* 内化 */}
        <Image
          button
          src={getStaticImage('star/三-解锁')}
          onClick={() => navigate(`/${moduleName}/${starName}/internalization`)}
        />
      </div>
    </div>
  )
}

export default Chenyun