import React, { useState } from "react"
import { useNavigate, useLocation } from "react-router-dom"
import Navbar from "../../components/Navbar/Navbar.jsx"
import Background from "../../assets/backgrounds/Background.jsx"
import Footer from "../../components/Footer/Footer.jsx"
import useRequireAuth from "../../hooks/useRequireAuth.jsx"
import ButtonGreen from "../../components/Buttons/ButtonGreen.jsx"
import { motion } from "framer-motion"

const GameLobbySetup = () => {
  const [username] = useRequireAuth({ key: "username", redirectTo: "/login" })
  const navigate = useNavigate()
  const location = useLocation()

  const deckIds = location.state?.deckIds || []

  const [maxPlayers, setMaxPlayers] = useState(4)
  const [isPublic, setIsPublic] = useState(true)

  const handleCreateLobby = () => {
    console.log({
      deckIds,
      maxPlayers,
      isPublic,
    })
    // Itt küldd el az API-nak a lobby létrehozását
    // navigate("/game-lobby", { state: { lobbyId: response.lobbyId } })
  }

  if (deckIds.length === 0) {
    navigate("/choose-deck")
    return null
  }

  return (
    <div className="flex flex-col min-h-screen overflow-y-auto relative">
      <div className="fixed top-0 left-0 w-full h-full -z-10">
        <Background />
      </div>

      <div className="fixed top-0 left-0 right-0 z-30">
        <Navbar />
      </div>

      <main className="flex-grow text-white px-6 pt-24 pb-20">
        <motion.section
          className="max-w-2xl mx-auto"
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.7 }}
        >
          <motion.h1
            className="text-5xl font-extrabold text-green-300 mb-6 text-center tracking-wide drop-shadow-lg"
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8, delay: 0.1 }}
          >
            Lobby Beállítások
          </motion.h1>

          <motion.p
            className="text-lg leading-relaxed text-zinc-200 mb-10 text-center"
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8, delay: 0.2 }}
          >
            {deckIds.length} pakli kiválasztva. Add meg a játék részleteit.
          </motion.p>

          <div className="bg-[color:var(--color-surface)]/80 backdrop-blur-lg rounded-2xl p-8 shadow-lg space-y-6">
            {/* Max Players */}
            <div>
              <label className="block text-[color:var(--color-text)] font-semibold mb-2">
                Maximális játékosszám:
              </label>
              <input
                type="number"
                min="2"
                max="10"
                value={maxPlayers}
                onChange={(e) => setMaxPlayers(parseInt(e.target.value) || 2)}
                className="w-full px-4 py-2 rounded-lg bg-[color:var(--color-card)] text-[color:var(--color-text)] border border-[color:var(--color-surface)] focus:ring-2 focus:ring-[color:var(--color-success)] outline-none"
              />
            </div>

            {/* Public/Private */}
            <div>
              <label className="block text-[color:var(--color-text)] font-semibold mb-2">Játék típusa:</label>
              <div className="flex gap-4">
                <button
                  className={`flex-1 px-4 py-3 rounded-lg font-medium transition-all duration-200 ${
                    isPublic
                      ? "bg-[color:var(--color-success)] text-[color:var(--color-text-inverse)]"
                      : "bg-[color:var(--color-card)] text-[color:var(--color-text)] hover:bg-[color:var(--color-success)]/30"
                  }`}
                  onClick={() => setIsPublic(true)}
                >
                  🌐 Publikus
                </button>
                <button
                  className={`flex-1 px-4 py-3 rounded-lg font-medium transition-all duration-200 ${
                    !isPublic
                      ? "bg-[color:var(--color-success)] text-[color:var(--color-text-inverse)]"
                      : "bg-[color:var(--color-card)] text-[color:var(--color-text)] hover:bg-[color:var(--color-success)]/30"
                  }`}
                  onClick={() => setIsPublic(false)}
                >
                  🔒 Privát
                </button>
              </div>
            </div>
          </div>

          {/* Action Buttons */}
          <div className="flex justify-center gap-4 mt-8">
            <ButtonGreen
              text="Vissza"
              onClick={() => navigate("/choose-deck")}
              width="w-auto px-8"
              className="bg-gray-600 hover:bg-gray-700"
            />
            <ButtonGreen text="Lobby Létrehozása" onClick={handleCreateLobby} width="w-auto px-8" />
          </div>
        </motion.section>
      </main>

      <footer className="mt-auto">
        <Footer />
      </footer>
    </div>
  )
}

export default GameLobbySetup