import React, { useEffect, useRef, 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 useRequireAuth from "../../hooks/useRequireAuth.jsx"

const Lobby = () => {
  const [visible, setVisible] = useState(false)
  const sectionRef = useRef(null)
  const navigate = useNavigate()
  const location = useLocation()

  const [user, setUser] = useRequireAuth()

  useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) setVisible(true)
      },
      { threshold: 0.3 }
    )
    if (sectionRef.current) observer.observe(sectionRef.current)
    return () => observer.disconnect()
  }, [])

  const handleExit = () => {
    if (window.confirm("Biztosan ki szeretnél lépni a lobbyból?")) {
      navigate("/home")
    }
  }

  const getInitials = (name) => {
    return name
      .split(" ")
      .map((n) => n[0])
      .join("")
      .slice(0, 2)
      .toUpperCase()
  }

  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-16 mt-0 mb-20 flex items-center justify-center">
        <section
          ref={sectionRef}
          className={`w-full max-w-3xl rounded-2xl p-8 md:p-10 transition-all duration-1000 ease-out backdrop-blur-md shadow-2xl ${
            visible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-10"
          }`}
          style={{ background: "rgba(0,0,0,0.25)" }}
        >
          <h1 className="text-4xl md:text-5xl font-extrabold text-green-300 mb-4 text-center tracking-wide drop-shadow-lg">
            {user} Lobby-ja
          </h1>

          <p className="text-lg text-zinc-300 mb-8 text-center">
            Játékosok, akik csatlakoztak ehhez a szobához:
          </p>

          <div className="bg-zinc-800/90 rounded-xl shadow-lg p-6 mb-8">
            <ul className="flex flex-col gap-4">
              <li className="bg-zinc-700 py-3 px-4 rounded-xl text-green-400 font-semibold flex items-center gap-4 shadow hover:shadow-green-500/20 transition">
                <div
                  className="w-10 h-10 rounded-full flex items-center justify-center text-sm font-semibold"
                  style={{ background: "rgba(34,197,94,0.12)", color: "var(--color-mint)" }}
                >
                  {getInitials(user)}
                </div>
                <span className="text-white text-lg">{user}</span>
              </li>
            </ul>
          </div>

          <div className="flex justify-center">
            <button
              onClick={handleExit}
              className="bg-gradient-to-r from-green-700 to-green-500 hover:from-green-600 hover:to-green-400 text-white px-8 py-3 rounded-xl font-semibold shadow-lg hover:shadow-green-400/30 transition-transform transform hover:scale-105"
            >
              Kilépés
            </button>
          </div>
        </section>
      </main>
    </div>
  )
}

export default Lobby