import { useNavigate } from "react-router-dom";
import { BackgroundImage, Image, Alert } from "@/components";
import { getStaticImage } from "@/utils";
import { useState } from "react";
import { IframeModal } from "@/components/Modal";

/**
 * 卢航-未选中.png
 * 龚丹-未选中.png
 * 曹君-未选中.png
 */
const teachers = [
  {
    id: 1,
    name: "卢航",
    avatar: getStaticImage("menu/卢航-未选中.png"),
    selectedAvatar: getStaticImage("menu/卢航-选中.png"),
    position: {
      top: "20%",
      left: "12%",
    },
  },
  {
    id: 2,
    name: "曹君",
    avatar: getStaticImage("menu/曹君-未选中.png"),
    selectedAvatar: getStaticImage("menu/名师曹君选中.png"),
    position: {
      top: "10%",
      left: "39%",
    },
  },
  {
    id: 3,
    name: "龚丹",
    avatar: getStaticImage("menu/龚丹-未选中.png"),
    selectedAvatar: getStaticImage("menu/龚丹-选中.png"),
    position: {
      top: "20%",
      left: "65%",
    },
  },
];

export default function Home() {
  const navigate = useNavigate();
  const [selectedTeacherId, setSelectedTeacherId] = useState(0);
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [showTipModal, setShowTipModal] = useState(false);

  const handleSelectTeacher = (teacherId: number) => {
    if (teacherId !== 2) {
      // 点击卢航或龚丹时显示提示
      setShowTipModal(true);
      return;
    }
    setSelectedTeacherId(teacherId);
    navigate("/Publicity");
  };

  const handleStartExperiment = () => {
    console.log("点击开启实验");
    // navigate("/experiment");
  };

  const handleAvatarClick = () => {
    setIsModalOpen(true);
  };

  const handleCloseModal = () => {
    setIsModalOpen(false);
  };

  return (
    <BackgroundImage
      src={getStaticImage("menu/首页背景.png")}
      className="h-full w-full relative"
      backgroundSize="cover"
      backgroundPosition="center"
    >
      <Image
        src={getStaticImage("components/按钮-返回.png")}
        alt="返回"
        button
        className="absolute top-0 right-0"
        onClick={() => navigate("/")}
      />

      <Image
        src={getStaticImage("menu/内页居中标题.png")}
        alt="文字"
        className="absolute bottom-0 left-1/2 transform -translate-x-1/2"
      />

      {/* 数字人头像 */}
      {!isModalOpen && (
        <>
          <div
            className="flex flex-col items-center absolute right-4 bottom-2 cursor-pointer hover:scale-105 transition-all duration-300 z-20"
            onClick={handleAvatarClick}
          >
            <Image
              src={getStaticImage("publicity/数字人-头像框.png")}
              alt="数字人头像"
            />
            <span className="text-white text-2xl font-bold tracking-wide">
              点击我随时为你解答
            </span>
          </div>
        </>
      )}

      {/* 嵌入式客服对话框 */}
      <IframeModal
        isOpen={isModalOpen}
        onClose={handleCloseModal}
        url="https://www.edutech.host/digitalHuman/"
        title="数字人助手"
        mode="embedded"
        position="bottom-right"
        width="420px"
        height="650px"
      />

      {/* 提示弹窗 */}
      <Alert
        isOpen={showTipModal}
        onClose={() => setShowTipModal(false)}
        message="该名师工作室数字睿教正在筹划中"
        type="warning"
      />

      <BackgroundImage
        src={getStaticImage("menu/转盘合.png")}
        className="absolute w-full h-500 -bottom-1/5 left-0"
        backgroundSize="cover"
        backgroundPosition="center"
      >
        {teachers.map((teacher) => (
          <>
            <Image
              key={teacher.id}
              src={
                selectedTeacherId === teacher.id
                  ? teacher.selectedAvatar
                  : teacher.avatar
              }
              alt={teacher.name}
              onClick={() => handleSelectTeacher(teacher.id)}
              className="absolute"
              style={{
                top:
                  selectedTeacherId === teacher.id
                    ? "4%"
                    : teacher.position.top,
                left:
                  selectedTeacherId === teacher.id
                    ? "36%"
                    : teacher.position.left,
                transition: "transform 0.2s ease, z-index 0.2s ease",
              }}
              button={selectedTeacherId !== teacher.id}
            />

            {/* <div className="absolute top-[25%] left-[12%] text-gray-500 text-3xl font-bold cursor-not-allowed">
              该名师工作室数字睿教正在筹划中
            </div>
            <div className="absolute top-[25%] left-[65%] text-gray-500 text-3xl font-bold  cursor-not-allowed">
              该名师工作室数字睿教正在筹划中
            </div> */}
          </>
        ))}
      </BackgroundImage>
    </BackgroundImage>
  );
}