'use client'

import { useState, useCallback } from 'react'
import { CardState } from '@/lib/data/reviewSimpleData'
import { QuizHeader } from '../ui/QuizHeader'
import { AudioRecorder } from '@/components/shared/AudioRecorder'
import { speechAssessmentService, PronunciationResult } from '@/lib/services/speechAssessment'
import { getFlashcardImageUrl } from '@/lib/utils/flashcardUtils'

interface SentenceSpeakingQuizProps {
  card: CardState
  onAnswer: (confidence: number) => void
  onSkip: () => void
}

export function SentenceSpeakingQuiz({ card, onAnswer, onSkip }: SentenceSpeakingQuizProps) {
  const [assessmentResult, setAssessmentResult] = useState<PronunciationResult | null>(null)
  const [isEvaluating, setIsEvaluating] = useState(false)
  const [hasAnswered, setHasAnswered] = useState(false)
  const [error, setError] = useState<string | null>(null)

  // 獲取例句圖片 - 多重來源檢查
  const exampleImageUrl = getFlashcardImageUrl(card) ||
    (card as any).PrimaryImageUrl ||
    card.primaryImageUrl ||
    null

  // 除錯資訊 - 檢查圖片資料
  console.log('🔍 SentenceSpeaking 圖片除錯:', {
    cardId: card.id,
    word: card.word,
    hasExampleImage: card.hasExampleImage,
    primaryImageUrl: card.primaryImageUrl,
    PrimaryImageUrl: (card as any).PrimaryImageUrl,
    exampleImages: (card as any).exampleImages,
    FlashcardExampleImages: (card as any).FlashcardExampleImages,
    originalCard: card,
    computedImageUrl: exampleImageUrl
  })

  // 處理錄音完成
  const handleRecordingComplete = useCallback(async (audioBlob: Blob) => {
    if (hasAnswered) return

    setIsEvaluating(true)
    setError(null)

    try {
      console.log('🎤 開始發音評估...', {
        flashcardId: card.id,
        referenceText: card.example,
        audioSize: `${(audioBlob.size / 1024).toFixed(1)} KB`
      })

      const response = await speechAssessmentService.evaluatePronunciation(
        audioBlob,
        card.example,
        card.id,
        'en-US'
      )

      if (response.success && response.data) {
        setAssessmentResult(response.data)
        setHasAnswered(true)

        // 稍後自動提交結果（給用戶時間查看評分）
        setTimeout(() => {
          onAnswer(response.data!.confidenceLevel)
        }, 2000)

      } else {
        throw new Error(response.error || '發音評估失敗')
      }

    } catch (error) {
      const errorMessage = error instanceof Error ? error.message : '評估過程發生錯誤'
      setError(errorMessage)
      console.error('發音評估錯誤:', error)

    } finally {
      setIsEvaluating(false)
    }
  }, [hasAnswered, card.id, card.example, onAnswer])

  // 處理跳過
  const handleSkip = useCallback(() => {
    onSkip()
  }, [onSkip])

  // 手動提交結果（如果自動提交被取消）
  const handleSubmitResult = useCallback(() => {
    if (assessmentResult && hasAnswered) {
      onAnswer(assessmentResult.confidenceLevel)
    }
  }, [assessmentResult, hasAnswered, onAnswer])

  // 重新錄音
  const handleRetry = useCallback(() => {
    setAssessmentResult(null)
    setHasAnswered(false)
    setError(null)
  }, [])

  return (
    <div className="bg-white rounded-xl shadow-lg p-6">
      <QuizHeader
        title="例句口說練習"
        cefr={card.cefr || (card as any).CEFR || 'A1'}
      />

      <div className="space-y-6">
        {/* 說明文字 */}
        <div className="text-center bg-blue-50 border border-blue-200 rounded-lg p-4">
          <p className="text-blue-800 font-medium">
            📸 看圖說出完整例句，AI 將評估你的發音表現
          </p>
        </div>

        {/* 例句圖片 - 更顯著的顯示 */}
        {exampleImageUrl ? (
          <div className="text-center">
            <div className="bg-gray-50 border border-gray-200 rounded-xl p-6 mb-4">
              <img
                src={exampleImageUrl}
                alt={`${card.word} example illustration`}
                className="w-full max-w-lg mx-auto rounded-lg shadow-sm"
                style={{ maxHeight: '300px', objectFit: 'contain' }}
              />
            </div>
            <p className="text-gray-500 text-sm mb-6">
              💡 根據上圖理解情境，然後大聲說出例句
            </p>
          </div>
        ) : (
          <div className="text-center bg-yellow-50 border border-yellow-200 rounded-lg p-4 mb-6">
            <p className="text-yellow-800 text-sm">
              ⚠️ 此詞卡暫無例句圖片，請根據文字內容進行練習
            </p>
          </div>
        )}

        {/* 目標例句 */}
        <div className="bg-gradient-to-r from-green-50 to-blue-50 border border-green-200 rounded-lg p-6">
          <div className="text-center mb-4">
            <h4 className="text-lg font-semibold text-gray-900 mb-2">目標例句</h4>
            <p className="text-2xl text-gray-900 font-medium leading-relaxed mb-3">
              {card.example}
            </p>
            <p className="text-gray-600 text-base">
              {card.exampleTranslation}
            </p>
          </div>
        </div>

        {/* 錄音區域 */}
        {!hasAnswered && !isEvaluating && (
          <div>
            <AudioRecorder
              onRecordingComplete={handleRecordingComplete}
              onError={setError}
              maxDuration={30}
              className="mb-4"
            />
            <p className="text-gray-500 text-sm text-center mb-4">
              💡 建議清晰地讀出完整句子，包含正確的語調和停頓
            </p>
          </div>
        )}

        {/* 評估中狀態 */}
        {isEvaluating && (
          <div className="bg-blue-50 border border-blue-200 rounded-lg p-6 text-center">
            <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600 mx-auto mb-3"></div>
            <h4 className="font-semibold text-blue-900 mb-2">AI 正在評估發音...</h4>
            <p className="text-blue-700 text-sm">
              正在分析您的發音準確度、流暢度和語調 (約需 2-3 秒)
            </p>
          </div>
        )}

        {/* 錯誤顯示 */}
        {error && (
          <div className="bg-red-50 border border-red-200 rounded-lg p-4">
            <h4 className="font-semibold text-red-900 mb-2">❌ 評估失敗</h4>
            <p className="text-red-700 text-sm mb-3">{error}</p>
            <button
              onClick={handleRetry}
              className="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors text-sm"
            >
              重新錄音
            </button>
          </div>
        )}

        {/* 評估結果顯示 */}
        {assessmentResult && hasAnswered && (
          <div className="bg-green-50 border border-green-200 rounded-lg p-6">
            <h4 className="font-semibold text-green-900 mb-4">🎉 發音評估結果</h4>

            {/* 總分顯示 */}
            <div className="flex items-center justify-center gap-4 mb-4">
              <div className="text-center">
                <div className="text-4xl font-bold text-green-600 mb-1">
                  {Math.round(assessmentResult.scores.overall)}
                </div>
                <div className="text-green-700 text-sm font-medium">總分</div>
              </div>
              <div className="text-green-600 text-lg">/ 100</div>
            </div>

            {/* 詳細評分 */}
            <div className="grid grid-cols-2 gap-3 mb-4">
              <div className="bg-white p-3 rounded border">
                <div className="text-xs text-gray-600 mb-1">準確度</div>
                <div className="font-semibold text-lg text-gray-900">
                  {Math.round(assessmentResult.scores.accuracy)}
                </div>
              </div>
              <div className="bg-white p-3 rounded border">
                <div className="text-xs text-gray-600 mb-1">流暢度</div>
                <div className="font-semibold text-lg text-gray-900">
                  {Math.round(assessmentResult.scores.fluency)}
                </div>
              </div>
              <div className="bg-white p-3 rounded border">
                <div className="text-xs text-gray-600 mb-1">完整度</div>
                <div className="font-semibold text-lg text-gray-900">
                  {Math.round(assessmentResult.scores.completeness)}
                </div>
              </div>
              <div className="bg-white p-3 rounded border">
                <div className="text-xs text-gray-600 mb-1">語調</div>
                <div className="font-semibold text-lg text-gray-900">
                  {Math.round(assessmentResult.scores.prosody)}
                </div>
              </div>
            </div>

            {/* 語音識別結果 */}
            {assessmentResult.transcribedText && (
              <div className="bg-white rounded border p-3 mb-4">
                <div className="text-xs text-gray-600 mb-2">AI 識別的內容</div>
                <div className="font-mono text-sm text-gray-900">
                  {assessmentResult.transcribedText}
                </div>
              </div>
            )}

            {/* 改善建議 */}
            {assessmentResult.feedback && assessmentResult.feedback.length > 0 && (
              <div className="space-y-2 mb-4">
                <div className="text-sm font-medium text-green-800">改善建議：</div>
                {assessmentResult.feedback.map((feedback, index) => (
                  <div key={index} className="text-sm text-green-700 flex items-start gap-2">
                    <span className="text-green-600 mt-0.5">•</span>
                    <span>{feedback}</span>
                  </div>
                ))}
              </div>
            )}

            {/* 操作按鈕 */}
            <div className="flex gap-3 justify-center pt-4 border-t">
              <button
                onClick={handleRetry}
                className="px-4 py-2 bg-gray-600 text-white rounded-lg hover:bg-gray-700 transition-colors"
              >
                重新錄音
              </button>
              <button
                onClick={handleSubmitResult}
                className="px-6 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors font-medium"
              >
                確認結果
              </button>
            </div>
          </div>
        )}

        {/* 跳過按鈕 */}
        {!hasAnswered && !isEvaluating && (
          <div className="text-center">
            <button
              onClick={handleSkip}
              className="px-6 py-2 bg-gray-500 text-white rounded-lg hover:bg-gray-600 transition-colors"
            >
              跳過此題
            </button>
          </div>
        )}
      </div>
    </div>
  )
}