import { useState } from 'react'
import VoiceRecorder from '@/components/VoiceRecorder'

interface SentenceSpeakingTestProps {
  word: string
  example: string
  exampleTranslation: string
  difficultyLevel: string
  exampleImage?: string
  onAnswer: (answer: string) => void
  onReportError: () => void
  onImageClick?: (image: string) => void
  disabled?: boolean
}

export const SentenceSpeakingTest: React.FC<SentenceSpeakingTestProps> = ({
  word,
  example,
  exampleTranslation,
  difficultyLevel,
  exampleImage,
  onAnswer,
  onReportError,
  onImageClick,
  disabled = false
}) => {
  const [showResult, setShowResult] = useState(false)

  const handleRecordingComplete = () => {
    if (disabled || showResult) return
    setShowResult(true)
    onAnswer(example) // 語音測驗通常都算正確
  }

  return (
    <div className="relative">
      {/* 錯誤回報按鈕 */}
      <div className="flex justify-end mb-2">
        <button
          onClick={onReportError}
          className="px-3 py-2 rounded-md transition-colors text-gray-600 hover:text-gray-900"
        >
          🚩 回報錯誤
        </button>
      </div>

      <div className="bg-white rounded-xl shadow-lg p-8">
        {/* 標題區 */}
        <div className="flex justify-between items-start mb-6">
          <h2 className="text-2xl font-bold text-gray-900">例句口說</h2>
          <span className="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full">
            {difficultyLevel}
          </span>
        </div>

        {/* VoiceRecorder 組件區域 */}
        <div className="w-full">
          <VoiceRecorder
            targetText={example}
            targetTranslation={exampleTranslation}
            exampleImage={exampleImage}
            instructionText="請看例句圖片並大聲說出完整的例句："
            onRecordingComplete={handleRecordingComplete}
          />
        </div>

        {/* 結果反饋區 */}
        {showResult && (
          <div className="mt-6 p-6 rounded-lg bg-blue-50 border border-blue-200 w-full">
            <p className="text-blue-700 text-left text-xl font-semibold mb-2">
              錄音完成！
            </p>
            <p className="text-gray-600 text-left">
              系統正在評估你的發音...
            </p>
          </div>
        )}
      </div>
    </div>
  )
}