"use client";

import { useState, useCallback } from "react";
import MobileMenu from "../mobileMenu/MobileMenu";
import Button from "@/components/button/Button";
import ButtonTextUnderline from "@/components/button/ButtonTextUnderline";
import Logo from "../Logo";
import { Plus } from "lucide-react";
import { NavbarProps } from "@/types/navigation";
import { useScrollState } from "./useScrollState";
import { cls } from "@/lib/utils";
import { getButtonProps } from "@/lib/buttonUtils";
import { useTheme } from "@/providers/themeProvider/ThemeProvider";
import type { ButtonConfig } from "@/types/button";

const SCROLL_THRESHOLD = 50;

interface NavbarStyleAppleProps extends NavbarProps {
  button?: ButtonConfig;
  buttonClassName?: string;
  buttonTextClassName?: string;
}

const NavbarStyleApple = ({
  navItems,
  // logoSrc,
  // logoAlt = "",
  brandName = "Webild",
  logoOnClick,
  logoHref,
  button,
  buttonClassName = "",
  buttonTextClassName = "",
}: NavbarStyleAppleProps) => {
  const isScrolled = useScrollState(SCROLL_THRESHOLD);
  const [menuOpen, setMenuOpen] = useState(false);
  const theme = useTheme();

  const handleMenuToggle = useCallback(() => {
    setMenuOpen((prev) => !prev);
  }, []);

  const handleMobileNavClick = useCallback(() => {
    setMenuOpen(false);
  }, []);

  return (
    <nav
      className={cls(
        "fixed z-[1000] top-0 left-0 w-full transition-all duration-500 ease-in-out",
        isScrolled
          ? "bg-background/80 backdrop-blur-sm h-15"
          : "bg-background/0 backdrop-blur-0 h-20"
      )}
    >
      <div className="flex items-center justify-between h-full w-content-width mx-auto">
        <div className="flex items-center transition-all duration-500 ease-in-out">
          <Logo brandName={brandName} onClick={logoOnClick} href={logoHref} />
        </div>

        <div
          className="hidden md:flex items-center gap-6 transition-all duration-500 ease-in-out"
          role="navigation"
        >
          {navItems.map((item, index) => (
            <ButtonTextUnderline
              key={index}
              text={item.name}
              href={item.id}
              className="!text-base"
            />
          ))}
          <ButtonTextUnderline
            key="about"
            text="About"
            href="#about"
            className="!text-base"
          />
          <ButtonTextUnderline
            key="contact"
            text="Get in touch today"
            href="#contact"
            className="!text-base"
          />
          <div className="text-sm text-red-500">Limited Time Offer</div>
          {button && (
            <Button
              {...getButtonProps(
                button,
                0,
                theme.defaultButtonVariant,
                buttonClassName,
                buttonTextClassName
              )}
            >
              Get in touch today - Limited Time Offer!
            </Button>
          )}
        </div>

        <button
          className="flex md:hidden shrink-0 h-8 aspect-square rounded-theme bg-foreground items-center justify-center cursor-pointer"
          onClick={handleMenuToggle}
          aria-label="Toggle menu"
          aria-expanded={menuOpen}
          aria-controls="mobile-menu"
        >
          <Plus
            className={cls(
              "w-1/2 h-1/2 text-background transition-transform duration-300",
              menuOpen ? "rotate-45" : "rotate-0"
            )}
            strokeWidth={1.5}
            aria-hidden="true"
          />
        </button>
      </div>

      <MobileMenu
        menuOpen={menuOpen}
        onMenuToggle={handleMenuToggle}
        navItems={[...navItems, { name: "About", id: "#about" }]}
        onNavClick={handleMobileNavClick}
      >
        {button && (
          <Button
            {...getButtonProps(
              {
                ...button,
                onClick: () => {
                  button.onClick?.();
                  setMenuOpen(false);
                },
              },
              0,
              theme.defaultButtonVariant,
              cls("w-full", buttonClassName),
              buttonTextClassName
            )}
          >
            Get in touch today - Limited Time Offer!
          </Button>
        )}
      </MobileMenu>
    </nav>
  );
};

export default NavbarStyleApple;