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 Navbar = () => {
  const [menuOpen, setMenuOpen] = useState(false)
  const navigate = useNavigate()
  // Check if authLevel and username exist in localStorage
  const isLoggedIn = Boolean(localStorage.getItem("authLevel") && localStorage.getItem("username"))

  // Logout function: töröljük az adatokat és navigálunk a /login-ra (SPA, nincs reload)
  const handleLogout = () => {
    localStorage.removeItem("authLevel")
    localStorage.removeItem("username")
    navigate("/login")
  }

  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}>
                  Home
                </Link>
                <Link to="/decks" className={navLinkClass}>
                  Decks
                </Link>
                <Link to="/report" className={navLinkClass}>
                  Stats
                </Link>
              </>
            ) : (
              <Link to="/" className={navLinkClass}>
                Home
              </Link>
            )}
            <Link to="/about" className={navLinkClass}>
              About
            </Link>
            <Link to="/companies" className={navLinkClass}>
              Contact
            </Link>
            {isLoggedIn && (
              <button
                onClick={handleLogout}
                className="ml-4 p-2 rounded-full bg-white/10 hover:bg-white/20 transition-all"
                title="Logout"
              >
                {/* Simple logout icon */}
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  className="h-6 w-6 text-white"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke="currentColor"
                >
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth={2}
                    d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a2 2 0 01-2 2H7a2 2 0 01-2-2V7a2 2 0 012-2h4a2 2 0 012 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}>
              Home
            </Link>
          )}
          <Link to="/leaderboard" className={navLinkClass}>
            Leaderboard
          </Link>
          <Link to="/about" className={navLinkClass}>
            About
          </Link>
          <Link to="/companies" className={navLinkClass}>
            Contact
          </Link>
          {isLoggedIn && (
            <div className="flex justify-end px-2 pb-2">
              <button
                onClick={handleLogout}
                className="p-2 rounded-full bg-white/10 hover:bg-white/20 transition-all"
                title="Logout"
              >
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  className="h-6 w-6 text-white"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke="currentColor"
                >
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth={2}
                    d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a2 2 0 01-2 2H7a2 2 0 01-2-2V7a2 2 0 012-2h4a2 2 0 012 2v1"
                  />
                </svg>
              </button>
            </div>
          )}
        </div>
      )}
    </nav>
  )
}

export default Navbar