"use client";

import { usePathname, useRouter } from "next/navigation";
import ConsultModal from "../Common/ConsultModal";
import { useState, useEffect } from "react";
import { Poppins } from "next/font/google";
import { isActiveRoute } from "@/config/routes";
import menuData from "./menuData";
import Link from "next/link";

const poppins = Poppins({ subsets: ["latin"], weight: ["500", "600", "700"] });

const Header = () => {
    const [navbarOpen, setNavbarOpen] = useState(false);
    const [sticky, setSticky] = useState(false);
    const [showConsultModal, setShowConsultModal] = useState(false);

    const pathname = usePathname();

    const isMenuItemActive = (menuItem: typeof menuData[0]): boolean => {
        if (!pathname) return false;
        return isActiveRoute(pathname, menuItem.path);
    };

    const isHomePage = pathname === '/';

    const navbarToggleHandler = () => {
        setNavbarOpen(!navbarOpen);
    };

    const handleStickyNavbar = () => {
        if (window.scrollY >= 80) setSticky(true);
        else setSticky(false);
    };

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

    return (
        <>
            <header
                className={`header left-0 top-0 z-40 flex w-full items-center shadow-sticky dark:shadow-sticky-dark ${
                sticky
                    ? "absolute lg:fixed lg:z-[9999] lg:bg-white/95 lg:dark:bg-gray-900 lg:backdrop-blur-sm lg:transition"
                    : isHomePage
                        ? "absolute bg-transparent"
                        : "absolute bg-white dark:bg-gray-900"
                }`}
            >
                <div className="container">
                    <div className="relative -mx-4 flex items-center justify-between">
                        <div className="max-w-full px-4">
                            <Link
                                href="/"
                                className={`flex items-center space-x-2 text-2xl tracking-tight font-bold ${poppins.className} py-6`}
                            >
                                <span className="text-red-600">V_LOG</span>
                                <span className={
                                    sticky
                                        ? "text-gray-800"
                                        : isHomePage
                                            ? "text-white drop-shadow-lg"
                                            : "text-gray-800"
                                }>MEDIA</span>
                            </Link>
                        </div>

                        <div className="w-full items-center justify-between">
                            <button
                                onClick={navbarToggleHandler}
                                id="navbarToggler"
                                aria-label="Mobile Menu"
                                className="absolute right-4 top-1/2 block translate-y-[-50%] rounded-lg px-3 py-[6px] ring-primary focus:ring-2 lg:hidden"
                            >
                                <span
                                    className={`relative my-1.5 block h-0.5 w-[30px] transition-all duration-300 ${
                                        sticky ? "bg-black dark:bg-white" : isHomePage ? "bg-white" : "bg-black dark:bg-white"
                                    } ${navbarOpen ? "top-[7px] rotate-45" : ""}`}
                                />
                                <span
                                    className={`relative my-1.5 block h-0.5 w-[30px] transition-all duration-300 ${
                                        sticky ? "bg-black dark:bg-white" : isHomePage ? "bg-white" : "bg-black dark:bg-white"
                                    } ${navbarOpen ? "opacity-0" : ""}`}
                                />
                                <span
                                    className={`relative my-1.5 block h-0.5 w-[30px] transition-all duration-300 ${
                                        sticky ? "bg-black dark:bg-white" : isHomePage ? "bg-white" : "bg-black dark:bg-white"
                                    } ${navbarOpen ? "top-[-8px] -rotate-45" : ""}`}
                                />
                            </button>

                            <nav
                                id="navbarCollapse"
                                className={`navbar absolute right-0 z-30 w-[85vw] xs:w-[280px] sm:w-[320px] rounded border-[0.5px] border-body-color/50 bg-white px-4 xs:px-5 sm:px-6 py-3 xs:py-4 duration-300 dark:border-body-color/20 dark:bg-dark lg:visible lg:static lg:w-auto lg:border-none lg:!bg-transparent lg:p-0 lg:opacity-100 ${
                                navbarOpen
                                    ? "visible top-full opacity-100"
                                    : "invisible top-[120%] opacity-0"
                                }`}
                            >
                                <ul className="block lg:flex lg:justify-center lg:space-x-12">
                                    {menuData.map((menuItem, index) => (
                                        <li key={index} className="group relative">
                                            <Link
                                                href={menuItem.path}
                                                onClick={() => setNavbarOpen(false)}
                                                className={`flex py-2 text-base xs:text-base sm:text-lg font-semibold lg:mr-0 lg:inline-flex lg:px-0 lg:py-6 transition-colors ${
                                                    isMenuItemActive(menuItem)
                                                    ? sticky
                                                        ? "text-red-500"
                                                        : isHomePage
                                                            ? "text-red-500 lg:text-red-400 lg:drop-shadow-lg"
                                                            : "text-red-500"
                                                    : sticky
                                                        ? "text-gray-800 hover:text-red-500 dark:text-white/90 dark:hover:text-white"
                                                        : isHomePage
                                                            ? "text-gray-800 hover:text-red-500 lg:text-white lg:drop-shadow-lg lg:hover:text-red-300"
                                                            : "text-gray-800 hover:text-red-500 dark:text-white/90 dark:hover:text-white"
                                                }`}
                                            >
                                                {menuItem.title}
                                            </Link>
                                        </li>
                                    ))}
                                </ul>
                            </nav>
                        </div>

                        <div className="max-w-full px-4 hidden md:block">
                            <button
                                className={`relative flex items-center justify-center gap-2 px-6 py-2 animate-bounce border-2 rounded-full font-semibold whitespace-nowrap transition-all ${
                                    sticky
                                        ? "border-red-500 text-red-500 bg-white hover:bg-red-50"
                                        : isHomePage
                                            ? "border-white text-white bg-white/10 backdrop-blur-sm hover:bg-white/20 drop-shadow-lg"
                                            : "border-red-500 text-red-500 bg-white hover:bg-red-50"
                                }`}
                                onClick={() => setShowConsultModal(true)}
                            >
                                <span className="flex items-center justify-center w-6 h-6 rounded-full">
                                    <img
                                        src="/images/icon/contact.png"
                                        alt="Báo giá"
                                        className="w-4 h-5"
                                    />
                                </span>
                                Đăng ký tư vấn
                            </button>
                        </div>
                    </div>
                </div>
            </header>

            <ConsultModal show={showConsultModal} onClose={() => setShowConsultModal(false)} />
        </>
    );
};

export default Header;
