"use client";

import { useState, useEffect } from "react";
import Image from "next/image";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { navigationItems, NavItem } from "@/data/navigation";

interface HeaderProps {
  useThemeLogos?: boolean;
}

export default function Header({ useThemeLogos = false }: HeaderProps) {
  const pathname = usePathname();
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
  const [isSearchOpen, setIsSearchOpen] = useState(false);
  const [isScrolled, setIsScrolled] = useState(false);

  const isActive = (href: string) => {
    if (href === "/") {
      return pathname === "/";
    }
    return pathname.startsWith(href);
  };

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

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

  return (
    <>
      {/* Mobile Menu */}
      <div className={`mobile-menu ${isMobileMenuOpen ? "active" : ""}`}>
        <div className="close-btn" onClick={() => setIsMobileMenuOpen(false)}>
          <Image
            src="/assets/images/icon/xmark2.svg"
            alt="Close Menu"
            width={20}
            height={20}
          />
        </div>
        <nav className="main-menu11 menu-style11" aria-label="Main Navigation">
          <ul>
            {navigationItems.map((item: NavItem, index: number) => (
              <li key={index} className={isActive(item.href) ? "active" : ""}>
                <Link
                  href={item.href}
                  className={isActive(item.href) ? "active" : ""}
                  onClick={() => setIsMobileMenuOpen(false)}
                >
                  {item.label}
                </Link>
              </li>
            ))}
          </ul>
        </nav>
      </div>
      <div
        className={`menu-overlay ${isMobileMenuOpen ? "active" : ""}`}
        onClick={() => setIsMobileMenuOpen(false)}
      />

      {/* Search Box */}
      <div className={`search-popup ${isSearchOpen ? "active" : ""}`}>
        <form className="search-form">
          <input type="text" placeholder="Enter Keywords..." required />
          <button type="submit" className="submit-btn">
            <Image
              src="/assets/images/icon/search.svg"
              alt="Search Icon"
              width={20}
              height={20}
            />
          </button>
        </form>
      </div>
      <div
        className={`search-overlay ${isSearchOpen ? "active" : ""}`}
        onClick={() => setIsSearchOpen(false)}
      />

      {/* Header */}
      <header className={`header-main ${isScrolled ? "sticky" : ""}`}>
        <div className="header-bottom">
          <div className="container-fluid">
            <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">
                    {useThemeLogos ? (
                      <>
                        <Image
                          src="/assets/images/logo2.svg"
                          alt="web logo"
                          width={160}
                          height={34}
                          className="light"
                        />
                        <Image
                          src="/assets/images/logo.svg"
                          alt="web logo"
                          width={160}
                          height={34}
                          className="dark"
                        />
                      </>
                    ) : (
                      <Image
                        src="/assets/images/logo.svg"
                        alt="web logo"
                        width={160}
                        height={34}
                      />
                    )}
                  </Link>
                </div>
              </div>

              {/* Navigation Menu */}
              <div className="col-lg-6">
                <nav
                  className="main-menu11 menu-style11"
                  aria-label="Main Navigation"
                >
                  <ul>
                    {navigationItems.map((item: NavItem, index: number) => (
                      <li
                        key={index}
                        className={isActive(item.href) ? "active" : ""}
                      >
                        <Link
                          href={item.href}
                          className={isActive(item.href) ? "active" : ""}
                        >
                          {item.label}
                        </Link>
                      </li>
                    ))}
                  </ul>
                </nav>
              </div>

              {/* Buttons */}
              <div className="col-lg-3 col-md-6 col-sm-6">
                <div className="header-btn">
                  <a
                    href="#"
                    className="search-btn"
                    aria-label="Search"
                    onClick={(e) => {
                      e.preventDefault();
                      setIsSearchOpen(true);
                    }}
                  >
                    <Image
                      src="/assets/images/icon/search.svg"
                      alt="Search Icon"
                      width={20}
                      height={20}
                      unoptimized
                      className="search-icon"
                    />
                  </a>
                  <a href="#" className="btn-style1">
                    Get a Demo
                    <span>
                      <Image
                        src="/assets/images/icon/arrow.svg"
                        alt="Arrow Icon"
                        width={16}
                        height={16}
                      />
                    </span>
                  </a>
                  <button
                    className="hamburger-btn"
                    aria-label="Toggle Menu"
                    onClick={() => setIsMobileMenuOpen(true)}
                  >
                    <span></span>
                    <span></span>
                    <span></span>
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </header>
    </>
  );
}