import React, { useState, useEffect } from "react";
import Link from "next/link";
import { useRouter } from "next/router";
import Image from "next/image";

const Header = () => {
  const [menu, setMenu] = useState(true);
  const router = useRouter();

  const toggleNavbar = () => {
    setMenu(!menu);
  };

  // Close the menu on route change
  useEffect(() => {
    const handleRouteChange = () => {
      setMenu(true); // Close the menu on route change
    };

    router.events.on("routeChangeStart", handleRouteChange);

    return () => {
      router.events.off("routeChangeStart", handleRouteChange);
    };
  }, [router]);

  // Sticky navbar effect
  useEffect(() => {
    const elementId = document.getElementById("navbar");
    const handleScroll = () => {
      if (window.scrollY > 170) {
        elementId.classList.add("is-sticky");
      } else {
        elementId.classList.remove("is-sticky");
      }
    };

    window.addEventListener("scroll", handleScroll);

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

  // Check if a route is active
  const isActive = (path) => {
    if (path === "/") {
      return router.pathname === path; // Exact match for home page
    }
    return router.pathname.startsWith(path); // Match subroutes
  };

  const classOne = menu ? "collapse navbar-collapse" : "collapse navbar-collapse show";
  const classTwo = menu ? "navbar-toggler navbar-toggler-right collapsed" : "navbar-toggler navbar-toggler-right";

  return (
    <>
      <div id="navbar" className="navbar-area">
        <div className="zixon-nav">
          <div className="container-fluid">
            <nav className="navbar navbar-expand-md navbar-light">
              <Link href="/" className="navbar-brand">
                <Image width={144} height={33} src="/images/logo.png" alt="logo" />
              </Link>

              <button
                onClick={toggleNavbar}
                className={classTwo}
                type="button"
                aria-controls="navbarSupportedContent"
                aria-expanded="false"
                aria-label="Toggle navigation"
              >
                <span className="icon-bar top-bar"></span>
                <span className="icon-bar middle-bar"></span>
                <span className="icon-bar bottom-bar"></span>
              </button>

              <div className={classOne} id="navbarSupportedContent">
                <ul className="navbar-nav">
                  <li className="nav-item">
                    <Link href="/" className={`nav-link ${isActive("/") ? "active" : ""}`}>
                      Home
                    </Link>
                  </li>
                  <li className="nav-item">
                    <Link href="/knowledge" className="dropdown-toggle nav-link">
                      Knowledge
                    </Link>
                    <ul className="dropdown-menu">
                      <li className="nav-item">
                        <Link href="/corpedia" className={`nav-link ${isActive("/corpedia") ? "active" : ""}`}>
                          Corpedia
                        </Link>
                        <ul>
                          <li className="nav-item">
                            <Link href="/taxwire" className={`nav-link ${isActive("/taxwire") ? "active" : ""}`}>
                              Tax Wire
                            </Link>
                          </li>
                          <li className="nav-item">
                            <Link href="/budgetpanorama" className={`nav-link ${isActive("/budgetpanorama") ? "active" : ""}`}>
                              Budget Panorama
                            </Link>
                          </li>
                        </ul>
                      </li>
                      <li className="nav-item">
                        <Link href="/blog" className={`nav-link ${isActive("/blog") ? "active" : ""}`}>
                          Blogs
                        </Link>
                      </li>
                    </ul>
                  </li>
                  <li className="nav-item">
                    <Link href="/people" className={`nav-link ${isActive("/people") ? "active" : ""}`}>
                      People
                    </Link>
                  </li>
             

                  <li className="nav-item">
                  <Link href="/client-servicing"  className="dropdown-toggle nav-link">
                  Client Servicing
                    </Link>
                    <ul className="dropdown-menu">
                      <li className="nav-item">
                        <Link href="/client-servicing/cfo" className={`nav-link ${isActive("/client-servicing/cfo") ? "active" : ""}`}>
                         Virtual FC & CFO Services
                        </Link>
                        <ul>
                          <li className="nav-item">
                            <Link href="/client-servicing/ta" className={`nav-link ${isActive("/client-servicing/ta") ? "active" : ""}`}>
                              Transaction Advisor
                            </Link>
                          </li>
                          <li className="nav-item">
                            <Link href="/client-servicing/ra" className={`nav-link ${isActive("/client-servicing/ra") ? "active" : ""}`}>
                                Risk Advisor
                            </Link>
                          </li>
                        </ul>
                      </li>
                      <li className="nav-item">
                        <Link href="/client-servicing/ba" className={`nav-link ${isActive("/client-servicing/ba") ? "active" : ""}`}>
                          Business Advisor
                        </Link>
                      </li>
                    </ul>
                  </li>


                  <li className="nav-item">
                    <Link href="#" className={`nav-link ${isActive("/careers") ? "active" : ""}`}>
                      Careers
                    </Link>
                  </li>
                  <li className="nav-item">
                    <Link href="/industry" className={`nav-link ${isActive("/industry") ? "active" : ""}`}>
                      Industry
                    </Link>
                  </li>
                  <li className="nav-item">
                    <Link href="/contact" className={`nav-link ${isActive("/contact") ? "active" : ""}`}>
                      Contact Us
                    </Link>
                  </li>
                </ul>
              </div>
            </nav>
          </div>
        </div>
      </div>
    </>
  );
};

export default Header;