import { useState, useEffect } from "react";
import { cn } from "@/lib/utils";

export interface NarrationProps {
  /** 旁白文本 */
  text: string;
  /** 是否可见 */
  visible: boolean;
  /** 关闭回调 */
  onClose: () => void;
  /** 语音播报的音频文件路径（可选） */
  audioSrc?: string;
  /** 自定义样式类名 */
  className?: string;
  /** 是否启用逐字动画，默认 true */
  enableAnimation?: boolean;
  /** 文字动画速度（毫秒/字），默认 100ms */
  animationSpeed?: number;
}

/**
 * Narration - 旁白组件
 *
 * 功能：
 * - 文字逐字显示动画
 * - 可选语音播报
 * - 关闭按钮
 */
const Narration = ({
  text,
  visible,
  onClose,
  audioSrc,
  className,
  enableAnimation = true,
  animationSpeed = 100,
}: NarrationProps) => {
  const [displayedText, setDisplayedText] = useState("");
  const [isAnimating, setIsAnimating] = useState(true);
  const [audio, setAudio] = useState<HTMLAudioElement | null>(null);
  const [isSkipped, setIsSkipped] = useState(false);

  // 文字动画效果
  useEffect(() => {
    if (!visible) {
      setDisplayedText("");
      setIsAnimating(true);
      setIsSkipped(false);
      return;
    }

    // 如果已经跳过，不再执行动画
    if (isSkipped) {
      return;
    }

    // 如果不启用动画，直接显示全部文本
    if (!enableAnimation) {
      setDisplayedText(text);
      setIsAnimating(false);
      return;
    }

    let currentIndex = 0;
    setDisplayedText("");
    setIsAnimating(true);

    const timer = setInterval(() => {
      if (currentIndex < text.length) {
        setDisplayedText(text.slice(0, currentIndex + 1));
        currentIndex++;
      } else {
        setIsAnimating(false);
        clearInterval(timer);
      }
    }, animationSpeed);

    return () => clearInterval(timer);
  }, [text, visible, enableAnimation, animationSpeed, isSkipped]);

  // 跳过动画
  const handleSkip = () => {
    setDisplayedText(text);
    setIsAnimating(false);
    setIsSkipped(true);
  };

  // 语音播报
  useEffect(() => {
    if (!visible || !audioSrc) return;

    const audioElement = new Audio(audioSrc);
    audioElement.play().catch((error) => {
      console.warn("Audio playback failed:", error);
    });
    setAudio(audioElement);

    return () => {
      audioElement.pause();
      audioElement.currentTime = 0;
    };
  }, [visible, audioSrc]);

  // 停止音频
  const handleClose = () => {
    if (audio) {
      audio.pause();
      audio.currentTime = 0;
    }
    onClose();
  };

  if (!visible) return null;

  return (
    <div className="fixed inset-0 flex items-center justify-center bg-black/80 z-50">
      <div
        className={cn(
          "w-[1600px] bg-black/90 rounded-[32px] px-20 py-16",
          "shadow-[0_20px_60px_rgba(240,190,117,0.8)] border-4 border-[#d4c5a9]",
          "relative",
          className
        )}
      >
        {/* 跳过按钮 - 只在动画进行中显示 */}
        {isAnimating && enableAnimation && (
          <button
            onClick={handleSkip}
            className="absolute top-8 right-8 px-6 py-2 rounded-full bg-black/60 text-white text-xl backdrop-blur-sm border border-white/30 hover:bg-black/75 transition-colors"
          >
            跳过
          </button>
        )}

        <div className="text-white text-3xl leading-relaxed space-y-8">
          <p className="whitespace-pre-wrap">{displayedText}</p>
        </div>

        {/* 关闭按钮 - 只在动画完成后显示 */}
        {!isAnimating && (
          <div className="flex justify-center mt-14">
            <button
              onClick={handleClose}
              className="px-12 py-2 bg-gradient-to-br from-[#d4c5a9] to-[#b8a88a] text-[#4e402e] text-3xl font-bold rounded-full border-3 border-[#8B7355] shadow-lg hover:scale-105 transition-transform"
            >
              已知晓
            </button>
          </div>
        )}
      </div>
    </div>
  );
};

export default Narration;