import React, { useState } from "react"
import Logo from "../../assets/pictures/Logo"
import { Link } from "react-router-dom"
import HandleNavigate from "../../utils/HandleNavigate/HandleNavigate" // ✅ importáld a navigációs hookot
import { FaSignOutAlt, FaChartBar, FaUser, FaBars } from "react-icons/fa"

const navLinkClass = "px-3 py-2 rounded-lg text-white transition-all duration-200 hover:bg-white/10"
const navLinkClassPlay =
  "px-4 py-2 rounded-lg text-white bg-white/12 hover:bg-white/20 transition-all duration-200"

const Navbar = () => {
  const [menuOpen, setMenuOpen] = useState(false)
  const [userMenuOpen, setUserMenuOpen] = useState(false)
  const isLoggedIn = Boolean(localStorage.getItem("authLevel") && localStorage.getItem("username"))

  // ✅ Használjuk a HandleNavigate hookot
  const { goLanding, goAbout, goHome, goLogin, goContacts } = HandleNavigate()

  // ✅ Logout logika
  const handleLogout = () => {
    localStorage.clear()
    goLanding()
  }

  return (
    <nav className="bg-gradient-to-r from-green-700 to-emerald-500 shadow-lg">
      {/* removed mx-auto and px-* classes; use full width + responsive padding-inline using clamp */}
      <div
        className="w-full"
        style={{
          /* minimális padding 12px, növel a képernyővel, max 30px */
          paddingInline: "clamp(12px, calc((100vw - 1024px) / 2), 80px)",
        }}
      >
        <div className="flex justify-between h-16 items-center">
          {/* Logo + Brand */}
          <div className="flex-shrink-0 flex items-center gap-2">
            <button onClick={goLanding} className=" cursor-pointer flex items-center mt-1 h-9">
              <Logo size={36} />
            </button>
            <button
              onClick={goLanding}
              className="cursor-pointer flex items-center h-9 text-white font-bold text-2xl tracking-tight"
            >
              SerpentRace
            </button>
          </div>

          {/* Desktop Menu */}
          <div className="hidden md:flex items-center space-x-6">
            {/* Bal oldali linkek */}
            <button onClick={goAbout} className={navLinkClass}>
              Rólunk
            </button>

            {/* Csak bejelentkezve */}
            {isLoggedIn && (
              <>
                <Link to="/decks" className={navLinkClass}>
                  Paklik
                </Link>
              </>
            )}

            {/* Játék gomb */}
            <button onClick={goHome} className={navLinkClassPlay}>
              Játék
            </button>

            {/* Jobb oldali akciók */}
            {!isLoggedIn ? (
              <div className="flex items-center space-x-4">
                <button
                  onClick={goLogin}
                  className="px-4 py-2 rounded-lg hover:bg-white/20 text-white font-semibold transition-all"
                >
                  Bejelentkezés
                </button>

                {/* Elválasztó vonal */}
                <div className="w-px h-10 bg-white/100"></div>

                <Link
                  to="/register"
                  className="px-4 py-2 rounded-lg bg-white/10 hover:bg-white/20 text-white font-semibold transition-all"
                >
                  Regisztráció
                </Link>
              </div>
            ) : (
              // Ha be van jelentkezve: mutatunk egy kis lenyíló gombot (ikon), ami tartalmazza a Profil, Statisztikák és Kijelentkezés linkeket
              <div className="relative">
                <button
                  onClick={() => setUserMenuOpen((s) => !s)}
                  className="ml-2 p-2 rounded-full bg-[#166534] hover:bg-[#1f7a45] text-white shadow-lg hover:shadow-green-400/40 transition-all transform hover:scale-105 cursor-pointer flex items-center gap-2"
                  title="Felhasználói menü"
                >
                  <FaBars className="h-5 w-5" />
                </button>

                {userMenuOpen && (
                  <div className="absolute right-0 mt-2 w-44 bg-white/5 backdrop-blur-sm border border-gray-700 rounded-lg shadow-lg overflow-hidden z-40">
                    <button
                      onClick={() => {
                        setUserMenuOpen(false)
                        // navigálás statisztikák
                        goLanding // fallback, majd ha kell: goReport
                      }}
                      className="w-full flex items-center gap-3 px-4 py-2 hover:bg-white/10 text-white"
                    >
                      <FaChartBar className="w-4 h-4" />
                      <span className="text-sm">Statisztikák</span>
                    </button>
                    <button
                      onClick={() => {
                        setUserMenuOpen(false)
                        // profil
                        window.location.href = "/profile"
                      }}
                      className="w-full flex items-center gap-3 px-4 py-2 hover:bg-white/10 text-white"
                    >
                      <FaUser className="w-4 h-4" />
                      <span className="text-sm">Profil</span>
                    </button>
                    <div className="h-px bg-white/5" />
                    <button
                      onClick={() => {
                        setUserMenuOpen(false)
                        handleLogout()
                      }}
                      className="w-full flex items-center gap-3 px-4 py-2 hover:bg-white/10 text-white"
                    >
                      <FaSignOutAlt className="w-4 h-4" />
                      <span className="text-sm">Kijelentkezés</span>
                    </button>
                  </div>
                )}
              </div>
            )}
          </div>

          {/* Mobile Hamburger */}
          <div className="md:hidden flex items-center">
            <button
              onClick={() => setMenuOpen(!menuOpen)}
              className="text-white focus:outline-none"
              aria-label="Toggle menu"
            >
              <svg
                className="h-7 w-7"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg"
              >
                {menuOpen ? (
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth={2}
                    d="M6 18L18 6M6 6l12 12"
                  />
                ) : (
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 8h16M4 16h16" />
                )}
              </svg>
            </button>
          </div>
        </div>
      </div>

      {/* Mobile Menu */}
      {menuOpen && (
        <div className="md:hidden bg-emerald-600 px-2 pt-2 pb-3 space-y-1">
          <button
            onClick={() => {
              goAbout()
              setMenuOpen(false)
            }}
            className={navLinkClass}
          >
            Rólunk
          </button>
          <button
            onClick={() => {
              goContacts()
              setMenuOpen(false)
            }}
            className={navLinkClass}
          >
            Kapcsolat
          </button>

          {isLoggedIn && (
            <>
              <Link to="/decks" onClick={() => setMenuOpen(false)} className={navLinkClass}>
                Paklik
              </Link>
            </>
          )}

          <button
            onClick={() => {
              goHome()
              setMenuOpen(false)
            }}
            className={navLinkClassPlay}
          >
            Játék
          </button>

          {!isLoggedIn ? (
            <div className="flex flex-col space-y-2">
              <button
                onClick={() => {
                  goLogin()
                  setMenuOpen(false)
                }}
                className="block px-3 py-2 rounded-lg hover:bg-white/20 text-white font-semibold transition-all"
              >
                Bejelentkezés
              </button>

              {/* Elválasztó vonal mobilon */}
              <div className="w-full h-px bg-white/30"></div>

              <Link
                to="/register"
                onClick={() => setMenuOpen(false)}
                className="block px-3 py-2 rounded-lg bg-white/10 hover:bg-white/20 text-white font-semibold transition-all"
              >
                Regisztráció
              </Link>
            </div>
          ) : (
            <div className="flex justify-end px-2 pb-2">
              <button
                onClick={() => {
                  handleLogout()
                  setMenuOpen(false)
                }}
                className="p-2 rounded-full bg-[#166534] hover:bg-[#1f7a45] text-white shadow-lg hover:shadow-green-400/40 transition-all transform hover:scale-105 cursor-pointer flex items-center gap-2"
                title="Kijelentkezés"
              >
                <FaSignOutAlt className="h-6 w-6" />
              </button>
            </div>
          )}
        </div>
      )}
    </nav>
  )
}

export default Navbar