import { useState } from 'react'
import { getBackgroundImage, getStaticImage } from '@/lib/utils'
import { Image, PuzzleSystem } from '@/components'
import { useNavigate } from 'react-router-dom'
import MenuPuzzleCenter from '@/components/puzzle/MenuPuzzleCenter'
import { DEFAULT_PUZZLE_RESIDENCE } from '@/config/puzzleResidences'

const Menu = () => {
  const navigate = useNavigate()
  const [isPuzzleCenterVisible, setIsPuzzleCenterVisible] = useState(false)
  const [activeResidence, setActiveResidence] = useState<string | null>(null)

  /**
   * 类型：1：革命先驱、文化民人、艺术名家、经济巨擘
   */
  const Category = [
    {
      id: 1,
      name: '革命先驱',
      moduleName: 'revolutionary',
      image: 'menu/模块-革命先驱',
    },
    {
      id: 2,
      name: '文教名人',
      moduleName: 'cultural',
      image: 'menu/模块-文教名人',
    },
    {
      id: 3,
      name: '艺术名家',
      moduleName: 'artistic',
      image: 'menu/模块-艺术名家',
    },
    {
      id: 4,
      name: '经济巨擘',
      moduleName: 'economic',
      image: 'menu/模块-经济巨擘',
    },
  ]

  return (
    <div
      className="w-full h-full bg-cover bg-center bg-no-repeat"
      style={{ backgroundImage: getBackgroundImage('menu/故居入口页底图') }}
    >
      <Image
        className="absolute top-10 left-10"
        src={getStaticImage('menu/首页-返回')}
        button
        onClick={() => navigate('/')}
      />

      {/* 左下角碎片盒按钮 - 进入拼图系统 */}
      <div className="absolute left-4 bottom-4 z-10 cursor-pointer">
        <Image
          src={getStaticImage('components/拼图盒')}
          button
          onClick={() => setActiveResidence(DEFAULT_PUZZLE_RESIDENCE)}
        />
      </div>

      {/* 顶层碎片管理中心：查看故居导图与进度 */}
      <MenuPuzzleCenter
        visible={isPuzzleCenterVisible}
        onClose={() => setIsPuzzleCenterVisible(false)}
        onSelectResidence={(residence) => {
          setActiveResidence(residence)
          setIsPuzzleCenterVisible(false)
        }}
        allowPuzzleEntry={false}
      />

      {/* 进入具体故居的拼图系统（与故居页面一致的 PuzzleSystem） */}
      {activeResidence && (
        <PuzzleSystem
          visible={!!activeResidence}
          onClose={() => setActiveResidence(null)}
          residence={activeResidence}
          showResidenceNav
          onResidenceChange={setActiveResidence}
        />
      )}

      <div className="absolute left-40 top-70 inline-grid grid-cols-2 gap-x-20 gap-y-10">
        {Category.map((item) => (
          <div
            className="relative w-[241px] h-[282px] bg-cover bg-center bg-no-repeat hover:brightness-110 hover:scale-105 transition-all cursor-pointer"
            style={{ backgroundImage: getBackgroundImage('menu/模块-通用') }}
            key={item.id}
            onClick={() => navigate(`/entrance/${encodeURIComponent(item.moduleName)}`)}
          >
            <div className="absolute top-15 flex flex-col  items-center">
              <Image key={item.id} src={getStaticImage(item.image)} />

              <div className="relative mt-23">
                <Image className="absolute bottom-5" src={getStaticImage('menu/未看完')} />
                <Image src={getStaticImage('menu/未探索')} />
              </div>
            </div>
          </div>
        ))}
      </div>

      {/* 学习地图 */}
      <Image className="absolute bottom-100 right-60" src={getStaticImage('menu/学习地图')} />
      <div className="absolute bottom-50 right-57">
        <div className="relative">
          <Image
            src={getStaticImage('menu/导航地图')}
            button
            onClick={() => setIsPuzzleCenterVisible(true)}
          />
        </div>
      </div>
    </div>
  )
}

export default Menu