"use client";

import React from "react";
import { motion } from "framer-motion";
import { Menu as MenuIcon, X } from "lucide-react";
import { Logo } from "./logo";
import { DesktopNav } from "./desktop-nav";
import { MobileMenu } from "./mobile-menu";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { SearchToggle } from "../search-toggle";

export default function Header() {
  const pathname = usePathname();
  const [isScrolled, setIsScrolled] = React.useState(false);
  const [isMobileMenuOpen, setIsMobileMenuOpen] = React.useState(false);
  const [expandedSection, setExpandedSection] = React.useState<string | null>(
    null,
  );

  React.useEffect(() => {
    const handleScroll = () => {
      setIsScrolled(window.scrollY > 0);
    };
    window.addEventListener("scroll", handleScroll);
    return () => window.removeEventListener("scroll", handleScroll);
  }, []);

  const toggleSection = (section: string) => {
    setExpandedSection(expandedSection === section ? null : section);
  };

  const closeMobileMenu = () => {
    setIsMobileMenuOpen(false);
  };

  return (
    <>
      <div
        className={`fixed top-0 left-0 right-0 transition-all duration-300 z-50 px-4 md:px-8 ${
          isScrolled || isMobileMenuOpen
            ? "bg-white/95 shadow-md"
            : "bg-transparent"
        }`}
      >
        <div className="max-w-7xl mx-auto">
          <div className="flex justify-between items-center pb-4">
            <Logo />
            <div className="hidden lg:flex">
              <DesktopNav isScrolled={isScrolled} />
            </div>

            <div className="lg:hidden flex items-center justify-center">
              <div className={pathname === "/" ? "hidden sm:flex" : "hidden"}>
                <SearchToggle />
              </div>
              <motion.button
                whileTap={{ scale: 0.95 }}
                onClick={() => {
                  setIsMobileMenuOpen(!isMobileMenuOpen);
                  setExpandedSection(null);
                }}
                className={`p-0 rounded-md ${
                  isScrolled || isMobileMenuOpen
                    ? "text-gray-600 hover:text-gray-900"
                    : "text-white hover:text-gray-200"
                }`}
              >
                {isMobileMenuOpen ? (
                  <X className="h-6 w-6" />
                ) : (
                  <MenuIcon className="h-12 w-12 text-black" />
                )}
              </motion.button>
            </div>

            <div className="hidden lg:flex">
              <div className={pathname === "/" ? "flex" : "hidden"}>
                <SearchToggle />
              </div>
              <Link href="/contact">
                <motion.button
                  whileHover={{ scale: 1.05 }}
                  whileTap={{ scale: 0.95 }}
                  className=" whitespace-nowrap inline-flex items-center justify-center px-4 py-2 border border-transparent rounded-md shadow-sm text-base font-medium text-white btn-primary"
                >
                  Contact Us
                </motion.button>
              </Link>
            </div>
          </div>
        </div>
        <MobileMenu
          isOpen={isMobileMenuOpen}
          expandedSection={expandedSection}
          toggleSection={toggleSection}
          onClose={closeMobileMenu}
        />
      </div>
    </>
  );
}