"use client";

import React, { useState, useEffect } from "react";
import Link from "next/link";
import Image from "next/image";
import MenuItem from "./MenuItem";
import { menus } from "../../../libs/menus";
import { usePathname } from "next/navigation";

const Navbar: React.FC = () => {
  const pathname = usePathname();

  const [menu, setMenu] = useState(true);
  const [isMobile, setIsMobile] = useState(true);
  const [openMenu, setOpenMenu] = useState<string | null>(null);

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

  const closeDropdown = () => {
    setMenu(true);
  };

  const pageClass = pathname.split("/").filter(Boolean)[0] || "home";

  useEffect(() => {
    let elementId = document.getElementById("navbar");

    const handleScroll = () => {
      if (window.scrollY > 170) {
        elementId?.classList.add("is-sticky");
      } else {
        elementId?.classList.remove("is-sticky");
      }
    };

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

  useEffect(() => {
    const checkScreenSize = () => {
      setIsMobile(window.innerWidth < 768);
    };

    checkScreenSize();
    window.addEventListener("resize", checkScreenSize);
    return () => window.removeEventListener("resize", checkScreenSize);
  }, []);

  // ✅ LOGIC FOR LOGO CHANGE
  const isAiHome = pathname.startsWith("/ai-driven");

  const logoSrc = isAiHome
    ? "/img/footer-logo.png"
    : "/img/logo-bg-v2.webp";

  const classOne = menu
    ? "collapse navbar-collapse mean-menu"
    : "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 ${pageClass}`}
      >
      <div className="navbar-nav-menu">
        <div className="container-fluid">
          <nav className="navbar navbar-expand-lg navbar-light">

            {/* ✅ DYNAMIC LOGO */}
            <Link href="/" className="navbar-brand">
              <Image
                src={logoSrc}
                alt="Digi Horizon Technologies Logo"
                quality={80}
                priority
              />
            </Link>

            <button
              onClick={toggleNavbar}
              className={classTwo}
              type="button"
              aria-label="Toggle navigation menu"
            >
              <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">
              {isMobile ? (
                <ul className="navbar-nav navbar-mobile">
                  {menus.map((menuItem) => (
                    <MenuItem
                      key={menuItem.label}
                      {...menuItem}
                      closeDropdown={closeDropdown}
                      openMenu={openMenu}
                      setOpenMenu={setOpenMenu}
                    />
                  ))}
                </ul>
              ) : (
                <ul className="navbar-nav">
                  {menus.map((menuItem) => (
                    <MenuItem key={menuItem.label} {...menuItem} openMenu={openMenu} setOpenMenu={setOpenMenu} />
                  ))}
                </ul>
              )}

              <div className="others-option rainbow-button-wrapper">
                <Link
                  id="actionButton"
                  className="rainbow-button"
                  href="/ai-driven"
                >
                  <svg className="sparkle-icon" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
                    <path d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09zM18.259 8.715L18 9.75l-.259-1.035a3.375 3.375 0 00-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 002.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 002.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 00-2.456 2.456zM16.894 20.567L16.5 21.75l-.394-1.183a2.25 2.25 0 00-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 001.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 001.423 1.423l1.183.394-1.183.394a2.25 2.25 0 00-1.423 1.423z"/>
                  </svg>
                  <span className="button-label">AI Driven</span>
                </Link>
              </div>

              <div className="others-option d-flex align-items-center">
                <div className="option-item">
                  <Link href="/request-a-quote" className="default-btn">
                    <i className="flaticon-right"></i> Request a Quote{" "}
                    <span></span>
                  </Link>
                </div>
              </div>
            </div>

          </nav>
        </div>
      </div>
    </div>
  );
};

export default Navbar;