import { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
import "./NavBar.css";

const NavBar = () => {
    const [active, setActive] = useState("home-section");
    const [isScrolling, setIsScrolling] = useState(false);

    const navigate = useNavigate();

    useEffect(() => {
        if (location.pathname === '/') {
            const sections = document.querySelectorAll("section");
            const navHeight = document.querySelector(".navbar")?.offsetHeight + 40 || 120;

            const handleScroll = () => {
                if (isScrolling) return;

                let current = "home-section";
                sections.forEach((section) => {
                    const sectionTop = section.offsetTop - navHeight;
                    if (window.scrollY >= sectionTop) {
                        current = section.id;
                    }
                });
                setActive(current);
            };

            window.addEventListener("scroll", handleScroll);
            handleScroll();

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

    const handleClick = (id) => {
        if (location.pathname === '/') {
            setActive(id);
            setIsScrolling(true);
            document.getElementById(id)?.scrollIntoView({ behavior: "smooth" });
            setTimeout(() => setIsScrolling(false), 800);
        } else {
            navigate(`/#${id}`);
        }
    };

    return (
        <nav className="navbar">
            <ul className="nav-list">
                <li>
                    <button
                        onClick={() => handleClick("home-section")}
                        className={`nav-link ${active === "home-section" ? "active" : ""}`}
                    >
                        Home
                    </button>
                </li>
                <li>
                    <button
                        onClick={() => handleClick("experiences-section")}
                        className={`nav-link ${active === "experiences-section" ? "active" : ""}`}
                    >
                        Experiences
                    </button>
                </li>
                <li>
                    <button
                        onClick={() => handleClick("projects-section")}
                        className={`nav-link ${active === "projects-section" ? "active" : ""}`}
                    >
                        Projects
                    </button>
                </li>
                <li>
                    <button
                        onClick={() => handleClick("skills-section")}
                        className={`nav-link ${active === "skills-section" ? "active" : ""}`}
                    >
                        Skills
                    </button>
                </li>
            </ul>
        </nav>
    );
};

export default NavBar;