'use client'

import { useState } from 'react'
import Link from 'next/link'
import { useRouter } from 'next/navigation'
import { Navigation } from '@/components/Navigation'

export default function LearnPage() {
  const router = useRouter()
  const [currentCardIndex, setCurrentCardIndex] = useState(0)
  const [isFlipped, setIsFlipped] = useState(false)
  const [mode, setMode] = useState<'flip' | 'quiz' | 'fill' | 'listening' | 'speaking'>('flip')
  const [score, setScore] = useState({ correct: 0, total: 0 })
  const [selectedAnswer, setSelectedAnswer] = useState<string | null>(null)
  const [showResult, setShowResult] = useState(false)
  const [fillAnswer, setFillAnswer] = useState('')
  const [showHint, setShowHint] = useState(false)
  const [isRecording, setIsRecording] = useState(false)
  const [audioPlaying, setAudioPlaying] = useState(false)
  const [modalImage, setModalImage] = useState<string | null>(null)
  const [showReportModal, setShowReportModal] = useState(false)
  const [reportReason, setReportReason] = useState('')
  const [reportingCard, setReportingCard] = useState<any>(null)

  // Mock data with real example images
  const cards = [
    {
      id: 1,
      word: 'brought',
      partOfSpeech: 'verb',
      pronunciation: '/brɔːt/',
      translation: '提出、帶來',
      definition: 'Past tense of bring; to mention or introduce a topic in conversation',
      example: 'He brought this thing up during our meeting and no one agreed.',
      exampleTranslation: '他在我們的會議中提出了這件事，但沒有人同意。',
      exampleImage: '/images/examples/bring_up.png',
      synonyms: ['mentioned', 'raised', 'introduced'],
      difficulty: 'B1'
    },
    {
      id: 2,
      word: 'instincts',
      partOfSpeech: 'noun',
      pronunciation: '/ˈɪnstɪŋkts/',
      translation: '本能、直覺',
      definition: 'Natural abilities that help living things survive without learning',
      example: 'Animals use their instincts to find food and stay safe.',
      exampleTranslation: '動物利用本能來尋找食物並保持安全。',
      exampleImage: '/images/examples/instinct.png',
      synonyms: ['intuition', 'impulse', 'tendency'],
      difficulty: 'B2'
    },
    {
      id: 3,
      word: 'warrants',
      partOfSpeech: 'noun',
      pronunciation: '/ˈwɔːrənts/',
      translation: '搜查令、授權令',
      definition: 'Official documents that give police permission to do something',
      example: 'The police obtained warrants to search the building.',
      exampleTranslation: '警方取得了搜查令來搜查這棟建築物。',
      exampleImage: '/images/examples/warrant.png',
      synonyms: ['authorization', 'permit', 'license'],
      difficulty: 'C1'
    }
  ]

  const currentCard = cards[currentCardIndex]

  // Quiz mode options - dynamically generate from current cards
  const quizOptions = [
    cards[currentCardIndex].translation,
    ...cards
      .filter((_, idx) => idx !== currentCardIndex)
      .map(card => card.translation)
      .slice(0, 2),
    '建議、提議' // additional wrong option
  ].sort(() => Math.random() - 0.5) // shuffle options

  const handleFlip = () => {
    setIsFlipped(!isFlipped)
  }

  const handleNext = () => {
    if (currentCardIndex < cards.length - 1) {
      setCurrentCardIndex(currentCardIndex + 1)
      setIsFlipped(false)
      setSelectedAnswer(null)
      setShowResult(false)
      setFillAnswer('')
      setShowHint(false)
    }
  }

  const handlePrevious = () => {
    if (currentCardIndex > 0) {
      setCurrentCardIndex(currentCardIndex - 1)
      setIsFlipped(false)
      setSelectedAnswer(null)
      setShowResult(false)
      setFillAnswer('')
      setShowHint(false)
    }
  }

  const handleDifficultyRate = (rating: number) => {
    // Mock rating logic
    console.log(`Rated ${rating} for ${currentCard.word}`)
    handleNext()
  }

  const handleQuizAnswer = (answer: string) => {
    setSelectedAnswer(answer)
    setShowResult(true)
    if (answer === currentCard.translation) {
      setScore({ ...score, correct: score.correct + 1, total: score.total + 1 })
    } else {
      setScore({ ...score, total: score.total + 1 })
    }
  }

  return (
    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100">
      {/* Navigation */}
      <Navigation
        showExitLearning={true}
        onExitLearning={() => router.push('/dashboard')}
      />

      <div className="max-w-4xl mx-auto px-4 py-8">
        {/* Progress Bar */}
        <div className="mb-8">
          <div className="flex justify-between items-center mb-2">
            <span className="text-sm text-gray-600">進度</span>
            <span className="text-sm text-gray-600">
              {currentCardIndex + 1} / {cards.length}
            </span>
          </div>
          <div className="w-full bg-gray-200 rounded-full h-2">
            <div
              className="bg-primary h-2 rounded-full transition-all"
              style={{ width: `${((currentCardIndex + 1) / cards.length) * 100}%` }}
            ></div>
          </div>
        </div>

        {/* Mode Toggle */}
        <div className="flex justify-center mb-6">
          <div className="bg-white rounded-lg shadow-sm p-1 inline-flex flex-wrap">
            <button
              onClick={() => setMode('flip')}
              className={`px-3 py-2 rounded-md transition-colors ${
                mode === 'flip'
                  ? 'bg-primary text-white'
                  : 'text-gray-600 hover:text-gray-900'
              }`}
            >
              翻卡模式
            </button>
            <button
              onClick={() => setMode('quiz')}
              className={`px-3 py-2 rounded-md transition-colors ${
                mode === 'quiz'
                  ? 'bg-primary text-white'
                  : 'text-gray-600 hover:text-gray-900'
              }`}
            >
              選擇題
            </button>
            <button
              onClick={() => setMode('fill')}
              className={`px-3 py-2 rounded-md transition-colors ${
                mode === 'fill'
                  ? 'bg-primary text-white'
                  : 'text-gray-600 hover:text-gray-900'
              }`}
            >
              填空題
            </button>
            <button
              onClick={() => setMode('listening')}
              className={`px-3 py-2 rounded-md transition-colors ${
                mode === 'listening'
                  ? 'bg-primary text-white'
                  : 'text-gray-600 hover:text-gray-900'
              }`}
            >
              聽力測試
            </button>
            <button
              onClick={() => setMode('speaking')}
              className={`px-3 py-2 rounded-md transition-colors ${
                mode === 'speaking'
                  ? 'bg-primary text-white'
                  : 'text-gray-600 hover:text-gray-900'
              }`}
            >
              口說測試
            </button>
          </div>
        </div>

        {mode === 'flip' ? (
          /* Flip Card Mode */
          <div className="relative">
            {/* Error Report Button for Flip Mode */}
            <div className="flex justify-end mb-2">
              <button
                onClick={() => {
                  setReportingCard(currentCard)
                  setShowReportModal(true)
                }}
                className="text-red-500 hover:text-red-600 text-sm flex items-center gap-1"
                title="回報錯誤"
              >
                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
                回報錯誤
              </button>
            </div>

            <div
              className="relative w-full h-96 cursor-pointer"
              onClick={handleFlip}
              style={{ perspective: '1000px' }}
            >
              <div
                className={`absolute w-full h-full transition-transform duration-600 ${
                  isFlipped ? 'rotate-y-180' : ''
                }`}
                style={{
                  transformStyle: 'preserve-3d',
                  transform: isFlipped ? 'rotateY(180deg)' : 'rotateY(0deg)'
                }}
              >
                {/* Front of card */}
                <div
                  className="absolute w-full h-full bg-white rounded-2xl shadow-xl p-8 flex flex-col items-center justify-center"
                  style={{ backfaceVisibility: 'hidden' }}
                >
                  <div className="text-4xl font-bold text-gray-900 mb-4">
                    {currentCard.word}
                  </div>
                  <div className="text-lg text-gray-600 mb-2">
                    {currentCard.partOfSpeech}
                  </div>
                  <div className="text-lg text-gray-500">
                    {currentCard.pronunciation}
                  </div>
                  <div className="mt-8 text-sm text-gray-400">
                    點擊翻轉查看答案
                  </div>
                </div>

                {/* Back of card */}
                <div
                  className="absolute w-full h-full bg-white rounded-2xl shadow-xl p-8 overflow-y-auto"
                  style={{ 
                    backfaceVisibility: 'hidden',
                    transform: 'rotateY(180deg)'
                  }}
                >
                  <div className="space-y-4">
                    <div>
                      <div className="text-sm font-semibold text-gray-700 mb-1">翻譯</div>
                      <div className="text-2xl font-bold text-gray-900">{currentCard.translation}</div>
                    </div>
                    <div>
                      <div className="text-sm font-semibold text-gray-700 mb-1">定義</div>
                      <div className="text-gray-600">{currentCard.definition}</div>
                    </div>
                    <div>
                      <div className="text-sm font-semibold text-gray-700 mb-1">例句</div>
                      <div className="text-gray-600">{currentCard.example}</div>
                      <div className="text-gray-500 text-sm mt-1">{currentCard.exampleTranslation}</div>
                    </div>
                    <div>
                      <div className="text-sm font-semibold text-gray-700 mb-1">同義詞</div>
                      <div className="flex flex-wrap gap-2">
                        {currentCard.synonyms.map((syn, idx) => (
                          <span key={idx} className="px-3 py-1 bg-gray-100 rounded-full text-sm">
                            {syn}
                          </span>
                        ))}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            {/* Difficulty Rating */}
            {isFlipped && (
              <div className="mt-8">
                <div className="text-center mb-4">
                  <span className="text-gray-600">這個單字對你來說難度如何？</span>
                </div>
                <div className="flex justify-center space-x-3">
                  <button
                    onClick={() => handleDifficultyRate(1)}
                    className="px-4 py-2 bg-red-100 text-red-700 rounded-lg hover:bg-red-200 transition-colors"
                  >
                    😔 完全不記得
                  </button>
                  <button
                    onClick={() => handleDifficultyRate(3)}
                    className="px-4 py-2 bg-yellow-100 text-yellow-700 rounded-lg hover:bg-yellow-200 transition-colors"
                  >
                    😐 有點困難
                  </button>
                  <button
                    onClick={() => handleDifficultyRate(5)}
                    className="px-4 py-2 bg-green-100 text-green-700 rounded-lg hover:bg-green-200 transition-colors"
                  >
                    😊 很簡單
                  </button>
                </div>
              </div>
            )}
          </div>
        ) : mode === 'quiz' ? (
          /* Quiz Mode - 選擇題：英文定義選中文翻譯 */
          <div className="relative">
            {/* Error Report Button for Quiz Mode */}
            <div className="flex justify-end mb-2">
              <button
                onClick={() => {
                  setReportingCard(currentCard)
                  setShowReportModal(true)
                }}
                className="text-red-500 hover:text-red-600 text-sm flex items-center gap-1"
                title="回報錯誤"
              >
                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
                回報錯誤
              </button>
            </div>

            <div className="bg-white rounded-2xl shadow-xl p-8">
              <div className="mb-6">
                <div className="text-sm text-gray-600 mb-2">根據定義選擇正確的中文翻譯</div>
                <div className="text-xl text-gray-800 leading-relaxed">
                  {currentCard.definition}
                </div>
                <div className="text-sm text-gray-500 mt-2">
                  ({currentCard.partOfSpeech})
                </div>
              </div>

            <div className="space-y-3">
              {quizOptions.map((option, idx) => (
                <button
                  key={idx}
                  onClick={() => !showResult && handleQuizAnswer(option)}
                  disabled={showResult}
                  className={`w-full p-4 text-left rounded-lg border-2 transition-all ${
                    showResult && option === currentCard.translation
                      ? 'border-green-500 bg-green-50'
                      : showResult && option === selectedAnswer && option !== currentCard.translation
                      ? 'border-red-500 bg-red-50'
                      : selectedAnswer === option
                      ? 'border-primary bg-primary-light'
                      : 'border-gray-200 hover:border-gray-300'
                  }`}
                >
                  <div className="flex items-center justify-between">
                    <span className="font-medium">{option}</span>
                    {showResult && option === currentCard.translation && (
                      <svg className="w-5 h-5 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
                      </svg>
                    )}
                    {showResult && option === selectedAnswer && option !== currentCard.translation && (
                      <svg className="w-5 h-5 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                      </svg>
                    )}
                  </div>
                </button>
              ))}
            </div>

            </div>
          </div>
        ) : mode === 'fill' ? (
          /* Fill in the Blank Mode - 填空題 */
          <div className="relative">
            {/* Error Report Button for Fill Mode */}
            <div className="flex justify-end mb-2">
              <button
                onClick={() => {
                  setReportingCard(currentCard)
                  setShowReportModal(true)
                }}
                className="text-red-500 hover:text-red-600 text-sm flex items-center gap-1"
                title="回報錯誤"
              >
                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
                回報錯誤
              </button>
            </div>

            <div className="bg-white rounded-2xl shadow-xl p-8">
              <div className="mb-6">
                <div className="text-sm text-gray-600 mb-4">根據例句圖片和句子填入正確的詞彙</div>

              {/* Example Image */}
              {currentCard.exampleImage && (
                <div className="mb-4">
                  <img
                    src={currentCard.exampleImage}
                    alt="Example context"
                    className="w-full rounded-lg shadow-md cursor-pointer hover:shadow-lg transition-shadow"
                    style={{ maxHeight: '400px', objectFit: 'contain' }}
                    onClick={() => setModalImage(currentCard.exampleImage)}
                  />
                  <div className="text-xs text-gray-500 mt-2 text-center">點擊圖片可放大查看</div>
                </div>
              )}

              {/* Example Sentence with Blank */}
              <div className="text-lg text-gray-800 mb-4">
                {currentCard.example.split(currentCard.word).map((part, i) => (
                  <span key={i}>
                    {part}
                    {i < currentCard.example.split(currentCard.word).length - 1 && (
                      <span className="inline-block w-32 border-b-2 border-gray-400 mx-1"></span>
                    )}
                  </span>
                ))}
              </div>

              {/* Hint Button */}
              {!showHint && (
                <button
                  onClick={() => setShowHint(true)}
                  className="text-sm text-primary hover:text-primary-hover flex items-center gap-1"
                >
                  <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                  </svg>
                  點擊查看提示
                </button>
              )}

              {/* Definition Hint */}
              {showHint && (
                <div className="mt-3 p-3 bg-blue-50 rounded-lg">
                  <div className="text-sm text-blue-800">
                    <strong>定義提示：</strong> {currentCard.definition}
                  </div>
                </div>
              )}
            </div>

            {/* Answer Input */}
            <div className="mb-6">
              <input
                type="text"
                value={fillAnswer}
                onChange={(e) => setFillAnswer(e.target.value)}
                placeholder="輸入答案..."
                className="w-full px-4 py-3 border-2 border-gray-300 rounded-lg focus:border-primary focus:outline-none text-lg"
                onKeyPress={(e) => {
                  if (e.key === 'Enter' && fillAnswer) {
                    setShowResult(true)
                  }
                }}
              />
            </div>

            {/* Submit Button */}
            {!showResult && (
              <button
                onClick={() => fillAnswer && setShowResult(true)}
                disabled={!fillAnswer}
                className="w-full py-3 bg-primary text-white rounded-lg font-medium hover:bg-primary-hover transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
              >
                提交答案
              </button>
            )}

            {/* Result Display */}
            {showResult && (
              <div className={`p-4 rounded-lg ${
                fillAnswer.toLowerCase() === currentCard.word.toLowerCase()
                  ? 'bg-green-50 border-2 border-green-500'
                  : 'bg-red-50 border-2 border-red-500'
              }`}>
                <div className="flex items-center justify-between mb-2">
                  <span className={`font-semibold ${
                    fillAnswer.toLowerCase() === currentCard.word.toLowerCase()
                      ? 'text-green-700'
                      : 'text-red-700'
                  }`}>
                    {fillAnswer.toLowerCase() === currentCard.word.toLowerCase() ? '✓ 正確！' : '✗ 錯誤'}
                  </span>
                </div>
                {fillAnswer.toLowerCase() !== currentCard.word.toLowerCase() && (
                  <div className="text-sm text-gray-700">
                    正確答案：<span className="font-bold">{currentCard.word}</span>
                  </div>
                )}
                <div className="mt-3 text-sm text-gray-600">
                  <div className="font-semibold mb-1">完整例句：</div>
                  <div>{currentCard.example}</div>
                  <div className="text-gray-500 mt-1">{currentCard.exampleTranslation}</div>
                </div>
              </div>
            )}
            </div>
          </div>
        ) : mode === 'listening' ? (
          /* Listening Test Mode - 聽力測試 */
          <div className="relative">
            {/* Error Report Button for Listening Mode */}
            <div className="flex justify-end mb-2">
              <button
                onClick={() => {
                  setReportingCard(currentCard)
                  setShowReportModal(true)
                }}
                className="text-red-500 hover:text-red-600 text-sm flex items-center gap-1"
                title="回報錯誤"
              >
                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
                回報錯誤
              </button>
            </div>

            <div className="bg-white rounded-2xl shadow-xl p-8">
              <div className="mb-6 text-center">
                <div className="text-sm text-gray-600 mb-4">聽音頻，選擇正確的單字</div>

              {/* Audio Play Button */}
              <button
                onClick={() => {
                  setAudioPlaying(true)
                  // Simulate audio playing
                  setTimeout(() => setAudioPlaying(false), 2000)
                }}
                className="mx-auto mb-6 p-8 bg-gray-100 rounded-full hover:bg-gray-200 transition-colors"
              >
                {audioPlaying ? (
                  <svg className="w-16 h-16 text-primary animate-pulse" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15.536 8.464a5 5 0 010 7.072m2.828-9.9a9 9 0 010 12.728M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l4.707-4.707C10.923 3.663 12 4.109 12 5v14c0 .891-1.077 1.337-1.707.707L5.586 15z" />
                  </svg>
                ) : (
                  <svg className="w-16 h-16 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                  </svg>
                )}
              </button>

              <div className="text-sm text-gray-500">點擊播放按鈕聽發音</div>
            </div>

            {/* Word Options */}
            <div className="grid grid-cols-2 gap-3">
              {[currentCard.word, 'determine', 'achieve', 'consider'].map((word) => (
                <button
                  key={word}
                  onClick={() => !showResult && handleQuizAnswer(word)}
                  disabled={showResult}
                  className={`p-4 text-lg font-medium rounded-lg border-2 transition-all ${
                    showResult && word === currentCard.word
                      ? 'border-green-500 bg-green-50'
                      : showResult && word === selectedAnswer && word !== currentCard.word
                      ? 'border-red-500 bg-red-50'
                      : selectedAnswer === word
                      ? 'border-primary bg-primary-light'
                      : 'border-gray-200 hover:border-gray-300'
                  }`}
                >
                  {word}
                </button>
              ))}
            </div>

            {/* Result Display */}
            {showResult && (
              <div className="mt-6 p-4 bg-gray-50 rounded-lg">
                <div className="text-sm font-semibold text-gray-700 mb-2">單字詳情</div>
                <div className="space-y-2">
                  <div>
                    <span className="font-semibold">{currentCard.word}</span> - {currentCard.translation}
                  </div>
                  <div className="text-sm text-gray-600">{currentCard.definition}</div>
                  <div className="text-sm text-gray-500 italic">"{currentCard.example}"</div>
                </div>
              </div>
            )}
            </div>
          </div>
        ) : mode === 'speaking' ? (
          /* Speaking Test Mode - 口說測試 */
          <div className="relative">
            {/* Error Report Button for Speaking Mode */}
            <div className="flex justify-end mb-2">
              <button
                onClick={() => {
                  setReportingCard(currentCard)
                  setShowReportModal(true)
                }}
                className="text-red-500 hover:text-red-600 text-sm flex items-center gap-1"
                title="回報錯誤"
              >
                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
                回報錯誤
              </button>
            </div>

            <div className="bg-white rounded-2xl shadow-xl p-8">
              <div className="mb-6">
                <div className="text-sm text-gray-600 mb-4">念出以下例句</div>

              {/* Target Sentence */}
              <div className="p-6 bg-gray-50 rounded-lg mb-6">
                <div className="text-xl text-gray-800 leading-relaxed mb-3">
                  {currentCard.example}
                </div>
                <div className="text-gray-600">
                  {currentCard.exampleTranslation}
                </div>
              </div>

              {/* Pronunciation Guide */}
              <div className="mb-6">
                <div className="text-sm text-gray-600 mb-2">重點單字發音：</div>
                <div className="flex items-center gap-4">
                  <span className="font-semibold text-lg">{currentCard.word}</span>
                  <span className="text-gray-500">{currentCard.pronunciation}</span>
                  <button className="text-primary hover:text-primary-hover">
                    <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15.536 8.464a5 5 0 010 7.072m2.828-9.9a9 9 0 010 12.728M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l4.707-4.707C10.923 3.663 12 4.109 12 5v14c0 .891-1.077 1.337-1.707.707L5.586 15z" />
                    </svg>
                  </button>
                </div>
              </div>

              {/* Recording Button */}
              <div className="text-center">
                <button
                  onClick={() => {
                    setIsRecording(!isRecording)
                    if (!isRecording) {
                      // Start recording
                      setTimeout(() => {
                        setIsRecording(false)
                        setShowResult(true)
                      }, 3000)
                    }
                  }}
                  className={`p-6 rounded-full transition-all ${
                    isRecording
                      ? 'bg-red-500 hover:bg-red-600 animate-pulse'
                      : 'bg-primary hover:bg-primary-hover'
                  }`}
                >
                  {isRecording ? (
                    <svg className="w-12 h-12 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 10a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 01-1-1v-4z" />
                    </svg>
                  ) : (
                    <svg className="w-12 h-12 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z" />
                    </svg>
                  )}
                </button>
                <div className="mt-3 text-sm text-gray-600">
                  {isRecording ? '錄音中... 點擊停止' : '點擊開始錄音'}
                </div>
              </div>

              {/* Result Display */}
              {showResult && (
                <div className="mt-6 p-4 bg-green-50 border-2 border-green-500 rounded-lg">
                  <div className="text-green-700 font-semibold mb-2">
                    ✓ 完成口說練習！
                  </div>
                  <div className="text-sm text-gray-600">
                    提示：持續練習可以提高發音準確度和流暢度
                  </div>
                </div>
              )}
            </div>
          </div>
          </div>
        ) : null}

        {/* Navigation Buttons */}
        <div className="flex justify-between mt-8">
          <button
            onClick={handlePrevious}
            disabled={currentCardIndex === 0}
            className="flex items-center space-x-2 px-6 py-3 bg-white rounded-lg shadow-sm hover:shadow-md transition-shadow disabled:opacity-50 disabled:cursor-not-allowed"
          >
            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
            </svg>
            <span>上一個</span>
          </button>

          <button
            onClick={handleNext}
            disabled={currentCardIndex === cards.length - 1}
            className="flex items-center space-x-2 px-6 py-3 bg-primary text-white rounded-lg shadow-sm hover:bg-primary-hover transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
          >
            <span>下一個</span>
            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
            </svg>
          </button>
        </div>
      </div>

      {/* Image Modal */}
      {modalImage && (
        <div
          className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-75 p-4"
          onClick={() => setModalImage(null)}
        >
          <div
            className="relative max-w-4xl max-h-[90vh] bg-white rounded-lg overflow-hidden"
            onClick={(e) => e.stopPropagation()}
          >
            {/* Close Button */}
            <button
              onClick={() => setModalImage(null)}
              className="absolute top-2 right-2 z-10 p-2 bg-white bg-opacity-90 rounded-full hover:bg-opacity-100 transition-all shadow-lg"
            >
              <svg className="w-6 h-6 text-gray-700" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
              </svg>
            </button>

            {/* Image */}
            <div className="p-4">
              <img
                src={modalImage}
                alt="Example context enlarged"
                className="w-full h-full object-contain"
                style={{ maxHeight: 'calc(90vh - 2rem)' }}
              />
            </div>
          </div>
        </div>
      )}

      {/* Error Report Modal */}
      {showReportModal && (
        <div
          className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50 p-4"
          onClick={() => setShowReportModal(false)}
        >
          <div
            className="bg-white rounded-lg shadow-xl max-w-md w-full p-6"
            onClick={(e) => e.stopPropagation()}
          >
            <div className="flex justify-between items-center mb-4">
              <h3 className="text-lg font-semibold">回報錯誤</h3>
              <button
                onClick={() => setShowReportModal(false)}
                className="text-gray-400 hover:text-gray-600"
              >
                <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                </svg>
              </button>
            </div>

            <div className="mb-4">
              <div className="text-sm text-gray-600 mb-2">
                詞卡：<span className="font-medium">{reportingCard?.word}</span>
              </div>
              <div className="text-sm text-gray-600 mb-2">
                測驗模式：{mode === 'flip' ? '翻卡模式' : mode === 'quiz' ? '選擇題' : mode === 'fill' ? '填空題' : mode === 'listening' ? '聽力測試' : '口說測試'}
              </div>
            </div>

            <div className="mb-4">
              <label className="block text-sm font-medium text-gray-700 mb-2">
                錯誤原因（選填）
              </label>
              <textarea
                value={reportReason}
                onChange={(e) => setReportReason(e.target.value)}
                placeholder="請描述錯誤內容..."
                className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-primary focus:border-primary"
                rows={3}
              />
            </div>

            <div className="flex gap-3">
              <button
                onClick={() => {
                  // Submit error report
                  console.log('Error reported:', {
                    card: reportingCard,
                    mode,
                    reason: reportReason
                  })
                  setShowReportModal(false)
                  setReportReason('')
                  setReportingCard(null)
                  // Show success message (could add a toast notification here)
                  alert('感謝您的回報，我們會盡快處理！')
                }}
                className="flex-1 px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary-hover transition-colors"
              >
                送出回報
              </button>
              <button
                onClick={() => {
                  setShowReportModal(false)
                  setReportReason('')
                  setReportingCard(null)
                }}
                className="flex-1 px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition-colors"
              >
                取消
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  )
}