dramaling-vocab-learning/frontend/components/review/review-tests/SentenceReorderTest.tsx

import React, { useState, useEffect, useCallback, useMemo, memo } from 'react'
import AudioPlayer from '@/components/AudioPlayer'
import { ReorderTestProps } from '@/types/review'
import {
  ErrorReportButton,
  TestResultDisplay,
  TestHeader
} from '@/components/review/shared'

interface SentenceReorderTestProps extends ReorderTestProps {
  exampleImage?: string
  onImageClick?: (image: string) => void
}

const SentenceReorderTestComponent: React.FC<SentenceReorderTestProps> = ({
  cardData,
  exampleImage,
  onAnswer,
  onReportError,
  onImageClick,
  disabled = false
}) => {
  const [shuffledWords, setShuffledWords] = useState<string[]>([])
  const [arrangedWords, setArrangedWords] = useState<string[]>([])
  const [showResult, setShowResult] = useState(false)
  const [reorderResult, setReorderResult] = useState<boolean | null>(null)

  // 初始化單字順序
  useEffect(() => {
    const words = cardData.example.split(/\s+/).filter(word => word.length > 0)
    const shuffled = [...words].sort(() => Math.random() - 0.5)
    setShuffledWords(shuffled)
    setArrangedWords([])
  }, [cardData.example])

  const handleWordClick = useCallback((word: string) => {
    if (disabled || showResult) return
    setShuffledWords(prev => prev.filter(w => w !== word))
    setArrangedWords(prev => [...prev, word])
  }, [disabled, showResult])

  const handleRemoveFromArranged = useCallback((word: string) => {
    if (disabled || showResult) return
    setArrangedWords(prev => prev.filter(w => w !== word))
    setShuffledWords(prev => [...prev, word])
  }, [disabled, showResult])

  const handleCheckAnswer = useCallback(() => {
    if (disabled || showResult || arrangedWords.length === 0) return
    const userSentence = arrangedWords.join(' ')
    const isCorrect = userSentence.toLowerCase().trim() === cardData.example.toLowerCase().trim()
    setReorderResult(isCorrect)
    setShowResult(true)
    onAnswer(userSentence)
  }, [disabled, showResult, arrangedWords, cardData.example, onAnswer])

  const handleReset = useCallback(() => {
    if (disabled || showResult) return
    const words = cardData.example.split(/\s+/).filter(word => word.length > 0)
    const shuffled = [...words].sort(() => Math.random() - 0.5)
    setShuffledWords(shuffled)
    setArrangedWords([])
    setReorderResult(null)
  }, [disabled, showResult, cardData.example])

  return (
    <div className="relative">
      <div className="flex justify-end mb-4">
        <ErrorReportButton onClick={onReportError} />
      </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">
            {cardData.difficultyLevel}
          </span>
        </div>

        {/* 圖片區（如果有） */}
        {exampleImage && (
          <div className="mb-6">
            <div className="bg-gray-50 rounded-lg p-4">
              <img
                src={exampleImage}
                alt="Example illustration"
                className="w-full max-w-md mx-auto rounded-lg cursor-pointer"
                onClick={() => onImageClick?.(exampleImage)}
              />
            </div>
          </div>
        )}

        {/* 重組區域 */}
        <div className="mb-6">
          <h3 className="text-lg font-semibold text-gray-900 mb-3 text-left">重組區域：</h3>
          <div className="relative min-h-[120px] bg-gray-50 rounded-lg p-4 border-2 border-dashed border-gray-300">
            {arrangedWords.length === 0 ? (
              <div className="absolute inset-0 flex items-center justify-center text-gray-400 text-lg">
                請嘗試組成完整句子
              </div>
            ) : (
              <div className="flex flex-wrap gap-2">
                {arrangedWords.map((word, index) => (
                  <div
                    key={`arranged-${index}`}
                    className="inline-flex items-center bg-blue-100 text-blue-800 px-3 py-2 rounded-full text-lg font-medium cursor-pointer hover:bg-blue-200 transition-colors"
                    onClick={() => handleRemoveFromArranged(word)}
                  >
                    {word}
                    <span className="ml-2 text-blue-600 hover:text-blue-800">×</span>
                  </div>
                ))}
              </div>
            )}
          </div>
        </div>

        {/* 指示文字 */}
        <p className="text-lg text-gray-700 mb-6 text-left">
          點擊下方單字，依序重組成正確的句子：
        </p>

        {/* 可用單字區域 */}
        <div className="mb-6">
          <h3 className="text-lg font-semibold text-gray-900 mb-3 text-left">可用單字：</h3>
          <div className="bg-white border border-gray-200 rounded-lg p-4 min-h-[80px]">
            {shuffledWords.length === 0 ? (
              <div className="text-center text-gray-400">
                所有單字都已使用
              </div>
            ) : (
              <div className="flex flex-wrap gap-2">
                {shuffledWords.map((word, index) => (
                  <button
                    key={`shuffled-${index}`}
                    onClick={() => handleWordClick(word)}
                    disabled={disabled || showResult}
                    className="bg-gray-100 text-gray-800 px-3 py-2 rounded-full text-lg font-medium cursor-pointer hover:bg-gray-200 active:bg-gray-300 transition-colors select-none disabled:opacity-50 disabled:cursor-not-allowed"
                  >
                    {word}
                  </button>
                ))}
              </div>
            )}
          </div>
        </div>

        {/* 控制按鈕 */}
        <div className="flex gap-3 mb-6">
          {arrangedWords.length > 0 && !showResult && (
            <button
              onClick={handleCheckAnswer}
              disabled={disabled}
              className="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
            >
              檢查答案
            </button>
          )}
          <button
            onClick={handleReset}
            disabled={disabled || showResult}
            className="px-6 py-2 bg-gray-500 text-white rounded-lg hover:bg-gray-600 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
          >
            重新開始
          </button>
        </div>

        {/* 結果反饋區 */}
        {showResult && reorderResult !== null && (
          <TestResultDisplay
            isCorrect={reorderResult}
            correctAnswer={cardData.example}
            userAnswer={arrangedWords.join(' ')}
            word={cardData.word}
            pronunciation={cardData.pronunciation}
            example={cardData.example}
            exampleTranslation={cardData.exampleTranslation}
            showResult={showResult}
          />
        )}
      </div>
    </div>
  )
}

export const SentenceReorderTest = memo(SentenceReorderTestComponent)
SentenceReorderTest.displayName = 'SentenceReorderTest'