/**
 * @fileoverview React component for Navbar.jsx
 * 
 * @module components.Navbar
 */

import { isSession, Link } from "react-router-dom";
import { Menu, X, ChevronDown } from "lucide-react";
import { useState, useEffect } from "react";
import logo from "../assets/logo_decoda.svg";

const Navbar = () => {
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const [scrolled, setScrolled] = useState(false);
  const [openDropdown, setOpenDropdown] = useState(null);
  const [closeTimeout, setCloseTimeout] = useState(null);
  const isOffline = import.meta.env.VITE_IS_OFFLINE === "true";

  useEffect(() => {
    const handleScroll = () => {
      setScrolled(window.scrollY > 50);
    };

    window.addEventListener("scroll", handleScroll, { passive: true });
    handleScroll(); // Check initial state

    return () => window.removeEventListener("scroll", handleScroll);
  }, []);

  const handleMouseEnter = (dropdown) => {
    if (closeTimeout) {
      clearTimeout(closeTimeout);
      setCloseTimeout(null);
    }
    setOpenDropdown(dropdown);
  };

  const handleMouseLeave = () => {
    const timeout = setTimeout(() => {
      setOpenDropdown(null);
    }, 150);
    setCloseTimeout(timeout);
  };

  return (
    <nav
      className={`fixed top-0 left-0 right-0 z-50 border-b border-white/20 transition-all duration-300 bg-white`}
    >
      <div className="flex items-center justify-between px-4 py-1 lg:px-12 lg:py-12">
        {/* Logo - Esquerda */}
        <div className="flex items-center space-x-4">
          <Link
            to="/"
            className="header-logo group cursor-pointer flex items-center space-x-2 hover:bg-white/10 px-3 py-2 rounded-lg transition-all duration-200"
          >
            <img
              src={logo}
              alt="Decoda Logo"
              className="h-[83px] transition-transform duration-200 group-hover:scale-110"
            />
          </Link>
        </div>

        {/* Espaço Central vazio para empurrar o menu para a direita */}
        <div className="flex-1 flex justify-center"></div>

        {/* Menu Desktop - Direita */}
        <div className="flex items-center space-x-2">
          <div className="hidden md:flex items-center gap-6 lg:gap-8">
            {/* Links diretos - Primeiros Passos */}
            <Link
              to="/primeiros-passos"
              className="text-black hover:text-black/80 font-medium transition-colors hover:underline underline-offset-4"
            >
              Primeiros Passos
            </Link>            
            {/* Links diretos - Atividades */}
            <Link
              to="/atividades"
              className="text-black hover:text-black/80 font-medium transition-colors hover:underline underline-offset-4"
            >
              Programação
            </Link>

            {/* Dropdown - Laboratórios */}
            <div
              className="relative"
              onMouseEnter={() => handleMouseEnter("laboratorios")}
              onMouseLeave={handleMouseLeave}
            >
              <button className="flex items-center gap-1 text-black hover:text-black/80 font-medium transition-colors hover:underline underline-offset-4">
                Laboratórios
                <ChevronDown className="size-4" />
              </button>
              {openDropdown === "laboratorios" && (
                <div className="absolute top-full left-0 mt-2 w-64 bg-white rounded-lg shadow-lg border border-gray-200 py-2 z-50">
                  <Link
                    to="/playground"
                    className="block px-4 py-2 text-black hover:bg-gray-100 transition-colors"
                  >
                    Laboratório de Blocos
                  </Link>
                  {(isOffline === false) && (
                  <Link
                    to="/laboratorio-python/"
                    className="block px-4 py-2 text-black hover:bg-gray-100 transition-colors"
                  >
                    Laboratório Python
                  </Link>
                  )}
                </div>
              )}
            </div>

            {/* Links diretos - Iniciativas */}
            <Link
              to="/iniciativas"
              className="text-black hover:text-black/80 font-medium transition-colors hover:underline underline-offset-4"
            >
              Iniciativas
            </Link>
            
            <Link
              to="/sobre"
              className="text-black hover:text-black/80 font-medium transition-colors hover:underline underline-offset-4"
            >
              Quem somos
            </Link>

            <Link
              to="/faq"
              className="text-black hover:text-black/80 font-medium transition-colors hover:underline underline-offset-4"
            >
              Perguntas frequentes
            </Link>

            {(isOffline === false) && (
            <Link
              to="/educadores"
              className="text-black hover:text-black/80 font-medium transition-colors hover:underline underline-offset-4"
            >
              Para educadores
            </Link>
            )}
          </div>

          {/* Botão Mobile Menu */}
          <button
            onClick={() => setIsMenuOpen(!isMenuOpen)}
            className="md:hidden p-2 rounded-lg hover:bg-white/10 transition-colors"
            aria-label="Toggle menu"
          >
            {isMenuOpen ? (
              <X className="size-10 text-black" />
            ) : (
              <Menu className="size-10 text-black" />
            )}
          </button>
        </div>
      </div>

      {/* Menu Mobile */}
      {isMenuOpen && (
        <div className="md:hidden border-t border-white/20 bg-white backdrop-blur-sm">
          <div className="px-6 py-4 space-y-2">
            {/* Links diretos Mobile */}
            <Link
              to="/atividades"
              className="block px-4 py-2 text-black hover:bg-black/10 rounded-lg font-medium transition-colors"
              onClick={() => setIsMenuOpen(false)}
            >
              Atividades
            </Link>
            
            <Link
              to="/primeiros-passos"
              className="block px-4 py-2 text-black hover:bg-black/10 rounded-lg font-medium transition-colors"
              onClick={() => setIsMenuOpen(false)}
            >
              Primeiros Passos
            </Link>

            {/* Laboratórios no mobile */}
            <div className="space-y-1">
              <div className="px-4 py-2 text-black font-medium">
                Laboratórios
              </div>
              <Link
                to="/playground"
                className="block pl-8 pr-4 py-2 text-black hover:bg-black/10 rounded-lg transition-colors"
                onClick={() => setIsMenuOpen(false)}
              >
                Laboratório de Blocos
              </Link>
              <Link
                to="/laboratorio-python/"
                className="block pl-8 pr-4 py-2 text-black hover:bg-black/10 rounded-lg transition-colors"
                onClick={() => setIsMenuOpen(false)}
              >
                Laboratório Python
              </Link>
            </div>

            <Link
              to="/iniciativas"
              className="block px-4 py-2 text-black hover:bg-black/10 rounded-lg font-medium transition-colors"
              onClick={() => setIsMenuOpen(false)}
            >
              Iniciativas
            </Link>

            <Link
              to="/sobre"
              className="block px-4 py-2 text-black hover:bg-black/10 rounded-lg font-medium transition-colors"
              onClick={() => setIsMenuOpen(false)}
            >
              Quem somos
            </Link>
            <Link
              to="/faq"
              className="block px-4 py-2 text-black hover:bg-black/10 rounded-lg font-medium transition-colors"
              onClick={() => setIsMenuOpen(false)}
            >
              Perguntas frequentes
            </Link>
            <Link
              to="/educadores"
              className="block px-4 py-2 text-black hover:bg-black/10 rounded-lg font-medium transition-colors"
              onClick={() => setIsMenuOpen(false)}
            >
              Para educadores
            </Link>
          </div>
        </div>
      )}
    </nav>
  );
};

export default Navbar;
