'use client'

import { useState } from 'react'

// 更新的詞彙分析介面
interface WordAnalysis {
  word: string
  translation: string
  definition: string
  partOfSpeech: string
  pronunciation: string
  synonyms: string[]
  antonyms?: string[]
  isPhrase: boolean
  isHighValue: boolean // 高學習價值標記
  learningPriority: 'high' | 'medium' | 'low' // 學習優先級
  phraseInfo?: {
    phrase: string
    meaning: string
    warning: string
    colorCode: string // 片語顏色代碼
  }
  difficultyLevel: string
  costIncurred?: number // 點擊此詞彙的成本
}

interface ClickableTextProps {
  text: string
  analysis?: Record<string, WordAnalysis>
  highValueWords?: string[] // 高價值詞彙列表
  phrasesDetected?: Array<{
    phrase: string
    words: string[]
    colorCode: string
  }>
  onWordClick?: (word: string, analysis: WordAnalysis) => void
  onWordCostConfirm?: (word: string, cost: number) => Promise<boolean> // 收費確認
  onNewWordAnalysis?: (word: string, analysis: WordAnalysis) => void // 新詞彙分析資料回調
  onSaveWord?: (word: string, analysis: WordAnalysis) => Promise<void> // 保存詞彙回調
  remainingUsage?: number // 剩餘使用次數
}

export function ClickableTextV2({
  text,
  analysis,
  highValueWords = [],
  phrasesDetected = [],
  onWordClick,
  onWordCostConfirm,
  onNewWordAnalysis,
  onSaveWord,
  remainingUsage = 5
}: ClickableTextProps) {
  const [selectedWord, setSelectedWord] = useState<string | null>(null)
  const [popupPosition, setPopupPosition] = useState({ x: 0, y: 0, showBelow: false })
  const [showCostConfirm, setShowCostConfirm] = useState<{
    word: string
    cost: number
    position: { x: number, y: number }
  } | null>(null)
  const [isSavingWord, setIsSavingWord] = useState(false)

  // 輔助函數：兼容大小寫屬性名稱
  const getWordProperty = (wordData: any, propName: string) => {
    const lowerProp = propName.toLowerCase()
    const upperProp = propName.charAt(0).toUpperCase() + propName.slice(1)
    return wordData?.[lowerProp] || wordData?.[upperProp]
  }

  // 將文字分割成單字，保留空格
  const words = text.split(/(\s+|[.,!?;:])/g)

  const handleWordClick = async (word: string, event: React.MouseEvent) => {
    const cleanWord = word.toLowerCase().replace(/[.,!?;:]/g, '')
    const wordAnalysis = analysis?.[cleanWord]

    const rect = event.currentTarget.getBoundingClientRect()
    const viewportHeight = window.innerHeight
    const popupHeight = 400 // 估計popup高度

    // 智能定位：如果上方空間不足，就顯示在下方
    const spaceAbove = rect.top
    const spaceBelow = viewportHeight - rect.bottom

    const position = {
      x: rect.left + rect.width / 2,
      y: spaceAbove >= popupHeight ? rect.top - 10 : rect.bottom + 10,
      showBelow: spaceAbove < popupHeight
    }

    if (wordAnalysis) {
      // 場景A：有預存資料的詞彙
      const isHighValue = getWordProperty(wordAnalysis, 'isHighValue')
      if (isHighValue) {
        // 高價值詞彙 → 直接免費顯示
        setPopupPosition(position)
        setSelectedWord(cleanWord)
        onWordClick?.(cleanWord, wordAnalysis)
      } else {
        // 低價值詞彙 → 直接顯示（移除付費限制）
        setPopupPosition(position)
        setSelectedWord(cleanWord)
        onWordClick?.(cleanWord, wordAnalysis)
      }
    } else {
      // 場景B：無預存資料的詞彙 → 即時調用 AI 查詢
      await queryWordWithAI(cleanWord, position)
    }
  }

  const handleCostConfirm = async () => {
    if (!showCostConfirm) return

    const confirmed = await onWordCostConfirm?.(showCostConfirm.word, showCostConfirm.cost)

    if (confirmed) {
      // 調用真實的單字查詢API
      try {
        const response = await fetch('http://localhost:5000/api/ai/query-word', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
          },
          body: JSON.stringify({
            word: showCostConfirm.word,
            sentence: text,
            analysisId: null // 可以傳入分析ID
          })
        })

        if (response.ok) {
          const result = await response.json()
          if (result.success) {
            // 更新分析資料
            const newAnalysis = {
              ...analysis,
              [showCostConfirm.word]: result.data.analysis
            }

            setPopupPosition(showCostConfirm.position)
            setSelectedWord(showCostConfirm.word)
            onWordClick?.(showCostConfirm.word, result.data.analysis)
          }
        }
      } catch (error) {
        console.error('Query word API error:', error)
        // 回退到現有資料
        const wordAnalysis = analysis?.[showCostConfirm.word]
        if (wordAnalysis) {
          setPopupPosition(showCostConfirm.position)
          setSelectedWord(showCostConfirm.word)
          onWordClick?.(showCostConfirm.word, wordAnalysis)
        }
      }
    }

    setShowCostConfirm(null)
  }

  const closePopup = () => {
    setSelectedWord(null)
  }

  const handleSaveWord = async () => {
    if (!selectedWord || !analysis?.[selectedWord] || !onSaveWord) return

    setIsSavingWord(true)
    try {
      await onSaveWord(selectedWord, analysis[selectedWord])
      setSelectedWord(null) // 保存成功後關閉popup
    } catch (error) {
      console.error('Save word error:', error)
      alert(`保存詞彙失敗: ${error instanceof Error ? error.message : '未知錯誤'}`)
    } finally {
      setIsSavingWord(false)
    }
  }

  const queryWordWithAI = async (word: string, position: { x: number, y: number }) => {
    try {
      console.log(`🤖 查詢單字: ${word}`)

      const response = await fetch('http://localhost:5000/api/ai/query-word', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          word: word,
          sentence: text,
          analysisId: null
        })
      })

      if (response.ok) {
        const result = await response.json()
        console.log('AI 查詢結果:', result)

        if (result.success && result.data?.analysis) {
          // 將新的分析資料通知父組件
          onNewWordAnalysis?.(word, result.data.analysis)

          // 顯示分析結果
          setPopupPosition(position)
          setSelectedWord(word)
          onWordClick?.(word, result.data.analysis)
        } else {
          alert(`❌ 查詢 "${word}" 失敗，請稍後再試`)
        }
      } else {
        throw new Error(`API 錯誤: ${response.status}`)
      }
    } catch (error) {
      console.error('AI 查詢錯誤:', error)
      alert(`❌ 查詢 "${word}" 時發生錯誤，請稍後再試`)
    }
  }

  const getWordClass = (word: string) => {
    const cleanWord = word.toLowerCase().replace(/[.,!?;:]/g, '')
    const wordAnalysis = analysis?.[cleanWord]

    const baseClass = "cursor-pointer transition-all duration-200 rounded relative mx-0.5 px-1 py-0.5"

    if (wordAnalysis) {
      // 有預存資料的詞彙
      const isHighValue = getWordProperty(wordAnalysis, 'isHighValue')
      const isPhrase = getWordProperty(wordAnalysis, 'isPhrase')

      // 高價值片語（黃色系）
      if (isHighValue && isPhrase) {
        return `${baseClass} bg-yellow-100 border-2 border-yellow-400 hover:bg-yellow-200 hover:shadow-sm transform hover:-translate-y-0.5`
      }

      // 高價值單字（綠色系）
      if (isHighValue && !isPhrase) {
        return `${baseClass} bg-green-100 border-2 border-green-400 hover:bg-green-200 hover:shadow-sm transform hover:-translate-y-0.5`
      }

      // 普通單字（藍色系）
      return `${baseClass} bg-blue-100 border-2 border-blue-300 hover:bg-blue-200 hover:shadow-sm`
    } else {
      // 無預存資料的詞彙（灰色虛線，表示需要即時查詢）
      return `${baseClass} border-2 border-dashed border-gray-300 hover:border-gray-400 bg-gray-50 hover:bg-gray-100`
    }
  }


  return (
    <div className="relative">
      {/* 點擊區域遮罩 */}
      {selectedWord && (
        <div
          className="fixed inset-0 z-10"
          onClick={closePopup}
        />
      )}

      {/* 文字內容 */}
      <div className="text-lg leading-relaxed">
        {words.map((word, index) => {
          // 如果是空格或標點，直接顯示
          if (word.trim() === '' || /^[.,!?;:\s]+$/.test(word)) {
            return <span key={index}>{word}</span>
          }

          const className = getWordClass(word)
          const cleanWord = word.toLowerCase().replace(/[.,!?;:]/g, '')
          const wordAnalysis = analysis?.[cleanWord]
          const isHighValue = wordAnalysis?.isHighValue || wordAnalysis?.IsHighValue

          return (
            <span
              key={index}
              className={`${className} ${isHighValue ? 'relative' : ''}`}
              onClick={(e) => handleWordClick(word, e)}
            >
              {word}
              {isHighValue && (
                <span className="absolute -top-1 -right-1 text-xs">⭐</span>
              )}
            </span>
          )
        })}
      </div>

      {/* 現代風格詞彙彈窗 */}
      {selectedWord && analysis?.[selectedWord] && (
        <div
          className="fixed z-50 bg-white rounded-2xl shadow-2xl border-0 w-80 backdrop-blur-sm"
          style={{
            left: `${popupPosition.x}px`,
            top: `${popupPosition.y}px`,
            transform: popupPosition.showBelow
              ? 'translate(-50%, 8px)'
              : 'translate(-50%, calc(-100% - 8px))',
            maxHeight: '85vh',
            overflowY: 'auto',
            background: 'rgba(255, 255, 255, 0.98)',
            backdropFilter: 'blur(12px)',
            boxShadow: '0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.8)'
          }}
        >
          {/* 詞彙標題 - 簡約設計 */}
          <div className="relative p-5 pb-0">
            <button
              onClick={closePopup}
              className="absolute top-3 right-3 w-6 h-6 rounded-full bg-gray-100 hover:bg-gray-200 transition-colors flex items-center justify-center text-gray-500 hover:text-gray-700"
            >
              ✕
            </button>

            <div className="pr-8">
              <div className="flex items-baseline gap-3 mb-1">
                <h3 className="text-2xl font-bold text-gray-900">
                  {getWordProperty(analysis[selectedWord], 'word')}
                </h3>
                {getWordProperty(analysis[selectedWord], 'isHighValue') && (
                  <span className="text-yellow-500 text-lg">⭐</span>
                )}
              </div>

              <div className="flex items-center gap-3 text-gray-600">
                <span className="text-sm font-medium">
                  {getWordProperty(analysis[selectedWord], 'pronunciation')}
                </span>
                <button className="text-blue-500 hover:text-blue-600 transition-colors">
                  <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.728" />
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 9l6-6m-6 6v6m6-6H3" />
                  </svg>
                </button>
                <span className={`text-xs px-2 py-1 rounded-full font-medium ${
                  (() => {
                    const difficulty = getWordProperty(analysis[selectedWord], 'difficultyLevel')
                    return difficulty === 'A1' || difficulty === 'A2' ? 'bg-green-100 text-green-700' :
                           difficulty === 'B1' || difficulty === 'B2' ? 'bg-yellow-100 text-yellow-700' :
                           'bg-red-100 text-red-700'
                  })()
                }`}>
                  {getWordProperty(analysis[selectedWord], 'difficultyLevel')}
                </span>
              </div>
            </div>
          </div>

          {/* 內容區 - 現代卡片設計 */}
          <div className="px-5 py-4 space-y-4">
            {/* 翻譯 - 最重要的信息 */}
            <div>
              <div className="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">翻譯</div>
              <div className="text-lg font-semibold text-gray-900">
                {getWordProperty(analysis[selectedWord], 'translation')}
              </div>
            </div>

            {/* 定義 */}
            <div>
              <div className="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">定義</div>
              <div className="text-sm text-gray-700 leading-relaxed">
                {getWordProperty(analysis[selectedWord], 'definition')}
              </div>
            </div>

            {/* 詞性和難度 */}
            <div className="flex items-center gap-3">
              <div>
                <div className="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-1">詞性</div>
                <span className="inline-block bg-gray-100 text-gray-700 px-2 py-1 rounded text-xs font-medium">
                  {getWordProperty(analysis[selectedWord], 'partOfSpeech')}
                </span>
              </div>
            </div>

            {/* 同義詞 */}
            {getWordProperty(analysis[selectedWord], 'synonyms')?.length > 0 && (
              <div>
                <div className="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">同義詞</div>
                <div className="flex flex-wrap gap-1">
                  {getWordProperty(analysis[selectedWord], 'synonyms')?.slice(0, 4).map((synonym, idx) => (
                    <span
                      key={idx}
                      className="bg-blue-50 text-blue-700 px-2 py-1 rounded text-xs font-medium border border-blue-200"
                    >
                      {synonym}
                    </span>
                  ))}
                </div>
              </div>
            )}
          </div>

          {/* 保存按鈕 - 現代設計 */}
          {onSaveWord && (
            <div className="p-5 pt-2 border-t border-gray-100">
              <button
                onClick={handleSaveWord}
                disabled={isSavingWord}
                className="w-full bg-gradient-to-r from-blue-600 to-blue-700 text-white py-3 px-4 rounded-xl font-medium hover:from-blue-700 hover:to-blue-800 transition-all duration-200 transform hover:scale-105 active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed disabled:transform-none flex items-center justify-center gap-2 shadow-lg"
              >
                {isSavingWord ? (
                  <>
                    <div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin" />
                    <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="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
                    </svg>
                    <span className="text-sm font-medium">加入詞卡</span>
                  </>
                )}
              </button>
            </div>
          )}
        </div>
      )}

      {/* 收費確認對話框 */}
      {showCostConfirm && (
        <>
          <div className="fixed inset-0 z-10" onClick={() => setShowCostConfirm(null)} />
          <div
            className="fixed z-20 bg-white border border-gray-300 rounded-lg shadow-lg p-4 w-72"
            style={{
              left: `${showCostConfirm.position.x}px`,
              top: `${showCostConfirm.position.y}px`,
              transform: 'translate(-50%, -100%)',
            }}
          >
            <div className="space-y-3">
              <div className="flex items-center justify-between">
                <h3 className="text-lg font-bold text-gray-900">
                  {showCostConfirm.word}
                </h3>
                <button
                  onClick={() => setShowCostConfirm(null)}
                  className="text-gray-400 hover:text-gray-600"
                >
                  ✕
                </button>
              </div>

              <div className="bg-orange-50 border border-orange-200 rounded-lg p-3">
                <div className="flex items-start gap-2">
                  <div className="text-orange-600 text-lg">💰</div>
                  <div>
                    <div className="text-sm font-medium text-orange-800">
                      低價值詞彙（需消耗額度）
                    </div>
                    <div className="text-sm text-orange-700 mt-1">
                      此查詢將消耗 <strong>{showCostConfirm.cost} 次</strong> 使用額度
                    </div>
                    <div className="text-sm text-orange-600 mt-1">
                      剩餘額度：<strong>{remainingUsage}</strong> 次
                    </div>
                  </div>
                </div>
              </div>

              <div className="flex gap-2">
                <button
                  onClick={handleCostConfirm}
                  className="flex-1 bg-blue-600 text-white py-2 px-4 rounded-lg text-sm font-medium hover:bg-blue-700 transition-colors"
                >
                  ✅ 確認查詢
                </button>
                <button
                  onClick={() => setShowCostConfirm(null)}
                  className="flex-1 bg-gray-200 text-gray-700 py-2 px-4 rounded-lg text-sm font-medium hover:bg-gray-300 transition-colors"
                >
                  ❌ 取消
                </button>
              </div>
            </div>
          </div>
        </>
      )}
    </div>
  )
}