import { getBackgroundImage, getStaticImage } from '@/lib/utils'
import { Image } from '@/components'
import { useNavigate, useParams } from 'react-router-dom'
import { useRongdeshengStore } from '@/store/rongdeshengStore'

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

  // starName 固定为 rongdesheng
  const starName = 'rongdesheng'
  const lastVisitedPlace = useRongdeshengStore((s) => s.lastVisitedPlace)

  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 RongdeshengHome