import React, { memo, useState, useCallback } from 'react'
import { BluePlayButton } from '@/components/shared/BluePlayButton'

interface TestResultDisplayProps {
  isCorrect: boolean
  correctAnswer: string
  userAnswer?: string
  word: string
  pronunciation?: string
  example: string
  exampleTranslation: string
  showResult: boolean
}

export const TestResultDisplay = memo<TestResultDisplayProps>(({
  isCorrect,
  correctAnswer,
  userAnswer,
  word,
  pronunciation,
  example,
  exampleTranslation,
  showResult
}) => {
  const [isPlayingAnswer, setIsPlayingAnswer] = useState(false)
  const [isPlayingExample, setIsPlayingExample] = useState(false)

  // TTS 播放邏輯
  const handleToggleTTS = useCallback((text: string, type: 'answer' | 'example', lang?: string) => {
    const isCurrentlyPlaying = type === 'answer' ? isPlayingAnswer : isPlayingExample
    const setPlaying = type === 'answer' ? setIsPlayingAnswer : setIsPlayingExample
    const stopOther = type === 'answer' ? setIsPlayingExample : setIsPlayingAnswer

    if (isCurrentlyPlaying) {
      speechSynthesis.cancel()
      setPlaying(false)
      return
    }

    // 停止另一個播放
    stopOther(false)
    speechSynthesis.cancel()

    const utterance = new SpeechSynthesisUtterance(text)
    utterance.lang = lang || 'en-US'
    utterance.rate = 0.8

    utterance.onstart = () => setPlaying(true)
    utterance.onend = () => setPlaying(false)
    utterance.onerror = () => setPlaying(false)

    speechSynthesis.speak(utterance)
  }, [isPlayingAnswer, isPlayingExample])
  if (!showResult) return null

  return (
    <div className={`mt-6 p-6 rounded-lg w-full ${
      isCorrect
        ? 'bg-green-50 border border-green-200'
        : 'bg-red-50 border border-red-200'
    }`}>
      <p className={`font-semibold text-left text-xl mb-4 ${
        isCorrect ? 'text-green-700' : 'text-red-700'
      }`}>
        {isCorrect ? '正確！' : '錯誤！'}
      </p>

      {!isCorrect && userAnswer && (
        <div className="mb-4">
          <p className="text-gray-700 text-left">
            正確答案是：<strong className="text-lg">{correctAnswer}</strong>
          </p>
        </div>
      )}

      <div className="space-y-3">
        <div className="text-left">
          <p className="text-gray-600">
            {word && <span className="font-semibold text-left text-xl">{word}</span>}
            {pronunciation && <span className="mx-2">{pronunciation}</span>}
            <BluePlayButton
              text={correctAnswer}
              isPlaying={isPlayingAnswer}
              onToggle={(text, lang) => handleToggleTTS(text, 'answer', lang)}
              size="sm"
              title="播放答案"
            />
          </p>
        </div>

        <div className="text-left">
          <p className="text-gray-600">
            {example}
            <BluePlayButton
              text={example}
              isPlaying={isPlayingExample}
              onToggle={(text, lang) => handleToggleTTS(text, 'example', lang)}
              size="sm"
              title="播放例句"
            />
          </p>
          <p className="text-gray-500 text-sm">
            {exampleTranslation}
          </p>
        </div>
      </div>
    </div>
  )
})

TestResultDisplay.displayName = 'TestResultDisplay'