import React, { useState } from "react"
import CardDisplayModal from "./CardDisplayModal"
import ConsequenceModal from "./ConsequenceModal"
import StepPredictionModal from "./StepPredictionModal"

/**
 * Demo oldal a játék modal-ok tesztelésére
 */
const GameModalsDemo = () => {
  // Card Display Modal
  const [isCardModalOpen, setIsCardModalOpen] = useState(false)
  const [cardType, setCardType] = useState("QUESTION")
  
  // Consequence Modal
  const [isConsequenceModalOpen, setIsConsequenceModalOpen] = useState(false)
  const [isCorrect, setIsCorrect] = useState(true)
  
  // Step Prediction Modal
  const [isStepModalOpen, setIsStepModalOpen] = useState(false)

  // Example cards
  const quizCard = {
    type: 0,
    question: "Mi Magyarország fővárosa?",
    answerOptions: [
      { answer: "A", text: "Debrecen", correct: false },
      { answer: "B", text: "Budapest", correct: true },
      { answer: "C", text: "Szeged", correct: false },
      { answer: "D", text: "Pécs", correct: false }
    ],
    hint: "A Duna partján fekszik"
  }

  const textCard = {
    type: 2,
    question: "Hány éves vagy?",
    hint: "Számmal válaszolj"
  }

  const luckCard = {
    text: "Szerencsés vagy! +2 lépés előre! 🍀",
    consequence: { type: 3, value: 2 }
  }

  const handleCardAnswer = (answer) => {
    console.log("Válasz:", answer)
    setIsCardModalOpen(false)
    // Következmény megjelenítése
    setTimeout(() => {
      setIsCorrect(answer === "B")
      setIsConsequenceModalOpen(true)
    }, 500)
  }

  const handleStepPrediction = (prediction) => {
    console.log("Tipp:", prediction)
    setIsStepModalOpen(false)
    
    // Példa: Számított pozíció = 20 + 4 + 2 + 2 = 28
    const actualPosition = 28
    const isCorrect = prediction === actualPosition
    
    // Következmény megjelenítése
    setTimeout(() => {
      setIsCorrect(isCorrect)
      setIsConsequenceModalOpen(true)
    }, 500)
  }

  return (
    <div className="min-h-screen bg-gray-900 p-8">
      <div className="max-w-6xl mx-auto">
        <h1 className="text-4xl font-bold text-white mb-8 text-center">
          🎮 Játék Modal-ok Demo
        </h1>

        <div className="grid md:grid-cols-3 gap-6">
          {/* Card Display Modal Demos */}
          <div className="bg-gray-800 rounded-xl p-6 border border-purple-500">
            <h2 className="text-2xl font-bold text-purple-300 mb-4">
              📝 Kártya Megjelenítés
            </h2>
            <div className="space-y-3">
              <button
                onClick={() => {
                  setCardType("QUESTION")
                  setIsCardModalOpen(true)
                }}
                className="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 rounded-lg transition-all hover:scale-105"
              >
                ❓ Quiz Kártya
              </button>
              <button
                onClick={() => {
                  setCardType("QUESTION")
                  setIsCardModalOpen(true)
                }}
                className="w-full bg-purple-600 hover:bg-purple-700 text-white font-bold py-3 rounded-lg transition-all hover:scale-105"
              >
                📝 Szöveges Kártya
              </button>
              <button
                onClick={() => {
                  setCardType("LUCK")
                  setIsCardModalOpen(true)
                }}
                className="w-full bg-green-600 hover:bg-green-700 text-white font-bold py-3 rounded-lg transition-all hover:scale-105"
              >
                🍀 Szerencse Kártya
              </button>
            </div>
          </div>

          {/* Consequence Modal Demos */}
          <div className="bg-gray-800 rounded-xl p-6 border border-green-500">
            <h2 className="text-2xl font-bold text-green-300 mb-4">
              🎯 Következmények
            </h2>
            <div className="space-y-3">
              <button
                onClick={() => {
                  setIsCorrect(true)
                  setIsConsequenceModalOpen(true)
                }}
                className="w-full bg-green-600 hover:bg-green-700 text-white font-bold py-3 rounded-lg transition-all hover:scale-105"
              >
                ✅ Helyes Válasz
              </button>
              <button
                onClick={() => {
                  setIsCorrect(false)
                  setIsConsequenceModalOpen(true)
                }}
                className="w-full bg-red-600 hover:bg-red-700 text-white font-bold py-3 rounded-lg transition-all hover:scale-105"
              >
                ❌ Helytelen Válasz
              </button>
            </div>
          </div>

          {/* Step Prediction Modal Demo */}
          <div className="bg-gray-800 rounded-xl p-6 border border-yellow-500">
            <h2 className="text-2xl font-bold text-yellow-300 mb-4">
              🎲 Pozíció Tippelés
            </h2>
            <button
              onClick={() => setIsStepModalOpen(true)}
              className="w-full bg-yellow-600 hover:bg-yellow-700 text-white font-bold py-3 rounded-lg transition-all hover:scale-105"
            >
              🎯 Pozíció Tippelés
            </button>
            <p className="text-gray-400 text-sm mt-3">
              Tipppeld meg a végleges pozíciót a számítás alapján!
            </p>
          </div>
        </div>

        {/* Info Panel */}
        <div className="mt-8 bg-gray-800 rounded-xl p-6 border border-gray-700">
          <h3 className="text-xl font-bold text-white mb-4">ℹ️ Használat a GameScreen-ben</h3>
          <div className="bg-gray-900 rounded-lg p-4 text-sm">
            <pre className="text-green-400 overflow-x-auto">
{`// Import-ok
import CardDisplayModal from "./CardDisplayModal"
import ConsequenceModal from "./ConsequenceModal"
import StepPredictionModal from "./StepPredictionModal"

// State-ek
const [isCardModalOpen, setIsCardModalOpen] = useState(false)
const [currentCard, setCurrentCard] = useState(null)
const [isConsequenceModalOpen, setIsConsequenceModalOpen] = useState(false)
const [consequenceData, setConsequenceData] = useState(null)

// WebSocket event
useEffect(() => {
  if (socket) {
    socket.on('game:card-drawn', (data) => {
      setCurrentCard(data.card)
      setIsCardModalOpen(true)
    })
    
    socket.on('game:answer-result', (data) => {
      setConsequenceData(data)
      setIsConsequenceModalOpen(true)
    })
  }
}, [socket])

// Render
<CardDisplayModal
  isOpen={isCardModalOpen}
  onClose={() => setIsCardModalOpen(false)}
  card={currentCard}
  cardType="QUESTION"
  onSubmitAnswer={handleSubmitAnswer}
/>

<ConsequenceModal
  isOpen={isConsequenceModalOpen}
  onClose={() => setIsConsequenceModalOpen(false)}
  {...consequenceData}
/>`}
            </pre>
          </div>
        </div>
      </div>

      {/* Modals */}
      <CardDisplayModal
        isOpen={isCardModalOpen}
        onClose={() => setIsCardModalOpen(false)}
        card={cardType === "LUCK" ? luckCard : quizCard}
        cardType={cardType}
        onSubmitAnswer={handleCardAnswer}
      />

      <ConsequenceModal
        isOpen={isConsequenceModalOpen}
        onClose={() => setIsConsequenceModalOpen(false)}
        isCorrect={isCorrect}
        consequenceType={isCorrect ? 3 : 4}
        consequenceValue={isCorrect ? 2 : 1}
        playerAnswer={isCorrect ? "Budapest" : "Debrecen"}
        correctAnswer="Budapest"
        explanation={isCorrect 
          ? "Budapest a magyar főváros, 1873-ban egyesült Buda, Pest és Óbuda városa."
          : "A helyes válasz Budapest. Debrecen Magyarország második legnagyobb városa."
        }
      />

      <StepPredictionModal
        isOpen={isStepModalOpen}
        onClose={() => setIsStepModalOpen(false)}
        onSubmitPrediction={handleStepPrediction}
        currentPosition={20}
        diceRoll={4}
        fieldStepValue={2}
        patternModifier={2}
        cardText="Tippeld meg, melyik pozícióra fogsz lépni a számítás alapján!"
        hints={[
          "A végső pozíció = jelenlegi pozíció + dobás + mező lépés + zóna módosító",
          "Ebben a példában: 20 + 4 + 2 + 2 = 28",
          "A zóna módosító a pozíció alapján változik!"
        ]}
      />
    </div>
  )
}

export default GameModalsDemo