'use client'

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

function GenerateContent() {
  const [mode, setMode] = useState<'manual' | 'screenshot'>('manual')
  const [textInput, setTextInput] = useState('')
  const [extractionType, setExtractionType] = useState<'vocabulary' | 'smart'>('vocabulary')
  const [cardCount, setCardCount] = useState(10)
  const [isGenerating, setIsGenerating] = useState(false)
  const [generatedCards, setGeneratedCards] = useState<any[]>([])
  const [showPreview, setShowPreview] = useState(false)
  const [isPremium] = useState(false) // Mock premium status
  const [showImageForCard, setShowImageForCard] = useState<{ [key: number]: boolean }>({}) // Track which cards show images
  const [modalImage, setModalImage] = useState<string | null>(null) // Track modal image

  const mockGeneratedCards = [
    {
      id: 1,
      word: 'brought',
      partOfSpeech: 'verb',
      pronunciation: {
        us: '/brɔːt/',
        uk: '/brɔːt/'
      },
      translation: '提出、帶來',
      definition: 'Past tense of bring; to mention or introduce a topic in conversation',
      synonyms: ['mentioned', 'raised', 'introduced'],
      antonyms: ['concealed', 'withheld'],
      originalExample: 'He brought this thing up during our meeting and no one agreed.',
      originalExampleTranslation: '他在我們的會議中提出了這件事，但沒有人同意。',
      generatedExample: {
        sentence: 'She brought up an interesting point about the budget.',
        translation: '她提出了一個關於預算的有趣觀點。',
        imageUrl: '/images/examples/bring_up.png',
        audioUrl: '#'
      },
      difficulty: 'B1'
    },
    {
      id: 2,
      word: 'instincts',
      partOfSpeech: 'noun',
      pronunciation: {
        us: '/ˈɪnstɪŋkts/',
        uk: '/ˈɪnstɪŋkts/'
      },
      translation: '本能、直覺',
      definition: 'Natural abilities that help living things survive without learning',
      synonyms: ['intuition', 'impulse', 'tendency'],
      antonyms: ['logic', 'reasoning'],
      originalExample: 'Animals use their instincts to find food and stay safe.',
      originalExampleTranslation: '動物利用本能來尋找食物並保持安全。',
      generatedExample: {
        sentence: 'Trust your instincts when making important decisions.',
        translation: '在做重要決定時要相信你的直覺。',
        imageUrl: '/images/examples/instinct.png',
        audioUrl: '#'
      },
      difficulty: 'B2'
    },
    {
      id: 3,
      word: 'warrants',
      partOfSpeech: 'noun',
      pronunciation: {
        us: '/ˈwɔːrənts/',
        uk: '/ˈwɒrənts/'
      },
      translation: '搜查令、授權令',
      definition: 'Official documents that give police permission to do something',
      synonyms: ['authorization', 'permit', 'license'],
      antonyms: ['prohibition', 'ban'],
      originalExample: 'The police obtained warrants to search the building.',
      originalExampleTranslation: '警方取得了搜查令來搜查這棟建築物。',
      generatedExample: {
        sentence: 'The judge issued arrest warrants for three suspects.',
        translation: '法官對三名嫌疑人發出了逮捕令。',
        imageUrl: '/images/examples/warrant.png',
        audioUrl: '#'
      },
      difficulty: 'C1'
    }
  ]

  const handleGenerate = () => {
    setIsGenerating(true)
    // Simulate AI generation
    setTimeout(() => {
      setGeneratedCards(mockGeneratedCards)
      setShowPreview(true)
      setIsGenerating(false)
    }, 2000)
  }

  const handleSaveCards = () => {
    // Mock save action
    alert('詞卡已保存到您的卡組！')
  }

  const toggleImageForCard = (cardId: number) => {
    setShowImageForCard(prev => ({
      ...prev,
      [cardId]: !prev[cardId]
    }))
  }

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

      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        {!showPreview ? (
          <div className="max-w-4xl mx-auto">
            <h1 className="text-3xl font-bold mb-8">AI 智能生成詞卡</h1>

            {/* Input Mode Selection */}
            <div className="bg-white rounded-xl shadow-sm p-6 mb-6">
              <h2 className="text-lg font-semibold mb-4">原始例句類型</h2>
              <div className="grid grid-cols-2 gap-4">
                <button
                  onClick={() => setMode('manual')}
                  className={`p-4 rounded-lg border-2 transition-all ${
                    mode === 'manual'
                      ? 'border-primary bg-primary-light'
                      : 'border-gray-200 hover:border-gray-300'
                  }`}
                >
                  <div className="text-2xl mb-2">✍️</div>
                  <div className="font-semibold">手動輸入</div>
                  <div className="text-sm text-gray-600 mt-1">貼上或輸入英文文本</div>
                </button>
                <button
                  onClick={() => setMode('screenshot')}
                  disabled={!isPremium}
                  className={`p-4 rounded-lg border-2 transition-all relative ${
                    mode === 'screenshot'
                      ? 'border-primary bg-primary-light'
                      : isPremium
                      ? 'border-gray-200 hover:border-gray-300'
                      : 'border-gray-200 bg-gray-100 cursor-not-allowed opacity-60'
                  }`}
                >
                  <div className="text-2xl mb-2">📷</div>
                  <div className="font-semibold">影劇截圖</div>
                  <div className="text-sm text-gray-600 mt-1">上傳影劇截圖 (Phase 2)</div>
                  {!isPremium && (
                    <div className="absolute top-2 right-2 px-2 py-1 bg-yellow-100 text-yellow-700 text-xs rounded-full">
                      訂閱功能
                    </div>
                  )}
                </button>
              </div>
            </div>

            {/* Extraction Type Selection */}
            <div className="bg-white rounded-xl shadow-sm p-6 mb-6">
              <h2 className="text-lg font-semibold mb-4">萃取方式</h2>
              <div className="grid grid-cols-2 gap-4">
                <button
                  onClick={() => setExtractionType('vocabulary')}
                  className={`p-4 rounded-lg border-2 transition-all ${
                    extractionType === 'vocabulary'
                      ? 'border-primary bg-primary-light'
                      : 'border-gray-200 hover:border-gray-300'
                  }`}
                >
                  <div className="text-2xl mb-2">📖</div>
                  <div className="font-semibold">詞彙萃取</div>
                  <div className="text-sm text-gray-600 mt-1">查詢字典 API 並標記 CEFR</div>
                </button>
                <button
                  onClick={() => setExtractionType('smart')}
                  className={`p-4 rounded-lg border-2 transition-all ${
                    extractionType === 'smart'
                      ? 'border-primary bg-primary-light'
                      : 'border-gray-200 hover:border-gray-300'
                  }`}
                >
                  <div className="text-2xl mb-2">🤖</div>
                  <div className="font-semibold">智能萃取</div>
                  <div className="text-sm text-gray-600 mt-1">AI 分析片語和俚語</div>
                </button>
              </div>
            </div>

            {/* Content Input */}
            <div className="bg-white rounded-xl shadow-sm p-6 mb-6">
              {mode === 'manual' ? (
                <div>
                  <h2 className="text-lg font-semibold mb-4">輸入英文文本</h2>
                  <textarea
                    value={textInput}
                    onChange={(e) => setTextInput(e.target.value)}
                    placeholder="貼上您想要學習的英文文本，例如影劇對話、文章段落..."
                    className="w-full h-40 px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent outline-none resize-none"
                  />
                  <div className="mt-2 text-sm text-gray-600">
                    最多 5000 字元 • 目前：{textInput.length} 字元
                  </div>

                  {/* Extraction Type Info */}
                  {extractionType === 'vocabulary' ? (
                    <div className="mt-4 p-3 bg-blue-50 rounded-lg">
                      <div className="text-sm text-blue-800">
                        <strong>📖 詞彙萃取模式</strong>
                        <ul className="mt-2 space-y-1 text-xs">
                          <li>• 將每個單字查詢字典 API</li>
                          <li>• 自動標記 CEFR 難度等級</li>
                          <li>• 提供完整定義和例句</li>
                        </ul>
                      </div>
                    </div>
                  ) : (
                    <div className="mt-4 p-3 bg-purple-50 rounded-lg">
                      <div className="text-sm text-purple-800">
                        <strong>🤖 智能萃取模式</strong>
                        <ul className="mt-2 space-y-1 text-xs">
                          <li>• AI 分析常用片語和俚語</li>
                          <li>• 生成相關詞彙內容</li>
                          <li>• 提供文化背景說明</li>
                        </ul>
                      </div>
                    </div>
                  )}
                </div>
              ) : (
                <div>
                  <h2 className="text-lg font-semibold mb-4">上傳影劇截圖</h2>
                  <div className="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center">
                    <div className="text-4xl mb-3">📷</div>
                    <div className="text-gray-600 mb-2">點擊或拖拳上傳截圖</div>
                    <div className="text-sm text-gray-500">支持 JPG, PNG 格式，最大 10MB</div>
                    <div className="mt-4">
                      <span className="inline-block px-4 py-2 bg-gray-100 text-gray-400 rounded-lg">
                        Phase 2 功能開發中
                      </span>
                    </div>
                  </div>
                </div>
              )}
            </div>

            {/* Generation Settings */}
            <div className="bg-white rounded-xl shadow-sm p-6 mb-6">
              <h2 className="text-lg font-semibold mb-4">生成設定</h2>
              <div className="space-y-4">
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-2">
                    生成數量：{cardCount} 個詞卡
                  </label>
                  <input
                    type="range"
                    min="5"
                    max="20"
                    value={cardCount}
                    onChange={(e) => setCardCount(Number(e.target.value))}
                    className="w-full"
                  />
                  <div className="flex justify-between text-xs text-gray-500 mt-1">
                    <span>5</span>
                    <span>預設 10</span>
                    <span>20</span>
                  </div>
                </div>

                {/* User Limits */}
                <div className="p-3 bg-gray-50 rounded-lg">
                  <div className="text-sm">
                    {isPremium ? (
                      <div className="text-green-700">
                        <strong>🌟 訂閱用戶</strong>
                        <div className="text-xs mt-1">
                          • 每天最多生成 50 張例句圖
                          <br />
                          • 今日已使用：0/50
                        </div>
                      </div>
                    ) : (
                      <div className="text-gray-700">
                        <strong>🆓 免費用戶</strong>
                        <div className="text-xs mt-1">
                          • 無法自行生成例句圖
                          <br />
                          • 可使用系統現成例句圖
                          <br />
                          • 每日學習數量無限制
                        </div>
                      </div>
                    )}
                  </div>
                </div>
              </div>
            </div>

            {/* Generate Button */}
            <button
              onClick={handleGenerate}
              disabled={isGenerating || (mode === 'manual' && !textInput) || (mode === 'screenshot')}
              className="w-full bg-primary text-white py-4 rounded-lg font-semibold hover:bg-primary-hover transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
            >
              {isGenerating ? (
                <span className="flex items-center justify-center">
                  <svg className="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                    <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
                    <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                  </svg>
                  正在萃取詞彙中...
                </span>
              ) : extractionType === 'vocabulary' ? (
                '📖 開始詞彙萃取'
              ) : (
                '🤖 開始智能萃取'
              )}
            </button>
          </div>
        ) : (
          /* Preview Generated Cards */
          <div className="max-w-6xl mx-auto">
            <div className="flex items-center justify-between mb-6">
              <h1 className="text-3xl font-bold">生成結果預覽</h1>
              <button
                onClick={() => setShowPreview(false)}
                className="text-gray-600 hover:text-gray-900"
              >
                ← 返回
              </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">已生成 {generatedCards.length} 個詞卡</h2>
                <div className="space-x-3">
                  <button className="text-primary hover:text-primary-hover font-medium">
                    重新生成
                  </button>
                  <button
                    onClick={handleSaveCards}
                    className="bg-primary text-white px-6 py-2 rounded-lg font-medium hover:bg-primary-hover transition-colors"
                  >
                    保存到卡組
                  </button>
                </div>
              </div>

              <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
                {generatedCards.map((card) => (
                  <div key={card.id} className="border rounded-lg p-5 hover:shadow-lg transition-shadow">
                    <div className="flex items-start justify-between mb-4">
                      <div className="flex-1">
                        <h3 className="text-xl font-bold">{card.word}</h3>
                        <div className="flex items-center gap-4 mt-1">
                          <span className="text-sm text-gray-600">{card.partOfSpeech}</span>
                          <div className="flex items-center gap-2">
                            <button className="text-xs bg-gray-100 px-2 py-1 rounded hover:bg-gray-200">
                              🇺🇸 {card.pronunciation.us}
                            </button>
                            <button className="text-xs bg-gray-100 px-2 py-1 rounded hover:bg-gray-200">
                              🇬🇧 {card.pronunciation.uk}
                            </button>
                            <button className="text-primary hover:text-primary-hover">
                              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15.536 8.464a5 5 0 010 7.072m2.828-9.9a9 9 0 010 12.728M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l4.707-4.707C10.923 3.663 12 4.109 12 5v14c0 .891-1.077 1.337-1.707.707L5.586 15z" />
                              </svg>
                            </button>
                          </div>
                        </div>
                      </div>
                      <button className="text-red-500 hover:text-red-700 text-2xl">×</button>
                    </div>

                    <div className="space-y-3">
                      <div>
                        <div className="text-sm font-semibold text-gray-700">翻譯</div>
                        <div className="text-base font-medium">{card.translation}</div>
                      </div>

                      <div>
                        <div className="text-sm font-semibold text-gray-700">定義</div>
                        <div className="text-sm text-gray-600">{card.definition}</div>
                      </div>

                      {card.synonyms.length > 0 && (
                        <div>
                          <div className="text-sm font-semibold text-gray-700">同義詞</div>
                          <div className="flex flex-wrap gap-2 mt-1">
                            {card.synonyms.map((syn, idx) => (
                              <span key={idx} className="px-2 py-1 bg-blue-100 text-blue-700 rounded-full text-xs">
                                {syn}
                              </span>
                            ))}
                          </div>
                        </div>
                      )}

                      {card.antonyms.length > 0 && (
                        <div>
                          <div className="text-sm font-semibold text-gray-700">反義詞</div>
                          <div className="flex flex-wrap gap-2 mt-1">
                            {card.antonyms.map((ant, idx) => (
                              <span key={idx} className="px-2 py-1 bg-red-100 text-red-700 rounded-full text-xs">
                                {ant}
                              </span>
                            ))}
                          </div>
                        </div>
                      )}

                      <div>
                        <div className="text-sm font-semibold text-gray-700 mb-2">例句</div>
                        <div className="space-y-3">
                          {/* 原始例句 */}
                          <div className="border-l-2 border-gray-400 pl-3">
                            <div className="flex items-start justify-between">
                              <div className="flex-1">
                                <div className="text-xs text-gray-500 mb-1">原始例句（來自輸入文本）</div>
                                <div className="text-sm text-gray-800">
                                  {card.originalExample.split(card.word).map((part, i) => (
                                    <span key={i}>
                                      {part}
                                      {i < card.originalExample.split(card.word).length - 1 && (
                                        <span className="font-bold text-primary">{card.word}</span>
                                      )}
                                    </span>
                                  ))}
                                </div>
                                <div className="text-sm text-gray-500 mt-1">{card.originalExampleTranslation}</div>
                              </div>
                              <div className="flex items-center gap-1 ml-2">
                                <button className="text-gray-400 hover:text-primary" title="播放例句">
                                  <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                                  </svg>
                                </button>
                              </div>
                            </div>
                          </div>

                          {/* 生成例句 */}
                          <div className="border-l-2 border-primary pl-3">
                            <div className="flex items-start justify-between">
                              <div className="flex-1">
                                <div className="text-xs text-primary mb-1">AI 生成例句</div>
                                <div className="text-sm text-gray-800">
                                  {card.generatedExample.sentence.split(card.word).map((part, i) => (
                                    <span key={i}>
                                      {part}
                                      {i < card.generatedExample.sentence.split(card.word).length - 1 && (
                                        <span className="font-bold text-primary">{card.word}</span>
                                      )}
                                    </span>
                                  ))}
                                </div>
                                <div className="text-sm text-gray-500 mt-1">{card.generatedExample.translation}</div>
                              </div>
                              <div className="flex items-center gap-1 ml-2">
                                <button className="text-gray-400 hover:text-primary" title="播放例句">
                                  <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                                  </svg>
                                </button>
                                <button
                                  onClick={() => toggleImageForCard(card.id)}
                                  className={`${showImageForCard[card.id] ? 'text-primary' : 'text-gray-400'} hover:text-primary`}
                                  title={showImageForCard[card.id] ? "隱藏例句圖" : "查看例句圖"}
                                >
                                  <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={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>
                                </button>
                              </div>
                            </div>

                            {/* Example Image Display */}
                            {showImageForCard[card.id] && card.generatedExample.imageUrl && (
                              <div className="mt-3 p-2 bg-gray-50 rounded-lg">
                                <div className="text-xs text-gray-600 mb-2 flex items-center gap-1">
                                  <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={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>
                                <img
                                  src={card.generatedExample.imageUrl}
                                  alt="Example context"
                                  className="w-full rounded-md shadow-sm cursor-pointer hover:shadow-lg transition-shadow"
                                  style={{ maxHeight: '250px', objectFit: 'contain', backgroundColor: 'white' }}
                                  onClick={() => setModalImage(card.generatedExample.imageUrl)}
                                />
                                <div className="text-xs text-gray-500 mt-2 text-center">點擊圖片可放大查看</div>
                              </div>
                            )}
                          </div>
                        </div>
                      </div>
                    </div>

                    <div className="mt-4 pt-3 border-t flex justify-between items-center">
                      <span className="text-xs text-gray-500">難度：CEFR {card.difficulty}</span>
                      <button className="text-primary text-sm hover:text-primary-hover font-medium">
                        編輯詞卡
                      </button>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        )}
      </div>

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

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

export default function GeneratePage() {
  return (
    <ProtectedRoute>
      <GenerateContent />
    </ProtectedRoute>
  )
}