"use client";

import Image from "next/image";
import Link from "next/link";
import { headerData } from "@/data/shared/headerData";
import { useEffect, useState } from "react";

export default function HeaderSection() {
  const [isSticky, setIsSticky] = useState(false);
  const [isSearchActive, setIsSearchActive] = useState(false);
  const [isMobileMenuActive, setIsMobileMenuActive] = useState(false);
  const [currentPath, setCurrentPath] = useState("");

  // Check if navigation item is active
  const isActive = (href: string) => {
    return currentPath === href || (href === "/" && currentPath === "");
  };

  useEffect(() => {
    // Set current path on client side only
    setCurrentPath(window.location.pathname);

    const handleScroll = () => {
      const scrollPosition =
        window.scrollY || document.documentElement.scrollTop;
      const shouldBeSticky = scrollPosition > 50;
      console.log(
        "Scroll position:",
        scrollPosition,
        "Should be sticky:",
        shouldBeSticky,
      );
      setIsSticky(shouldBeSticky);
    };

    // Initial check on mount
    handleScroll();

    window.addEventListener("scroll", handleScroll, { passive: true });
    return () =>
      window.removeEventListener("scroll", handleScroll, {
        passive: true,
      } as any);
  }, []);

  return (
    <>
      {/* Mobile Menu */}
      <div className={`mobile-menu ${isMobileMenuActive ? "active" : ""}`}>
        {/* Close Button */}
        <div className="close-btn" onClick={() => setIsMobileMenuActive(false)}>
          <Image
            src={headerData.mobileMenu.closeIcon.src}
            alt={headerData.mobileMenu.closeIcon.alt}
            width={24}
            height={24}
          />
        </div>
        <nav>
          <ul className="main-menu11 menu-style11">
            {headerData.navigation.map((item, index) => (
              <li key={index} className={isActive(item.href) ? "active" : ""}>
                <Link
                  href={item.href}
                  className={isActive(item.href) ? "active" : ""}
                >
                  {item.text}
                </Link>
              </li>
            ))}
          </ul>
        </nav>
      </div>
      <div
        className={`menu-overlay ${isMobileMenuActive ? "active" : ""}`}
        onClick={() => setIsMobileMenuActive(false)}
      />
      {/* search box */}
      <div className={`search-popup ${isSearchActive ? "active" : ""}`}>
        <form className="search-form">
          <input
            type="text"
            placeholder={headerData.searchPopup.placeholder}
            required={true}
          />
          <button type="submit" className="submit-btn">
            <Image
              src={headerData.searchPopup.submitIcon.src}
              alt={headerData.searchPopup.submitIcon.alt}
              width={20}
              height={20}
            />
          </button>
        </form>
      </div>
      <div
        className={`search-overlay ${isSearchActive ? "active" : ""}`}
        onClick={() => setIsSearchActive(false)}
      />
      {/* Header */}
      <header className={`header-main ${isSticky ? "sticky" : ""}`}>
        <div className="carousel-container">
          <div className="header-bottom">
            <div className="row">
              {/* Logo */}
              <div className="col-lg-2 col-md-6 col-sm-6">
                <div className="header-logo">
                  <Link
                    href={headerData.logo.href}
                    className="logo"
                    title="Home"
                  >
                    <Image
                      src={headerData.logo.lightSrc}
                      alt={headerData.logo.alt}
                      width={130}
                      height={30}
                    />
                  </Link>
                  <Link href={headerData.logo.href} title="Home">
                    <Image
                      src={headerData.logo.darkSrc}
                      alt={`${headerData.logo.alt} Dark`}
                      width={130}
                      height={30}
                    />
                  </Link>
                </div>
              </div>
              {/* Navigation Menu */}
              <div className="col-lg-7">
                <nav
                  className="main-menu11 menu-style11"
                  aria-label="Main Navigation"
                >
                  <ul>
                    {headerData.navigation.map((item, index) => (
                      <li
                        key={index}
                        className={isActive(item.href) ? "active" : ""}
                      >
                        <Link
                          href={item.href}
                          className={isActive(item.href) ? "active" : ""}
                        >
                          {item.text}
                        </Link>
                      </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={headerData.buttons.search.ariaLabel}
                    onClick={() => setIsSearchActive(!isSearchActive)}
                  >
                    <Image
                      src={headerData.buttons.search.iconSrc}
                      alt={headerData.buttons.search.alt}
                      width={20}
                      height={20}
                    />
                  </button>
                  <Link
                    href={headerData.buttons.login.href}
                    id={headerData.buttons.login.id}
                    className="login-btn"
                  >
                    {headerData.buttons.login.text}
                  </Link>
                  <Link
                    href={headerData.buttons.signup.href}
                    className={`sign-btn ${headerData.buttons.signup.className}`}
                  >
                    {headerData.buttons.signup.text}
                  </Link>
                  {/* Hamburger for mobile */}
                  <button
                    className="hamburger-btn"
                    aria-label="Toggle Menu"
                    onClick={() => setIsMobileMenuActive(!isMobileMenuActive)}
                  >
                    <span />
                    <span />
                    <span />
                  </button>
                </div>
              </div>
            </div>
          </div>
          <div className="separator-line" />
        </div>
      </header>
    </>
  );
}