'use client'

import { useState, useEffect, useRef, useLayoutEffect } from 'react'
import { useRouter } from 'next/navigation'
import { Navigation } from '@/components/Navigation'
import AudioPlayer from '@/components/AudioPlayer'
import VoiceRecorder from '@/components/VoiceRecorder'
import LearningComplete from '@/components/LearningComplete'
import ReviewTypeIndicator from '@/components/review/ReviewTypeIndicator'
import MasteryIndicator from '@/components/review/MasteryIndicator'
import { flashcardsService, type Flashcard } from '@/lib/services/flashcards'
import { calculateCurrentMastery, getReviewTypesByDifficulty } from '@/lib/utils/masteryCalculator'

// 測驗項目接口
interface TestItem {
  id: string;           // 唯一ID: cardId + testType
  cardId: string;       // 所屬詞卡ID
  word: string;         // 詞卡單字
  testType: string;     // 測驗類型 (flip-memory, vocab-choice, etc.)
  testName: string;     // 測驗中文名稱
  isCompleted: boolean; // 是否已完成
  isCurrent: boolean;   // 是否為當前測驗
  order: number;        // 執行順序 (1-8)
}

// 詞卡測驗分組接口
interface CardTestGroup {
  cardId: string;
  word: string;
  context: string;
  tests: TestItem[];
}

// 擴展的Flashcard接口，包含智能複習需要的欄位
interface ExtendedFlashcard extends Omit<Flashcard, 'nextReviewDate'> {
  nextReviewDate?: string;   // 下次復習日期 (可選)
  currentInterval?: number;  // 當前間隔天數
  isOverdue?: boolean;       // 是否逾期
  overdueDays?: number;      // 逾期天數
  baseMasteryLevel?: number; // 基礎熟悉度
  lastReviewDate?: string;   // 最後復習日期
  synonyms?: string[];       // 同義詞
  exampleImage?: string;     // 例句圖片
  // 注意：userLevel和wordLevel已移除，改用即時CEFR轉換
}

// 單個測驗結果接口
interface TestResult {
  testType: string;           // 測驗類型
  isCorrect: boolean;         // 是否正確
  userAnswer?: string;        // 用戶答案
  confidenceLevel?: number;   // 信心等級 (1-5, 用於flip-memory)
  responseTimeMs: number;     // 答題時間
  completedAt: Date;          // 完成時間
}

// 詞卡複習會話接口
interface CardReviewSession {
  cardId: string;             // 詞卡ID
  word: string;               // 詞卡單字
  plannedTests: string[];     // 預定的測驗類型列表
  completedTests: TestResult[]; // 已完成的測驗結果
  startedAt: Date;            // 開始時間
  isCompleted: boolean;       // 是否完成所有測驗
}

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

  // 智能複習狀態
  const [currentCard, setCurrentCard] = useState<ExtendedFlashcard | null>(null)
  const [dueCards, setDueCards] = useState<ExtendedFlashcard[]>([])
  const [currentCardIndex, setCurrentCardIndex] = useState(0)
  const [isLoadingCard, setIsLoadingCard] = useState(false)

  // 複習模式狀態 (系統自動選擇)
  const [mode, setMode] = useState<'flip-memory' | 'vocab-choice' | 'vocab-listening' | 'sentence-listening' | 'sentence-fill' | 'sentence-reorder' | 'sentence-speaking'>('flip-memory')
  const [isAutoSelecting, setIsAutoSelecting] = useState(true)

  // 答題狀態
  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 [isFlipped, setIsFlipped] = useState(false)

  // 測驗進度狀態
  const [totalTests, setTotalTests] = useState(0)           // 所有測驗總數
  const [completedTests, setCompletedTests] = useState(0)   // 已完成測驗數
  const [testItems, setTestItems] = useState<TestItem[]>([]) // 測驗項目列表
  const [currentTestItemIndex, setCurrentTestItemIndex] = useState(0) // 當前測驗項目索引

  // 詞卡複習會話狀態
  const [cardReviewSessions, setCardReviewSessions] = useState<Map<string, CardReviewSession>>(new Map())
  const [currentCardSession, setCurrentCardSession] = useState<CardReviewSession | null>(null)
  const [completedCards, setCompletedCards] = useState(0)   // 已完成復習的詞卡數

  // UI狀態
  const [modalImage, setModalImage] = useState<string | null>(null)
  const [showReportModal, setShowReportModal] = useState(false)
  const [reportReason, setReportReason] = useState('')
  const [reportingCard, setReportingCard] = useState<any>(null)
  const [showComplete, setShowComplete] = useState(false)
  const [showNoDueCards, setShowNoDueCards] = useState(false)
  const [showTaskListModal, setShowTaskListModal] = useState(false)
  const [cardHeight, setCardHeight] = useState<number>(400)

  // 題型特定狀態
  const [quizOptions, setQuizOptions] = useState<string[]>([])
  const [sentenceOptions, setSentenceOptions] = useState<string[]>([])

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

  // Refs for measuring card content heights
  const cardFrontRef = useRef<HTMLDivElement>(null)
  const cardBackRef = useRef<HTMLDivElement>(null)
  const cardContainerRef = useRef<HTMLDivElement>(null)

  // Calculate optimal card height based on content (only when card changes)
  const calculateCardHeight = () => {
    if (!cardFrontRef.current || !cardBackRef.current) return 400;

    // Get the scroll heights to measure actual content
    const frontHeight = cardFrontRef.current.scrollHeight;
    const backHeight = cardBackRef.current.scrollHeight;

    console.log('Heights calculated:', { frontHeight, backHeight }); // Debug log

    // Use the maximum height with padding
    const maxHeight = Math.max(frontHeight, backHeight);
    const paddedHeight = maxHeight + 40; // Add padding for visual spacing

    // Ensure minimum height for visual consistency
    return Math.max(paddedHeight, 450);
  };

  // Update card height only when card content changes (not on flip)
  useLayoutEffect(() => {
    if (mounted && cardFrontRef.current && cardBackRef.current) {
      // Wait for DOM to be fully rendered
      const timer = setTimeout(() => {
        const newHeight = calculateCardHeight();
        setCardHeight(newHeight);
      }, 50);

      return () => clearTimeout(timer);
    }
  }, [currentCardIndex, mounted]);

  // Client-side mounting
  useEffect(() => {
    setMounted(true)
    loadDueCards() // 載入到期詞卡
  }, [])

  // 載入到期詞卡列表
  const loadDueCards = async () => {
    try {
      setIsLoadingCard(true)
      console.log('🔍 開始載入到期詞卡...');

      // 完全使用後端API數據
      const apiResult = await flashcardsService.getDueFlashcards(50);
      console.log('📡 API回應結果:', apiResult);

      if (apiResult.success && apiResult.data && apiResult.data.length > 0) {
        const cardsToUse = apiResult.data;
        console.log('✅ 載入後端API數據成功:', cardsToUse.length, '張詞卡');
        console.log('📋 詞卡列表:', cardsToUse.map(c => c.word));

        // 查詢已完成的測驗
        const cardIds = cardsToUse.map(c => c.id);
        let completedTests: any[] = [];

        try {
          const completedTestsResult = await flashcardsService.getCompletedTests(cardIds);
          if (completedTestsResult.success && completedTestsResult.data) {
            completedTests = completedTestsResult.data;
            console.log('📊 已完成測驗:', completedTests.length, '個');
          } else {
            console.log('⚠️ 查詢已完成測驗失敗，使用空列表:', completedTestsResult.error);
          }
        } catch (error) {
          console.error('💥 查詢已完成測驗異常:', error);
          console.log('📝 繼續使用空的已完成測驗列表');
        }

        // 計算每張詞卡剩餘的測驗
        const userCEFR = localStorage.getItem('userEnglishLevel') || 'A2';
        let remainingTestItems: TestItem[] = [];
        let order = 1;

        cardsToUse.forEach(card => {
          const wordCEFR = card.difficultyLevel || 'A2';
          const allTestTypes = getReviewTypesByCEFR(userCEFR, wordCEFR);

          // 找出該詞卡已完成的測驗類型
          const completedTestTypes = completedTests
            .filter(ct => ct.flashcardId === card.id)
            .map(ct => ct.testType);

          // 計算剩餘未完成的測驗類型
          const remainingTestTypes = allTestTypes.filter(testType =>
            !completedTestTypes.includes(testType)
          );

          console.log(`🎯 詞卡 ${card.word}: 總共${allTestTypes.length}個測驗, 已完成${completedTestTypes.length}個, 剩餘${remainingTestTypes.length}個`);

          // 為剩餘的測驗創建測驗項目
          remainingTestTypes.forEach(testType => {
            remainingTestItems.push({
              id: `${card.id}-${testType}`,
              cardId: card.id,
              word: card.word,
              testType,
              testName: getModeLabel(testType),
              isCompleted: false,
              isCurrent: false,
              order
            });
            order++;
          });
        });

        if (remainingTestItems.length === 0) {
          console.log('🎉 所有測驗都已完成！');
          setShowComplete(true);
          return;
        }

        console.log('📝 剩餘測驗項目:', remainingTestItems.length, '個');

        // 設置狀態
        setTotalTests(remainingTestItems.length);
        setTestItems(remainingTestItems);
        setCurrentTestItemIndex(0);
        setCompletedTests(0);

        // 找到第一個測驗項目對應的詞卡
        const firstTestItem = remainingTestItems[0];
        const firstCard = cardsToUse.find(c => c.id === firstTestItem.cardId);

        if (firstCard && firstTestItem) {
          setCurrentCard(firstCard);
          setCurrentCardIndex(cardsToUse.findIndex(c => c.id === firstCard.id));

          // 設置測驗模式為第一個測驗的類型
          const modeMapping: { [key: string]: typeof mode } = {
            'flip-memory': 'flip-memory',
            'vocab-choice': 'vocab-choice',
            'vocab-listening': 'vocab-listening',
            'sentence-fill': 'sentence-fill',
            'sentence-reorder': 'sentence-reorder',
            'sentence-speaking': 'sentence-speaking',
            'sentence-listening': 'sentence-listening'
          };

          const selectedMode = modeMapping[firstTestItem.testType] || 'flip-memory';
          setMode(selectedMode);
          setIsAutoSelecting(false);

          // 標記第一個測驗項目為當前狀態
          setTestItems(prev =>
            prev.map((item, index) =>
              index === 0
                ? { ...item, isCurrent: true }
                : item
            )
          );

          console.log(`🎯 恢復到未完成測驗: ${firstCard.word} - ${firstTestItem.testType}`);
        }
      } else {
        // 沒有到期詞卡
        console.log('❌ API回應:', {
          success: apiResult.success,
          dataExists: !!apiResult.data,
          dataLength: apiResult.data?.length,
          error: apiResult.error
        });
        setDueCards([]);
        setCurrentCard(null);
        setShowNoDueCards(true);
      }

    } catch (error) {
      console.error('💥 載入到期詞卡失敗:', error);
      setDueCards([]);
      setCurrentCard(null);
      setShowNoDueCards(true);
    } finally {
      setIsLoadingCard(false);
    }
  }

  // 智能載入下一張卡片並自動選擇模式
  const loadNextCardWithAutoMode = async (cardIndex: number) => {
    try {
      setIsAutoSelecting(true);

      // 等待dueCards載入完成
      if (dueCards.length === 0) {
        console.log('等待詞卡載入...');
        return;
      }

      const card = dueCards[cardIndex];
      if (!card) {
        setShowComplete(true);
        setIsAutoSelecting(false);
        return;
      }

      setCurrentCard(card);
      setCurrentCardIndex(cardIndex);

      // 系統自動選擇最適合的複習模式
      const selectedMode = await selectOptimalReviewMode(card);
      setMode(selectedMode);

      // 重置所有答題狀態
      resetAllStates();

      console.log(`載入卡片: ${card.word}, 選擇模式: ${selectedMode}`);

    } catch (error) {
      console.error('載入卡片失敗:', error);
    } finally {
      setIsAutoSelecting(false);
    }
  }

  // 系統自動選擇最適合的複習模式
  const selectOptimalReviewMode = async (card: ExtendedFlashcard): Promise<typeof mode> => {
    try {
      // 使用CEFR字符串進行智能選擇
      const userCEFRLevel = localStorage.getItem('userEnglishLevel') || 'A2';
      const wordCEFRLevel = card.difficultyLevel || 'A2';

      console.log(`CEFR智能選擇: 用戶${userCEFRLevel} vs 詞彙${wordCEFRLevel}`);

      const apiResult = await flashcardsService.getOptimalReviewMode(card.id, userCEFRLevel, wordCEFRLevel);

      if (apiResult.success && apiResult.data?.selectedMode) {
        const selectedMode = apiResult.data.selectedMode;
        console.log(`後端智能選擇: ${selectedMode}`);

        // 映射到前端模式名稱
        const modeMapping: { [key: string]: typeof mode } = {
          'flip-memory': 'flip-memory',
          'vocab-choice': 'vocab-choice',
          'vocab-listening': 'vocab-listening',
          'sentence-fill': 'sentence-fill',
          'sentence-reorder': 'sentence-reorder',
          'sentence-speaking': 'sentence-speaking',
          'sentence-listening': 'sentence-listening'
        };

        return modeMapping[selectedMode] || 'flip-memory';
      } else {
        console.log('後端API失敗，使用前端邏輯');
      }
    } catch (error) {
      console.error('智能選擇API錯誤:', error);
    }

    // 備用: 使用前端CEFR邏輯
    const userCEFRLevel = localStorage.getItem('userEnglishLevel') || 'A2';
    const wordCEFRLevel = card.difficultyLevel || 'A2';
    const availableModes = getReviewTypesByCEFR(userCEFRLevel, wordCEFRLevel);

    const modeMapping: { [key: string]: typeof mode } = {
      'flip-memory': 'flip-memory',
      'vocab-choice': 'vocab-choice',
      'vocab-listening': 'vocab-listening',
      'sentence-fill': 'sentence-fill',
      'sentence-reorder': 'sentence-reorder',
      'sentence-speaking': 'sentence-speaking',
      'sentence-listening': 'sentence-listening'
    };

    const selectedType = availableModes[0] || 'flip-memory';
    console.log(`前端CEFR邏輯選擇: ${selectedType}`);
    return modeMapping[selectedType] || 'flip-memory';
  }

  // 前端CEFR備用選擇邏輯
  const getReviewTypesByCEFR = (userCEFR: string, wordCEFR: string): string[] => {
    const userLevel = getCEFRToLevel(userCEFR);
    const wordLevel = getCEFRToLevel(wordCEFR);
    const difficulty = wordLevel - userLevel;

    if (userCEFR === 'A1') {
      return ['flip-memory', 'vocab-choice', 'vocab-listening'];
    } else if (difficulty < -10) {
      return ['sentence-reorder', 'sentence-fill'];
    } else if (difficulty >= -10 && difficulty <= 10) {
      return ['sentence-fill', 'sentence-reorder', 'sentence-speaking'];
    } else {
      return ['flip-memory', 'vocab-choice'];
    }
  }

  // CEFR轉換為數值 (前端計算用)
  const getCEFRToLevel = (cefr: string): number => {
    const mapping: { [key: string]: number } = {
      'A1': 20, 'A2': 35, 'B1': 50, 'B2': 65, 'C1': 80, 'C2': 95
    };
    return mapping[cefr] || 50;
  }

  // 計算每張詞卡的測驗數量
  const calculateTestsForCard = (userCEFR: string, wordCEFR: string): number => {
    const userLevel = getCEFRToLevel(userCEFR);
    const wordLevel = getCEFRToLevel(wordCEFR);
    const difficulty = wordLevel - userLevel;

    if (userCEFR === 'A1') {
      return 3; // A1學習者：翻卡、選擇、聽力
    } else if (difficulty < -10) {
      return 2; // 簡單詞彙：填空、重組
    } else if (difficulty >= -10 && difficulty <= 10) {
      return 3; // 適中詞彙：填空、重組、口說
    } else {
      return 2; // 困難詞彙：翻卡、選擇
    }
  }

  // 取得當前學習情境
  const getCurrentContext = (userCEFR: string, wordCEFR: string): string => {
    const userLevel = getCEFRToLevel(userCEFR);
    const wordLevel = getCEFRToLevel(wordCEFR);
    const difficulty = wordLevel - userLevel;

    if (userCEFR === 'A1') return 'A1學習者';
    if (difficulty < -10) return '簡單詞彙';
    if (difficulty >= -10 && difficulty <= 10) return '適中詞彙';
    return '困難詞彙';
  }

  // 生成完整四情境對照表數據
  const generateContextTable = (currentUserCEFR: string, currentWordCEFR: string) => {
    const currentContext = getCurrentContext(currentUserCEFR, currentWordCEFR);

    const contexts = [
      {
        type: 'A1學習者',
        icon: '🛡️',
        reviewTypes: ['🔄翻卡記憶', '✅詞彙選擇', '🎧詞彙聽力'],
        purpose: '建立基礎信心',
        condition: '用戶等級 = A1',
        description: '初學者保護機制，使用最基礎的3種題型'
      },
      {
        type: '簡單詞彙',
        icon: '🎯',
        reviewTypes: ['✏️例句填空', '🔀例句重組'],
        purpose: '應用練習',
        condition: '用戶等級 > 詞彙等級',
        description: '詞彙對您較簡單，重點練習拼寫和語法應用'
      },
      {
        type: '適中詞彙',
        icon: '⚖️',
        reviewTypes: ['✏️例句填空', '🔀例句重組', '🗣️例句口說'],
        purpose: '全方位練習',
        condition: '用戶等級 ≈ 詞彙等級',
        description: '詞彙難度適中，進行聽說讀寫全方位練習'
      },
      {
        type: '困難詞彙',
        icon: '📚',
        reviewTypes: ['🔄翻卡記憶', '✅詞彙選擇'],
        purpose: '基礎重建',
        condition: '用戶等級 < 詞彙等級',
        description: '詞彙對您較困難，回歸基礎重建記憶'
      }
    ];

    return contexts.map(context => ({
      ...context,
      isCurrent: context.type === currentContext
    }));
  }

  // 取得題型圖標
  const getModeIcon = (mode: string): string => {
    const icons: { [key: string]: string } = {
      'flip-memory': '🔄',
      'vocab-choice': '✅',
      'vocab-listening': '🎧',
      'sentence-listening': '👂',
      'sentence-fill': '✏️',
      'sentence-reorder': '🔀',
      'sentence-speaking': '🗣️'
    };
    return icons[mode] || '📝';
  }

  // 取得題型中文名稱
  const getModeLabel = (mode: string): string => {
    const labels: { [key: string]: string } = {
      'flip-memory': '翻卡記憶',
      'vocab-choice': '詞彙選擇',
      'vocab-listening': '詞彙聽力',
      'sentence-listening': '例句聽力',
      'sentence-fill': '例句填空',
      'sentence-reorder': '例句重組',
      'sentence-speaking': '例句口說'
    };
    return labels[mode] || mode;
  }

  // 生成測驗項目列表
  const generateTestItems = (cards: ExtendedFlashcard[], userCEFR: string): TestItem[] => {
    const items: TestItem[] = [];
    let order = 1;

    cards.forEach(card => {
      const wordCEFR = card.difficultyLevel || 'A2';
      const testTypes = getReviewTypesByCEFR(userCEFR, wordCEFR);

      testTypes.forEach(testType => {
        items.push({
          id: `${card.id}-${testType}`,
          cardId: card.id,
          word: card.word,
          testType,
          testName: getModeLabel(testType),
          isCompleted: false,
          isCurrent: false,
          order
        });
        order++;
      });
    });

    return items;
  }

  // 按詞卡分組測驗項目
  const groupTestItemsByCard = (items: TestItem[]): CardTestGroup[] => {
    const grouped = items.reduce((acc, item) => {
      const cardId = item.cardId;
      if (!acc[cardId]) {
        const card = dueCards.find(c => c.id === cardId);
        const userCEFR = localStorage.getItem('userEnglishLevel') || 'A2';
        const wordCEFR = card?.difficultyLevel || 'A2';

        acc[cardId] = {
          cardId,
          word: item.word,
          context: getCurrentContext(userCEFR, wordCEFR),
          tests: []
        };
      }
      acc[cardId].tests.push(item);
      return acc;
    }, {} as Record<string, CardTestGroup>);

    return Object.values(grouped);
  }

  // 初始化詞卡複習會話
  const initializeCardReviewSession = (card: ExtendedFlashcard): CardReviewSession => {
    const userCEFR = localStorage.getItem('userEnglishLevel') || 'A2';
    const wordCEFR = card.difficultyLevel || 'A2';
    const plannedTests = getReviewTypesByCEFR(userCEFR, wordCEFR);

    return {
      cardId: card.id,
      word: card.word,
      plannedTests,
      completedTests: [],
      startedAt: new Date(),
      isCompleted: false
    };
  }

  // 開始詞卡複習會話
  const startCardReviewSession = (card: ExtendedFlashcard) => {
    const session = initializeCardReviewSession(card);
    setCurrentCardSession(session);

    // 更新會話映射
    setCardReviewSessions(prev => new Map(prev.set(card.id, session)));

    console.log(`🎯 開始詞卡複習會話: ${card.word}`, {
      plannedTests: session.plannedTests,
      totalTests: session.plannedTests.length
    });
  }

  // 檢查詞卡是否已完成所有測驗
  const isCardReviewCompleted = (cardId: string): boolean => {
    const session = cardReviewSessions.get(cardId);
    return session?.isCompleted || false;
  }

  // 獲取詞卡的下一個測驗類型
  const getNextTestTypeForCard = (cardId: string): string | null => {
    const session = cardReviewSessions.get(cardId);
    if (!session) return null;

    const completedTestTypes = session.completedTests.map(t => t.testType);
    const nextTestType = session.plannedTests.find(testType =>
      !completedTestTypes.includes(testType)
    );

    return nextTestType || null;
  }

  // 重置所有答題狀態
  const resetAllStates = () => {
    setIsFlipped(false);
    setSelectedAnswer(null);
    setShowResult(false);
    setFillAnswer('');
    setShowHint(false);
    setShuffledWords([]);
    setArrangedWords([]);
    setReorderResult(null);
    setQuizOptions([]);
  }

  // Quiz options generation
  useEffect(() => {
    if (!currentCard) return;

    const currentWord = currentCard.word;

    // Generate quiz options with current word and other words
    const otherWords = dueCards
      .filter(card => card.id !== currentCard.id)
      .map(card => card.word);

    // 優先從其他詞卡生成選項，必要時使用備用詞彙
    const selectedOtherWords: string[] = [];

    // 從其他詞卡取得選項
    for (const word of otherWords) {
      if (selectedOtherWords.length >= 3) break;
      if (word !== currentWord && !selectedOtherWords.includes(word)) {
        selectedOtherWords.push(word);
      }
    }

    // 如果詞卡不足，補充基礎詞彙
    if (selectedOtherWords.length < 3) {
      const backupWords = ['important', 'beautiful', 'interesting', 'difficult', 'wonderful', 'excellent'];
      for (const word of backupWords) {
        if (selectedOtherWords.length >= 3) break;
        if (word !== currentWord && !selectedOtherWords.includes(word)) {
          selectedOtherWords.push(word);
        }
      }
    }

    // 確保有4個選項：當前詞彙 + 3個其他選項
    const options = [currentWord, ...selectedOtherWords.slice(0, 3)].sort(() => Math.random() - 0.5);
    setQuizOptions(options);

    // Reset quiz state when card changes
    setSelectedAnswer(null);
    setShowResult(false);
  }, [currentCard, dueCards])

  // Sentence options generation for sentence listening
  useEffect(() => {
    if (!currentCard || mode !== 'sentence-listening') return;

    const currentSentence = currentCard.example;

    // Generate sentence options with current sentence and other sentences
    const otherSentences = dueCards
      .filter(card => card.id !== currentCard.id)
      .map(card => card.example);

    // 優先從其他詞卡的例句生成選項
    const selectedOtherSentences: string[] = [];

    // 從其他詞卡的例句取得選項
    for (const sentence of otherSentences) {
      if (selectedOtherSentences.length >= 3) break;
      if (sentence !== currentSentence && !selectedOtherSentences.includes(sentence)) {
        selectedOtherSentences.push(sentence);
      }
    }

    // 如果例句不足，使用基礎例句補充
    if (selectedOtherSentences.length < 3) {
      const backupSentences = [
        'This is a very important decision.',
        'The weather looks beautiful today.',
        'We need to find a good solution.',
        'Learning English can be interesting.'
      ];

      for (const sentence of backupSentences) {
        if (selectedOtherSentences.length >= 3) break;
        if (sentence !== currentSentence && !selectedOtherSentences.includes(sentence)) {
          selectedOtherSentences.push(sentence);
        }
      }
    }

    // 確保有4個選項：當前例句 + 3個其他選項
    const options = [currentSentence, ...selectedOtherSentences.slice(0, 3)].sort(() => Math.random() - 0.5);
    setSentenceOptions(options);

  }, [currentCard, dueCards, mode])

  // Initialize sentence reorder when card changes or mode switches to sentence-reorder
  useEffect(() => {
    if (mode === 'sentence-reorder' && currentCard) {
      const words = currentCard.example.split(/\s+/).filter(word => word.length > 0)
      const shuffled = [...words].sort(() => Math.random() - 0.5)
      setShuffledWords(shuffled)
      setArrangedWords([])
      // 只在卡片或模式切換時重置結果，不在其他狀態變化時重置
      if (reorderResult !== null) {
        setReorderResult(null)
      }
    }
  }, [currentCard, mode]) // 移除reorderResult依賴，避免循環重置

  // Sentence reorder handlers
  const handleWordClick = (word: string) => {
    // Move word from shuffled to arranged
    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 handleCheckReorderAnswer = async () => {
    if (!currentCard) return;

    const userSentence = arrangedWords.join(' ')
    const correctSentence = currentCard.example
    const isCorrect = userSentence.toLowerCase().trim() === correctSentence.toLowerCase().trim()
    setReorderResult(isCorrect)

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

    // 記錄測驗結果
    await recordTestResult(isCorrect, userSentence);
  }

  const handleResetReorder = () => {
    if (!currentCard) return;

    const words = currentCard.example.split(/\s+/).filter(word => word.length > 0)
    const shuffled = [...words].sort(() => Math.random() - 0.5)
    setShuffledWords(shuffled)
    setArrangedWords([])
    setReorderResult(null)
  }

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

  // 移動到下一個測驗或下一張詞卡
  const handleNext = async () => {
    if (!currentCard || !currentCardSession) return;

    // 檢查當前詞卡是否還有未完成的測驗
    const nextTestType = getNextTestTypeForCard(currentCard.id);

    if (nextTestType) {
      // 當前詞卡還有測驗未完成，切換到下一個測驗類型
      const modeMapping: { [key: string]: typeof mode } = {
        'flip-memory': 'flip-memory',
        'vocab-choice': 'vocab-choice',
        'vocab-listening': 'vocab-listening',
        'sentence-fill': 'sentence-fill',
        'sentence-reorder': 'sentence-reorder',
        'sentence-speaking': 'sentence-speaking',
        'sentence-listening': 'sentence-listening'
      };

      const nextMode = modeMapping[nextTestType] || 'flip-memory';
      setMode(nextMode);
      resetAllStates();

      // 更新測驗項目的當前狀態
      setTestItems(prev =>
        prev.map(item =>
          item.cardId === currentCard.id && item.testType === nextTestType
            ? { ...item, isCurrent: true }
            : { ...item, isCurrent: false }
        )
      );

      console.log(`🔄 切換到下一個測驗: ${nextTestType} for ${currentCard.word}`);
    } else {
      // 當前詞卡的所有測驗都已完成，移動到下一張詞卡
      if (currentCardIndex < dueCards.length - 1) {
        const nextCardIndex = currentCardIndex + 1;
        const nextCard = dueCards[nextCardIndex];

        // 開始新詞卡的複習會話
        startCardReviewSession(nextCard);

        await loadNextCardWithAutoMode(nextCardIndex);
        console.log(`➡️ 移動到下一張詞卡: ${nextCard.word}`);
      } else {
        // 所有詞卡都已完成
        setShowComplete(true);
        console.log(`🎉 所有詞卡復習完成！`);
      }
    }
  }

  const handlePrevious = async () => {
    // 暫時保持簡單的向前導航
    if (currentCardIndex > 0) {
      await loadNextCardWithAutoMode(currentCardIndex - 1);
    }
  }

  const handleQuizAnswer = async (answer: string) => {
    if (showResult || !currentCard) return

    setSelectedAnswer(answer)
    setShowResult(true)

    const isCorrect = answer === currentCard.word
    setScore(prev => ({
      correct: isCorrect ? prev.correct + 1 : prev.correct,
      total: prev.total + 1
    }))

    // 記錄測驗結果到資料庫
    await recordTestResult(isCorrect, answer);
  }

  // 記錄測驗結果到資料庫（立即保存）
  const recordTestResult = async (isCorrect: boolean, userAnswer?: string, confidenceLevel?: number) => {
    if (!currentCard) return;

    // 檢查認證狀態
    const token = localStorage.getItem('auth_token');
    if (!token) {
      console.error('❌ 未找到認證token，請重新登入');
      return;
    }

    try {
      console.log('🔄 開始記錄測驗結果到資料庫...', {
        flashcardId: currentCard.id,
        testType: mode,
        word: currentCard.word,
        isCorrect,
        hasToken: !!token
      });

      // 立即記錄到資料庫
      const result = await flashcardsService.recordTestCompletion({
        flashcardId: currentCard.id,
        testType: mode,
        isCorrect,
        userAnswer,
        confidenceLevel,
        responseTimeMs: 2000
      });

      if (result.success) {
        console.log('✅ 測驗結果已記錄到資料庫:', mode, 'for', currentCard.word);

        // 更新本地UI狀態
        setCompletedTests(prev => prev + 1);

        // 標記當前測驗項目為完成
        setTestItems(prev =>
          prev.map((item, index) =>
            index === currentTestItemIndex
              ? { ...item, isCompleted: true, isCurrent: false }
              : item
          )
        );

        // 移到下一個測驗項目
        setCurrentTestItemIndex(prev => prev + 1);

        // 檢查是否還有剩餘測驗
        setTimeout(() => {
          loadNextUncompletedTest();
        }, 1500);

      } else {
        console.error('❌ 記錄測驗結果失敗:', result.error);
        if (result.error?.includes('Test already completed') || result.error?.includes('already completed')) {
          console.log('⚠️ 測驗已完成，跳到下一個');
          loadNextUncompletedTest();
        } else {
          // 其他錯誤，先更新UI狀態避免卡住
          setCompletedTests(prev => prev + 1);
          setCurrentTestItemIndex(prev => prev + 1);
          setTimeout(() => {
            loadNextUncompletedTest();
          }, 1500);
        }
      }
    } catch (error) {
      console.error('💥 記錄測驗結果異常:', error);
      // 即使出錯也更新進度，避免卡住
      setCompletedTests(prev => prev + 1);
      setCurrentTestItemIndex(prev => prev + 1);
      setTimeout(() => {
        loadNextUncompletedTest();
      }, 1500);
    }
  }

  // 載入下一個未完成的測驗
  const loadNextUncompletedTest = () => {
    if (currentTestItemIndex + 1 < testItems.length) {
      // 還有測驗項目
      const nextTestItem = testItems[currentTestItemIndex + 1];
      const nextCard = dueCards.find(c => c.id === nextTestItem.cardId);

      if (nextCard) {
        setCurrentCard(nextCard);
        setCurrentCardIndex(dueCards.findIndex(c => c.id === nextCard.id));

        // 設置下一個測驗類型
        const modeMapping: { [key: string]: typeof mode } = {
          'flip-memory': 'flip-memory',
          'vocab-choice': 'vocab-choice',
          'vocab-listening': 'vocab-listening',
          'sentence-fill': 'sentence-fill',
          'sentence-reorder': 'sentence-reorder',
          'sentence-speaking': 'sentence-speaking',
          'sentence-listening': 'sentence-listening'
        };

        const nextMode = modeMapping[nextTestItem.testType] || 'flip-memory';
        setMode(nextMode);
        resetAllStates();

        // 更新測驗項目的當前狀態
        setTestItems(prev =>
          prev.map((item, index) =>
            index === currentTestItemIndex + 1
              ? { ...item, isCurrent: true }
              : { ...item, isCurrent: false }
          )
        );

        console.log(`🔄 載入下一個測驗: ${nextCard.word} - ${nextTestItem.testType}`);
      }
    } else {
      // 所有測驗完成
      console.log('🎉 所有測驗完成！');
      setShowComplete(true);
    }
  }

  // 完成詞卡複習並提交到後端
  const completeCardReview = async (session: CardReviewSession) => {
    try {
      // 計算綜合表現指標
      const correctCount = session.completedTests.filter(t => t.isCorrect).length;
      const totalTests = session.completedTests.length;
      const accuracy = totalTests > 0 ? correctCount / totalTests : 0;

      // 計算平均信心等級（用於翻卡記憶測驗）
      const confidenceTests = session.completedTests.filter(t => t.confidenceLevel !== undefined);
      const avgConfidence = confidenceTests.length > 0
        ? confidenceTests.reduce((sum, t) => sum + (t.confidenceLevel || 3), 0) / confidenceTests.length
        : 3;

      // 計算平均答題時間
      const avgResponseTime = session.completedTests.reduce((sum, t) => sum + t.responseTimeMs, 0) / totalTests;

      // 確定主要測驗類型（用於後端SM2算法）
      const primaryTestType = session.completedTests[0]?.testType || 'flip-memory';

      console.log(`🔥 提交詞卡完整復習結果:`, {
        word: session.word,
        accuracy: `${Math.round(accuracy * 100)}%`,
        avgConfidence,
        avgResponseTime: `${avgResponseTime}ms`,
        primaryTestType,
        completedTests: session.completedTests.length
      });

      // 提交到後端
      const result = await flashcardsService.submitReview(session.cardId, {
        isCorrect: accuracy >= 0.7, // 70%以上正確率視為通過
        confidenceLevel: Math.round(avgConfidence),
        questionType: primaryTestType,
        userAnswer: `綜合${totalTests}個測驗，正確率${Math.round(accuracy * 100)}%`,
        timeTaken: Math.round(avgResponseTime)
      });

      if (result.success && result.data) {
        console.log('✅ 詞卡復習結果提交成功:', result.data);

        // 更新詞卡的熟悉度等資訊
        if (currentCard && currentCard.id === session.cardId) {
          setCurrentCard(prev => prev ? {
            ...prev,
            masteryLevel: result.data!.masteryLevel,
            nextReviewDate: result.data!.nextReviewDate
          } : null);
        }

        // 增加已完成詞卡數量
        setCompletedCards(prev => prev + 1);

        console.log(`🎉 詞卡 ${session.word} 復習完成！新熟悉度: ${result.data.masteryLevel}%, 下次復習: ${result.data.nextReviewDate}`);
      } else {
        console.error('詞卡復習結果提交失敗:', result.error);
      }

    } catch (error) {
      console.error('完成詞卡復習時發生錯誤:', error);
    }
  }

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

    setShowResult(true)

    const isCorrect = fillAnswer.toLowerCase().trim() === currentCard.word.toLowerCase()
    setScore(prev => ({
      correct: isCorrect ? prev.correct + 1 : prev.correct,
      total: prev.total + 1
    }))

    // 記錄測驗結果
    await recordTestResult(isCorrect, fillAnswer);
  }

  const handleListeningAnswer = async (answer: string) => {
    if (showResult || !currentCard) return

    setSelectedAnswer(answer)
    setShowResult(true)

    const isCorrect = answer === currentCard.word
    setScore(prev => ({
      correct: isCorrect ? prev.correct + 1 : prev.correct,
      total: prev.total + 1
    }))

    // 記錄測驗結果
    await recordTestResult(isCorrect, answer);
  }

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

    setShowResult(true)

    const isCorrect = transcript.toLowerCase().includes(currentCard.word.toLowerCase())
    setScore(prev => ({
      correct: isCorrect ? prev.correct + 1 : prev.correct,
      total: prev.total + 1
    }))

    // 記錄測驗結果
    await recordTestResult(isCorrect, transcript);
  }

  const handleSentenceListeningAnswer = async (answer: string) => {
    if (showResult || !currentCard) return

    setSelectedAnswer(answer)
    setShowResult(true)

    const isCorrect = answer === currentCard.example
    setScore(prev => ({
      correct: isCorrect ? prev.correct + 1 : prev.correct,
      total: prev.total + 1
    }))

    // 記錄測驗結果
    await recordTestResult(isCorrect, answer);
  }

  const handleReportSubmit = () => {
    console.log('Report submitted:', {
      card: reportingCard,
      reason: reportReason
    })
    setShowReportModal(false)
    setReportReason('')
    setReportingCard(null)
  }

  const handleRestart = async () => {
    setScore({ correct: 0, total: 0 })
    setCompletedTests(0)
    setTotalTests(0)
    setTestItems([])
    setCurrentTestItemIndex(0)
    setShowComplete(false)
    setShowNoDueCards(false)
    await loadDueCards(); // 重新載入到期詞卡
  }

  // Show loading screen until mounted or while loading cards
  if (!mounted || isLoadingCard) {
    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">
          {isAutoSelecting ? '系統正在選擇最適合的複習方式...' : '載入中...'}
        </div>
      </div>
    )
  }

  // Show no due cards screen
  if (showNoDueCards) {
    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)]">
          <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="space-y-3 mb-6">
              <div className="bg-blue-50 rounded-lg p-3 text-left">
                <div className="font-medium text-blue-900 mb-1">💡 建議行動</div>
                <ul className="text-blue-800 text-sm space-y-1">
                  <li>• 前往詞卡管理頁面新增詞卡</li>
                  <li>• 查看學習統計和進度</li>
                  <li>• 調整學習目標和設定</li>
                </ul>
              </div>
            </div>

            <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>

            <button
              onClick={handleRestart}
              className="w-full mt-3 py-2 text-blue-600 hover:text-blue-800 transition-colors text-sm"
            >
              🔄 重新檢查到期詞卡
            </button>
          </div>
        </div>
      </div>
    )
  }

  // Show current card interface
  if (!currentCard) {
    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 */}
      <Navigation />

      <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-3">
            <span className="text-sm font-medium text-gray-900">學習進度</span>
            <div className="flex items-center gap-6">
              {/* 詞卡進度 */}
              <div className="text-sm text-gray-600">
                <span className="font-medium">詞卡:</span>
                <span className="ml-1 text-green-600 font-semibold">{completedCards}</span>
                <span className="text-gray-500">/</span>
                <span className="text-gray-600">{dueCards.length}</span>
                {dueCards.length > 0 && (
                  <span className="text-blue-600 ml-1">
                    ({Math.round((completedCards / dueCards.length) * 100)}%)
                  </span>
                )}
              </div>

              {/* 測驗進度 */}
              <button
                onClick={() => setShowTaskListModal(true)}
                className="text-sm text-gray-600 hover:text-blue-600 transition-colors cursor-pointer flex items-center gap-1"
                title="點擊查看詳細任務清單"
              >
                <span className="font-medium">測驗:</span>
                <span className="ml-1 text-blue-600 font-semibold">{completedTests}</span>
                <span className="text-gray-500">/</span>
                <span className="text-gray-600">{totalTests}</span>
                {totalTests > 0 && (
                  <span className="text-blue-600 ml-1">
                    ({Math.round((completedTests / totalTests) * 100)}%)
                  </span>
                )}
                <span className="text-xs ml-1">📋</span>
              </button>
            </div>
          </div>

          {/* 雙層進度條 */}
          <div className="space-y-2">
            {/* 詞卡進度條 */}
            <div className="flex items-center gap-3">
              <span className="text-xs text-gray-500 w-12">詞卡</span>
              <div className="flex-1 bg-gray-200 rounded-full h-2">
                <div
                  className="bg-green-500 h-2 rounded-full transition-all"
                  style={{ width: `${dueCards.length > 0 ? (completedCards / dueCards.length) * 100 : 0}%` }}
                ></div>
              </div>
              <span className="text-xs text-gray-500 w-8">
                {dueCards.length > 0 ? Math.round((completedCards / dueCards.length) * 100) : 0}%
              </span>
            </div>

            {/* 測驗進度條 */}
            <div className="flex items-center gap-3">
              <span className="text-xs text-gray-500 w-12">測驗</span>
              <div
                className="flex-1 bg-gray-200 rounded-full h-2 cursor-pointer hover:bg-gray-300 transition-colors"
                onClick={() => setShowTaskListModal(true)}
                title="點擊查看詳細任務清單"
              >
                <div
                  className="bg-blue-500 h-2 rounded-full transition-all hover:bg-blue-600"
                  style={{ width: `${totalTests > 0 ? (completedTests / totalTests) * 100 : 0}%` }}
                ></div>
              </div>
              <span className="text-xs text-gray-500 w-8">
                {totalTests > 0 ? Math.round((completedTests / totalTests) * 100) : 0}%
              </span>
            </div>
          </div>
        </div>

        {mode === 'flip-memory' ? (
          /* 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="px-3 py-2 rounded-md transition-colors text-gray-600 hover:text-gray-900"
              >
                🚩 回報錯誤
              </button>
            </div>

            <div
              ref={cardContainerRef}
              className="card-container"
              onClick={handleFlip}
              style={{ height: `${cardHeight}px` }}
            >
              <div className={`card ${isFlipped ? 'flipped' : ''}`}>
                {/* Front */}
                <div className="card-front">
                  <div
                    ref={cardFrontRef}
                    className="bg-white rounded-xl shadow-lg cursor-pointer hover:shadow-xl transition-shadow p-8"
                  >
                    {/* Title and Instructions */}
                    <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">
                        {currentCard.difficultyLevel}
                      </span>
                    </div>

                    {/* Instructions Test Action */}
                    <p className="text-lg text-gray-700 mb-6 text-left">
                      點擊卡片翻面，根據你對單字的熟悉程度進行自我評估：
                    </p>

                    {/* Word Display */}
                    <div className="flex-1 flex items-center justify-center mt-6">
                      <div className="bg-gray-50 rounded-lg p-8 w-full text-center">
                        <h3 className="text-4xl font-bold text-gray-900 mb-6">
                          {currentCard.word}
                        </h3>
                        <div className="flex items-center justify-center gap-3">
                          <span className="text-lg text-gray-500">
                            {currentCard.pronunciation}
                          </span>
                          <AudioPlayer text={currentCard.word} />
                        </div>
                      </div>
                    </div>
                  </div>
                </div>

                {/* Back */}
                <div className="card-back">
                  <div
                    ref={cardBackRef}
                    className="bg-white rounded-xl shadow-lg cursor-pointer hover:shadow-xl transition-shadow"
                  >
                    {/* Content Sections */}
                    <div className="space-y-4">
                      {/* Definition */}
                      <div className="bg-gray-50 rounded-lg p-4">
                        <h3 className="font-semibold text-gray-900 mb-2 text-left">定義</h3>
                        <p className="text-gray-700 text-left">{currentCard.definition}</p>
                      </div>

                      {/* Example */}
                      <div className="bg-gray-50 rounded-lg p-4">
                        <h3 className="font-semibold text-gray-900 mb-2 text-left">例句</h3>
                        <div className="relative">
                          <p className="text-gray-700 italic mb-2 text-left pr-12">"{currentCard.example}"</p>
                          <div className="absolute bottom-0 right-0">
                            <AudioPlayer text={currentCard.example} />
                          </div>
                        </div>
                        <p className="text-gray-600 text-sm text-left">"{currentCard.exampleTranslation}"</p>
                      </div>

                      {/* Synonyms */}
                      <div className="bg-gray-50 rounded-lg p-4">
                        <h3 className="font-semibold text-gray-900 mb-2 text-left">同義詞</h3>
                        <div className="flex flex-wrap gap-2">
                          {(currentCard.synonyms || []).map((synonym, index) => (
                            <span
                              key={index}
                              className="bg-white text-gray-700 px-3 py-1 rounded-full text-sm border border-gray-200"
                            >
                              {synonym}
                            </span>
                          ))}
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            {/* Navigation */}
            <div className="flex gap-4 mt-6">
              <button
                onClick={handlePrevious}
                disabled={currentCardIndex === 0}
                className="flex-1 py-3 bg-gray-500 text-white rounded-lg disabled:opacity-50 disabled:cursor-not-allowed hover:bg-gray-600 transition-colors font-medium"
              >
                上一張
              </button>
              <button
                onClick={handleNext}
                className="flex-1 py-3 bg-primary text-white rounded-lg hover:bg-primary-dark transition-colors font-medium"
              >
                {currentCardIndex === dueCards.length - 1 ? '完成' : '下一張'}
              </button>
            </div>
          </div>
        ) : mode === 'vocab-choice' ? (
          /* Vocab Choice Mode - 詞彙選擇 */
          <div className="relative">
            {/* Error Report Button for Quiz Mode */}
            <div className="flex justify-end mb-2">
              <button
                onClick={() => {
                  setReportingCard(currentCard)
                  setShowReportModal(true)
                }}
                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">
              {/* Title in top-left */}
              <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">
                  {currentCard.difficultyLevel}
                </span>
              </div>

              {/* Instructions Test Action */}
              <p className="text-lg text-gray-700 mb-6 text-left">
                請選擇符合上述定義的英文詞彙：
              </p>

              <div className="text-center mb-8">
                <div className="bg-gray-50 rounded-lg p-4 mb-6">
                  <h3 className="font-semibold text-gray-900 mb-2 text-left">定義</h3>
                  <p className="text-gray-700 text-left">{currentCard.definition}</p>
                </div>
     
              </div>

            <div className="space-y-3 mb-6">
              {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.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={`p-6 rounded-lg w-full mb-6 ${
                  selectedAnswer === currentCard.word
                    ? 'bg-green-50 border border-green-200'
                    : 'bg-red-50 border border-red-200'
                }`}>
                  <p className={`font-semibold text-left text-xl mb-4 ${
                    selectedAnswer === currentCard.word
                      ? 'text-green-700'
                      : 'text-red-700'
                  }`}>
                    {selectedAnswer === currentCard.word ? '正確！' : '錯誤！'}
                  </p>

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

                  <div className="space-y-3">
                    <div className="text-left">
                      <div className="flex items-center text-gray-600">
                        <strong>發音：</strong>
                        <span className="mx-2">{currentCard.pronunciation}</span>
                        <AudioPlayer text={currentCard.word} />
                      </div>
                    </div>
                  </div>
                </div>
              )}
            </div>

            {/* Navigation */}
            <div className="flex gap-4 mt-6">
              <button
                onClick={handlePrevious}
                disabled={currentCardIndex === 0}
                className="flex-1 py-3 bg-gray-500 text-white rounded-lg disabled:opacity-50 disabled:cursor-not-allowed hover:bg-gray-600 transition-colors font-medium"
              >
                上一張
              </button>
              <button
                onClick={handleNext}
                className="flex-1 py-3 bg-primary text-white rounded-lg hover:bg-primary-dark transition-colors font-medium"
              >
                {currentCardIndex === dueCards.length - 1 ? '完成' : '下一張'}
              </button>
            </div>
          </div>
        ) : mode === 'sentence-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="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">
              {/* Title in top-left */}
              <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">
                  {currentCard.difficultyLevel}
                </span>
              </div>

              {/* Example Image */}
              {currentCard.exampleImage && (
                <div className="mb-6">
                  <div className="bg-gray-50 rounded-lg p-4">
                    <img
                      src={currentCard.exampleImage}
                      alt="Example illustration"
                      className="w-full max-w-md mx-auto rounded-lg cursor-pointer"
                      onClick={() => setModalImage(currentCard.exampleImage || null)}
                    />
                  </div>
                </div>
              )}

              {/* Instructions Test Action */}
            <p className="text-lg text-gray-700 mb-6 text-left">
                請點擊例句中的空白處輸入正確的單字：
              </p>
              
              {/* Example Sentence with Blanks */}
              <div className="mb-6">
                <div className="bg-gray-50 rounded-lg p-6">
                  <div className="text-lg text-gray-700 leading-relaxed">
                    {currentCard.example.split(new RegExp(`(${currentCard.word})`, 'gi')).map((part, index) => {
                      const isTargetWord = part.toLowerCase() === currentCard.word.toLowerCase();
                      return isTargetWord ? (
                        <span key={index} className="relative inline-block mx-1">
                          <input
                            type="text"
                            value={fillAnswer}
                            onChange={(e) => setFillAnswer(e.target.value)}
                            onKeyDown={(e) => {
                              if (e.key === 'Enter' && !showResult && fillAnswer.trim()) {
                                handleFillAnswer()
                              }
                            }}
                            placeholder=""
                            disabled={showResult}
                            className={`inline-block px-2 py-1 text-center bg-transparent focus:outline-none disabled:bg-gray-100 ${
                              fillAnswer
                                ? 'border-b-2 border-blue-500'
                                : 'border-b-2 border-dashed border-gray-400 focus:border-blue-400 focus:border-solid'
                            }`}
                            style={{ width: `${Math.max(100, Math.max(currentCard.word.length * 12, fillAnswer.length * 12 + 20))}px` }}
                          />
                          {!fillAnswer && (
                            <span
                              className="absolute inset-0 flex items-center justify-center text-gray-400 pointer-events-none"
                              style={{ paddingBottom: '8px' }}
                            >
                              ____
                            </span>
                          )}
                        </span>
                      ) : (
                        <span key={index}>{part}</span>
                      );
                    })}
                  </div>
                </div>
              </div>

              {/* Action Buttons */}
              <div className="flex gap-3 mb-4">
                {!showResult && fillAnswer.trim() && (
                  <button
                    onClick={handleFillAnswer}
                    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>

              {/* Hint Section */}
              {showHint && (
                <div className="mb-4 p-4 bg-yellow-50 border border-yellow-200 rounded-lg">
                  <h4 className="font-semibold text-yellow-800 mb-2">詞彙定義：</h4>
                  <p className="text-yellow-800">{currentCard.definition}</p>
                </div>
              )}

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

                  {fillAnswer.toLowerCase().trim() !== currentCard.word.toLowerCase() && (
                    <div className="mb-4">
                      <p className="text-gray-700 text-left">
                        正確答案是：<strong className="text-lg">{currentCard.word}</strong>
                      </p>
                    </div>
                  )}

                  <div className="space-y-3">
                    <div className="text-left">
                      <p className="text-gray-600">
                        <span className="mx-2">{currentCard.pronunciation}</span>
                        <AudioPlayer text={currentCard.word} />
                      </p>
                    </div>

                    <div className="text-left">
                    </div>
                  </div>
                </div>
              )}
            </div>

            {/* Navigation */}
            <div className="flex gap-4 mt-6">
              <button
                onClick={handlePrevious}
                disabled={currentCardIndex === 0}
                className="flex-1 py-3 bg-gray-500 text-white rounded-lg disabled:opacity-50 disabled:cursor-not-allowed hover:bg-gray-600 transition-colors font-medium"
              >
                上一張
              </button>
              <button
                onClick={handleNext}
                className="flex-1 py-3 bg-primary text-white rounded-lg hover:bg-primary-dark transition-colors font-medium"
              >
                {currentCardIndex === dueCards.length - 1 ? '完成' : '下一張'}
              </button>
            </div>
          </div>
        ) : mode === 'vocab-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="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">
              {/* Title in top-left */}
              <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">
                  {currentCard.difficultyLevel}
                </span>
              </div>

              {/* Instructions Test Action */}
              <p className="text-lg text-gray-700 mb-6 text-left">
                請聽發音並選擇正確的英文單字：
              </p>

              {/* Content Sections */}
              <div className="space-y-4 mb-8">
                {/* Audio */}
                <div className="bg-gray-50 rounded-lg p-4">
                  <h3 className="font-semibold text-gray-900 mb-2 text-left">發音</h3>
                  <div className="flex items-center gap-3">
                    <span className="text-gray-700">{currentCard.pronunciation}</span>
                    <AudioPlayer text={currentCard.word} />
                  </div>
                </div>
              </div>

            {/* Word Options */}
            <div className="grid grid-cols-2 gap-3 mb-6">
              {[currentCard.word, 'determine', 'achieve', 'consider'].map((word) => (
                <button
                  key={word}
                  onClick={() => !showResult && handleListeningAnswer(word)}
                  disabled={showResult}
                  className={`p-4 text-center rounded-lg border-2 transition-all ${
                    showResult
                      ? word === currentCard.word
                        ? 'border-green-500 bg-green-50 text-green-700'
                        : word === 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'
                  }`}
                >
                  {word}
                </button>
              ))}
            </div>

              {showResult && (
                <div className={`p-6 rounded-lg w-full mb-6 ${
                  selectedAnswer === currentCard.word
                    ? 'bg-green-50 border border-green-200'
                    : 'bg-red-50 border border-red-200'
                }`}>
                  <p className={`font-semibold text-left text-xl mb-4 ${
                    selectedAnswer === currentCard.word
                      ? 'text-green-700'
                      : 'text-red-700'
                  }`}>
                    {selectedAnswer === currentCard.word ? '正確！' : '錯誤！'}
                  </p>
                  {selectedAnswer !== currentCard.word && (
                    <div className="mb-4">
                      <p className="text-gray-700 text-left">
                        正確答案是：<strong className="text-lg">{currentCard.word}</strong>
                      </p>
                      <div className="text-gray-600 text-left mt-1 flex items-center gap-2">
                        <span>發音：{currentCard.pronunciation}</span>
                        <AudioPlayer text={currentCard.word} />
                      </div>
                    </div>
                  )}
                </div>
              )}
            </div>

            {/* Navigation */}
            <div className="flex gap-4 mt-6">
              <button
                onClick={handlePrevious}
                disabled={currentCardIndex === 0}
                className="flex-1 py-3 bg-gray-500 text-white rounded-lg disabled:opacity-50 disabled:cursor-not-allowed hover:bg-gray-600 transition-colors font-medium"
              >
                上一張
              </button>
              <button
                onClick={handleNext}
                className="flex-1 py-3 bg-primary text-white rounded-lg hover:bg-primary-dark transition-colors font-medium"
              >
                {currentCardIndex === dueCards.length - 1 ? '完成' : '下一張'}
              </button>
            </div>
          </div>
        ) : mode === 'sentence-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="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">
              {/* Title in top-left */}
              <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">
                  {currentCard.difficultyLevel}
                </span>
              </div>

              <div className="w-full">
                <VoiceRecorder
                  targetText={currentCard.example}
                  targetTranslation={currentCard.exampleTranslation}
                  exampleImage={currentCard.exampleImage}
                  instructionText="請看例句圖片並大聲說出完整的例句："
                  onRecordingComplete={() => {
                    // 簡化處理：直接顯示結果
                    handleSpeakingAnswer(currentCard.example)
                  }}
                />
              </div>

              {showResult && (
                <div className="mt-6 p-6 rounded-lg bg-blue-50 border border-blue-200 w-full">
                  <p className="text-blue-700 text-left text-xl font-semibold mb-2">
                    錄音完成！
                  </p>
                  <p className="text-gray-600 text-left">
                    系統正在評估你的發音...
                  </p>
                </div>
              )}
            </div>

            {/* Navigation */}
            <div className="flex gap-4 mt-6">
              <button
                onClick={handlePrevious}
                disabled={currentCardIndex === 0}
                className="flex-1 py-3 bg-gray-500 text-white rounded-lg disabled:opacity-50 disabled:cursor-not-allowed hover:bg-gray-600 transition-colors font-medium"
              >
                上一張
              </button>
              <button
                onClick={handleNext}
                className="flex-1 py-3 bg-primary text-white rounded-lg hover:bg-primary-dark transition-colors font-medium"
              >
                {currentCardIndex === dueCards.length - 1 ? '完成' : '下一張'}
              </button>
            </div>
          </div>
        ) : mode === 'sentence-listening' ? (
          /* Sentence Listening Test Mode - 例句聽力題 */
          <div className="relative">
            {/* Error Report Button */}
            <div className="flex justify-end mb-2">
              <button
                onClick={() => {
                  setReportingCard(currentCard)
                  setShowReportModal(true)
                }}
                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">
              {/* Title in top-left */}
              <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">
                  {currentCard.difficultyLevel}
                </span>
              </div>

              {/* Instructions Test Action */}
              <p className="text-lg text-gray-700 mb-6 text-left">
                請聽例句並選擇正確的選項：
              </p>

              <div className="text-center mb-8">

                <div className="mb-6">
                  <AudioPlayer text={currentCard.example} />
                  <p className="text-sm text-gray-500 mt-2">
                    點擊播放聽例句
                  </p>
                </div>
              </div>

              <div className="grid grid-cols-1 gap-3 mb-6">
                {sentenceOptions.map((sentence, idx) => (
                  <button
                    key={idx}
                    onClick={() => !showResult && handleSentenceListeningAnswer(sentence)}
                    disabled={showResult}
                    className={`w-full p-4 text-left rounded-lg border-2 transition-all ${
                      showResult
                        ? sentence === currentCard.example
                          ? 'border-green-500 bg-green-50 text-green-700'
                          : sentence === 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'
                    }`}
                  >
                    <div className="text-sm text-gray-600 mb-1">選項 {String.fromCharCode(65 + idx)}:</div>
                    <div className="text-base">{sentence}</div>
                  </button>
                ))}
              </div>

              {showResult && (
                <div className={`p-6 rounded-lg w-full mb-6 ${
                  selectedAnswer === currentCard.example
                    ? 'bg-green-50 border border-green-200'
                    : 'bg-red-50 border border-red-200'
                }`}>
                  <p className={`font-semibold text-left text-xl mb-4 ${
                    selectedAnswer === currentCard.example
                      ? 'text-green-700'
                      : 'text-red-700'
                  }`}>
                    {selectedAnswer === currentCard.example ? '正確！' : '錯誤！'}
                  </p>

                  {selectedAnswer !== currentCard.example && (
                    <div className="mb-4">
                      <p className="text-gray-700 text-left">
                        正確答案是：<strong className="text-lg">"{currentCard.example}"</strong>
                      </p>
                      <p className="text-gray-600 text-left mt-1">
                        中文翻譯：{currentCard.exampleTranslation}
                      </p>
                    </div>
                  )}
                </div>
              )}
            </div>

            {/* Navigation */}
            <div className="flex gap-4 mt-6">
              <button
                onClick={handlePrevious}
                disabled={currentCardIndex === 0}
                className="flex-1 py-3 bg-gray-500 text-white rounded-lg disabled:opacity-50 disabled:cursor-not-allowed hover:bg-gray-600 transition-colors font-medium"
              >
                上一張
              </button>
              <button
                onClick={handleNext}
                className="flex-1 py-3 bg-primary text-white rounded-lg hover:bg-primary-dark transition-colors font-medium"
              >
                {currentCardIndex === dueCards.length - 1 ? '完成' : '下一張'}
              </button>
            </div>
          </div>
        ) : mode === 'sentence-reorder' ? (
          /* Sentence Reorder Mode - 例句重組題 */
          <div className="relative">
            {/* Error Report Button */}
            <div className="flex justify-end mb-2">
              <button
                onClick={() => {
                  setReportingCard(currentCard)
                  setShowReportModal(true)
                }}
                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">
              {/* Title in top-left */}
              <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">
                  {currentCard.difficultyLevel}
                </span>
              </div>
 

              {/* Example Image */}
              {currentCard.exampleImage && (
                <div className="mb-6">
                  <div className="bg-gray-50 rounded-lg p-4">
                    <img
                      src={currentCard.exampleImage}
                      alt="Example illustration"
                      className="w-full max-w-md mx-auto rounded-lg cursor-pointer"
                      onClick={() => setModalImage(currentCard.exampleImage || null)}
                    />
                  </div>
                </div>
              )}



              {/* Arranged Sentence Area */}
              <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>

              {/* Instructions Test Action */}
              <p className="text-lg text-gray-700 mb-6 text-left">
                點擊下方單字，依序重組成正確的句子：
              </p>
              
              {/* Shuffled Words */}
              <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)}
                          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"
                        >
                          {word}
                        </button>
                      ))}
                    </div>
                  )}
                </div>
              </div>

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

              {/* Result Feedback */}
              {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">"{currentCard.example}"</strong>
                      </p>
                    </div>
                  )}

                  <div className="space-y-3">
                    <div className="text-left">
                      <p className="text-gray-600">
                        {currentCard.exampleTranslation}
                      </p>
                    </div>
                  </div>
                </div>
              )}
            </div>

            {/* Navigation */}
            <div className="flex gap-4 mt-6">
              <button
                onClick={handlePrevious}
                disabled={currentCardIndex === 0}
                className="flex-1 py-3 bg-gray-500 text-white rounded-lg disabled:opacity-50 disabled:cursor-not-allowed hover:bg-gray-600 transition-colors font-medium"
              >
                上一張
              </button>
              <button
                onClick={handleNext}
                className="flex-1 py-3 bg-primary text-white rounded-lg hover:bg-primary-dark transition-colors font-medium"
              >
                {currentCardIndex === dueCards.length - 1 ? '完成' : '下一張'}
              </button>
            </div>
          </div>
        ) : null}

        {/* Report Modal */}
        {showReportModal && (
          <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
            <div className="bg-white rounded-lg p-6 max-w-md w-full mx-4">
              <h3 className="text-lg font-semibold mb-4">回報錯誤</h3>
              <div className="mb-4">
                <p className="text-sm text-gray-600 mb-2">
                  單字：{reportingCard?.word}
                </p>
              </div>
              <div className="mb-4">
                <label className="block text-sm font-medium text-gray-700 mb-2">
                  錯誤類型
                </label>
                <select
                  value={reportReason}
                  onChange={(e) => setReportReason(e.target.value)}
                  className="w-full p-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500"
                >
                  <option value="">請選擇錯誤類型</option>
                  <option value="translation">翻譯錯誤</option>
                  <option value="definition">定義錯誤</option>
                  <option value="pronunciation">發音錯誤</option>
                  <option value="example">例句錯誤</option>
                  <option value="image">圖片錯誤</option>
                  <option value="other">其他</option>
                </select>
              </div>
              <div className="flex gap-2">
                <button
                  onClick={() => setShowReportModal(false)}
                  className="flex-1 px-4 py-2 border border-gray-300 text-gray-700 rounded-md hover:bg-gray-50"
                >
                  取消
                </button>
                <button
                  onClick={handleReportSubmit}
                  disabled={!reportReason}
                  className="flex-1 px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700 disabled:opacity-50 disabled:cursor-not-allowed"
                >
                  送出回報
                </button>
              </div>
            </div>
          </div>
        )}

        {/* Image Modal */}
        {modalImage && (
          <div
            className="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50"
            onClick={() => setModalImage(null)}
          >
            <div className="relative max-w-4xl max-h-[90vh] mx-4">
              <img
                src={modalImage}
                alt="放大圖片"
                className="max-w-full max-h-full rounded-lg"
              />
              <button
                onClick={() => setModalImage(null)}
                className="absolute top-4 right-4 bg-black bg-opacity-50 text-white p-2 rounded-full hover:bg-opacity-75"
              >
                ✕
              </button>
            </div>
          </div>
        )}

        {/* Task List Modal */}
        {showTaskListModal && (
          <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">
              {/* Header */}
              <div className="flex items-center justify-between p-6 border-b border-gray-200">
                <h2 className="text-2xl font-bold text-gray-900 flex items-center gap-2">
                  📚 學習任務清單
                </h2>
                <button
                  onClick={() => setShowTaskListModal(false)}
                  className="text-gray-400 hover:text-gray-600 text-2xl"
                >
                  ✕
                </button>
              </div>

              {/* Content */}
              <div className="p-6 overflow-y-auto max-h-[60vh]">
                {/* 進度統計 */}
                <div className="mb-6 bg-blue-50 rounded-lg p-4">
                  <div className="flex items-center justify-between text-sm">
                    <span className="text-blue-900 font-medium">
                      測驗進度: {completedTests} / {totalTests} ({totalTests > 0 ? Math.round((completedTests / totalTests) * 100) : 0}%)
                    </span>
                    <div className="flex items-center gap-4 text-blue-800">
                      <span>✅ 已完成: {testItems.filter(item => item.isCompleted).length}</span>
                      <span>⏳ 進行中: {testItems.filter(item => item.isCurrent).length}</span>
                      <span>⚪ 待完成: {testItems.filter(item => !item.isCompleted && !item.isCurrent).length}</span>
                    </div>
                  </div>
                  <div className="mt-3 w-full bg-blue-200 rounded-full h-2">
                    <div
                      className="bg-blue-600 h-2 rounded-full transition-all"
                      style={{ width: `${totalTests > 0 ? (completedTests / totalTests) * 100 : 0}%` }}
                    ></div>
                  </div>
                </div>

                {/* 任務清單 */}
                <div className="space-y-4">
                  {groupTestItemsByCard(testItems).map((cardGroup, cardIndex) => (
                    <div key={cardGroup.cardId} className="border border-gray-200 rounded-lg p-4 bg-white shadow-sm">
                      {/* 詞卡標題 */}
                      <div className="flex items-center gap-3 mb-3">
                        <span className="font-medium text-gray-900">
                          詞卡{cardIndex + 1}: {cardGroup.word}
                        </span>
                        <span className="text-xs bg-blue-100 text-blue-700 px-2 py-1 rounded">
                          {cardGroup.context}
                        </span>
                        <span className="text-xs text-gray-500">
                          {cardGroup.tests.length}個測驗
                        </span>
                      </div>

                      {/* 測驗項目 */}
                      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2">
                        {cardGroup.tests.map(test => (
                          <div
                            key={test.id}
                            className={`flex items-center gap-3 p-3 rounded-lg transition-all ${
                              test.isCompleted
                                ? 'bg-green-50 border border-green-200'
                                : test.isCurrent
                                ? 'bg-blue-50 border border-blue-300 shadow-sm'
                                : 'bg-gray-50 border border-gray-200'
                            }`}
                          >
                            {/* 狀態圖標 */}
                            <span className="text-lg">
                              {test.isCompleted ? '✅' : test.isCurrent ? '⏳' : '⚪'}
                            </span>

                            {/* 測驗資訊 */}
                            <div className="flex-1">
                              <div className="font-medium text-sm">
                                {test.order}. {test.testName}
                              </div>
                              <div className={`text-xs ${
                                test.isCompleted ? 'text-green-600' :
                                test.isCurrent ? 'text-blue-600' : 'text-gray-500'
                              }`}>
                                {test.isCompleted ? '已完成' :
                                 test.isCurrent ? '進行中' : '待完成'}
                              </div>
                            </div>
                          </div>
                        ))}
                      </div>
                    </div>
                  ))}
                </div>

                {testItems.length === 0 && (
                  <div className="text-center py-8 text-gray-500">
                    <div className="text-4xl mb-2">📚</div>
                    <p>還沒有生成任務清單</p>
                  </div>
                )}
              </div>
            </div>
          </div>
        )}

        {/* Complete Modal */}
        {showComplete && (
          <LearningComplete
            score={score}
            mode={mode}
            onRestart={handleRestart}
            onBackToDashboard={() => router.push('/dashboard')}
          />
        )}

        {/* No Due Cards Modal */}
        {showNoDueCards && (
          <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
            <div className="bg-white rounded-xl p-8 max-w-md w-full mx-4 text-center">
              <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="space-y-3 mb-6">
                <div className="bg-blue-50 rounded-lg p-3 text-left">
                  <div className="font-medium text-blue-900 mb-1">💡 建議行動</div>
                  <ul className="text-blue-800 text-sm space-y-1">
                    <li>• 前往詞卡管理頁面新增詞卡</li>
                    <li>• 查看學習統計和進度</li>
                    <li>• 調整學習目標和設定</li>
                  </ul>
                </div>
              </div>

              <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>

              <button
                onClick={handleRestart}
                className="w-full mt-3 py-2 text-blue-600 hover:text-blue-800 transition-colors text-sm"
              >
                🔄 重新檢查到期詞卡
              </button>
            </div>
          </div>
        )}

      </div>

      <style jsx>{`
        .card-container {
          perspective: 1000px;
          transition: height 0.3s ease;
          overflow: visible;
          position: relative;
        }

        .card {
          position: relative;
          width: 100%;
          height: 100%;
          text-align: center;
          transition: transform 0.6s ease;
          transform-style: preserve-3d;
        }

        .card.flipped {
          transform: rotateY(180deg);
        }

        .card-front, .card-back {
          position: absolute;
          width: 100%;
          height: 100%;
          backface-visibility: hidden;
          display: flex;
          align-items: stretch;
          justify-content: center;
          top: 0;
          left: 0;
        }

        .card-back {
          transform: rotateY(180deg);
        }

        .card-front > div {
          width: 100%;
          height: 100%;
          display: flex;
          flex-direction: column;
          justify-content: flex-start;
          align-items: stretch;
          padding: 2rem;
          box-sizing: border-box;
        }

        .card-back > div {
          width: 100%;
          padding: 1.5rem;
          box-sizing: border-box;
          display: flex;
          flex-direction: column;
          justify-content: flex-start;
        }
      `}</style>
    </div>
  )
}