import { useEffect } from 'react'
import { getBackgroundImage, getStaticImage } from '@/lib/utils'
import { useNavigate, useParams } from 'react-router-dom'
import { Image } from '@/components'
import { usePuzzleStore } from '@/store/puzzleStore'
import { getResidenceStageUnlocks, isResidenceUnlocked } from '@/config/progression'
import { useMaozedongStore } from '@/store/maozedongStore'

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

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

  const lastVisitedPlace = useMaozedongStore((state) => state.lastVisitedPlace)
  const puzzles = usePuzzleStore((state) => state.puzzles)
  const isLoaded = usePuzzleStore((state) => state.isLoaded)
  const { dialogueUnlocked, reflectionUnlocked, internalizationUnlocked } =
    getResidenceStageUnlocks(starName, puzzles)

  useEffect(() => {
    if (isLoaded && !isResidenceUnlocked(starName, puzzles)) {
      navigate('/menu', { replace: true })
    }
  }, [isLoaded, navigate, puzzles, starName])

  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/revolutionary`)}
      />

      <div className="absolute right-20 top-75 flex flex-col space-y-10">
        <Image
          button={dialogueUnlocked}
          className={dialogueUnlocked ? undefined : 'opacity-50 grayscale cursor-not-allowed'}
          src={getStaticImage('star/一-解锁')}
          onClick={() => {
            if (!dialogueUnlocked) return
            navigate(`/${moduleName}/${starName}/${lastVisitedPlace || 'place1'}`)
          }}
        />
        <Image
          button={reflectionUnlocked}
          className={reflectionUnlocked ? undefined : 'opacity-50 grayscale cursor-not-allowed'}
          src={getStaticImage('star/二-解锁')}
          onClick={() => {
            if (!reflectionUnlocked) return
            navigate(`/${moduleName}/${starName}/reflection`)
          }}
        />
        <Image
          button={internalizationUnlocked}
          className={
            internalizationUnlocked ? undefined : 'opacity-50 grayscale cursor-not-allowed'
          }
          src={getStaticImage('star/三-解锁')}
          onClick={() => {
            if (!internalizationUnlocked) return
            navigate(`/${moduleName}/${starName}/internalization`)
          }}
        />
      </div>
    </div>
  )
}

export default Maozedong