'use client'

import { useState } from 'react'
import { VoiceWaveAnimation } from '@/components/ui/voice-wave-animation'

export default function TestVoiceWavePage() {
  const [animationEnabled, setAnimationEnabled] = useState(true)

  // 不同的声波条数量配置
  const barCountConfigs = [
    {
      name: '简约风格',
      count: 12,
      description: '适合小尺寸显示，简洁明了',
    },
    {
      name: '标准风格',
      count: 20,
      description: '平衡的视觉效果，推荐使用',
    },
    {
      name: '丰富风格',
      count: 32,
      description: '密集的声波效果，适合大尺寸显示',
    },
  ]

  return (
    <div className="min-h-screen bg-gray-900 p-8 text-white">
      <div className="mx-auto max-w-6xl">
        <h1 className="mb-8 text-center text-3xl font-bold">
          Voice ripple animation effect display
        </h1>

        {/* 效果说明 */}
        <div className="mb-8 rounded-lg bg-gray-800 p-6">
          <h2 className="mb-4 text-xl font-semibold">Technology implementation note</h2>
          <div className="space-y-2 text-gray-300">
            <p>
              <strong>✅ Implemented using pure CSS: ✅ Implemented using pure CSS:</strong>
              Excellent performance, GPU acceleration, small file size
            </p>
            <p>
              <strong>🎨 整体渐变：</strong>Overall gradual change from left to right (gray → white
              → gray)
            </p>
            <p>
              <strong>🌊 涟漪扩散：</strong>Sound waves spread from the center to both sides,
              simulating real audio transmission
            </p>
            <p>
              <strong>⏸️ Stop state: ⏸️ Stop state:</strong>动画停止时所有声波条统一为短高度
            </p>
            <p>
              <strong>🔄 平滑过渡：</strong>Use CSS transitions to smooth transitions when animation
              starts/stops Use CSS transitions to smooth transitions when animation starts/stops
            </p>
          </div>
        </div>

        {/* 动画控制 */}
        <div className="mb-8 flex justify-center">
          <button
            onClick={() => setAnimationEnabled(!animationEnabled)}
            className={`rounded-lg px-6 py-3 font-medium transition-all ${
              animationEnabled
                ? 'bg-green-600 shadow-lg shadow-green-600/30 hover:bg-green-700'
                : 'bg-gray-600 hover:bg-gray-700'
            }`}
          >
            {animationEnabled ? '🎵 动画已开启' : '⏸️ 动画已关闭'}
          </button>
        </div>

        {/* 主要展示区域 */}
        <div className="mb-12">
          <h2 className="mb-6 text-center text-2xl font-semibold">
            Voice ripple effect (gradual change from gray to white)
          </h2>
          <div className="rounded-lg bg-gray-800 p-8">
            <div className="flex justify-center">
              <VoiceWaveAnimation animated={animationEnabled} barCount={32} className="h-32 w-96" />
            </div>
            <div className="mt-4 text-center text-gray-400">
              <p className="mb-2">
                {animationEnabled
                  ? '🎵 动画播放中 - 声波从中心向两边扩散'
                  : '⏸️ 动画已停止 - 统一短高度'}
              </p>
              <p className="text-sm">
                From left to right: gray → white → gray overall gradient effect From left to right:
                gray → white → gray overall gradient effect From left to right: gray → white → gray
                overall gradient effect From left to right: gray → white → gray overall gradient
                effect From left to right: gray → white → gray overall gradient effect
              </p>
              <p className="text-sm">
                Ripple effect: center audio is stronger, gradually fading to either side
              </p>
            </div>
          </div>
        </div>

        {/* 不同参数展示 */}
        <div className="mb-12">
          <h2 className="mb-6 text-center text-2xl font-semibold">
            Comparison of the number of different sonic strips
          </h2>
          <div className="grid grid-cols-1 gap-6 md:grid-cols-3">
            {barCountConfigs.map((config, index) => (
              <div key={index} className="rounded-lg bg-gray-800 p-6">
                <h3 className="mb-4 text-center text-lg font-medium">
                  {config.name} ({config.count}Article)
                </h3>
                <div className="mb-4 flex justify-center">
                  <VoiceWaveAnimation
                    animated={animationEnabled}
                    barCount={config.count}
                    className="h-24 w-60"
                  />
                </div>
                <p className="text-center text-sm text-gray-400">{config.description}</p>
              </div>
            ))}
          </div>
        </div>

        {/* 大尺寸展示 */}
        <div className="mb-12">
          <h2 className="mb-6 text-center text-2xl font-semibold">Large size display effect</h2>
          <div className="rounded-lg bg-gray-800 p-8">
            <div className="flex justify-center">
              <VoiceWaveAnimation
                animated={animationEnabled}
                barCount={48}
                className="h-40 w-full max-w-2xl"
              />
            </div>
            <p className="mt-4 text-center text-gray-400">
              The large-scale voice ripple effect is suitable for use as the main visual element of
              the page
            </p>
          </div>
        </div>

        {/* 使用方法 */}
        <div className="rounded-lg bg-gray-800 p-6">
          <h2 className="mb-4 text-xl font-semibold">How to use</h2>
          <pre className="overflow-x-auto rounded-lg bg-gray-900 p-4 text-sm">
            <code>{`import { VoiceWaveAnimation } from "@/components/ui/voice-wave-animation";

// 基础使用
<VoiceWaveAnimation animated={true} />

// 自定义声波条数量
<VoiceWaveAnimation
  animated={true}
  barCount={32}
  className="w-80 h-32"
/>

// 停止动画时的效果
<VoiceWaveAnimation
  animated={false}  // 所有声波条变为统一短高度
  barCount={24}
  className="w-80 h-32"
/>`}</code>
          </pre>
          <div className="mt-4 text-sm text-gray-400">
            <p>
              <strong>Features:</strong>
            </p>
            <ul className="mt-2 list-inside list-disc space-y-1">
              <li>
                Overall gradual change from left to right: gray → white → gray Overall gradual
                change from left to right: gray → white → gray Overall gradual change from left to
                right: gray → white → gray Overall gradual change from left to right: gray → white →
                gray Overall gradual change from left to right: gray → white → gray
              </li>
              <li>
                Ripple diffusion: Sound waves spread from the center to both sides, with increasing
                delay
              </li>
              <li>
                Center enhancement: The center sound wave is 40% higher than the two sides,
                simulating the sound source position
              </li>
              <li>动画停止时所有声波条统一为短高度</li>
              <li>
                Use CSS transitions for smooth transitions Use CSS transitions for smooth
                transitions
              </li>
              <li>Pure CSS implementation, excellent performance</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  )
}
