import { useState } from "react";
import { useNavigate, useParams } from "react-router-dom";
import { Image } from "@/components";
import { getBackgroundImage, getStaticImage } from "@/lib/utils";

const starName = "luxun";

const cityMap: Record<1 | 2 | 3 | 4 | 5, string> = {
  1: "luxun/reflection/scene1/绍兴",
  2: "luxun/reflection/scene1/北京",
  3: "luxun/reflection/scene1/厦门",
  4: "luxun/reflection/scene1/广州",
  5: "luxun/reflection/scene1/上海",
};

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

  return (
    <div
      className="flex justify-between w-full h-full bg-cover bg-center bg-no-repeat gap-8"
      style={{
        backgroundImage: getBackgroundImage(
          `${starName}/reflection/scene1/底图`
        ),
      }}
    >
      <Image
        className="absolute right-5 top-5"
        src={getStaticImage(`${starName}/reflection/scene1/离开`)}
        button
        onClick={() => {
          if (moduleName && starName) {
            navigate(`/${moduleName}/${starName}/home`);
          }
        }}
      />

      {/* 左侧 */}
      <div className="w-[45%] relative">
        <div className="absolute">
          <img
            className="absolute inset-0"
            src={getStaticImage(`${starName}/reflection/scene1/北京`)}
            alt=""
          />
          {/* 两个拖拽接收区域 */}
          <div className=""></div>
          <div className="border border-red-500"></div>
        </div>
        <div className="relative">
          <img
            className="absolute inset-0"
            src={getStaticImage(`${starName}/reflection/scene1/上海`)}
            alt=""
          />
        </div>
        <div>
          <img
            src={getStaticImage(`${starName}/reflection/scene1/绍兴`)}
            alt=""
          />
        </div>
        <div>
          <img
            src={getStaticImage(`${starName}/reflection/scene1/厦门`)}
            alt=""
          />
        </div>
        <div>
          <img
            src={getStaticImage(`${starName}/reflection/scene1/广州`)}
            alt=""
          />
        </div>
      </div>
      {/* 右侧 */}
      <div className="flex-1">
        {/* 任务进度 */}
        <div>
          <span className="text-white text-2xl font-bold [text-shadow:_6px_6px_4px_#b37921,_6px_6px_4px_#b37921,_6px_6px_4px_#b37921,_6px_6px_4px_#b37921]">
            任务进度：(0/8)
          </span>
        </div>
        {/* 鲁迅画廊-拖拽区域 */}
        <div></div>
        {/* 任务展示窗口 */}
        <div className="flex justify-between">
          <div>任务展示窗口</div>
          <div></div>
        </div>
      </div>
    </div>
  );
};

export default LuxunReflectionScene1;