import { useState, useEffect } from 'react'
import AudioPlayer from '@/components/AudioPlayer'

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

export const SentenceReorderTest: React.FC<SentenceReorderTestProps> = ({
  word,
  definition,
  example,
  exampleTranslation,
  difficultyLevel,
  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 = example.split(/\s+/).filter(word => word.length > 0)
    const shuffled = [...words].sort(() => Math.random() - 0.5)
    setShuffledWords(shuffled)
    setArrangedWords([])
  }, [example])

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

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

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

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

  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>

        {/* 圖片區（如果有） */}
        {exampleImage && (
          <div className="mb-6">
            <div className="bg-gray-50 rounded-lg p-4">
              <h3 className="font-semibold text-gray-900 mb-2 text-left">圖片提示</h3>
              <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 && (
          <div className={`p-6 rounded-lg w-full mb-6 ${
            reorderResult
              ? 'bg-green-50 border border-green-200'
              : 'bg-red-50 border border-red-200'
          }`}>
            <p className={`font-semibold text-left text-xl mb-4 ${
              reorderResult ? 'text-green-700' : 'text-red-700'
            }`}>
              {reorderResult ? '正確！' : '錯誤！'}
            </p>

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

            <div className="space-y-3">
              <div className="text-left">
                <div className="flex items-center text-gray-600">
                  <strong>發音：</strong>
                  <AudioPlayer text={example} />
                </div>
              </div>

              <div className="text-left">
                <p className="text-gray-600">
                  <strong>中文翻譯：</strong>{exampleTranslation}
                </p>
              </div>
            </div>
          </div>
        )}
      </div>
    </div>
  )
}