import React, { useState } from "react"
import Logo from "../../assets/pictures/Logo"
import { Link, useNavigate } from "react-router-dom"

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 navigate = useNavigate()
  const isLoggedIn = Boolean(localStorage.getItem("authLevel") && localStorage.getItem("username"))

  const handleLogout = () => {
    localStorage.removeItem("authLevel")
    localStorage.removeItem("username")
    navigate("/")
  }

  return (
    <nav className="bg-gradient-to-r from-green-700 to-emerald-500 shadow-lg">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex justify-between h-16 items-center">
          {/* Logo */}
          <div className="flex-shrink-0 flex items-center gap-2">
            <Link to="/" className="flex items-center mt-1 h-9">
              <Logo size={36} />
            </Link>
            <Link to="/" className="flex items-center h-9 text-white font-bold text-2xl tracking-tight">
              SerpentRace
            </Link>
          </div>

          {/* Desktop Menu */}
          <div className="hidden md:flex space-x-8 items-center">
            {isLoggedIn ? (
              <>
                <Link to="/home" className={navLinkClass}>Játék</Link>
                <Link to="/decks" className={navLinkClass}>Paklik</Link>
                <Link to="/report" className={navLinkClass}>Statisztikák</Link>
              </>
            ) : (
              <Link to="/" className={navLinkClass}>Főoldal</Link>
            )}
            <Link to="/about" className={navLinkClass}>Rólunk</Link>
            <Link to="/companies" className={navLinkClass}>Kontakt</Link>
            {!isLoggedIn && (
              <>
                <Link to="/home" className={navLinkClassPlay}>Játék</Link>
                <Link
                  to="/login"
                  className="px-4 py-2 rounded-lg bg-white/10 hover:bg-white/20 text-white font-semibold transition-all"
                >
                  Bejelentkezés / Regisztráció
                </Link>
              </>
            )}
            {isLoggedIn && (
              <button
                onClick={handleLogout}
                className="ml-4 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"
                title="Kijelentkezés"
              >
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  className="h-6 w-6"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke="currentColor"
                >
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth={2}
                    d="M10 16l4-4m0 0l-4-4m4 4H3m13 4v1a2 2 0 002 2h2a2 2 0 002-2V7a2 2 0 00-2-2h-2a2 2 0 00-2 2v1"
                  />
                </svg>
              </button>
            )}
          </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">
          {isLoggedIn ? (
            <Link to="/home" className={navLinkClass}>Home</Link>
          ) : (
            <Link to="/" className={navLinkClass}>Főoldal</Link>
          )}
          <Link to="/leaderboard" className={navLinkClass}>Leaderboard</Link>
          <Link to="/about" className={navLinkClass}>Rólunk</Link>
          <Link to="/companies" className={navLinkClass}>Kontakt</Link>
          {!isLoggedIn && (
            <>
              <div className="px-2">
                <button
                  onClick={() => {
                    setMenuOpen(false)
                    navigate("/")
                  }}
                  className="w-full text-left px-3 py-2 rounded-lg bg-white/10 hover:bg-white/20 text-white transition-all"
                >
                  Játék
                </button>
              </div>
              <Link
                to="/login"
                className="block px-3 py-2 rounded-lg bg-white/10 hover:bg-white/20 text-white font-semibold transition-all"
              >
                Bejelentkezés / Regisztráció
              </Link>
            </>
          )}
          {isLoggedIn && (
            <div className="flex justify-end px-2 pb-2">
              <button
                onClick={handleLogout}
                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"
                title="Kijelentkezés"
              >
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  className="h-6 w-6"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke="currentColor"
                >
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth={2}
                    d="M10 16l4-4m0 0l-4-4m4 4H3m13 4v1a2 2 0 002 2h2a2 2 0 002-2V7a2 2 0 00-2-2h-2a2 2 0 00-2 2v1"
                  />
                </svg>
              </button>
            </div>
          )}
        </div>
      )}
    </nav>
  )
}

export default Navbar