'use client'

import { useState, useEffect } from 'react'
import { useRouter } from 'next/navigation'
import { Navigation } from '@/components/Navigation'
import VoiceRecorder from '@/components/VoiceRecorder'
import LearningComplete from '@/components/LearningComplete'
import SegmentedProgressBar from '@/components/SegmentedProgressBar'
import { studySessionService, type StudySession, type CurrentTest, type Progress } from '@/lib/services/studySession'

export default function NewLearnPage() {
  const router = useRouter()
  const [mounted, setMounted] = useState(false)

  // 會話狀態
  const [session, setSession] = useState<StudySession | null>(null)
  const [currentTest, setCurrentTest] = useState<CurrentTest | null>(null)
  const [progress, setProgress] = useState<Progress | null>(null)

  // UI狀態
  const [isLoading, setIsLoading] = useState(false)
  const [selectedAnswer, setSelectedAnswer] = useState<string | null>(null)
  const [showResult, setShowResult] = useState(false)
  const [fillAnswer, setFillAnswer] = useState('')
  const [showHint, setShowHint] = useState(false)
  const [showComplete, setShowComplete] = useState(false)
  const [showTaskListModal, setShowTaskListModal] = useState(false)

  // 例句重組狀態
  const [shuffledWords, setShuffledWords] = useState<string[]>([])
  const [arrangedWords, setArrangedWords] = useState<string[]>([])
  const [reorderResult, setReorderResult] = useState<boolean | null>(null)

  // 分數狀態
  const [score, setScore] = useState({ correct: 0, total: 0 })

  // Client-side mounting
  useEffect(() => {
    setMounted(true)
    startNewSession()
  }, [])

  // 開始新的學習會話
  const startNewSession = async () => {
    try {
      setIsLoading(true)
      console.log('🎯 開始新的學習會話...')

      const sessionResult = await studySessionService.startSession()
      if (sessionResult.success && sessionResult.data) {
        const newSession = sessionResult.data
        setSession(newSession)
        console.log('✅ 學習會話創建成功:', newSession)

        // 載入第一個測驗和詳細進度
        await loadCurrentTest(newSession.sessionId)
        await loadProgress(newSession.sessionId)
      } else {
        console.error('❌ 創建學習會話失敗:', sessionResult.error)
        if (sessionResult.error === 'No due cards available for study') {
          setShowComplete(true)
        }
      }
    } catch (error) {
      console.error('💥 創建學習會話異常:', error)
    } finally {
      setIsLoading(false)
    }
  }

  // 載入當前測驗
  const loadCurrentTest = async (sessionId: string) => {
    try {
      const testResult = await studySessionService.getCurrentTest(sessionId)
      if (testResult.success && testResult.data) {
        setCurrentTest(testResult.data)
        resetTestStates()
        console.log('🎯 載入當前測驗:', testResult.data.testType, 'for', testResult.data.card.word)
      } else {
        console.error('❌ 載入測驗失敗:', testResult.error)
      }
    } catch (error) {
      console.error('💥 載入測驗異常:', error)
    }
  }

  // 載入詳細進度
  const loadProgress = async (sessionId: string) => {
    try {
      const progressResult = await studySessionService.getProgress(sessionId)
      if (progressResult.success && progressResult.data) {
        setProgress(progressResult.data)
        console.log('📊 載入進度成功:', progressResult.data)
      } else {
        console.error('❌ 載入進度失敗:', progressResult.error)
      }
    } catch (error) {
      console.error('💥 載入進度異常:', error)
    }
  }

  // 提交測驗結果
  const submitTest = async (isCorrect: boolean, userAnswer?: string, confidenceLevel?: number) => {
    if (!session || !currentTest) return

    try {
      const result = await studySessionService.submitTest(session.sessionId, {
        testType: currentTest.testType,
        isCorrect,
        userAnswer,
        confidenceLevel,
        responseTimeMs: 2000 // 簡化時間計算
      })

      if (result.success && result.data) {
        console.log('✅ 測驗結果提交成功:', result.data)

        // 更新分數
        setScore(prev => ({
          correct: isCorrect ? prev.correct + 1 : prev.correct,
          total: prev.total + 1
        }))

        // 更新本地進度顯示
        if (progress && result.data) {
          setProgress(prev => prev ? {
            ...prev,
            completedTests: result.data!.progress.completedTests,
            completedCards: result.data!.progress.completedCards
          } : null)
        }

        // 重新載入完整進度數據
        await loadProgress(session.sessionId)

        // 檢查是否有下一個測驗
        setTimeout(async () => {
          await loadNextTest()
        }, 1500) // 顯示結果1.5秒後自動進入下一題

      } else {
        console.error('❌ 提交測驗結果失敗:', result.error)
      }
    } catch (error) {
      console.error('💥 提交測驗結果異常:', error)
    }
  }

  // 載入下一個測驗
  const loadNextTest = async () => {
    if (!session) return

    try {
      const nextResult = await studySessionService.getNextTest(session.sessionId)
      if (nextResult.success && nextResult.data) {
        const nextTest = nextResult.data

        if (nextTest.hasNextTest) {
          // 載入下一個測驗
          await loadCurrentTest(session.sessionId)
        } else {
          // 會話完成
          console.log('🎉 學習會話完成!')
          await studySessionService.completeSession(session.sessionId)
          setShowComplete(true)
        }
      }
    } catch (error) {
      console.error('💥 載入下一個測驗異常:', error)
    }
  }

  // 重置測驗狀態
  const resetTestStates = () => {
    setSelectedAnswer(null)
    setShowResult(false)
    setFillAnswer('')
    setShowHint(false)
    setShuffledWords([])
    setArrangedWords([])
    setReorderResult(null)
  }

  // 測驗處理函數
  const handleQuizAnswer = async (answer: string) => {
    if (showResult || !currentTest) return

    setSelectedAnswer(answer)
    setShowResult(true)

    const isCorrect = answer === currentTest.card.word
    await submitTest(isCorrect, answer)
  }

  const handleFillAnswer = async () => {
    if (showResult || !currentTest) return

    setShowResult(true)
    const isCorrect = fillAnswer.toLowerCase().trim() === currentTest.card.word.toLowerCase()
    await submitTest(isCorrect, fillAnswer)
  }

  const handleConfidenceLevel = async (level: number) => {
    if (!currentTest) return
    await submitTest(true, undefined, level) // 翻卡記憶以信心等級為準
  }

  const handleReorderAnswer = async () => {
    if (!currentTest) return

    const userSentence = arrangedWords.join(' ')
    const correctSentence = currentTest.card.example
    const isCorrect = userSentence.toLowerCase().trim() === correctSentence.toLowerCase().trim()

    setReorderResult(isCorrect)
    setShowResult(true)

    await submitTest(isCorrect, userSentence)
  }

  const handleSpeakingAnswer = async (transcript: string) => {
    if (!currentTest) return

    setShowResult(true)
    const isCorrect = transcript.toLowerCase().includes(currentTest.card.word.toLowerCase())
    await submitTest(isCorrect, transcript)
  }

  // 初始化例句重組
  useEffect(() => {
    if (currentTest && currentTest.testType === 'sentence-reorder') {
      const words = currentTest.card.example.split(/\s+/).filter(word => word.length > 0)
      const shuffled = [...words].sort(() => Math.random() - 0.5)
      setShuffledWords(shuffled)
      setArrangedWords([])
      setReorderResult(null)
    }
  }, [currentTest])

  // 例句重組處理
  const handleWordClick = (word: string) => {
    setShuffledWords(prev => prev.filter(w => w !== word))
    setArrangedWords(prev => [...prev, word])
    setReorderResult(null)
  }

  const handleRemoveFromArranged = (word: string) => {
    setArrangedWords(prev => prev.filter(w => w !== word))
    setShuffledWords(prev => [...prev, word])
    setReorderResult(null)
  }

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

  // 重新開始
  const handleRestart = async () => {
    setScore({ correct: 0, total: 0 })
    setShowComplete(false)
    await startNewSession()
  }

  // Loading screen
  if (!mounted || isLoading) {
    return (
      <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 flex items-center justify-center">
        <div className="text-gray-500 text-lg">載入中...</div>
      </div>
    )
  }

  // No session or complete
  if (!session || showComplete) {
    return (
      <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100">
        <Navigation />
        <div className="max-w-4xl mx-auto px-4 py-8 flex items-center justify-center min-h-[calc(100vh-80px)]">
          {showComplete ? (
            <LearningComplete
              score={score}
              mode="mixed"
              onRestart={handleRestart}
              onBackToDashboard={() => router.push('/dashboard')}
            />
          ) : (
            <div className="bg-white rounded-xl p-8 max-w-md w-full text-center shadow-lg">
              <div className="text-6xl mb-4">📚</div>
              <h2 className="text-2xl font-bold text-gray-900 mb-4">
                今日學習已完成！
              </h2>
              <p className="text-gray-600 mb-6">
                目前沒有到期需要複習的詞卡。
              </p>
              <div className="flex gap-3">
                <button
                  onClick={() => router.push('/flashcards')}
                  className="flex-1 py-3 bg-primary text-white rounded-lg hover:bg-primary-dark transition-colors font-medium"
                >
                  管理詞卡
                </button>
                <button
                  onClick={() => router.push('/dashboard')}
                  className="flex-1 py-3 bg-gray-500 text-white rounded-lg hover:bg-gray-600 transition-colors font-medium"
                >
                  回到首頁
                </button>
              </div>
            </div>
          )}
        </div>
      </div>
    )
  }

  // No current test
  if (!currentTest) {
    return (
      <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 flex items-center justify-center">
        <div className="text-gray-500 text-lg">載入測驗中...</div>
      </div>
    )
  }

  return (
    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100">
      <Navigation />

      <div className="max-w-4xl mx-auto px-4 py-8">
        {/* 分段式進度條 */}
        <div className="mb-8">
          <div className="flex justify-between items-center mb-3">
            <span className="text-sm font-medium text-gray-900">學習進度</span>
            <button
              onClick={() => setShowTaskListModal(true)}
              className="text-sm text-gray-600 hover:text-blue-600 transition-colors cursor-pointer flex items-center gap-1"
              title="點擊查看詳細進度"
            >
              詳細進度 📋
            </button>
          </div>

          {progress && (
            <SegmentedProgressBar
              progress={progress}
              onClick={() => setShowTaskListModal(true)}
            />
          )}
        </div>

        {/* 測驗內容渲染 */}
        {currentTest.testType === 'flip-memory' && (
          <FlipMemoryTest
            card={currentTest.card}
            onConfidenceSelect={handleConfidenceLevel}
            showResult={showResult}
          />
        )}

        {currentTest.testType === 'vocab-choice' && (
          <VocabChoiceTest
            card={currentTest.card}
            onAnswer={handleQuizAnswer}
            selectedAnswer={selectedAnswer}
            showResult={showResult}
          />
        )}

        {currentTest.testType === 'sentence-fill' && (
          <SentenceFillTest
            card={currentTest.card}
            fillAnswer={fillAnswer}
            setFillAnswer={setFillAnswer}
            onSubmit={handleFillAnswer}
            showHint={showHint}
            setShowHint={setShowHint}
            showResult={showResult}
          />
        )}

        {currentTest.testType === 'sentence-reorder' && (
          <SentenceReorderTest
            card={currentTest.card}
            shuffledWords={shuffledWords}
            arrangedWords={arrangedWords}
            onWordClick={handleWordClick}
            onRemoveWord={handleRemoveFromArranged}
            onCheckAnswer={handleReorderAnswer}
            onReset={handleResetReorder}
            showResult={showResult}
            result={reorderResult}
          />
        )}

        {currentTest.testType === 'sentence-speaking' && (
          <SentenceSpeakingTest
            card={currentTest.card}
            onComplete={handleSpeakingAnswer}
            showResult={showResult}
          />
        )}

        {/* 任務清單模態框 */}
        {showTaskListModal && progress && (
          <TaskListModal
            progress={progress}
            onClose={() => setShowTaskListModal(false)}
          />
        )}
      </div>
    </div>
  )
}

// 測驗組件定義

interface TestComponentProps {
  card: any
  showResult: boolean
}

function FlipMemoryTest({ card, onConfidenceSelect, showResult }: TestComponentProps & {
  onConfidenceSelect: (level: number) => void
}) {
  const [isFlipped, setIsFlipped] = useState(false)

  return (
    <div className="bg-white rounded-xl shadow-lg p-8">
      <h2 className="text-2xl font-bold text-gray-900 mb-6">翻卡記憶</h2>

      <div className="text-center mb-8" onClick={() => setIsFlipped(!isFlipped)}>
        {!isFlipped ? (
          <div className="bg-gray-50 rounded-lg p-8 cursor-pointer">
            <h3 className="text-4xl font-bold text-gray-900 mb-4">{card.word}</h3>
            <p className="text-gray-500">{card.pronunciation}</p>
          </div>
        ) : (
          <div className="bg-gray-50 rounded-lg p-8">
            <p className="text-xl text-gray-700 mb-4">{card.definition}</p>
            <p className="text-lg text-gray-600 italic">"{card.example}"</p>
            <p className="text-sm text-gray-500 mt-2">"{card.exampleTranslation}"</p>
          </div>
        )}
      </div>

      {isFlipped && !showResult && (
        <div className="flex gap-2 justify-center">
          {[1, 2, 3, 4, 5].map(level => (
            <button
              key={level}
              onClick={() => onConfidenceSelect(level)}
              className="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary-dark transition-colors"
            >
              {level}
            </button>
          ))}
        </div>
      )}
    </div>
  )
}

function VocabChoiceTest({ card, onAnswer, selectedAnswer, showResult }: TestComponentProps & {
  onAnswer: (answer: string) => void
  selectedAnswer: string | null
}) {
  const options = [card.word, 'example1', 'example2', 'example3'].sort(() => Math.random() - 0.5)

  return (
    <div className="bg-white rounded-xl shadow-lg p-8">
      <h2 className="text-2xl font-bold text-gray-900 mb-6">詞彙選擇</h2>

      <div className="mb-6">
        <p className="text-lg text-gray-700">{card.definition}</p>
      </div>

      <div className="space-y-3">
        {options.map((option, idx) => (
          <button
            key={idx}
            onClick={() => !showResult && onAnswer(option)}
            disabled={showResult}
            className={`w-full p-4 text-left rounded-lg border-2 transition-all ${
              showResult
                ? option === card.word
                  ? 'border-green-500 bg-green-50 text-green-700'
                  : option === selectedAnswer
                  ? 'border-red-500 bg-red-50 text-red-700'
                  : 'border-gray-200 bg-gray-50 text-gray-500'
                : 'border-gray-200 hover:border-blue-300 hover:bg-blue-50'
            }`}
          >
            {option}
          </button>
        ))}
      </div>

      {showResult && (
        <div className={`mt-6 p-4 rounded-lg ${
          selectedAnswer === card.word ? 'bg-green-50' : 'bg-red-50'
        }`}>
          <p className={`font-semibold ${
            selectedAnswer === card.word ? 'text-green-700' : 'text-red-700'
          }`}>
            {selectedAnswer === card.word ? '正確！' : '錯誤！'}
          </p>
          {selectedAnswer !== card.word && (
            <p className="text-gray-700 mt-2">
              正確答案: <strong>{card.word}</strong>
            </p>
          )}
        </div>
      )}
    </div>
  )
}

function SentenceFillTest({ card, fillAnswer, setFillAnswer, onSubmit, showHint, setShowHint, showResult }: TestComponentProps & {
  fillAnswer: string
  setFillAnswer: (value: string) => void
  onSubmit: () => void
  showHint: boolean
  setShowHint: (show: boolean) => void
}) {
  return (
    <div className="bg-white rounded-xl shadow-lg p-8">
      <h2 className="text-2xl font-bold text-gray-900 mb-6">例句填空</h2>

      <div className="mb-6">
        <div className="bg-gray-50 rounded-lg p-6 text-lg">
          {card.example.split(new RegExp(`(${card.word})`, 'gi')).map((part: string, index: number) => {
            const isTargetWord = part.toLowerCase() === card.word.toLowerCase()
            return isTargetWord ? (
              <input
                key={index}
                type="text"
                value={fillAnswer}
                onChange={(e) => setFillAnswer(e.target.value)}
                placeholder="____"
                disabled={showResult}
                className="inline-block px-2 py-1 mx-1 border-b-2 border-blue-500 focus:outline-none"
                style={{ width: `${Math.max(60, card.word.length * 12)}px` }}
              />
            ) : (
              <span key={index}>{part}</span>
            )
          })}
        </div>
      </div>

      <div className="flex gap-3 mb-4">
        {!showResult && fillAnswer.trim() && (
          <button
            onClick={onSubmit}
            className="px-6 py-2 bg-primary text-white rounded-lg hover:bg-primary-dark transition-colors"
          >
            確認答案
          </button>
        )}
        <button
          onClick={() => setShowHint(!showHint)}
          className="px-6 py-2 bg-gray-500 text-white rounded-lg hover:bg-gray-600 transition-colors"
        >
          {showHint ? '隱藏提示' : '顯示提示'}
        </button>
      </div>

      {showHint && (
        <div className="mb-4 p-4 bg-yellow-50 border border-yellow-200 rounded-lg">
          <p className="text-yellow-800">{card.definition}</p>
        </div>
      )}

      {showResult && (
        <div className={`mt-6 p-4 rounded-lg ${
          fillAnswer.toLowerCase().trim() === card.word.toLowerCase() ? 'bg-green-50' : 'bg-red-50'
        }`}>
          <p className={`font-semibold ${
            fillAnswer.toLowerCase().trim() === card.word.toLowerCase() ? 'text-green-700' : 'text-red-700'
          }`}>
            {fillAnswer.toLowerCase().trim() === card.word.toLowerCase() ? '正確！' : '錯誤！'}
          </p>
        </div>
      )}
    </div>
  )
}

function SentenceReorderTest({ card, shuffledWords, arrangedWords, onWordClick, onRemoveWord, onCheckAnswer, onReset, showResult, result }: TestComponentProps & {
  shuffledWords: string[]
  arrangedWords: string[]
  onWordClick: (word: string) => void
  onRemoveWord: (word: string) => void
  onCheckAnswer: () => void
  onReset: () => void
  result: boolean | null
}) {
  return (
    <div className="bg-white rounded-xl shadow-lg p-8">
      <h2 className="text-2xl font-bold text-gray-900 mb-6">例句重組</h2>

      {/* 重組區域 */}
      <div className="mb-6">
        <h3 className="text-lg font-semibold text-gray-900 mb-3">重組區域：</h3>
        <div className="min-h-[80px] bg-gray-50 rounded-lg p-4 border-2 border-dashed border-gray-300">
          {arrangedWords.length === 0 ? (
            <div className="flex items-center justify-center h-full text-gray-400">
              將單字拖到這裡
            </div>
          ) : (
            <div className="flex flex-wrap gap-2">
              {arrangedWords.map((word, index) => (
                <button
                  key={index}
                  onClick={() => onRemoveWord(word)}
                  className="bg-blue-100 text-blue-800 px-3 py-2 rounded-full hover:bg-blue-200"
                >
                  {word} ×
                </button>
              ))}
            </div>
          )}
        </div>
      </div>

      {/* 可用單字 */}
      <div className="mb-6">
        <h3 className="text-lg font-semibold text-gray-900 mb-3">可用單字：</h3>
        <div className="bg-white border border-gray-200 rounded-lg p-4 min-h-[60px]">
          <div className="flex flex-wrap gap-2">
            {shuffledWords.map((word, index) => (
              <button
                key={index}
                onClick={() => onWordClick(word)}
                className="bg-gray-100 text-gray-800 px-3 py-2 rounded-full hover:bg-gray-200"
              >
                {word}
              </button>
            ))}
          </div>
        </div>
      </div>

      <div className="flex gap-3 mb-6">
        {arrangedWords.length > 0 && !showResult && (
          <button
            onClick={onCheckAnswer}
            className="px-6 py-2 bg-primary text-white rounded-lg hover:bg-primary-dark transition-colors"
          >
            檢查答案
          </button>
        )}
        <button
          onClick={onReset}
          className="px-6 py-2 bg-gray-500 text-white rounded-lg hover:bg-gray-600 transition-colors"
        >
          重新開始
        </button>
      </div>

      {result !== null && (
        <div className={`p-4 rounded-lg ${result ? 'bg-green-50' : 'bg-red-50'}`}>
          <p className={`font-semibold ${result ? 'text-green-700' : 'text-red-700'}`}>
            {result ? '正確！' : '錯誤！'}
          </p>
          {!result && (
            <p className="text-gray-700 mt-2">
              正確答案: <strong>"{card.example}"</strong>
            </p>
          )}
        </div>
      )}
    </div>
  )
}

function SentenceSpeakingTest({ card, onComplete, showResult }: TestComponentProps & {
  onComplete: (transcript: string) => void
}) {
  return (
    <div className="bg-white rounded-xl shadow-lg p-8">
      <h2 className="text-2xl font-bold text-gray-900 mb-6">例句口說</h2>

      <VoiceRecorder
        targetText={card.example}
        targetTranslation={card.exampleTranslation}
        instructionText="請大聲說出完整的例句："
        onRecordingComplete={(_audioBlob) => onComplete(card.example)}
      />

      {showResult && (
        <div className="mt-6 p-4 rounded-lg bg-blue-50">
          <p className="text-blue-700 font-semibold">錄音完成！</p>
          <p className="text-gray-600">系統正在評估發音...</p>
        </div>
      )}
    </div>
  )
}

function TaskListModal({ progress, onClose }: {
  progress: Progress
  onClose: () => void
}) {
  return (
    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
      <div className="bg-white rounded-xl shadow-2xl max-w-4xl w-full mx-4 max-h-[80vh] overflow-hidden">
        <div className="flex items-center justify-between p-6 border-b">
          <h2 className="text-2xl font-bold text-gray-900">📚 學習進度</h2>
          <button onClick={onClose} className="text-gray-400 hover:text-gray-600 text-2xl">✕</button>
        </div>

        <div className="p-6 overflow-y-auto max-h-[60vh]">
          <div className="mb-6 bg-blue-50 rounded-lg p-4">
            <div className="flex justify-between text-sm">
              <span className="text-blue-900 font-medium">
                整體進度: {progress.completedTests} / {progress.totalTests}
                ({Math.round((progress.completedTests / progress.totalTests) * 100)}%)
              </span>
              <span className="text-blue-800">
                詞卡: {progress.completedCards} / {progress.totalCards}
              </span>
            </div>
          </div>

          <div className="space-y-4">
            {progress.cards.map((card, index) => (
              <div key={card.cardId} className="border rounded-lg p-4">
                <div className="flex items-center gap-3 mb-3">
                  <span className="font-medium">詞卡{index + 1}: {card.word}</span>
                  <span className={`text-xs px-2 py-1 rounded ${
                    card.isCompleted ? 'bg-green-100 text-green-700' : 'bg-blue-100 text-blue-700'
                  }`}>
                    {card.completedTestsCount}/{card.plannedTests.length} 測驗
                  </span>
                </div>

                <div className="grid grid-cols-2 md:grid-cols-3 gap-2">
                  {card.plannedTests.map(testType => {
                    const isCompleted = card.tests.some(t => t.testType === testType)
                    return (
                      <div
                        key={testType}
                        className={`p-2 rounded text-sm ${
                          isCompleted ? 'bg-green-50 text-green-700' : 'bg-gray-50 text-gray-500'
                        }`}
                      >
                        {isCompleted ? '✅' : '⚪'} {testType}
                      </div>
                    )
                  })}
                </div>
              </div>
            ))}
          </div>
        </div>

        <div className="px-6 py-4 border-t bg-gray-50">
          <button
            onClick={onClose}
            className="w-full py-2 bg-primary text-white rounded-lg hover:bg-primary-dark transition-colors"
          >
            關閉
          </button>
        </div>
      </div>
    </div>
  )
}