import React, { useState, useEffect, useRef } from 'react';

interface VoiceInputProps {
  onTranscript: (text: string) => void;
  isProcessing: boolean;
  isFullWidth?: boolean;
}

const VoiceInput: React.FC<VoiceInputProps> = ({ onTranscript, isProcessing, isFullWidth = false }) => {
  const [isListening, setIsListening] = useState(false);
  const recognitionRef = useRef<any>(null);
  const timerRef = useRef<number | null>(null);

  useEffect(() => {
    if ('SpeechRecognition' in window || 'webkitSpeechRecognition' in window) {
      const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
      recognitionRef.current = new SpeechRecognition();
      recognitionRef.current.continuous = false;
      recognitionRef.current.lang = 'zh-CN';
      recognitionRef.current.interimResults = false;

      recognitionRef.current.onresult = (event: any) => {
        const transcript = event.results[0][0].transcript;
        if (transcript) onTranscript(transcript);
        setIsListening(false);
      };

      recognitionRef.current.onerror = (event: any) => {
        console.error('Speech recognition error', event.error);
        setIsListening(false);
      };

      recognitionRef.current.onend = () => {
        setIsListening(false);
      };
    }
  }, [onTranscript]);

  const startListening = (e: React.MouseEvent | React.TouchEvent) => {
    e.preventDefault();
    if (isProcessing || isListening) return;

    if (recognitionRef.current) {
      try {
        recognitionRef.current.start();
        setIsListening(true);
      } catch (e) {
        console.error("Failed to start recognition", e);
      }
    } else {
      alert("您的浏览器不支持语音识别，请使用 Chrome 或 Edge。");
    }
  };

  const stopListening = () => {
    if (isListening) {
      recognitionRef.current?.stop();
      setIsListening(false);
    }
  };

  return (
    <div className={`${isFullWidth ? 'w-full' : ''} relative select-none touch-none`}>
      <button
        onMouseDown={startListening}
        onMouseUp={stopListening}
        onMouseLeave={stopListening}
        onTouchStart={startListening}
        onTouchEnd={stopListening}
        disabled={isProcessing}
        className={`relative flex items-center justify-center transition-all duration-300 active:scale-95 shadow-lg ${
          isFullWidth 
            ? 'w-full py-4 rounded-2xl font-bold text-sm tracking-widest' 
            : 'w-14 h-14 rounded-full'
        } ${
          isListening
            ? 'bg-rose-500 text-white shadow-rose-200'
            : 'bg-indigo-600 text-white shadow-indigo-100'
        } ${isProcessing ? 'opacity-50 grayscale cursor-not-allowed' : ''}`}
      >
        {isListening && (
          <div className="absolute inset-0 rounded-2xl animate-ping bg-rose-400 opacity-20"></div>
        )}
        
        <div className="flex items-center gap-2 z-10">
          <svg xmlns="http://www.w3.org/2000/svg" className={`${isFullWidth ? 'h-5 w-5' : 'h-6 w-6'}`} fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z" />
          </svg>
          {isFullWidth && <span>{isListening ? '松开 结束' : '按住 说话'}</span>}
        </div>
      </button>
      
      {isListening && isFullWidth && (
        <div className="absolute -top-16 left-0 right-0 flex justify-center animate-bounce">
          <div className="bg-rose-500 text-white px-4 py-2 rounded-full text-xs font-bold shadow-xl border-2 border-white">
            正在录音...
          </div>
        </div>
      )}
    </div>
  );
};

export default VoiceInput;