'use client'

import { useState, useMemo, useCallback } from 'react'
import { ProtectedRoute } from '@/components/shared/ProtectedRoute'
import { Navigation } from '@/components/shared/Navigation'
import { ClickableTextV2 } from '@/components/generate/ClickableTextV2'
import { WordPopup } from '@/components/word/WordPopup'
import { useToast } from '@/components/shared/Toast'
import { flashcardsService } from '@/lib/services/flashcards'
import { compareCEFRLevels, getLevelIndex, getTargetLearningRange } from '@/lib/utils/cefrUtils'
import { API_CONFIG } from '@/lib/config/api'
import Link from 'next/link'

// 常數定義
const MAX_MANUAL_INPUT_LENGTH = 300


interface GrammarCorrection {
  hasErrors: boolean;
  originalText: string;
  correctedText: string | null;
  corrections: Array<{
    position: { start: number; end: number };
    error: string;
    correction: string;
    type: string;
    explanation: string;
    severity: 'high' | 'medium' | 'low';
  }>;
  confidenceScore: number;
}

// 移除 IdiomPopup - 使用統一的 WordPopup 組件

function GenerateContent() {
  const toast = useToast()
  const [textInput, setTextInput] = useState('')
  const [isAnalyzing, setIsAnalyzing] = useState(false)
  const [showAnalysisView, setShowAnalysisView] = useState(false)
  const [sentenceAnalysis, setSentenceAnalysis] = useState<Record<string, any> | null>(null)
  const [sentenceMeaning, setSentenceMeaning] = useState('')
  const [grammarCorrection, setGrammarCorrection] = useState<GrammarCorrection | null>(null)
  const [selectedIdiom, setSelectedIdiom] = useState<string | null>(null)

  // 處理句子分析 - 使用真實API
  const handleAnalyzeSentence = async () => {

    setIsAnalyzing(true)

    try {
      const response = await fetch(`${API_CONFIG.BASE_URL}/api/ai/analyze-sentence`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({
          inputText: textInput,
          analysisMode: 'full',
          options: {
            includeGrammarCheck: true,
            includeVocabularyAnalysis: true,
            includeTranslation: true,
            includeIdiomDetection: true,
            includeExamples: true
          }
        })
      })

      if (!response.ok) {
        let errorMessage = `API請求失敗: ${response.status}`
        try {
          const errorData = await response.json()
          errorMessage = errorData.error?.message || errorData.message || errorMessage
        } catch (e) {
          console.warn('無法解析錯誤回應:', e)
        }
        throw new Error(errorMessage)
      }

      const result = await response.json()

      if (!result.success || !result.data) {
        throw new Error('API回應格式錯誤')
      }

      // 處理API回應 - 適配新的後端格式
      const apiData = result.data.data  // 需要深入兩層：result.data.data

      // 設定完整的分析結果（包含vocabularyAnalysis和其他數據）
      const analysisData = {
        originalText: apiData.originalText,
        sentenceMeaning: apiData.sentenceMeaning,
        grammarCorrection: apiData.grammarCorrection,
        vocabularyAnalysis: apiData.vocabularyAnalysis,
        idioms: apiData.idioms || [],
        processingTime: result.processingTime
      }

      setSentenceAnalysis(analysisData)
      setSentenceMeaning(apiData.sentenceMeaning || '')

      // 處理語法修正
      if (apiData.grammarCorrection) {
        setGrammarCorrection({
          hasErrors: apiData.grammarCorrection.hasErrors,
          originalText: textInput,
          correctedText: apiData.grammarCorrection.correctedText || textInput,
          corrections: apiData.grammarCorrection.corrections || [],
          confidenceScore: apiData.grammarCorrection.confidenceScore || 0.9
        })
      } else {
        setGrammarCorrection({
          hasErrors: false,
          originalText: textInput,
          correctedText: textInput,
          corrections: [],
          confidenceScore: 1.0
        })
      }

      setShowAnalysisView(true)
    } catch (error) {
      console.error('Error in sentence analysis:', error)
      setGrammarCorrection({
        hasErrors: true,
        originalText: textInput,
        correctedText: textInput,
        corrections: [],
        confidenceScore: 0.0
      })
      setSentenceMeaning('分析過程中發生錯誤，請稍後再試。')
      // 錯誤時也不設置finalText，使用原始輸入
      setShowAnalysisView(true)
    } finally {
      setIsAnalyzing(false)
    }
  }






  const handleAcceptCorrection = useCallback(() => {
    if (grammarCorrection?.correctedText) {
      // 更新用戶輸入為修正後的版本
      setTextInput(grammarCorrection.correctedText)
      console.log('✅ 已採用修正版本，文本已更新為正確版本！')
    }
  }, [grammarCorrection?.correctedText])

  const handleRejectCorrection = useCallback(() => {
    // 保持原始輸入不變，只是隱藏語法修正面板
    setGrammarCorrection(null)
    console.log('📝 已保持原始版本，繼續使用您的原始輸入。')
  }, [])

  // 詞彙統計計算 - 適配新的後端API格式
  const vocabularyStats = useMemo(() => {
    if (!sentenceAnalysis?.vocabularyAnalysis) {
      return { simpleCount: 0, moderateCount: 0, difficultCount: 0, idiomCount: 0 }
    }

    const userLevel = localStorage.getItem('userEnglishLevel') || 'A2'
    let simpleCount = 0
    let moderateCount = 0
    let difficultCount = 0

    // 處理vocabularyAnalysis物件
    Object.values(sentenceAnalysis.vocabularyAnalysis).forEach((wordData: any) => {
      const cefr = wordData?.cefr || 'A1'
      const userIndex = getLevelIndex(userLevel)
      const wordIndex = getLevelIndex(cefr)

      if (userIndex > wordIndex) {
        simpleCount++
      } else if (userIndex === wordIndex) {
        moderateCount++
      } else {
        difficultCount++
      }
    })

    // 處理慣用語統計
    const idiomCount = sentenceAnalysis.idioms?.length || 0

    return { simpleCount, moderateCount, difficultCount, idiomCount }
  }, [sentenceAnalysis])

  // 保存單個詞彙
  const handleSaveWord = useCallback(async (word: string, analysis: any) => {
    try {
      const cefrValue = analysis.cefr || analysis.cefrLevel || analysis.CEFR || 'A0'

      const cardData = {
        word: word,
        translation: analysis.translation || analysis.Translation || '',
        definition: analysis.definition || analysis.Definition || '',
        pronunciation: analysis.pronunciation || analysis.Pronunciation || `/${word}/`,
        partOfSpeech: analysis.partOfSpeech || analysis.PartOfSpeech || 'noun',
        example: analysis.example || `Example sentence with ${word}.`, // 使用分析結果的例句
        exampleTranslation: analysis.exampleTranslation,
        cefr: cefrValue
      }

      const response = await flashcardsService.createFlashcard(cardData)

      if (response.success) {
        // 顯示成功提示
        const successMessage = `已成功將「${word}」保存到詞卡庫！`
        toast.success(successMessage)
        console.log('✅', successMessage)
        return { success: true }
      } else if (response.error && response.error.includes('已存在')) {
        // 顯示重複提示
        const duplicateMessage = `詞卡「${word}」已經存在於詞卡庫中`
        toast.warning(duplicateMessage)
        console.log('⚠️', duplicateMessage)
        return { success: false, error: 'duplicate', message: duplicateMessage }
      } else {
        throw new Error(response.error || '保存失敗')
      }
    } catch (error) {
      console.error('Save word error:', error)
      const errorMessage = error instanceof Error ? error.message : '保存失敗'
      toast.error(`保存詞卡失敗: ${errorMessage}`)
      return { success: false, error: errorMessage }
    }
  }, [])

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

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

            {/* Content Input */}
            <div className="bg-white rounded-xl shadow-sm p-4 sm:p-6 mb-6">
              <h2 className="text-lg font-semibold mb-4">輸入英文文本</h2>
              <textarea
                value={textInput}
                onChange={(e) => {
                  const value = e.target.value
                  if (value.length > MAX_MANUAL_INPUT_LENGTH) {
                    return
                  }
                  setTextInput(value)
                }}
                placeholder={`輸入英文句子（最多${MAX_MANUAL_INPUT_LENGTH}字）...`}
                className={`w-full h-32 sm:h-40 px-3 sm:px-4 py-2 sm:py-3 text-sm sm:text-base border rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent outline-none resize-none ${
                  textInput.length >= MAX_MANUAL_INPUT_LENGTH - 20 ? 'border-yellow-400' :
                  textInput.length >= MAX_MANUAL_INPUT_LENGTH ? 'border-red-400' : 'border-gray-300'
                }`}
              />
              <div className="mt-2 flex justify-between text-sm">
                <span className={`${
                  textInput.length >= MAX_MANUAL_INPUT_LENGTH - 20 ? 'text-yellow-600' :
                  textInput.length >= MAX_MANUAL_INPUT_LENGTH ? 'text-red-600' : 'text-gray-600'
                }`}>
                  最多 {MAX_MANUAL_INPUT_LENGTH} 字元 • 目前：{textInput.length} 字元
                </span>
                {textInput.length > MAX_MANUAL_INPUT_LENGTH - 50 && (
                  <span className={textInput.length >= MAX_MANUAL_INPUT_LENGTH ? 'text-red-600' : 'text-yellow-600'}>
                    {textInput.length >= MAX_MANUAL_INPUT_LENGTH ? '已達上限！' : `還可輸入 ${MAX_MANUAL_INPUT_LENGTH - textInput.length} 字元`}
                  </span>
                )}
              </div>
            </div>


            {/* Action Buttons */}
            <div className="space-y-4">
              {/* 句子分析按鈕 */}
              <button
                onClick={handleAnalyzeSentence}
                disabled={isAnalyzing || !textInput || textInput.length > MAX_MANUAL_INPUT_LENGTH}
                className="w-full bg-blue-600 text-white py-4 rounded-lg font-semibold hover:bg-blue-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
              >
                {isAnalyzing ? (
                  <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>
                    正在分析句子... (AI 分析約需 3-5 秒)
                  </span>
                ) : (
                  '🔍 分析句子'
                )}
              </button>


              {/* 個人化程度指示器 */}
              <div className="text-center text-sm text-gray-600 mt-2">
                {(() => {
                  const userLevel = localStorage.getItem('userEnglishLevel') || 'A2'
                  return (
                    <div className="flex items-center justify-center gap-2">
                      <span>🎯 您的程度: {userLevel}</span>
                      <span className="text-gray-400">|</span>
                      <span>📈 重點學習範圍: {getTargetLearningRange(userLevel)}</span>
                      <Link
                        href="/settings"
                        className="text-blue-500 hover:text-blue-700 ml-2"
                      >
                        調整 ⚙️
                      </Link>
                    </div>
                  )
                })()}
              </div>
            </div>
          </div>
        ) : (
          /* 重新設計的句子分析視圖 - 簡潔流暢 */
          <div className="max-w-4xl mx-auto">
            {/* 語法修正面板 - 如果需要的話 */}
            {grammarCorrection && grammarCorrection.hasErrors && (
              <div className="bg-yellow-50 border border-yellow-200 rounded-xl p-6 mb-6">
                <div className="flex items-start gap-3">
                  <div className="text-yellow-600 text-2xl">⚠️</div>
                  <div className="flex-1">
                    <h3 className="text-lg font-semibold text-yellow-800 mb-2">發現語法問題</h3>
                    <p className="text-yellow-700 mb-4">AI建議修正以下內容，這將提高學習效果：</p>

                    <div className="space-y-3 mb-4">
                      <div>
                        <span className="text-sm font-medium text-yellow-700">原始輸入：</span>
                        <div className="bg-white p-3 rounded border border-yellow-300 mt-1">
                          {textInput}
                        </div>
                      </div>
                      <div>
                        <span className="text-sm font-medium text-yellow-700">建議修正：</span>
                        <div className="bg-yellow-100 p-3 rounded border border-yellow-300 mt-1 font-medium">
                          {grammarCorrection.correctedText || textInput}
                        </div>
                      </div>
                    </div>

                    <div className="flex gap-3">
                      <button
                        onClick={handleAcceptCorrection}
                        className="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors"
                      >
                        ✅ 採用修正
                      </button>
                      <button
                        onClick={handleRejectCorrection}
                        className="px-4 py-2 bg-gray-500 text-white rounded-lg hover:bg-gray-600 transition-colors"
                      >
                        📝 保持原樣
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            )}

            {/* 主句子展示 - 最重要的內容 */}
            <div className="bg-white rounded-xl shadow-lg p-8 mb-6">
              {/* 詞彙統計卡片區 */}
              {vocabularyStats && (
                <div className="grid grid-cols-2 sm:grid-cols-4 gap-3 sm:gap-4 mb-6">
                  {/* 簡單詞彙卡片 */}
                  <div className="bg-gray-50 border border-dashed border-gray-300 rounded-lg p-3 sm:p-4 text-center">
                    <div className="text-xl sm:text-2xl font-bold text-gray-600 mb-1">{vocabularyStats.simpleCount}</div>
                    <div className="text-gray-600 text-sm sm:text-base font-medium">太簡單啦</div>
                  </div>

                  {/* 適中詞彙卡片 */}
                  <div className="bg-green-50 border border-green-200 rounded-lg p-3 sm:p-4 text-center">
                    <div className="text-xl sm:text-2xl font-bold text-green-700 mb-1">{vocabularyStats.moderateCount}</div>
                    <div className="text-green-700 text-sm sm:text-base font-medium">重點學習</div>
                  </div>

                  {/* 艱難詞彙卡片 */}
                  <div className="bg-orange-50 border border-orange-200 rounded-lg p-3 sm:p-4 text-center">
                    <div className="text-xl sm:text-2xl font-bold text-orange-700 mb-1">{vocabularyStats.difficultCount}</div>
                    <div className="text-orange-700 text-sm sm:text-base font-medium">有點挑戰</div>
                  </div>

                  {/* 片語與俚語卡片 */}
                  <div className="bg-blue-50 border border-blue-200 rounded-lg p-3 sm:p-4 text-center">
                    <div className="text-xl sm:text-2xl font-bold text-blue-700 mb-1">{vocabularyStats.idiomCount}</div>
                    <div className="text-blue-700 text-sm sm:text-base font-medium">慣用語</div>
                  </div>
                </div>
              )}

              {/* 句子主體展示 */}
              <div className="text-left mb-8">
                <div className="text-xl sm:text-2xl lg:text-3xl font-medium text-gray-900 mb-6" >
                  <ClickableTextV2
                    text={textInput}
                    analysis={sentenceAnalysis?.vocabularyAnalysis || undefined}
                    showIdiomsInline={false}
                    onWordClick={(word, analysis) => {
                      console.log('Clicked word:', word, analysis)
                    }}
                    onSaveWord={handleSaveWord}
                  />
                </div>

                {/* 翻譯 - 參考翻卡背面設計 */}
                <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">{sentenceMeaning}</p>
                </div>

                {/* 片語和慣用語展示區 */}
                {(() => {
                  if (!sentenceAnalysis?.idioms || sentenceAnalysis.idioms.length === 0) return null

                  // 使用新的API格式中的idioms陣列
                  const idioms = sentenceAnalysis.idioms


                  return (
                    <div className="bg-gray-50 rounded-lg p-4 mt-4">
                      <h3 className="font-semibold text-gray-900 mb-2 text-left">慣用語</h3>
                      <div className="flex flex-wrap gap-2">
                        {idioms.map((idiom: any, index: number) => (
                          <span
                            key={index}
                            className="cursor-pointer transition-all duration-200 rounded-lg relative mx-0.5 px-1 py-0.5 inline-flex items-center gap-1 bg-blue-50 border border-blue-200 hover:bg-blue-100 hover:shadow-lg transform hover:-translate-y-0.5 text-blue-700 font-medium"
                            onClick={() => {
                              // 使用統一的 WordPopup 組件
                              setSelectedIdiom(idiom.idiom)
                            }}
                            title={`${idiom.idiom}: ${idiom.translation}`}
                          >
                            {idiom.idiom}
                      {(() => {
                              // 只有當慣用語為常用且不是簡單慣用語時才顯示星星
                              // 簡單慣用語定義：學習者CEFR > 慣用語CEFR
                              const userLevel = localStorage.getItem('userEnglishLevel') || 'A2'
                              const isHighFrequency = idiom?.frequency === 'high'
                              const idiomCefr = idiom?.cefrLevel || 'A1'
                              const isNotSimpleIdiom = !compareCEFRLevels(userLevel, idiomCefr, '>')

                              return isHighFrequency && isNotSimpleIdiom ? (
                                <span
                                  className="absolute -top-1 -right-1 text-xs pointer-events-none z-10"
                                  style={{ fontSize: '8px', lineHeight: 1 }}
                                >
                                  ⭐
                                </span>
                              ) : null
                            })()}
                          </span>
                        ))}
                      </div>
                    </div>
                  )
                })()}
              </div>

            </div>

            {/* 下方操作區 - 簡化 */}
            <div className="flex justify-center px-4">
              <button
                onClick={() => setShowAnalysisView(false)}
                className="w-full sm:w-auto px-6 sm:px-8 py-3 bg-primary text-white rounded-lg font-medium hover:bg-primary-hover transition-colors flex items-center justify-center gap-2"
              >
                <span>分析新句子</span>
              </button>
            </div>
          </div>
        )}

        {/* 慣用語彈窗 - 使用統一的 WordPopup */}
        <WordPopup
          selectedWord={selectedIdiom}
          analysis={selectedIdiom ? { [selectedIdiom]: sentenceAnalysis?.idioms?.find((i: any) => i.idiom === selectedIdiom) } : {}}
          isOpen={!!selectedIdiom}
          onClose={() => setSelectedIdiom(null)}
          onSaveWord={async (word, analysis) => {
            const result = await handleSaveWord(word, analysis)
            return result
          }}
        />

        {/* Toast 通知系統 */}
        <toast.ToastContainer />
      </div>
    </div>
  )
}

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