'use client'

import React, { useState, useMemo } from 'react'
import { Modal } from './ui/Modal'
import { Check, Loader2 } from 'lucide-react'

interface GeneratedCard {
  word: string
  translation: string
  definition: string
  partOfSpeech?: string
  pronunciation?: string
  example?: string
  exampleTranslation?: string
  synonyms?: string[]
  difficultyLevel?: string
}

interface CardSet {
  id: string
  name: string
  color: string
}

interface CardSelectionDialogProps {
  isOpen: boolean
  generatedCards: GeneratedCard[]
  cardSets: CardSet[]
  onClose: () => void
  onSave: (selectedCards: GeneratedCard[], cardSetId?: string) => Promise<void>
}

export const CardSelectionDialog: React.FC<CardSelectionDialogProps> = ({
  isOpen,
  generatedCards,
  cardSets,
  onClose,
  onSave
}) => {
  const [selectedCardIndices, setSelectedCardIndices] = useState<Set<number>>(
    new Set(generatedCards.map((_, index) => index)) // 預設全選
  )
  const [selectedCardSetId, setSelectedCardSetId] = useState<string>('')
  const [isSaving, setIsSaving] = useState(false)

  const selectedCount = selectedCardIndices.size

  const handleSelectAll = (checked: boolean) => {
    if (checked) {
      setSelectedCardIndices(new Set(generatedCards.map((_, index) => index)))
    } else {
      setSelectedCardIndices(new Set())
    }
  }

  const handleCardToggle = (index: number, checked: boolean) => {
    const newSelected = new Set(selectedCardIndices)
    if (checked) {
      newSelected.add(index)
    } else {
      newSelected.delete(index)
    }
    setSelectedCardIndices(newSelected)
  }

  const handleSave = async () => {
    if (selectedCount === 0) {
      alert('請至少選擇一張詞卡')
      return
    }

    setIsSaving(true)
    try {
      const selectedCards = Array.from(selectedCardIndices).map(index => generatedCards[index])
      await onSave(selectedCards, selectedCardSetId || undefined)
    } catch (error) {
      console.error('Save error:', error)
      alert(`保存失敗: ${error instanceof Error ? error.message : '未知錯誤'}`)
    } finally {
      setIsSaving(false)
    }
  }

  const isAllSelected = selectedCount === generatedCards.length

  return (
    <Modal
      isOpen={isOpen}
      onClose={onClose}
      title="選擇要保存的詞卡"
      size="xl"
    >
      <div className="p-6 space-y-6">
        {/* 操作工具列 */}
        <div className="flex justify-between items-center p-4 bg-gray-50 rounded-lg">
          <div className="flex items-center space-x-4">
            <label className="flex items-center space-x-2 cursor-pointer">
              <input
                type="checkbox"
                checked={isAllSelected}
                onChange={(e) => handleSelectAll(e.target.checked)}
                className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500"
              />
              <span className="text-sm font-medium">
                全選 ({selectedCount}/{generatedCards.length})
              </span>
            </label>
          </div>

          <div className="flex items-center space-x-2">
            <span className="text-sm text-gray-600">保存到：</span>
            <select
              value={selectedCardSetId}
              onChange={(e) => setSelectedCardSetId(e.target.value)}
              className="border border-gray-300 rounded-md px-3 py-1 text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
            >
              <option value="">預設卡組</option>
              {cardSets.map(set => (
                <option key={set.id} value={set.id}>
                  {set.name}
                </option>
              ))}
            </select>
          </div>
        </div>

        {/* 詞卡列表 */}
        <div className="space-y-3 max-h-96 overflow-y-auto">
          {generatedCards.map((card, index) => (
            <CardPreviewItem
              key={index}
              card={card}
              index={index}
              isSelected={selectedCardIndices.has(index)}
              onToggle={(checked) => handleCardToggle(index, checked)}
            />
          ))}
        </div>

        {/* 底部操作按鈕 */}
        <div className="flex justify-end space-x-3 pt-4 border-t">
          <button
            onClick={onClose}
            disabled={isSaving}
            className="px-4 py-2 text-gray-700 bg-gray-200 rounded-lg hover:bg-gray-300 transition-colors disabled:opacity-50"
          >
            取消
          </button>
          <button
            onClick={handleSave}
            disabled={selectedCount === 0 || isSaving}
            className="flex items-center space-x-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
          >
            {isSaving ? (
              <>
                <Loader2 className="w-4 h-4 animate-spin" />
                <span>保存中...</span>
              </>
            ) : (
              <>
                <Check className="w-4 h-4" />
                <span>保存 {selectedCount} 張詞卡</span>
              </>
            )}
          </button>
        </div>
      </div>
    </Modal>
  )
}

interface CardPreviewItemProps {
  card: GeneratedCard
  index: number
  isSelected: boolean
  onToggle: (checked: boolean) => void
}

const CardPreviewItem: React.FC<CardPreviewItemProps> = ({
  card,
  index,
  isSelected,
  onToggle
}) => {
  return (
    <div className={`
      border rounded-lg p-4 transition-all duration-200
      ${isSelected
        ? 'border-blue-500 bg-blue-50 shadow-sm'
        : 'border-gray-200 bg-white hover:border-gray-300'
      }
    `}>
      <div className="flex items-start space-x-3">
        <label className="flex items-center cursor-pointer mt-1">
          <input
            type="checkbox"
            checked={isSelected}
            onChange={(e) => onToggle(e.target.checked)}
            className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500"
          />
        </label>

        <div className="flex-1 space-y-2">
          <div className="flex items-center justify-between">
            <h3 className="text-lg font-semibold text-gray-900">
              {card.word}
            </h3>
            {card.difficultyLevel && (
              <span className="px-2 py-1 text-xs font-medium bg-gray-100 text-gray-600 rounded">
                {card.difficultyLevel}
              </span>
            )}
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-3 text-sm">
            <div>
              <span className="font-medium text-gray-700">翻譯：</span>
              <span className="text-gray-900">{card.translation}</span>
            </div>

            {card.partOfSpeech && (
              <div>
                <span className="font-medium text-gray-700">詞性：</span>
                <span className="text-gray-900">{card.partOfSpeech}</span>
              </div>
            )}

            {card.pronunciation && (
              <div>
                <span className="font-medium text-gray-700">發音：</span>
                <span className="text-gray-900">{card.pronunciation}</span>
              </div>
            )}
          </div>

          <div>
            <span className="font-medium text-gray-700">定義：</span>
            <p className="text-gray-900 leading-relaxed">{card.definition}</p>
          </div>

          {card.example && (
            <div>
              <span className="font-medium text-gray-700">例句：</span>
              <p className="text-gray-900 italic">{card.example}</p>
              {card.exampleTranslation && (
                <p className="text-gray-600 text-sm mt-1">{card.exampleTranslation}</p>
              )}
            </div>
          )}

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