"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 Closures 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/ta",
      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/ra",
      items: [],
    },
    {
      title: "Digital Transformation",
      href: "/client-servicing/ba",
      items: [
        // { name: "ITeC App", href: "/client-servicing/ba" },
        // { name: "Digital Process Automation", href: "/client-servicing/ba" },
      ],
    },
    {
      title: "Empowering Finance Consultants",
      href: "/client-servicing/ba",
      items: [
        // { name: "CA/CPA firm services", href: "/client-servicing/ba" }
      ],
    },
    {
      title: "Bespoke Services",
      href: "/client-servicing/ba",
      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={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>

                    {/* 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)}
                    >
                      <span
                        className="nav-link dropdown-nav"
                        style={{ background: "none", border: "none", cursor: "pointer" }}
                      >
                        Client Servicing
                        <span className="dropdown-arrow"></span>
                      </span>
                    </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 Us
                      </Link>
                    </li>
                  </ul>
                </div>
              </nav>
            </div>
          </div>
        </div>
      </div>
    </>
  )
}

export default Header