breakpilot-lehrer/studio-v2/components/learn/MicrophoneInput.tsx

'use client'

import React, { useState, useRef, useCallback } from 'react'

interface MicrophoneInputProps {
  expectedText: string
  lang: 'en' | 'de'
  onResult: (transcript: string, correct: boolean) => void
  isDark: boolean
}

export function MicrophoneInput({ expectedText, lang, onResult, isDark }: MicrophoneInputProps) {
  const [isListening, setIsListening] = useState(false)
  const [transcript, setTranscript] = useState('')
  const [feedback, setFeedback] = useState<'correct' | 'wrong' | null>(null)
  const recognitionRef = useRef<any>(null)

  const startListening = useCallback(() => {
    const SpeechRecognition = (window as any).SpeechRecognition || (window as any).webkitSpeechRecognition
    if (!SpeechRecognition) {
      setTranscript('Spracherkennung nicht verfuegbar')
      return
    }

    const recognition = new SpeechRecognition()
    recognition.lang = lang === 'de' ? 'de-DE' : 'en-GB'
    recognition.interimResults = false
    recognition.maxAlternatives = 3
    recognition.continuous = false

    recognition.onresult = (event: any) => {
      const results = event.results[0]
      let bestMatch = ''
      let isCorrect = false

      // Check all alternatives for a match
      for (let i = 0; i < results.length; i++) {
        const alt = results[i].transcript.trim().toLowerCase()
        if (alt === expectedText.trim().toLowerCase()) {
          bestMatch = results[i].transcript
          isCorrect = true
          break
        }
        if (!bestMatch) bestMatch = results[i].transcript
      }

      setTranscript(bestMatch)
      setFeedback(isCorrect ? 'correct' : 'wrong')
      setIsListening(false)

      setTimeout(() => {
        onResult(bestMatch, isCorrect)
        setFeedback(null)
        setTranscript('')
      }, isCorrect ? 1000 : 2500)
    }

    recognition.onerror = (event: any) => {
      console.error('Speech recognition error:', event.error)
      setIsListening(false)
      if (event.error === 'no-speech') {
        setTranscript('Kein Ton erkannt. Nochmal versuchen.')
      } else if (event.error === 'not-allowed') {
        setTranscript('Mikrofon-Zugriff nicht erlaubt.')
      }
    }

    recognition.onend = () => {
      setIsListening(false)
    }

    recognitionRef.current = recognition
    recognition.start()
    setIsListening(true)
    setTranscript('')
    setFeedback(null)
  }, [lang, expectedText, onResult])

  const stopListening = useCallback(() => {
    recognitionRef.current?.stop()
    setIsListening(false)
  }, [])

  return (
    <div className="flex flex-col items-center gap-4">
      {/* Microphone Button */}
      <button
        onClick={isListening ? stopListening : startListening}
        className={`w-20 h-20 rounded-full flex items-center justify-center transition-all ${
          isListening
            ? 'bg-red-500 text-white animate-pulse shadow-lg shadow-red-500/30'
            : feedback === 'correct'
              ? 'bg-green-500 text-white shadow-lg shadow-green-500/30'
              : feedback === 'wrong'
                ? 'bg-red-500/60 text-white'
                : isDark
                  ? 'bg-white/10 text-white/70 hover:bg-white/20 hover:text-white'
                  : 'bg-slate-100 text-slate-500 hover:bg-slate-200 hover:text-slate-700'
        }`}
      >
        <svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          {isListening ? (
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 12a9 9 0 11-18 0 9 9 0 0118 0zM10 9v6m4-6v6" />
          ) : (
            <>
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4" />
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 1a3 3 0 00-3 3v8a3 3 0 006 0V4a3 3 0 00-3-3z" />
            </>
          )}
        </svg>
      </button>

      {/* Status Text */}
      <p className={`text-sm text-center ${isDark ? 'text-white/50' : 'text-slate-500'}`}>
        {isListening
          ? 'Sprich jetzt...'
          : transcript
            ? transcript
            : 'Tippe auf das Mikrofon'}
      </p>

      {/* Feedback */}
      {feedback === 'correct' && (
        <p className={`text-lg font-semibold ${isDark ? 'text-green-300' : 'text-green-600'}`}>
          Richtig ausgesprochen!
        </p>
      )}
      {feedback === 'wrong' && (
        <div className="text-center">
          <p className={`text-sm ${isDark ? 'text-red-300' : 'text-red-600'}`}>
            Erkannt: &quot;{transcript}&quot;
          </p>
          <p className={`text-sm mt-1 ${isDark ? 'text-white/50' : 'text-slate-500'}`}>
            Erwartet: &quot;{expectedText}&quot;
          </p>
        </div>
      )}
    </div>
  )
}