'use client'

import { useState, useEffect } from 'react'
import Link from 'next/link'
import { ProtectedRoute } from '@/components/ProtectedRoute'
import { Navigation } from '@/components/Navigation'
import { FlashcardForm } from '@/components/FlashcardForm'
import { flashcardsService, type CardSet, type Flashcard } from '@/lib/services/flashcards'
import { useRouter } from 'next/navigation'

function FlashcardsContent() {
  const router = useRouter()
  const [activeTab, setActiveTab] = useState('all-cards')
  const [selectedSet, setSelectedSet] = useState<string | null>(null)
  const [searchTerm, setSearchTerm] = useState('')
  const [showAdvancedSearch, setShowAdvancedSearch] = useState(false)
  const [searchFilters, setSearchFilters] = useState({
    cefrLevel: '',
    partOfSpeech: '',
    masteryLevel: '',
    onlyFavorites: false
  })

  // Real data from API
  const [cardSets, setCardSets] = useState<CardSet[]>([])
  const [flashcards, setFlashcards] = useState<Flashcard[]>([])
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)

  // 臨時使用學習功能的例句圖片作為測試
  const getExampleImage = (word: string): string => {
    const availableImages = [
      '/images/examples/bring_up.png',
      '/images/examples/instinct.png',
      '/images/examples/warrant.png'
    ]

    const imageMap: {[key: string]: string} = {
      'brought': '/images/examples/bring_up.png',
      'instincts': '/images/examples/instinct.png',
      'warrants': '/images/examples/warrant.png',
      'hello': '/images/examples/bring_up.png',
      'beautiful': '/images/examples/instinct.png',
      'understand': '/images/examples/warrant.png',
      'elaborate': '/images/examples/bring_up.png',
      'sophisticated': '/images/examples/instinct.png',
      'ubiquitous': '/images/examples/warrant.png'
    }

    // 根據詞彙返回對應圖片，如果沒有則根據字母分配
    const mappedImage = imageMap[word?.toLowerCase()]
    if (mappedImage) return mappedImage

    // 根據首字母分配圖片
    const firstChar = (word || 'a')[0].toLowerCase()
    const charCode = firstChar.charCodeAt(0) - 97 // a=0, b=1, c=2...
    const imageIndex = charCode % availableImages.length

    return availableImages[imageIndex]
  }

  // Form states
  const [showForm, setShowForm] = useState(false)
  const [editingCard, setEditingCard] = useState<Flashcard | null>(null)

  // 添加假資料用於展示CEFR效果
  const mockFlashcards = [
    { id: 'mock1', word: 'hello', translation: '你好', partOfSpeech: 'interjection', pronunciation: '/həˈloʊ/', masteryLevel: 95, timesReviewed: 15, isFavorite: true, nextReviewDate: '2025-09-21', cardSet: { name: '基礎詞彙', color: 'bg-blue-500' }, difficultyLevel: 'A1', definition: 'A greeting word', example: 'Hello, how are you?', createdAt: '2025-09-17' },
    { id: 'mock2', word: 'beautiful', translation: '美麗的', partOfSpeech: 'adjective', pronunciation: '/ˈbjuːtɪfəl/', masteryLevel: 78, timesReviewed: 8, isFavorite: false, nextReviewDate: '2025-09-22', cardSet: { name: '描述詞彙', color: 'bg-green-500' }, difficultyLevel: 'A2', definition: 'Pleasing to look at', example: 'The beautiful sunset', createdAt: '2025-09-16' },
    { id: 'mock3', word: 'understand', translation: '理解', partOfSpeech: 'verb', pronunciation: '/ˌʌndərˈstænd/', masteryLevel: 65, timesReviewed: 12, isFavorite: true, nextReviewDate: '2025-09-20', cardSet: { name: '常用動詞', color: 'bg-yellow-500' }, difficultyLevel: 'B1', definition: 'To comprehend', example: 'I understand the concept', createdAt: '2025-09-15' },
    { id: 'mock4', word: 'elaborate', translation: '詳細說明', partOfSpeech: 'verb', pronunciation: '/ɪˈlæbərət/', masteryLevel: 45, timesReviewed: 5, isFavorite: false, nextReviewDate: '2025-09-19', cardSet: { name: '高級詞彙', color: 'bg-purple-500' }, difficultyLevel: 'B2', definition: 'To explain in detail', example: 'Please elaborate on your idea', createdAt: '2025-09-14' },
    { id: 'mock5', word: 'sophisticated', translation: '精密的', partOfSpeech: 'adjective', pronunciation: '/səˈfɪstɪkeɪtɪd/', masteryLevel: 30, timesReviewed: 3, isFavorite: true, nextReviewDate: '2025-09-18', cardSet: { name: '進階詞彙', color: 'bg-indigo-500' }, difficultyLevel: 'C1', definition: 'Highly developed', example: 'A sophisticated system', createdAt: '2025-09-13' },
    { id: 'mock6', word: 'ubiquitous', translation: '無處不在的', partOfSpeech: 'adjective', pronunciation: '/juːˈbɪkwɪtəs/', masteryLevel: 15, timesReviewed: 1, isFavorite: false, nextReviewDate: '2025-09-17', cardSet: { name: '學術詞彙', color: 'bg-red-500' }, difficultyLevel: 'C2', definition: 'Present everywhere', example: 'Smartphones are ubiquitous', createdAt: '2025-09-12' }
  ]

  // Load data from API
  useEffect(() => {
    loadCardSets()
    loadFlashcards()
  }, [])

  const loadCardSets = async () => {
    try {
      const result = await flashcardsService.getCardSets()
      if (result.success && result.data) {
        if (result.data.sets.length === 0) {
          // 如果沒有卡組，確保創建預設卡組
          const ensureResult = await flashcardsService.ensureDefaultCardSet()
          if (ensureResult.success) {
            // 重新載入卡組
            const retryResult = await flashcardsService.getCardSets()
            if (retryResult.success && retryResult.data) {
              setCardSets(retryResult.data.sets)
            } else {
              setError('Failed to load card sets after creating default')
            }
          } else {
            setError(ensureResult.error || 'Failed to create default card set')
          }
        } else {
          setCardSets(result.data.sets)
        }
      } else {
        setError(result.error || 'Failed to load card sets')
      }
    } catch (err) {
      setError('Failed to load card sets')
    }
  }

  const loadFlashcards = async () => {
    try {
      setLoading(true)
      const result = await flashcardsService.getFlashcards(selectedSet || undefined)
      if (result.success && result.data) {
        setFlashcards(result.data.flashcards)
      } else {
        setError(result.error || 'Failed to load flashcards')
      }
    } catch (err) {
      setError('Failed to load flashcards')
    } finally {
      setLoading(false)
    }
  }

  // Reload flashcards when selectedSet changes
  useEffect(() => {
    loadFlashcards()
  }, [selectedSet])

  // Handle form operations
  const handleFormSuccess = () => {
    setShowForm(false)
    setEditingCard(null)
    loadFlashcards()
    loadCardSets()
  }

  const handleEdit = (card: Flashcard) => {
    setEditingCard(card)
    setShowForm(true)
  }

  const handleDelete = async (card: Flashcard) => {
    if (!confirm(`確定要刪除詞卡「${card.word}」嗎？`)) {
      return
    }

    try {
      const result = await flashcardsService.deleteFlashcard(card.id)
      if (result.success) {
        loadFlashcards()
        loadCardSets()
      } else {
        alert(result.error || '刪除失敗')
      }
    } catch (err) {
      alert('刪除失敗，請重試')
    }
  }

  const handleToggleFavorite = async (card: any) => {
    try {
      // 如果是假資料，只更新本地狀態
      if (card.id.startsWith('mock')) {
        const updatedMockCards = mockFlashcards.map(mockCard =>
          mockCard.id === card.id
            ? { ...mockCard, isFavorite: !mockCard.isFavorite }
            : mockCard
        )
        // 這裡需要更新state，但由於是const，我們直接重新載入頁面來模擬效果
        alert(`${card.isFavorite ? '已取消收藏' : '已加入收藏'}「${card.word}」`)
        return
      }

      // 真實API調用
      const result = await flashcardsService.toggleFavorite(card.id)
      if (result.success) {
        loadFlashcards()
        alert(`${card.isFavorite ? '已取消收藏' : '已加入收藏'}「${card.word}」`)
      } else {
        alert(result.error || '操作失敗')
      }
    } catch (err) {
      alert('操作失敗，請重試')
    }
  }

  // 獲取CEFR等級顏色
  const getCEFRColor = (level: string) => {
    switch (level) {
      case 'A1': return 'bg-green-100 text-green-700 border-green-200'      // 淺綠 - 最基礎
      case 'A2': return 'bg-blue-100 text-blue-700 border-blue-200'        // 淺藍 - 基礎
      case 'B1': return 'bg-yellow-100 text-yellow-700 border-yellow-200'  // 淺黃 - 中級
      case 'B2': return 'bg-orange-100 text-orange-700 border-orange-200'  // 淺橙 - 中高級
      case 'C1': return 'bg-red-100 text-red-700 border-red-200'          // 淺紅 - 高級
      case 'C2': return 'bg-purple-100 text-purple-700 border-purple-200' // 淺紫 - 精通
      default: return 'bg-gray-100 text-gray-700 border-gray-200'         // 預設灰色
    }
  }


  const allCards = [...flashcards, ...mockFlashcards] // 合併真實和假資料

  // 進階搜尋邏輯
  const filteredCards = allCards.filter(card => {
    // 基本文字搜尋
    if (searchTerm) {
      const searchLower = searchTerm.toLowerCase()
      const matchesText =
        card.word?.toLowerCase().includes(searchLower) ||
        card.translation?.toLowerCase().includes(searchLower) ||
        card.definition?.toLowerCase().includes(searchLower)

      if (!matchesText) return false
    }

    // CEFR等級篩選
    if (searchFilters.cefrLevel && (card as any).difficultyLevel !== searchFilters.cefrLevel) {
      return false
    }

    // 詞性篩選
    if (searchFilters.partOfSpeech && card.partOfSpeech !== searchFilters.partOfSpeech) {
      return false
    }

    // 掌握度篩選
    if (searchFilters.masteryLevel) {
      const mastery = card.masteryLevel || 0
      if (searchFilters.masteryLevel === 'high' && mastery < 80) return false
      if (searchFilters.masteryLevel === 'medium' && (mastery < 60 || mastery >= 80)) return false
      if (searchFilters.masteryLevel === 'low' && mastery >= 60) return false
    }

    // 收藏篩選
    if (searchFilters.onlyFavorites && !card.isFavorite) {
      return false
    }

    return true
  })

  // 清除所有篩選
  const clearAllFilters = () => {
    setSearchTerm('')
    setSearchFilters({
      cefrLevel: '',
      partOfSpeech: '',
      masteryLevel: '',
      onlyFavorites: false
    })
  }

  // 檢查是否有活動篩選
  const hasActiveFilters = searchTerm ||
    searchFilters.cefrLevel ||
    searchFilters.partOfSpeech ||
    searchFilters.masteryLevel ||
    searchFilters.onlyFavorites

  // 搜尋結果高亮函數
  const highlightSearchTerm = (text: string, searchTerm: string) => {
    if (!searchTerm || !text) return text

    const regex = new RegExp(`(${searchTerm.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')})`, 'gi')
    const parts = text.split(regex)

    return parts.map((part, index) =>
      regex.test(part) ? (
        <mark key={index} className="bg-yellow-200 text-yellow-900 px-1 rounded">
          {part}
        </mark>
      ) : (
        part
      )
    )
  }

  // Add loading and error states
  if (loading) {
    return (
      <div className="min-h-screen bg-gray-50 flex items-center justify-center">
        <div className="text-lg">載入中...</div>
      </div>
    )
  }

  if (error) {
    return (
      <div className="min-h-screen bg-gray-50 flex items-center justify-center">
        <div className="text-red-600">{error}</div>
      </div>
    )
  }

  return (
    <div className="min-h-screen bg-gray-50">
      {/* Navigation */}
      <Navigation />

      {/* Main Content */}
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        {/* Page Header */}
        <div className="flex justify-between items-center mb-6">
          <div>
            <h1 className="text-3xl font-bold text-gray-900">我的詞卡</h1>
          </div>
          <div className="flex items-center space-x-4">
            <button
              onClick={() => setShowForm(true)}
              className="bg-green-600 text-white px-4 py-2 rounded-lg hover:bg-green-700 transition-colors"
            >
              新增詞卡
            </button>
            <Link
              href="/generate"
              className="bg-primary text-white px-4 py-2 rounded-lg hover:bg-primary/90 transition-colors"
            >
              AI 生成詞卡
            </Link>
          </div>
        </div>

        {/* 簡化的Tabs - 移除卡組功能 */}
        <div className="flex space-x-8 mb-6 border-b border-gray-200">
          <button
            onClick={() => setActiveTab('all-cards')}
            className={`pb-4 px-1 border-b-2 font-medium text-sm ${
              activeTab === 'all-cards'
                ? 'border-primary text-primary'
                : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
            }`}
          >
            所有詞卡 ({filteredCards.length})
          </button>
          <button
            onClick={() => setActiveTab('favorites')}
            className={`pb-4 px-1 border-b-2 font-medium text-sm flex items-center gap-1 ${
              activeTab === 'favorites'
                ? 'border-primary text-primary'
                : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
            }`}
          >
            <span className="text-yellow-500">⭐</span>
            收藏詞卡 ({allCards.filter(card => card.isFavorite).length})
          </button>
        </div>
        {/* 進階搜尋區域 */}
        <div className="bg-white rounded-xl shadow-sm p-6 mb-6">
          <div className="flex items-center justify-between mb-4">
            <h2 className="text-lg font-semibold text-gray-900">搜尋詞卡</h2>
            <button
              onClick={() => setShowAdvancedSearch(!showAdvancedSearch)}
              className="text-sm text-blue-600 hover:text-blue-700 font-medium 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="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 100 4m0-4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 100 4m0-4v2m0-6V4" />
              </svg>
              {showAdvancedSearch ? '收起篩選' : '進階篩選'}
            </button>
          </div>

          {/* 主要搜尋框 */}
          <div className="relative mb-4">
            <input
              type="text"
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
              placeholder="搜尋詞彙、翻譯或定義..."
              className="w-full pl-12 pr-20 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent text-base"
              onKeyDown={(e) => {
                if (e.key === 'Escape') {
                  setSearchTerm('')
                }
              }}
            />
            <div className="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
              <svg className="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
              </svg>
            </div>
            {(searchTerm || hasActiveFilters) && (
              <div className="absolute inset-y-0 right-0 pr-3 flex items-center gap-2">
                <span className="text-xs text-gray-500 bg-blue-100 px-2 py-1 rounded-full">
                  {filteredCards.length} 結果
                </span>
                <button
                  onClick={clearAllFilters}
                  className="text-gray-400 hover:text-gray-600 p-1 rounded-full hover:bg-gray-100 transition-colors"
                  title="清除搜尋"
                >
                  <svg className="w-4 h-4" 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>

          {/* 進階篩選選項 */}
          {showAdvancedSearch && (
            <div className="bg-gray-50 rounded-lg p-4 space-y-4">
              <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
                {/* CEFR等級篩選 */}
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-2">CEFR等級</label>
                  <select
                    value={searchFilters.cefrLevel}
                    onChange={(e) => setSearchFilters(prev => ({ ...prev, cefrLevel: e.target.value }))}
                    className="w-full p-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-primary focus:border-primary"
                  >
                    <option value="">所有等級</option>
                    <option value="A1">A1 - 基礎</option>
                    <option value="A2">A2 - 基礎</option>
                    <option value="B1">B1 - 中級</option>
                    <option value="B2">B2 - 中高級</option>
                    <option value="C1">C1 - 高級</option>
                    <option value="C2">C2 - 精通</option>
                  </select>
                </div>

                {/* 詞性篩選 */}
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-2">詞性</label>
                  <select
                    value={searchFilters.partOfSpeech}
                    onChange={(e) => setSearchFilters(prev => ({ ...prev, partOfSpeech: e.target.value }))}
                    className="w-full p-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-primary focus:border-primary"
                  >
                    <option value="">所有詞性</option>
                    <option value="noun">名詞 (noun)</option>
                    <option value="verb">動詞 (verb)</option>
                    <option value="adjective">形容詞 (adjective)</option>
                    <option value="adverb">副詞 (adverb)</option>
                    <option value="preposition">介詞 (preposition)</option>
                    <option value="interjection">感嘆詞 (interjection)</option>
                  </select>
                </div>

                {/* 掌握度篩選 */}
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-2">掌握程度</label>
                  <select
                    value={searchFilters.masteryLevel}
                    onChange={(e) => setSearchFilters(prev => ({ ...prev, masteryLevel: e.target.value }))}
                    className="w-full p-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-primary focus:border-primary"
                  >
                    <option value="">所有程度</option>
                    <option value="high">已熟練 (80%+)</option>
                    <option value="medium">學習中 (60-79%)</option>
                    <option value="low">需加強 (&lt;60%)</option>
                  </select>
                </div>

                {/* 收藏篩選 */}
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-2">收藏狀態</label>
                  <label className="flex items-center cursor-pointer">
                    <input
                      type="checkbox"
                      checked={searchFilters.onlyFavorites}
                      onChange={(e) => setSearchFilters(prev => ({ ...prev, onlyFavorites: e.target.checked }))}
                      className="w-4 h-4 text-yellow-600 bg-gray-100 border-gray-300 rounded focus:ring-yellow-500"
                    />
                    <span className="ml-2 text-sm text-gray-700 flex items-center gap-1">
                      <span className="text-yellow-500">⭐</span>
                      僅顯示收藏詞卡
                    </span>
                  </label>
                </div>
              </div>

              {/* 快速篩選按鈕 */}
              <div className="flex items-center gap-2 pt-2 border-t border-gray-200">
                <span className="text-sm text-gray-600">快速篩選:</span>
                <button
                  onClick={() => setSearchFilters(prev => ({ ...prev, masteryLevel: 'low' }))}
                  className="px-3 py-1 bg-red-100 text-red-700 rounded-full text-xs font-medium hover:bg-red-200 transition-colors"
                >
                  需加強詞卡
                </button>
                <button
                  onClick={() => setSearchFilters(prev => ({ ...prev, onlyFavorites: true }))}
                  className="px-3 py-1 bg-yellow-100 text-yellow-700 rounded-full text-xs font-medium hover:bg-yellow-200 transition-colors"
                >
                  收藏詞卡
                </button>
                <button
                  onClick={() => setSearchFilters(prev => ({ ...prev, cefrLevel: 'C1' }))}
                  className="px-3 py-1 bg-purple-100 text-purple-700 rounded-full text-xs font-medium hover:bg-purple-200 transition-colors"
                >
                  高級詞彙
                </button>
                {hasActiveFilters && (
                  <button
                    onClick={clearAllFilters}
                    className="px-3 py-1 bg-gray-100 text-gray-700 rounded-full text-xs font-medium hover:bg-gray-200 transition-colors"
                  >
                    清除全部
                  </button>
                )}
              </div>
            </div>
          )}

          {/* 搜尋結果統計 */}
          {(searchTerm || hasActiveFilters) && (
            <div className="flex items-center justify-between text-sm text-gray-600 bg-blue-50 px-4 py-2 rounded-lg">
              <div className="flex items-center gap-2">
                <svg className="w-4 h-4 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
                </svg>
                <span>
                  找到 <strong className="text-blue-700">{filteredCards.length}</strong> 個詞卡
                  {searchTerm && (
                    <span>，包含 "<strong className="text-blue-700">{searchTerm}</strong>"</span>
                  )}
                </span>
              </div>
              {hasActiveFilters && (
                <button
                  onClick={clearAllFilters}
                  className="text-blue-600 hover:text-blue-700 font-medium"
                >
                  清除篩選
                </button>
              )}
            </div>
          )}
        </div>


        {/* Favorites Tab */}
        {activeTab === 'favorites' && (
          <div>
            <div className="flex justify-between items-center mb-4">
              <h3 className="text-lg font-semibold">共 {allCards.filter(card => card.isFavorite).length} 個詞卡</h3>
            </div>

            {allCards.filter(card => card.isFavorite).length === 0 ? (
              <div className="text-center py-12">
                <div className="text-yellow-500 text-6xl mb-4">⭐</div>
                <p className="text-gray-500 mb-4">還沒有收藏的詞卡</p>
                <p className="text-sm text-gray-400">在詞卡列表中點擊星星按鈕來收藏重要的詞彙</p>
              </div>
            ) : (
              <div className="space-y-2">
                {allCards.filter(card => card.isFavorite).map(card => (
                  <div key={card.id} className="bg-white border border-gray-200 rounded-lg hover:shadow-md transition-all duration-200 relative">
                    <div className="p-4">
                      {/* 收藏詞卡內容 - 與普通詞卡相同的佈局 */}
                      <div className="flex items-center justify-between">
                        <div className="absolute top-3 right-3">
                          <span className={`text-xs px-2 py-1 rounded-full font-medium border ${getCEFRColor((card as any).difficultyLevel || 'A1')}`}>
                            {(card as any).difficultyLevel || 'A1'}
                          </span>
                        </div>

                        <div className="flex items-center gap-4">
                          <div className="w-54 h-36 bg-gray-100 rounded-lg overflow-hidden border border-gray-200 flex items-center justify-center">
                            <img
                              src={getExampleImage(card.word)}
                              alt={`${card.word} example`}
                              className="w-full h-full object-cover"
                              onError={(e) => {
                                const target = e.target as HTMLImageElement
                                target.style.display = 'none'
                                target.parentElement!.innerHTML = `
                                  <div class="text-gray-400 text-xs text-center">
                                    <svg class="w-6 h-6 mx-auto mb-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
                                    </svg>
                                    例句圖
                                  </div>
                                `
                              }}
                            />
                          </div>

                          <div className="flex-1">
                            <div className="flex items-center gap-3">
                              <h3 className="text-xl font-bold text-gray-900">
                                {searchTerm ? highlightSearchTerm(card.word || '未設定', searchTerm) : (card.word || '未設定')}
                              </h3>
                              <span className="text-sm bg-gray-100 text-gray-700 px-2 py-1 rounded">
                                {card.partOfSpeech || 'unknown'}
                              </span>
                            </div>

                            <div className="flex items-center gap-4 mt-1">
                              <span className="text-lg text-gray-900 font-medium">
                                {searchTerm ? highlightSearchTerm(card.translation || '未設定', searchTerm) : (card.translation || '未設定')}
                              </span>
                              {card.pronunciation && (
                                <div className="flex items-center gap-2">
                                  <span className="text-sm text-gray-500">{card.pronunciation}</span>
                                  <button
                                    onClick={(e) => {
                                      e.stopPropagation()
                                      console.log(`播放 ${card.word} 的發音`)
                                    }}
                                    className="w-6 h-6 bg-blue-600 rounded-full flex items-center justify-center text-white hover:bg-blue-700 transition-colors"
                                  >
                                    <svg className="w-3 h-3" fill="currentColor" viewBox="0 0 24 24">
                                      <path d="M8 5v14l11-7z"/>
                                    </svg>
                                  </button>
                                </div>
                              )}
                            </div>

                            <div className="flex items-center gap-4 mt-2 text-sm text-gray-500">
                              <span>創建: {new Date(card.createdAt).toLocaleDateString()}</span>
                              <span>掌握度: {card.masteryLevel}%</span>
                            </div>
                          </div>
                        </div>

                        {/* 右側：重新設計的操作按鈕區 */}
                        <div className="flex items-center gap-2">
                          {/* 收藏按鈕 */}
                          <button
                            onClick={() => handleToggleFavorite(card)}
                            className={`px-3 py-2 rounded-lg font-medium transition-colors ${
                              card.isFavorite
                                ? 'bg-yellow-100 text-yellow-700 border border-yellow-300 hover:bg-yellow-200'
                                : 'bg-gray-100 text-gray-600 border border-gray-300 hover:bg-yellow-50 hover:text-yellow-600 hover:border-yellow-300'
                            }`}
                            title={card.isFavorite ? "取消收藏" : "加入收藏"}
                          >
                            <div className="flex items-center gap-1">
                              <svg className="w-4 h-4" fill={card.isFavorite ? "currentColor" : "none"} stroke="currentColor" viewBox="0 0 24 24">
                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
                              </svg>
                              <span className="text-sm">
                                {card.isFavorite ? '已收藏' : '收藏'}
                              </span>
                            </div>
                          </button>

                          {/* 編輯按鈕 */}
                          <button
                            onClick={() => handleEdit(card)}
                            className="px-3 py-2 bg-blue-100 text-blue-700 border border-blue-300 rounded-lg font-medium hover:bg-blue-200 transition-colors"
                            title="編輯詞卡"
                          >
                            <div className="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="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
                              </svg>
                              <span className="text-sm">編輯</span>
                            </div>
                          </button>

                          {/* 刪除按鈕 */}
                          <button
                            onClick={() => handleDelete(card)}
                            className="px-3 py-2 bg-red-100 text-red-700 border border-red-300 rounded-lg font-medium hover:bg-red-200 transition-colors"
                            title="刪除詞卡"
                          >
                            <div className="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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                              </svg>
                              <span className="text-sm">刪除</span>
                            </div>
                          </button>

                          {/* 查看詳情按鈕 - 導航到詳細頁面 */}
                          <button
                            onClick={() => {
                              router.push(`/flashcards/${card.id}`)
                            }}
                            className="px-4 py-2 bg-gray-100 text-gray-700 border border-gray-300 rounded-lg font-medium hover:bg-gray-200 hover:text-gray-900 transition-colors"
                            title="查看詳細資訊"
                          >
                            <div className="flex items-center gap-1">
                              <span className="text-sm">詳細</span>
                              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                              </svg>
                            </div>
                          </button>
                        </div>
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            )}
          </div>
        )}

        {/* All Cards Tab */}
        {activeTab === 'all-cards' && (
          <div>
            <div className="flex justify-between items-center mb-4">
              <h3 className="text-lg font-semibold">共 {filteredCards.length} 個詞卡</h3>
              </div>


            {filteredCards.length === 0 ? (
              <div className="text-center py-12">
                <p className="text-gray-500 mb-4">沒有找到詞卡</p>
                <Link
                  href="/generate"
                  className="bg-primary text-white px-4 py-2 rounded-lg hover:bg-primary/90 transition-colors"
                >
                  創建新詞卡
                </Link>
              </div>
            ) : (
              <div className="space-y-2">
                {filteredCards.map(card => (
                  <div key={card.id} className="bg-white border border-gray-200 rounded-lg hover:shadow-md transition-all duration-200 relative">
                    <div className="p-4">
                      <div className="flex items-center justify-between">
                        {/* 詞卡右上角CEFR標註 */}
                        <div className="absolute top-3 right-3">
                          <span className={`text-xs px-2 py-1 rounded-full font-medium border ${getCEFRColor((card as any).difficultyLevel || 'A1')}`}>
                            {(card as any).difficultyLevel || 'A1'}
                          </span>
                        </div>

                        {/* 左側：詞彙基本信息 */}
                        <div className="flex items-center gap-4">
                          {/* 例句圖片 - 超大尺寸 */}
                          <div className="w-54 h-36 bg-gray-100 rounded-lg overflow-hidden border border-gray-200 flex items-center justify-center">
                            <img
                              src={getExampleImage(card.word)}
                              alt={`${card.word} example`}
                              className="w-full h-full object-cover"
                              onError={(e) => {
                                // 圖片載入失敗時顯示佔位符
                                const target = e.target as HTMLImageElement
                                target.style.display = 'none'
                                target.parentElement!.innerHTML = `
                                  <div class="text-gray-400 text-xs text-center">
                                    <svg class="w-6 h-6 mx-auto mb-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
                                    </svg>
                                    例句圖
                                  </div>
                                `
                              }}
                            />
                          </div>

                          <div className="flex-1">
                            <div className="flex items-center gap-3">
                              <h3 className="text-xl font-bold text-gray-900">
                                {searchTerm ? highlightSearchTerm(card.word || '未設定', searchTerm) : (card.word || '未設定')}
                              </h3>
                              <span className="text-sm bg-gray-100 text-gray-700 px-2 py-1 rounded">
                                {card.partOfSpeech || 'unknown'}
                              </span>
                            </div>

                            <div className="flex items-center gap-4 mt-1">
                              <span className="text-lg text-gray-900 font-medium">
                                {searchTerm ? highlightSearchTerm(card.translation || '未設定', searchTerm) : (card.translation || '未設定')}
                              </span>
                              {card.pronunciation && (
                                <div className="flex items-center gap-2">
                                  <span className="text-sm text-gray-500">{card.pronunciation}</span>
                                  <button
                                    onClick={(e) => {
                                      e.stopPropagation()
                                      // TODO: 播放發音
                                      console.log(`播放 ${card.word} 的發音`)
                                    }}
                                    className="w-6 h-6 bg-blue-600 rounded-full flex items-center justify-center text-white hover:bg-blue-700 transition-colors"
                                  >
                                    <svg className="w-3 h-3" fill="currentColor" viewBox="0 0 24 24">
                                      <path d="M8 5v14l11-7z"/>
                                    </svg>
                                  </button>
                                </div>
                              )}
                            </div>

                            {/* 簡要統計 */}
                            <div className="flex items-center gap-4 mt-2 text-sm text-gray-500">
                              <span>創建: {new Date(card.createdAt).toLocaleDateString()}</span>
                              <span>掌握度: {card.masteryLevel}%</span>
                            </div>
                          </div>
                        </div>

                        {/* 右側：操作按鈕 */}
                        <div className="flex items-center gap-3">

                          {/* 重新設計的操作按鈕區 */}
                          <div className="flex items-center gap-2">
                            {/* 收藏按鈕 */}
                            <button
                              onClick={() => handleToggleFavorite(card)}
                              className={`px-3 py-2 rounded-lg font-medium transition-colors ${
                                card.isFavorite
                                  ? 'bg-yellow-100 text-yellow-700 border border-yellow-300 hover:bg-yellow-200'
                                  : 'bg-gray-100 text-gray-600 border border-gray-300 hover:bg-yellow-50 hover:text-yellow-600 hover:border-yellow-300'
                              }`}
                              title={card.isFavorite ? "取消收藏" : "加入收藏"}
                            >
                              <div className="flex items-center gap-1">
                                <svg className="w-4 h-4" fill={card.isFavorite ? "currentColor" : "none"} stroke="currentColor" viewBox="0 0 24 24">
                                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
                                </svg>
                                <span className="text-sm">
                                  {card.isFavorite ? '已收藏' : '收藏'}
                                </span>
                              </div>
                            </button>

                            {/* 編輯按鈕 */}
                            <button
                              onClick={() => handleEdit(card)}
                              className="px-3 py-2 bg-blue-100 text-blue-700 border border-blue-300 rounded-lg font-medium hover:bg-blue-200 transition-colors"
                              title="編輯詞卡"
                            >
                              <div className="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="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
                                </svg>
                                <span className="text-sm">編輯</span>
                              </div>
                            </button>

                            {/* 刪除按鈕 */}
                            <button
                              onClick={() => handleDelete(card)}
                              className="px-3 py-2 bg-red-100 text-red-700 border border-red-300 rounded-lg font-medium hover:bg-red-200 transition-colors"
                              title="刪除詞卡"
                            >
                              <div className="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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                                </svg>
                                <span className="text-sm">刪除</span>
                              </div>
                            </button>

                            {/* 查看詳情按鈕 - 導航到詳細頁面 */}
                            <button
                              onClick={() => {
                                router.push(`/flashcards/${card.id}`)
                              }}
                              className="px-4 py-2 bg-gray-100 text-gray-700 border border-gray-300 rounded-lg font-medium hover:bg-gray-200 hover:text-gray-900 transition-colors"
                              title="查看詳細資訊"
                            >
                              <div className="flex items-center gap-1">
                                <span className="text-sm">詳細</span>
                                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                                </svg>
                              </div>
                            </button>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            )}
          </div>
        )}
      </div>

      {/* Flashcard Form Modal */}
      {showForm && (
        <FlashcardForm
          cardSets={cardSets}
          initialData={editingCard ? {
            id: editingCard.id,
            cardSetId: editingCard.cardSet ? cardSets.find(cs => cs.name === editingCard.cardSet.name)?.id || cardSets[0]?.id : cardSets[0]?.id,
            english: editingCard.word,
            chinese: editingCard.translation,
            pronunciation: editingCard.pronunciation,
            partOfSpeech: editingCard.partOfSpeech,
            example: editingCard.example,
          } : undefined}
          isEdit={!!editingCard}
          onSuccess={handleFormSuccess}
          onCancel={() => {
            setShowForm(false)
            setEditingCard(null)
          }}
        />
      )}
    </div>
  )
}

export default function FlashcardsPage() {
  return (
    <ProtectedRoute>
      <FlashcardsContent />
    </ProtectedRoute>
  )
}