shanghai-residences/src/components/overlay/EndingOverlay.tsx

import { useEffect, useState } from 'react'
import { getStaticImage } from '@/lib/utils'
import { useAudioManager } from '@/hooks/useAudioManager'

export interface EndingOverlayProps {
  /** 是否可见 */
  visible: boolean
  /** 中间显示的文本内容 */
  text: string
  /** 点击继续回调 */
  onContinue: () => void
  /** 文字动画速度（毫秒/字），默认 60ms */
  animationSpeed?: number
  /** 结语对应的音频地址（可选） */
  audioSrc?: string
  /** 覆盖层出现时是否自动播放音频（默认 true） */
  autoPlayAudio?: boolean
  /** 音频分组 id，相同 channel 内互斥，不同 channel 可同时播放；不传则全局互斥 */
  audioChannelId?: string
}

/**
 * 反思模块统一的结语覆盖层
 * 使用 components/overlay/bg 作为背景
 */
export const EndingOverlay = ({
  visible,
  text,
  onContinue,
  animationSpeed = 60,
  audioSrc,
  autoPlayAudio = true,
  audioChannelId,
}: EndingOverlayProps) => {
  const [displayedText, setDisplayedText] = useState('')
  const [isAnimating, setIsAnimating] = useState(false)

  // 结语音频：默认自动播放，支持按 channel 分组互斥
  const { currentSrc, isPlaying, play, stop } = useAudioManager(
    audioChannelId
      ? {
          mode: 'channel',
          channelId: audioChannelId,
        }
      : { mode: 'global' }
  )

  // 文字逐字动画
  useEffect(() => {
    if (!visible) {
      setDisplayedText('')
      setIsAnimating(false)
      // 结语关闭时，如果当前正在播放该结语音频，则停止
      if (audioSrc && currentSrc === audioSrc) {
        stop()
      }
      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)
  }, [visible, text, animationSpeed, audioSrc, currentSrc, stop])

  // 覆盖层显示时自动播放音频
  useEffect(() => {
    if (!visible) return
    if (!autoPlayAudio) return
    if (!audioSrc) return

    play(audioSrc)
  }, [visible, autoPlayAudio, audioSrc, play])

  // 全部文字出现后自动关闭（如果有音频，需等待音频播放完成）
  useEffect(() => {
    if (!visible) return
    if (isAnimating) return
    if (!text || displayedText !== text) return

    // 如果有音频，需要等待音频播放完成
    if (audioSrc) {
      // 检查当前播放的音频是否是我们期望的音频，且已播放完成
      if (currentSrc === audioSrc && !isPlaying) {
        // 音频播放完成后，等待 800ms 再关闭
        const timer = setTimeout(() => {
          onContinue()
        }, 800)
        return () => clearTimeout(timer)
      }
      // 音频还在播放，等待播放完成
      return
    }

    // 没有音频，文字动画完成后等待 800ms 关闭
    const timer = setTimeout(() => {
      onContinue()
    }, 800)

    return () => clearTimeout(timer)
  }, [visible, isAnimating, displayedText, text, audioSrc, currentSrc, isPlaying, onContinue])

  if (!visible) return null

  return (
    <div className="fixed inset-0 z-[10000] flex items-center justify-center bg-transparent">
      {/* 文本内容层 */}
      <div
        className="relative z-10 flex items-center max-w-full transition-all py-50 px-24 h-[825px] bg-cover bg-center bg-no-repeat"
        style={{
          backgroundImage: `url(${getStaticImage('components/overlay/bg')})`,
        }}
      >
        <div className="text-4xl leading-relaxed text-[#7b3f00] font-semibold tracking-wide">
          {displayedText}
        </div>

        {/* 底部渐隐提示条，仅做视觉平衡 */}
        {/* <div className="mt-16 h-4 w-full bg-gradient-to-r from-transparent via-[rgba(0,0,0,0.35)] to-transparent rounded-full" /> */}
      </div>
    </div>
  )
}