import { useState, useEffect } from "react";
import { motion } from "framer-motion";
import { Image } from "@/components";
import { getStaticImage } from "@/lib/utils";
import { DialogueClueData } from "./types";

export interface DialogueContentProps {
  /** 对话线索数据 */
  clue: DialogueClueData;
}

/**
 * 对话内容组件
 * 依次显示多条对话，所有对话同时展示，带有动画效果
 */
const DialogueContent = ({ clue }: DialogueContentProps) => {
  const [visibleIndices, setVisibleIndices] = useState<number[]>([]);

  // 依次显示对话：先显示第一条，延迟后显示第二条
  useEffect(() => {
    if (clue.dialogues.length === 0) return;

    // 立即显示第一条对话
    setVisibleIndices([0]);

    // 延迟显示后续对话
    if (clue.dialogues.length > 1) {
      const timer = setTimeout(() => {
        setVisibleIndices((prev) => [...prev, 1]);
      }, 1500); // 第一条显示1.5秒后显示第二条

      return () => clearTimeout(timer);
    }
  }, [clue.dialogues.length]);

  return (
    <div className="w-full h-full flex flex-col items-center gap-30 relative px-10">
      {clue.dialogues.map((dialogue, index) => {
        const isVisible = visibleIndices.includes(index);

        return (
          <motion.div
            key={index}
            initial={{ opacity: 0, y: 30, scale: 0.95 }}
            animate={
              isVisible
                ? { opacity: 1, y: 0, scale: 1 }
                : { opacity: 0, y: 30, scale: 0.95 }
            }
            transition={{
              duration: 0.6,
              ease: [0.16, 1, 0.3, 1], // 自定义缓动函数，更流畅
            }}
            className="flex items-center gap-8 w-full max-w-7xl"
          >
            {/* 角色头像 */}
            {dialogue.avatar && (
              <motion.div
                initial={{ opacity: 0, x: -20 }}
                animate={
                  isVisible ? { opacity: 1, x: 0 } : { opacity: 0, x: -20 }
                }
                transition={{
                  duration: 0.5,
                  delay: 0.1,
                  ease: "easeOut",
                }}
                className="flex-shrink-0 flex flex-col items-center"
              >
                <Image
                  src={getStaticImage(dialogue.avatar)}
                  className="w-60 h-60 object-contain"
                  alt={dialogue.character}
                />
                <motion.div
                  initial={{ opacity: 0, y: 10 }}
                  animate={
                    isVisible ? { opacity: 1, y: 0 } : { opacity: 0, y: 10 }
                  }
                  transition={{
                    duration: 0.4,
                    delay: 0.3,
                    ease: "easeOut",
                  }}
                  className="mt-3 px-5 py-2 bg-gray-800/90 rounded-lg"
                >
                  <span className="text-white text-base font-medium">
                    {dialogue.character}
                  </span>
                </motion.div>
              </motion.div>
            )}

            {/* 对话气泡 */}
            <motion.div
              initial={{ opacity: 0, x: 20 }}
              animate={isVisible ? { opacity: 1, x: 0 } : { opacity: 0, x: 20 }}
              transition={{
                duration: 0.5,
                delay: 0.2,
                ease: "easeOut",
              }}
              className="flex-1 relative"
            >
              <div className="bg-gray-800/95 rounded-3xl px-20 py-8 shadow-2xl">
                <motion.div
                  initial={{ opacity: 0 }}
                  animate={isVisible ? { opacity: 1 } : { opacity: 0 }}
                  transition={{
                    duration: 0.4,
                    delay: 0.4,
                  }}
                  className="text-white text-4xl leading-relaxed"
                >
                  {dialogue.text}
                </motion.div>
              </div>
              {/* 对话气泡箭头 - 指向左侧头像 */}
              <div className="absolute left-0 top-1/2 -translate-y-1/2 -translate-x-3">
                <div className="w-0 h-0 border-t-[12px] border-t-transparent border-r-[12px] border-r-gray-800/95 border-b-[12px] border-b-transparent" />
              </div>
            </motion.div>
          </motion.div>
        );
      })}
    </div>
  );
};

export default DialogueContent;