import React, { useState, useEffect } from "react"
import { motion, AnimatePresence } from "framer-motion"
import { CardType } from "../../constants/CardTypes"
import { DndContext, closestCenter, PointerSensor, useSensor, useSensors } from '@dnd-kit/core'
import { arrayMove, SortableContext, verticalListSortingStrategy, useSortable } from '@dnd-kit/sortable'
import { CSS } from '@dnd-kit/utilities'

/**
 * Draggable item for sentence pairing
 */
const DraggableItem = ({ id, text, disabled }) => {
  const {
    attributes,
    listeners,
    setNodeRef,
    transform,
    transition,
    isDragging,
  } = useSortable({ id, disabled })

  const style = {
    transform: CSS.Transform.toString(transform),
    transition,
    opacity: isDragging ? 0.5 : 1,
  }

  return (
    <div
      ref={setNodeRef}
      style={style}
      {...attributes}
      {...listeners}
      className={`bg-gray-800 border-2 border-purple-500 rounded-lg p-3 text-white ${
        disabled ? 'cursor-default' : 'cursor-grab active:cursor-grabbing'
      } ${isDragging ? 'shadow-lg' : ''}`}
    >
      {text}
    </div>
  )
}

/**
 * CardDisplayModal - Kártya megjelenítése a játékos számára
 * 
 * @param {Object} props
 * @param {boolean} props.isOpen - Modal megjelenítése
 * @param {Function} props.onClose - Modal bezárása
 * @param {Object} props.card - Kártya adatok
 * @param {string} props.cardType - Kártya típusa (QUESTION, LUCK, JOKER)
 * @param {Function} props.onSubmitAnswer - Válasz beküldése (csak QUESTION típusnál)
 * @param {number} props.timeLimit - Időkorlát másodpercben (default: 60)
 * @param {boolean} props.isMyTurn - Whether this is the active player (can answer) or spectator (read-only)
 * @param {string} props.submittedAnswer - For spectators, shows what the active player answered
 */
const CardDisplayModal = ({
  isOpen,
  onClose,
  card,
  cardType = "QUESTION",
  onSubmitAnswer,
  timeLimit = 60,
  isMyTurn = true,
  submittedAnswer = null
}) => {
  const [playerAnswer, setPlayerAnswer] = useState("")
  const [selectedOption, setSelectedOption] = useState(null)
  const [timeLeft, setTimeLeft] = useState(timeLimit)
  const [isProcessing, setIsProcessing] = useState(false)
  
  // For sentence pairing drag and drop
  const [rightItems, setRightItems] = useState([])
  const sensors = useSensors(useSensor(PointerSensor))

  // Timer countdown (only for active player)
  useEffect(() => {
    if (!isOpen || cardType !== "QUESTION" || !isMyTurn) return

    setTimeLeft(timeLimit)
    const timer = setInterval(() => {
      setTimeLeft(prev => {
        if (prev <= 1) {
          clearInterval(timer)
          handleTimeout()
          return 0
        }
        return prev - 1
      })
    }, 1000)

    return () => clearInterval(timer)
  }, [isOpen, timeLimit, isMyTurn])

  // Reset state when modal opens
  useEffect(() => {
    if (isOpen) {
      setPlayerAnswer("")
      setSelectedOption(null)
      setIsProcessing(false)
      
      // Initialize sentence pairing right items
      if (card?.sentencePairs && card.sentencePairs.length > 0) {
        setRightItems(card.sentencePairs.map(p => ({ id: p.id, text: p.right })))
      }
    }
  }, [isOpen, card])

  const handleTimeout = () => {
    if (onSubmitAnswer) {
      onSubmitAnswer(null) // null = timeout
    }
  }

  const handleSubmit = async () => {
    if (isProcessing || !isMyTurn) return

    let answer = null
    
    // Different answer formats based on card type
    if (card?.type === CardType.SENTENCE_PAIRING && card?.sentencePairs) {
      // Answer is array of pairs
      answer = card.sentencePairs.map((leftPair, index) => ({
        pairId: leftPair.id,
        leftText: leftPair.left,
        rightText: rightItems[index].text
      }))
    } else if (selectedOption !== null) {
      answer = selectedOption
    } else {
      answer = playerAnswer.trim()
    }

    if (!answer || (Array.isArray(answer) && answer.length === 0)) {
      console.warn('⚠️ No answer provided')
      return
    }

    console.log('📝 Submitting answer:', answer)
    setIsProcessing(true)
    
    try {
      await onSubmitAnswer(answer)
    } catch (error) {
      console.error("❌ Válasz küldési hiba:", error)
      setIsProcessing(false)
    }
  }

  const handleDragEnd = (event) => {
    const { active, over } = event
    
    if (active.id !== over.id) {
      setRightItems((items) => {
        const oldIndex = items.findIndex(item => item.id === active.id)
        const newIndex = items.findIndex(item => item.id === over.id)
        return arrayMove(items, oldIndex, newIndex)
      })
    }
  }

  const getCardIcon = () => {
    switch (cardType) {
      case "QUESTION": return "❓"
      case "LUCK": return "🍀"
      case "JOKER": return "🃏"
      default: return "📝"
    }
  }

  const getCardTitle = () => {
    switch (cardType) {
      case "QUESTION": return "Feladat Kártya"
      case "LUCK": return "Szerencse Kártya"
      case "JOKER": return "Joker Kártya Feladat"
      default: return "Kártya"
    }
  }

  const getCardBgGradient = () => {
    switch (cardType) {
      case "QUESTION": return "from-blue-600 via-purple-600 to-blue-600"
      case "LUCK": return "from-green-600 via-teal-600 to-green-600"
      case "JOKER": return "from-purple-600 via-pink-600 to-purple-600"
      default: return "from-gray-600 via-gray-700 to-gray-600"
    }
  }

  const formatTime = (seconds) => {
    const mins = Math.floor(seconds / 60)
    const secs = seconds % 60
    return `${mins}:${secs.toString().padStart(2, '0')}`
  }

  const getTimeColor = () => {
    if (timeLeft > 30) return "text-green-400"
    if (timeLeft > 10) return "text-yellow-400"
    return "text-red-400 animate-pulse"
  }

  if (!isOpen || !card) return null

  return (
    <AnimatePresence>
      {isOpen && (
        <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
          {/* Backdrop */}
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            className="absolute inset-0 bg-black/80 backdrop-blur-sm"
          />

          {/* Modal Content */}
          <motion.div
            initial={{ scale: 0.9, opacity: 0, y: 20 }}
            animate={{ scale: 1, opacity: 1, y: 0 }}
            exit={{ scale: 0.9, opacity: 0, y: 20 }}
            transition={{ type: "spring", duration: 0.5 }}
            className="relative bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900 rounded-2xl shadow-2xl border-2 border-purple-500/30 max-w-2xl w-full overflow-hidden max-h-[90vh] overflow-y-auto"
          >
            {/* Header */}
            <div className={`bg-gradient-to-r ${getCardBgGradient()} p-6 relative overflow-hidden`}>
              <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/10 to-transparent animate-pulse" />
              <div className="relative flex items-center justify-between">
                <div className="flex items-center gap-3">
                  <div className="text-5xl animate-bounce">{getCardIcon()}</div>
                  <div>
                    <h2 className="text-2xl font-bold text-white">{getCardTitle()}</h2>
                    {cardType === "QUESTION" && (
                      <p className="text-white/80 text-sm">
                        {isMyTurn ? "Válaszolj a kérdésre!" : "Néző mód - Várakozás a játékosra"}
                      </p>
                    )}
                    {cardType === "JOKER" && (
                      <p className="text-purple-100 text-sm">
                        {isMyTurn ? "Gamemaster jóváhagyás szükséges" : "Várakozás a Gamemaster döntésére"}
                      </p>
                    )}
                  </div>
                </div>
                
                {/* Timer - csak QUESTION típusnál és aktív játékosnál */}
                {cardType === "QUESTION" && isMyTurn && (
                  <div className="bg-black/30 rounded-lg px-4 py-2">
                    <div className={`text-2xl font-bold ${getTimeColor()}`}>
                      ⏱️ {formatTime(timeLeft)}
                    </div>
                  </div>
                )}
              </div>
            </div>

            {/* Content */}
            <div className="p-6 space-y-6">
              {/* JOKER CARD SPECIFIC LAYOUT */}
              {cardType === "JOKER" ? (
                <>
                  {/* Player Info */}
                  <div className="bg-gray-800/50 rounded-xl p-4 border border-gray-700">
                    <div className="flex items-center gap-3">
                      <div className="text-4xl">{card.playerEmoji || "🎭"}</div>
                      <div>
                        <p className="text-gray-400 text-sm">Játékos</p>
                        <p className="text-white font-semibold text-lg">{card.playerName}</p>
                      </div>
                    </div>
                  </div>

                  {/* Joker Card Details */}
                  <div className="bg-gradient-to-br from-purple-900/30 to-pink-900/30 rounded-xl p-5 border border-purple-500/30">
                    <div className="flex items-start gap-3 mb-3">
                      <div className="text-3xl">🎯</div>
                      <div className="flex-1">
                        <h3 className="text-purple-300 font-semibold mb-2">Feladat címe</h3>
                        <p className="text-white text-lg font-medium">
                          {card.question || "Joker Kártya Feladat"}
                        </p>
                      </div>
                    </div>

                    {card.consequence && (
                      <div className="flex items-start gap-3">
                        <div className="text-2xl">📝</div>
                        <div className="flex-1">
                          <h3 className="text-purple-300 font-semibold mb-2">Feladat leírása</h3>
                          <p className="text-gray-300 leading-relaxed">
                            {card.consequence}
                          </p>
                        </div>
                      </div>
                    )}

                    {/* Points Info (if available) */}
                    {card.points && (
                      <div className="mt-4 pt-4 border-t border-purple-500/20">
                        <div className="flex items-center gap-2">
                          <span className="text-2xl">⭐</span>
                          <span className="text-yellow-400 font-bold text-lg">
                            {card.points} pont
                          </span>
                          <span className="text-gray-400 text-sm">járható érte</span>
                        </div>
                      </div>
                    )}
                  </div>

                  {/* Waiting for gamemaster message */}
                  {card.waitingForGamemaster && (
                    <div className="bg-yellow-900/20 rounded-xl p-4 border border-yellow-500/30">
                      <div className="flex items-start gap-3">
                        <div className="text-2xl">ℹ️</div>
                        <div className="flex-1">
                          <p className="text-yellow-200 text-sm">
                            <strong>Várakozás:</strong> A Gamemaster döntése szükséges a folytatáshoz.
                          </p>
                        </div>
                      </div>
                    </div>
                  )}
                </>
              ) : (
                <>
                  {/* REGULAR CARD LAYOUT */}
                  {/* Spectator Notice */}
                  {!isMyTurn && (
                    <div className="bg-blue-900/30 rounded-xl p-4 border border-blue-500/50 text-center">
                      <p className="text-blue-300 font-semibold">👀 Néző módban vagy</p>
                      <p className="text-gray-300 text-sm mt-1">Várakozás a játékos válaszára...</p>
                    </div>
                  )}

                  {/* Question/Text */}
                  <div className="bg-gray-800/50 rounded-xl p-5 border border-gray-700">
                    <div className="flex items-start gap-3">
                      <div className="text-3xl">📝</div>
                      <div className="flex-1">
                        <p className="text-white text-lg leading-relaxed">
                          {card.question || card.text || card.statement}
                        </p>
                      </div>
                    </div>
                  </div>
                </>
              )}

              {/* QUIZ TYPE - Four Buttons (A, B, C, D) */}
              {cardType === "QUESTION" && card.type === CardType.QUIZ && card.answerOptions && card.answerOptions.length > 0 && (
                <div className="space-y-3">
                  <h3 className="text-purple-300 font-semibold">
                    {isMyTurn ? "Válaszd ki a helyes választ:" : "Válasz lehetőségek:"}
                  </h3>
                  <div className="grid grid-cols-1 gap-3">
                    {card.answerOptions.map((option, index) => (
                      <button
                        key={index}
                        onClick={() => isMyTurn && setSelectedOption(option.answer)}
                        disabled={!isMyTurn || isProcessing}
                        className={`w-full text-left p-4 rounded-lg border-2 transition-all ${
                          selectedOption === option.answer
                            ? "bg-purple-600 border-purple-400 text-white scale-105"
                            : submittedAnswer === option.answer
                            ? "bg-blue-600 border-blue-400 text-white"
                            : "bg-gray-800 border-gray-600 text-gray-300"
                        } ${isMyTurn && !isProcessing ? "hover:border-purple-500 cursor-pointer" : "cursor-default"} ${
                          !isMyTurn ? "opacity-75" : ""
                        }`}
                      >
                        <div className="flex items-center gap-3">
                          <span className="text-2xl font-bold bg-gray-900/50 rounded-full w-10 h-10 flex items-center justify-center">
                            {option.answer}
                          </span>
                          <span className="flex-1">{option.text}</span>
                        </div>
                      </button>
                    ))}
                  </div>
                  {!isMyTurn && submittedAnswer && (
                    <p className="text-blue-300 text-center text-sm">
                      ℹ️ A játékos választása: <span className="font-bold">{submittedAnswer}</span>
                    </p>
                  )}
                </div>
              )}

              {/* TRUE/FALSE TYPE - Two Buttons */}
              {cardType === "QUESTION" && card.type === CardType.TRUE_FALSE && (
                <div className="space-y-3">
                  <h3 className="text-purple-300 font-semibold text-center">
                    {isMyTurn ? "Igaz vagy Hamis?" : "Válasz lehetőségek:"}
                  </h3>
                  <div className="grid grid-cols-2 gap-4">
                    <button
                      onClick={() => isMyTurn && setSelectedOption("Igaz")}
                      disabled={!isMyTurn || isProcessing}
                      className={`p-6 rounded-xl border-2 transition-all ${
                        selectedOption === "Igaz"
                          ? "bg-green-600 border-green-400 text-white scale-105"
                          : submittedAnswer === "Igaz"
                          ? "bg-blue-600 border-blue-400 text-white"
                          : "bg-gray-800 border-gray-600 text-gray-300"
                      } ${isMyTurn && !isProcessing ? "hover:border-green-500 cursor-pointer" : "cursor-default"}`}
                    >
                      <div className="text-center">
                        <div className="text-4xl mb-2">✅</div>
                        <div className="text-xl font-bold">IGAZ</div>
                      </div>
                    </button>
                    <button
                      onClick={() => isMyTurn && setSelectedOption("Hamis")}
                      disabled={!isMyTurn || isProcessing}
                      className={`p-6 rounded-xl border-2 transition-all ${
                        selectedOption === "Hamis"
                          ? "bg-red-600 border-red-400 text-white scale-105"
                          : submittedAnswer === "Hamis"
                          ? "bg-blue-600 border-blue-400 text-white"
                          : "bg-gray-800 border-gray-600 text-gray-300"
                      } ${isMyTurn && !isProcessing ? "hover:border-red-500 cursor-pointer" : "cursor-default"}`}
                    >
                      <div className="text-center">
                        <div className="text-4xl mb-2">❌</div>
                        <div className="text-xl font-bold">HAMIS</div>
                      </div>
                    </button>
                  </div>
                  {!isMyTurn && submittedAnswer && (
                    <p className="text-blue-300 text-center text-sm">
                      ℹ️ A játékos választása: <span className="font-bold">{submittedAnswer}</span>
                    </p>
                  )}
                </div>
              )}

              {/* SENTENCE_PAIRING TYPE - Drag and Drop */}
              {cardType === "QUESTION" && card.type === CardType.SENTENCE_PAIRING && card.sentencePairs && card.sentencePairs.length > 0 && (
                <div className="space-y-4">
                  <h3 className="text-purple-300 font-semibold text-center">
                    {isMyTurn ? "Párosítsd a mondatokat! (Húzd a jobb oldali elemeket)" : "Mondatpárosítás:"}
                  </h3>
                  <div className="grid grid-cols-2 gap-4">
                    {/* Left column - fixed */}
                    <div className="space-y-3">
                      <p className="text-gray-400 text-sm text-center font-semibold">Bal oldal</p>
                      {card.sentencePairs.map((pair, index) => (
                        <div
                          key={`left-${pair.id}`}
                          className="bg-gray-800 border-2 border-blue-500 rounded-lg p-3 text-white"
                        >
                          {pair.left}
                        </div>
                      ))}
                    </div>
                    
                    {/* Right column - draggable */}
                    <div className="space-y-3">
                      <p className="text-gray-400 text-sm text-center font-semibold">
                        {isMyTurn ? "Jobb oldal (húzható)" : "Jobb oldal"}
                      </p>
                      <DndContext
                        sensors={sensors}
                        collisionDetection={closestCenter}
                        onDragEnd={handleDragEnd}
                      >
                        <SortableContext
                          items={rightItems.map(item => item.id)}
                          strategy={verticalListSortingStrategy}
                          disabled={!isMyTurn}
                        >
                          {rightItems.map((item) => (
                            <DraggableItem
                              key={item.id}
                              id={item.id}
                              text={item.text}
                              disabled={!isMyTurn}
                            />
                          ))}
                        </SortableContext>
                      </DndContext>
                    </div>
                  </div>
                  {!isMyTurn && (
                    <p className="text-blue-300 text-center text-sm">
                      ℹ️ Várakozás a játékos párosítására...
                    </p>
                  )}
                </div>
              )}

              {/* OWN_ANSWER and CLOSER - Text Input */}
              {cardType === "QUESTION" && (card.type === CardType.OWN_ANSWER || card.type === CardType.CLOSER) && (
                <div className="space-y-3">
                  <h3 className="text-purple-300 font-semibold">
                    {isMyTurn ? "Írd be a választ:" : "A játékos válasza:"}
                  </h3>
                  <input
                    type="text"
                    value={isMyTurn ? playerAnswer : submittedAnswer || "Várakozás..."}
                    onChange={(e) => isMyTurn && setPlayerAnswer(e.target.value)}
                    onKeyPress={(e) => isMyTurn && e.key === 'Enter' && !isProcessing && playerAnswer.trim() && handleSubmit()}
                    disabled={!isMyTurn || isProcessing}
                    placeholder={card.type === CardType.CLOSER ? "Számot adj meg" : "Válaszod..."}
                    className={`w-full bg-gray-800 border-2 border-gray-600 rounded-lg px-4 py-3 text-white focus:border-purple-500 focus:outline-none disabled:opacity-50 ${
                      !isMyTurn ? "cursor-default" : ""
                    }`}
                  />
                </div>
              )}

              {/* Hint (if available) */}
              {card.hint && isMyTurn && (
                <div className="bg-yellow-900/20 rounded-xl p-4 border border-yellow-500/30">
                  <div className="flex items-start gap-3">
                    <div className="text-2xl">💡</div>
                    <div className="flex-1">
                      <h3 className="text-yellow-300 font-semibold mb-2">Segítség</h3>
                      <p className="text-gray-300 text-sm">{card.hint}</p>
                    </div>
                  </div>
                </div>
              )}

              {/* Submit Button - csak QUESTION típusnál és aktív játékosnál */}
              {cardType === "QUESTION" && isMyTurn && (
                <button
                  onClick={handleSubmit}
                  disabled={isProcessing || (!playerAnswer.trim() && selectedOption === null && card.type !== CardType.SENTENCE_PAIRING)}
                  className="w-full bg-gradient-to-r from-purple-600 to-blue-600 hover:from-purple-500 hover:to-blue-500 
                           text-white font-bold py-4 px-6 rounded-xl shadow-lg
                           transform transition-all duration-200 hover:scale-105 active:scale-95
                           disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:scale-100
                           border border-purple-500/50"
                >
                  <div className="flex items-center justify-center gap-2">
                    <span className="text-2xl">✅</span>
                    <span className="text-lg">
                      {isProcessing ? "Feldolgozás..." : "Válasz beküldése"}
                    </span>
                  </div>
                </button>
              )}

              {/* Close Button - LUCK és JOKER típusnál vagy nézőknél */}
              {((cardType === "LUCK" || cardType === "JOKER") || !isMyTurn) && (
                <button
                  onClick={onClose}
                  className="w-full bg-gradient-to-r from-green-600 to-teal-600 hover:from-green-500 hover:to-teal-500 
                           text-white font-bold py-4 px-6 rounded-xl shadow-lg
                           transform transition-all duration-200 hover:scale-105 active:scale-95
                           border border-green-500/50"
                >
                  <div className="flex items-center justify-center gap-2">
                    <span className="text-2xl">👍</span>
                    <span className="text-lg">Rendben</span>
                  </div>
                </button>
              )}
            </div>
          </motion.div>
        </div>
      )}
    </AnimatePresence>
  )
}

export default CardDisplayModal