import React, { useState } from "react"
import { motion, AnimatePresence } from "framer-motion"

/**
 * JokerApprovalModal - Gamemaster felület a Joker kártya feladatok jóváhagyására
 * 
 * @param {Object} props
 * @param {boolean} props.isOpen - Modal megjelenítése
 * @param {Function} props.onClose - Modal bezárása
 * @param {Object} props.jokerRequest - Joker kártya adatok
 * @param {Function} props.onApprove - Jóváhagyás callback
 * @param {Function} props.onReject - Elutasítás callback
 * @param {string} props.playerName - Játékos neve
 * @param {string} props.playerEmoji - Játékos emoji
 */
const JokerApprovalModal = ({
  isOpen,
  onClose,
  jokerRequest,
  onApprove,
  onReject,
  playerName,
  playerEmoji = "🎭"
}) => {
  const [isProcessing, setIsProcessing] = useState(false)

  const handleApprove = async () => {
    setIsProcessing(true)
    try {
      await onApprove(jokerRequest)
      onClose()
    } catch (error) {
      console.error("Jóváhagyási hiba:", error)
    } finally {
      setIsProcessing(false)
    }
  }

  const handleReject = async () => {
    setIsProcessing(true)
    try {
      await onReject(jokerRequest)
      onClose()
    } catch (error) {
      console.error("Elutasítási hiba:", error)
    } finally {
      setIsProcessing(false)
    }
  }

  if (!isOpen) 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/70 backdrop-blur-sm"
            onClick={onClose}
          />

          {/* 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"
          >
            {/* Header with Joker theme */}
            <div className="bg-gradient-to-r from-purple-600 via-pink-600 to-purple-600 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">🃏</div>
                  <div>
                    <h2 className="text-2xl font-bold text-white">Joker Kártya Feladat</h2>
                    <p className="text-purple-100 text-sm">Gamemaster jóváhagyás szükséges</p>
                  </div>
                </div>
                <button
                  onClick={onClose}
                  className="text-white/80 hover:text-white transition-colors text-2xl"
                  disabled={isProcessing}
                >
                  ✕
                </button>
              </div>
            </div>

            {/* Content */}
            <div className="p-6 space-y-6">
              {/* 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">{playerEmoji}</div>
                  <div>
                    <p className="text-gray-400 text-sm">Játékos</p>
                    <p className="text-white font-semibold text-lg">{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">
                      {jokerRequest?.cardTitle || "Joker Kártya Feladat"}
                    </p>
                  </div>
                </div>

                <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">
                      {jokerRequest?.cardDescription || "A játékosnak teljesítenie kell a Joker kártya feladatát."}
                    </p>
                  </div>
                </div>

                {/* Points Info */}
                {jokerRequest?.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">
                        {jokerRequest.points} pont
                      </span>
                      <span className="text-gray-400 text-sm">járható érte</span>
                    </div>
                  </div>
                )}
              </div>

              {/* Player's Claim (Optional - ha később hozzáadod) */}
              {jokerRequest?.playerMessage && (
                <div className="bg-blue-900/20 rounded-xl p-4 border border-blue-500/30">
                  <div className="flex items-start gap-3">
                    <div className="text-2xl">💬</div>
                    <div className="flex-1">
                      <h3 className="text-blue-300 font-semibold mb-2">Játékos üzenete</h3>
                      <p className="text-gray-300 italic">"{jokerRequest.playerMessage}"</p>
                    </div>
                  </div>
                </div>
              )}

              {/* Instructions */}
              <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>Gamemaster döntés:</strong> Nézd meg, hogy a játékos teljesítette-e a feladatot, 
                      majd hagyd jóvá vagy utasítsd el.
                    </p>
                  </div>
                </div>
              </div>

              {/* Action Buttons */}
              <div className="flex gap-4 pt-2">
                <button
                  onClick={handleReject}
                  disabled={isProcessing}
                  className="flex-1 bg-gradient-to-r from-red-600 to-red-700 hover:from-red-500 hover:to-red-600 
                           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-red-500/50"
                >
                  <div className="flex items-center justify-center gap-2">
                    <span className="text-2xl">❌</span>
                    <span className="text-lg">Elutasítás</span>
                  </div>
                  <div className="text-xs text-red-200 mt-1">Nem teljesítette</div>
                </button>

                <button
                  onClick={handleApprove}
                  disabled={isProcessing}
                  className="flex-1 bg-gradient-to-r from-green-600 to-green-700 hover:from-green-500 hover:to-green-600 
                           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-green-500/50"
                >
                  <div className="flex items-center justify-center gap-2">
                    <span className="text-2xl">✅</span>
                    <span className="text-lg">Jóváhagyás</span>
                  </div>
                  <div className="text-xs text-green-200 mt-1">Sikeresen teljesítette</div>
                </button>
              </div>

              {/* Processing indicator */}
              {isProcessing && (
                <div className="text-center py-2">
                  <div className="inline-flex items-center gap-2 text-purple-400">
                    <div className="animate-spin text-2xl">⚙️</div>
                    <span>Feldolgozás...</span>
                  </div>
                </div>
              )}
            </div>
          </motion.div>
        </div>
      )}
    </AnimatePresence>
  )
}

export default JokerApprovalModal