"use client";
import React, { useState, useEffect } from "react";
import Image from "next/image";
import Link from "next/link";
import { headerData } from "@/data/shared/headerDataOnepage";
import MobileMenuOnepage from "./MobileMenuOnepage";
import { scrollToSection } from "@/utils/scrollToSection";

const HeaderOnepage: React.FC = () => {
  const { logoLight, logoDark, navItems, btnText, btnUrl } = headerData;
  const [isSticky, setIsSticky] = useState(false);
  const [isSearchActive, setIsSearchActive] = useState(false);
  const [isMobileMenuActive, setIsMobileMenuActive] = useState(false);
  const [activeMenu, setActiveMenu] = useState(navItems[0]?.url ?? "");

  const toggleSearch = () => setIsSearchActive((v) => !v);
  const toggleMobileMenu = () => setIsMobileMenuActive((v) => !v);

  useEffect(() => {
    const handleScroll = () => {
      if (window.scrollY > 50) {
        setIsSticky(true);
      } else {
        setIsSticky(false);
      }
    };

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

  return (
    <>
      <MobileMenuOnepage
        isSearchActive={isSearchActive}
        setIsSearchActive={setIsSearchActive}
        isMobileMenuActive={isMobileMenuActive}
        setIsMobileMenuActive={setIsMobileMenuActive}
        activeMenu={activeMenu}
        setActiveMenu={setActiveMenu}
      />

      <header className={`header-main ${isSticky ? "sticky" : ""}`}>
        <div className="header-bottom">
          <div className="carousel-container">
            <div className="row">
              {/* Logo */}
              <div className="col-lg-3 col-md-6 col-sm-6">
                <div className="header-logo">
                  <Link href="/" className="logo" title="Home">
                    <Image
                      src={logoLight}
                      alt="Sasico SaaS Analytics Logo"
                      className="light"
                      width={140}
                      height={40}
                      priority
                    />
                    <Image
                      src={logoDark}
                      alt="Sasico SaaS Analytics Logo"
                      className="dark"
                      width={140}
                      height={40}
                      priority
                    />
                  </Link>
                </div>
              </div>
              {/* Navigation Menu */}
              <div className="col-lg-6">
                <nav
                  className="main-menu11 menu-style11"
                  aria-label="Main Navigation"
                >
                  <ul>
                    {navItems.map((item) => (
                      <li
                        key={item.id}
                        className={activeMenu === item.url ? "active" : ""}
                      >
                        <a
                          href={`#${item.url}`}
                          className={`cursor-pointer ${
                            activeMenu === item.url ? "active" : ""
                          }`.trim()}
                          onClick={(e) => {
                            e.preventDefault();
                            setActiveMenu(item.url);
                            scrollToSection(item.url);
                          }}
                        >
                          {item.title}
                        </a>
                      </li>
                    ))}
                  </ul>
                </nav>
              </div>
              {/* Buttons */}
              <div className="col-lg-3 col-md-6 col-sm-6">
                <div className="header-btn">
                  <button
                    type="button"
                    className="search-btn"
                    aria-label="Search"
                    onClick={() => {
                      toggleSearch();
                    }}
                  >
                    <Image
                      src="/assets/images/icon/search.svg"
                      alt="Search Icon"
                      width={20}
                      height={20}
                    />
                  </button>
                  <Link href={btnUrl} className="btn-style1 v2">
                    {btnText}
                    <span>
                      <Image
                        src="/assets/images/icon/arrow.svg"
                        alt="Arrow Icon"
                        width={18}
                        height={18}
                      />
                    </span>
                  </Link>
                  <button
                    className="hamburger-btn"
                    aria-label="Toggle Menu"
                    onClick={toggleMobileMenu}
                  >
                    <span />
                    <span />
                    <span />
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </header>
    </>
  );
};

export default HeaderOnepage;