interface VoiceWaveAnimationProps {
  className?: string
  animated?: boolean
  barCount?: number
}

export function VoiceWaveAnimation({
  className = '',
  animated = false,
  barCount = 40,
}: VoiceWaveAnimationProps) {
  // 预设的声波高度模式，模拟真实的声波纹理
  const wavePattern = [
    0.2, 0.4, 0.6, 0.8, 0.9, 1.0, 0.8, 0.6, 0.4, 0.7, 0.9, 1.0, 0.8, 0.5, 0.3, 0.6, 0.8, 0.9, 0.7,
    0.4, 0.2, 0.5, 0.8, 0.6,
  ]

  // 生成不同高度的声波条
  const generateBars = () => {
    const bars = []
    const centerIndex = (barCount - 1) / 2

    for (let i = 0; i < barCount; i++) {
      // 计算距离中心的距离（0-1，中心为0，两边为1）
      const distanceFromCenter = Math.abs(i - centerIndex) / centerIndex

      // 使用预设模式，但要考虑从中心向外的扩散效果
      const patternIndex = i % wavePattern.length
      let baseHeight

      if (animated) {
        // 动画时：中心高度更高，向两边递减
        const centerBoost = 1 - distanceFromCenter * 0.4 // 中心比两边高40%
        baseHeight = wavePattern[patternIndex] * centerBoost
      } else {
        // 停止时统一高度
        baseHeight = 0.15
      }

      // 动画延迟：从中心向外扩散
      const delay = distanceFromCenter * 0.3 // 延迟时间从0到0.3秒

      // 计算每个条在整体渐变中的位置（从左到右 0-1）
      const position = i / (barCount - 1)

      // 计算渐变颜色：左右灰色，中间白色
      // 使用二次函数让中间更白，两边更灰
      const intensity = 1 - Math.pow((position - 0.5) * 2, 2)
      const grayValue = Math.floor(100 + intensity * 155) // 100-255 之间
      const color = `rgb(${grayValue}, ${grayValue}, ${grayValue})`

      bars.push(
        <div
          key={i}
          className={`w-[3px] rounded-full transition-all duration-300 ${
            animated ? 'animate-voice-wave-ripple' : ''
          }`}
          style={{
            height: `${baseHeight * 32}px`,
            minHeight: '4px',
            backgroundColor: color,
            animationDelay: animated ? `${delay}s` : undefined,
            animationDuration: animated ? `${1.2 + Math.random() * 0.6}s` : undefined,
          }}
        />
      )
    }
    return bars
  }

  return (
    <div className={`flex items-center justify-center gap-[4px] ${className}`}>
      {generateBars()}
    </div>
  )
}
