"use client";

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

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

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

  useEffect(() => {
    const handleRouteChange = () => {
      setMenu(true);
      setClientServicingOpen(false);
    };

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

  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;
    }
    return router.pathname.startsWith(path);
  };

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

  const clientServices = [
    {
      title: "Virtual Finance Office",
      href: "/client-servicing/virtual-finance-office",
      items: [
        {
          name: "Virtual CFO Services",
          href: "/client-servicing/virtual-finance-office/virtual-cfo",
        },
        {
          name: "Virtual FC Services",
          href: "/client-servicing/virtual-finance-office/virtual-fc",
        },
        {
          name: "Book Closure and Audit Support",
          href: "/client-servicing/virtual-finance-office/book-closures-audit",
        },
        {
          name: "Accounting Payroll & Compliance",
          href: "/client-servicing/virtual-finance-office/apc",
        },
      ],
    },
    {
      title: "Advisory Services",
      href: "/client-servicing/advisory-services",
      items: [
        { name: "Transaction Advisory", href: "/client-servicing/ta" },
        { name: "Risk Advisory", href: "/client-servicing/ra" },
        { name: "Business Advisory", href: "/client-servicing/ba" },
      ],
    },
    {
      title: "GCC as a Service",
      href: "/client-servicing/global-capability-centres",
      items: [],
    },
    {
      title: "Digital Transformation",
      href: "/client-servicing/digital-transformation",
      items: [
        // { name: "ITeC App", href: "/client-servicing/ba" },
        // { name: "Digital Process Automation", href: "/client-servicing/ba" },
      ],
    },
    {
      title: "Empowering Finance Consultants",
      href: "/client-servicing/empowering-finance-consultants",
      items: [
        // { name: "CA/CPA firm services", href: "/client-servicing/ba" }
      ],
    },
    {
      title: "Bespoke Services",
      href: "/client-servicing/bespoke",
      items: [
        // { name: "Data analysis and reporting", href: "/client-servicing/ba" },
        // { name: "Admin and Backend Support Services", href: "/client-servicing/ba" },
        // { name: "PFM", href: "/client-servicing/ba" },
      ],
    },
  ];

  // Group the last four services into one column
  const megaMenuColumns = [
    [clientServices[0]], // Virtual Finance Office
    [clientServices[1]], // Advisory Services
    [
      clientServices[2],
      clientServices[3],
      clientServices[4],
      clientServices[5],
    ], // GCC as a Service, Digital Transformation, Empowering Finance Consultants, Bespoke Services
  ];

  return (
    <>
      <div className="mega-menu-container">
        {/* Mobile Hamburger only visible on mobile */}
        <div className="mobile-hamburger-wrapper">
          <MobileHamburger />
        </div>
        <div id="navbar" className="navbar-area">
          <div className="zixon-nav">
            <div
              className="container-fluid"
              style={{ maxWidth: 1200, margin: "0 auto", padding: "0 32px" }}
            >
              <nav className="navbar navbar-expand-md navbar-light">
                <Link href="/" className="navbar-brand">
                  <Image
                    width={180}
                    height={33}
                    src="/images/Advithlogo.svg"
                    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>

                    {/* Knowledge Dropdown */}
                    <li className="nav-item knowledge-dropdown">
                      <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" : ""
                                }`}
                              >
                                Taxwire
                              </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>

                    {/* Wrap both the Client Servicing nav item and the mega menu in a parent div for hover logic */}
                    <li
                      className="nav-item"
                      onMouseEnter={() => setClientServicingOpen(true)}
                      onMouseLeave={() => setClientServicingOpen(false)}
                    >
                      <Link
                        href="/client-servicing"
                        className="nav-link dropdown-nav"
                        style={{
                          background: "none",
                          border: "none",
                          cursor: "pointer",
                        }}
                      >
                        Client Servicing
                        <span className="dropdown-arrow"></span>
                      </Link>
                    </li>
                    {clientServicingOpen && (
                      <div
                        className="mega-menu show"
                        style={{
                          position: "fixed",
                          left: 0,
                          top: "calc(64px + 1px)", // adjust 64px to your header height if needed
                          width: "100vw",
                          zIndex: 1000,
                          background: "#fff",
                          boxShadow: "0 2px 8px rgba(0,0,0,0.08)",
                        }}
                        onMouseEnter={() => setClientServicingOpen(true)}
                        onMouseLeave={() => setClientServicingOpen(false)}
                      >
                        <div className="mega-menu-content">
                          <div
                            className="mega-grid client-servicing-grid"
                            style={{
                              display: "flex",
                              gap: "32px",
                              justifyContent: "center",
                            }}
                          >
                            {megaMenuColumns.map((column, colIdx) => (
                              <div
                                key={colIdx}
                                className="mega-column"
                                style={
                                  colIdx === 2
                                    ? {
                                        minWidth: 260,
                                        gap: 8,
                                        display: "flex",
                                        flexDirection: "column",
                                      }
                                    : {
                                        minWidth: 260,
                                        display: "flex",
                                        flexDirection: "column",
                                      }
                                }
                              >
                                {column.map((service, idx) => (
                                  <div
                                    key={service.title}
                                    className="service-header"
                                    style={
                                      colIdx < 2
                                        ? { display: "block", marginBottom: 8 }
                                        : { marginBottom: 8 }
                                    }
                                  >
                                    <Link
                                      href={service.href}
                                      className="mega-column-title"
                                      style={{
                                        fontWeight: "bold",
                                        fontFamily: "inherit",
                                        borderBottom: "2px solid #f5c542",
                                        paddingBottom: 4,
                                        display: "inline-block",
                                        marginBottom: 8,
                                        fontSize: "1rem",
                                      }}
                                    >
                                      <strong>{service.title}</strong>
                                    </Link>
                                    {/* Only show subpoints for the first two columns */}
                                    {colIdx < 2 && service.items.length > 0 && (
                                      <ul className="mega-column-list">
                                        {service.items.map(
                                          (item, itemIndex) => (
                                            <li key={itemIndex}>
                                              <Link
                                                href={item.href}
                                                className={`${
                                                  isActive(item.href)
                                                    ? "active"
                                                    : ""
                                                }`}
                                              >
                                                {item.name}
                                              </Link>
                                            </li>
                                          )
                                        )}
                                      </ul>
                                    )}
                                  </div>
                                ))}
                              </div>
                            ))}
                          </div>
                        </div>
                      </div>
                    )}

                    <li className="nav-item">
                      <Link
                        href="/industry"
                        className={`nav-link ${
                          isActive("/industry") ? "active" : ""
                        }`}
                      >
                        Industry
                      </Link>
                    </li>

                    <li className="nav-item">
                      <Link
                        href="/career"
                        className={`nav-link ${
                          isActive("/career") ? "active" : ""
                        }`}
                      >
                        Careers
                      </Link>
                    </li>

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

export default Header;