import React, { useState, useCallback, useMemo, memo } from 'react'
import { ChoiceTestProps } from '@/types/review'
import {
  TestResultDisplay,
  ChoiceTestContainer,
  ChoiceGrid
} from '@/components/review/shared'

interface VocabChoiceTestProps extends ChoiceTestProps {}

const VocabChoiceTestComponent: React.FC<VocabChoiceTestProps> = ({
  cardData,
  options,
  onAnswer,
  onReportError,
  disabled = false
}) => {
  const [selectedAnswer, setSelectedAnswer] = useState<string | null>(null)
  const [showResult, setShowResult] = useState(false)


  const handleAnswerSelect = useCallback((answer: string) => {
    if (disabled || showResult) return
    setSelectedAnswer(answer)
    setShowResult(true)
    onAnswer(answer)
  }, [disabled, showResult, onAnswer])

  const isCorrect = useMemo(() =>
    selectedAnswer === cardData.word
  , [selectedAnswer, cardData.word])

  // 問題顯示區域
  const questionArea = (
    <div className="text-center">
      <div className="bg-gray-50 rounded-lg p-6">
        <h3 className="font-semibold text-gray-900 mb-3 text-left">定義</h3>
        <p className="text-gray-700 text-left text-lg leading-relaxed">{cardData.definition}</p>
      </div>
      <p className="text-lg text-gray-700 mt-4 text-left">
        請選擇符合上述定義的英文詞彙：
      </p>
    </div>
  )

  // 選項區域
  const optionsArea = (
    <ChoiceGrid
      options={options}
      selectedOption={selectedAnswer}
      correctAnswer={cardData.word}
      showResult={showResult}
      onSelect={handleAnswerSelect}
      disabled={disabled}
    />
  )

  // 結果顯示區域
  const resultArea = showResult ? (
    <TestResultDisplay
      isCorrect={isCorrect}
      correctAnswer={cardData.word}
      userAnswer={selectedAnswer || ''}
      word={cardData.word}
      pronunciation={cardData.pronunciation}
      example={cardData.example}
      exampleTranslation={cardData.exampleTranslation}
      showResult={showResult}
    />
  ) : null

  return (
    <ChoiceTestContainer
      cardData={cardData}
      testTitle="詞彙選擇"
      questionArea={questionArea}
      optionsArea={optionsArea}
      resultArea={resultArea}
      onAnswer={onAnswer}
      onReportError={onReportError}
      disabled={disabled}
    />
  )
}

export const VocabChoiceTest = memo(VocabChoiceTestComponent)
VocabChoiceTest.displayName = 'VocabChoiceTest'