"use client"

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

const NavbarThree1: React.FC = () => {
    const router = useRouter()
    const pathname = usePathname()
    const [sidebarModal, setSidebarModal] = useState<boolean>(false)
    const [searchForm, setSearchForm] = useState<boolean>(false)
    const [collapsed, setCollapsed] = useState<boolean>(true)

    const toggleModal = (): void => {
        setSidebarModal(!sidebarModal)
    }

    const handleSearchForm = (): void => {
        setSearchForm((prevState) => !prevState)
    }

    const toggleNavbar = (): void => {
        setCollapsed(!collapsed)
    }

    const scrollToSection = (sectionId: string) => {
        const element = document.getElementById(sectionId)
        if (element) {
            const navbarHeight = 190
            const offsetTop = element.offsetTop - navbarHeight
            window.scrollTo({
                top: offsetTop,
                behavior: "smooth",
            })
        }
    }

    const handleLinkClick = async (e: React.MouseEvent<HTMLAnchorElement>, link: string) => {
        e.preventDefault()

        // التحقق مما إذا كان الرابط يحتوي على #
        if (link.includes("#")) {
            const [path, hash] = link.split("#")
            const basePath = path || "/" // استخدم المسار الأساسي إذا لم يكن هناك مسار قبل #

            // إذا كنا في نفس الصفحة، قم بالانتقال السلس
            if (pathname === basePath) {
                scrollToSection(hash)
                window.history.pushState({}, "", link)
            } else {
                // إذا كنا في صفحة مختلفة، انتقل أولاً إلى الصفحة ثم إلى القسم
                await router.push(basePath)
                // انتظر قليلاً للتأكد من تحميل الصفحة
                setTimeout(() => {
                    scrollToSection(hash)
                    window.history.pushState({}, "", link)
                }, 200)
            }
        } else {
            // إذا كان رابطاً عادياً بدون #، استخدم التوجيه المباشر
            router.push(link)
        }
    }

    useEffect(() => {
        const handleScroll = () => {
            const elementId = document.getElementById("navbar")
            if (window.scrollY > 170) {
                elementId?.classList.add("is-sticky")
            } else {
                elementId?.classList.remove("is-sticky")
            }
        }
        document.addEventListener("scroll", handleScroll)

        // التعامل مع hash URL عند تحميل الصفحة
        const hash = window.location.hash
        if (hash) {
            // تأخير للتأكد من تحميل المحتوى
            setTimeout(() => {
                const sectionId = hash.replace("#", "")
                scrollToSection(sectionId)
            }, 100)
        }

        return () => {
            document.removeEventListener("scroll", handleScroll)
        }
    }, [pathname])

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

    return (
        <>
            <div id="navbar" className="navbar-area navbar-area-with-position-relative">
                <div className="main-nav">
                    <div className="container-fluid">
                        <nav className="navbar navbar-expand-md navbar-light">
                            <Link href="/" className="navbar-brand">
                                <Image src="/images/logo.png" alt="logo" width={124} height={38} />
                            </Link>

                            <button
                                onClick={toggleNavbar}
                                className={classTwo}
                                type="button"
                                data-toggle="collapse"
                                data-target="#navbarSupportedContent"
                                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">
                                    {menus.map((menuItem) => (
                                        <li key={menuItem.label} className="nav-item">
                                            <a
                                                href={menuItem.link}
                                                onClick={(e) => handleLinkClick(e, menuItem.link)}
                                                className="nav-link"
                                            >
                                                {menuItem.label}
                                            </a>
                                        </li>
                                    ))}
                                </ul>
                            </div>
                        </nav>
                    </div>
                </div>
            </div>

            <SidebarModal onClick={toggleModal} active={sidebarModal ? "active" : ""} />
        </>
    )
}

export default NavbarThree1

// ----------------------------------------------------------

// "use client"

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

// const NavbarThree1: React.FC = () => {
//     // Sidebar Modal
//     const [sidebarModal, setSidebarModal] = useState<boolean>(false)
//     const toggleModal = (): void => {
//         setSidebarModal(!sidebarModal)
//     }

//     // Search Form
//     const [searchForm, setSearchForm] = useState<boolean>(false)
//     const handleSearchForm = (): void => {
//         setSearchForm((prevState) => !prevState)
//     }

//     // Navbar
//     const [collapsed, setCollapsed] = useState<boolean>(true)
//     const toggleNavbar = (): void => {
//         setCollapsed(!collapsed)
//     }

//     useEffect(() => {
//         const handleScroll = () => {
//             const elementId = document.getElementById("navbar")
//             if (window.scrollY > 170) {
//                 elementId?.classList.add("is-sticky")
//             } else {
//                 elementId?.classList.remove("is-sticky")
//             }
//         }
//         document.addEventListener("scroll", handleScroll)
//         return () => {
//             document.removeEventListener("scroll", handleScroll)
//         }
//     }, [])

//     const classOne: string = collapsed ? "collapse navbar-collapse" : "collapse navbar-collapse show"
//     const classTwo: string = collapsed
//         ? "navbar-toggler navbar-toggler-right collapsed"
//         : "navbar-toggler navbar-toggler-right"

//     return (
//         <>
//             <div id="navbar" className="navbar-area navbar-area-with-position-relative">
//                 <div className="main-nav">
//                     <div className="container-fluid">
//                         <nav className="navbar navbar-expand-md navbar-light">
//                             <Link href="/" className="navbar-brand">
//                                 <Image src="/images/logo.png" alt="logo" width={124} height={38} />
//                             </Link>

//                             <button
//                                 onClick={toggleNavbar}
//                                 className={classTwo}
//                                 type="button"
//                                 data-toggle="collapse"
//                                 data-target="#navbarSupportedContent"
//                                 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">
//                                     {menus.map((menuItem) => (
//                                         <MenuItem key={menuItem.label} {...menuItem} />
//                                     ))}
//                                 </ul>
//                             </div>

//                             {/* cart */}
//                             {/* search */}
//                             {/* aside  */}
//                             {/* <div className="others-options">
//                                 <div className="cart-items">
//                                     <Link href="/cart">
//                                         <i className="fas fa-shopping-cart"></i>
//                                         <span>{5}</span>
//                                     </Link>
//                                 </div>

//                                 <div className="option-item">
//                                     <i
//                                         onClick={handleSearchForm}
//                                         className="search-btn flaticon-search"
//                                         style={{
//                                             display: searchForm ? "none" : "block",
//                                         }}
//                                     ></i>

//                                     <i
//                                         onClick={handleSearchForm}
//                                         className={`close-btn flaticon-close ${searchForm ? "active" : ""}`}
//                                     ></i>

//                                     <div
//                                         className="search-overlay search-popup"
//                                         style={{
//                                             display: searchForm ? "block" : "none",
//                                         }}
//                                     >
//                                         <div className="search-box">
//                                             <form className="search-form">
//                                                 <input
//                                                     className="search-input"
//                                                     name="search"
//                                                     placeholder="Search"
//                                                     type="text"
//                                                 />
//                                                 <button className="search-button" type="submit">
//                                                     <i className="fas fa-search"></i>
//                                                 </button>
//                                             </form>
//                                         </div>
//                                     </div>
//                                 </div>

//                                 <div className="burger-menu" onClick={toggleModal}>
//                                     <span></span>
//                                     <span></span>
//                                     <span></span>
//                                 </div>
//                             </div> */}
//                         </nav>
//                     </div>
//                 </div>
//             </div>

//             {/* Right Sidebar Modal */}
//             <SidebarModal onClick={toggleModal} active={sidebarModal ? "active" : ""} />
//         </>
//     )
// }

// export default NavbarThree1