import React, { useState } from 'react'

interface BluePlayButtonProps {
  text?: string
  lang?: string
  disabled?: boolean
  className?: string
  size?: 'sm' | 'md' | 'lg'
  title?: string
  onPlayStart?: () => void
  onPlayEnd?: () => void
}

export const BluePlayButton: React.FC<BluePlayButtonProps> = ({
  text,
  lang = 'en-US',
  disabled = false,
  className = '',
  size = 'md',
  title,
  onPlayStart,
  onPlayEnd
}) => {
  const [isPlaying, setIsPlaying] = useState(false)

  const sizeClasses = {
    sm: 'w-8 h-8',
    md: 'w-10 h-10',
    lg: 'w-12 h-12'
  }

  const iconSizes = {
    sm: 'w-4 h-4',
    md: 'w-5 h-5',
    lg: 'w-6 h-6'
  }

  // 內建 TTS 邏輯
  const handleToggle = () => {
    // 停止播放邏輯
    if (isPlaying) {
      speechSynthesis.cancel()
      setIsPlaying(false)
      if (onPlayEnd) onPlayEnd()
      return
    }

    // 開始播放邏輯
    if (onPlayStart) {
      // 自定義播放場景（如錄音回放）
      setIsPlaying(true)
      onPlayStart()
      setTimeout(() => {
        setIsPlaying(false)
        if (onPlayEnd) onPlayEnd()
      }, 3000)
    } else if (text) {
      // 標準 TTS 播放
      const utterance = new SpeechSynthesisUtterance(text)
      utterance.lang = lang
      utterance.rate = 0.8

      utterance.onstart = () => {
        setIsPlaying(true)
      }

      utterance.onend = () => {
        setIsPlaying(false)
        if (onPlayEnd) onPlayEnd()
      }

      utterance.onerror = () => {
        setIsPlaying(false)
        if (onPlayEnd) onPlayEnd()
      }

      speechSynthesis.speak(utterance)
    }
  }

  return (
    <button
      onClick={handleToggle}
      disabled={disabled}
      title={title || (isPlaying ? "點擊停止播放" : "點擊播放發音")}
      className={`group relative ${sizeClasses[size]} rounded-full shadow-lg transform transition-all duration-200
        ${isPlaying
          ? 'bg-gradient-to-br from-green-500 to-green-600 shadow-green-200 scale-105'
          : 'bg-gradient-to-br from-blue-500 to-blue-600 hover:shadow-xl hover:scale-105 shadow-blue-200'
        } ${disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'} ${className}
      `}
    >
      {/* 播放中波紋效果 */}
      {isPlaying && (
        <div className="absolute inset-0 bg-blue-400 rounded-full animate-ping opacity-40"></div>
      )}

      {/* 按鈕圖標 */}
      <div className="relative z-10 flex items-center justify-center w-full h-full">
        {isPlaying ? (
          <svg className={`${iconSizes[size]} text-white`} fill="currentColor" viewBox="0 0 24 24">
            <path d="M6 4h4v16H6V4zm8 0h4v16h-4V4z"/>
          </svg>
        ) : (
          <svg className={`${iconSizes[size]} text-white group-hover:scale-110 transition-transform`} fill="currentColor" viewBox="0 0 24 24">
            <path d="M8 5v14l11-7z"/>
          </svg>
        )}
      </div>

      {/* 懸停提示光環 */}
      {!isPlaying && !disabled && (
        <div className="absolute inset-0 rounded-full bg-white opacity-0 group-hover:opacity-20 transition-opacity duration-200"></div>
      )}
    </button>
  )
}