"use client";

import Link from "next/link";
import Image from "next/image";
import { useState } from "react";
import { cn } from "@/lib/utils";
import { Menu, X } from "lucide-react";
import { useIsMobile } from "@/registry/default/hooks/use-mobile";
import { buttonVariants } from "@/registry/default/ui/button/radix";
import LogoSvg from "@/assets/svg/logo";
import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuTrigger,
} from "@/registry/default/ui/navigation-menu/radix";

const navItems = [
  { label: "Home", href: "#" },
  { label: "About Us", href: "#" },
  { label: "Services", href: "#" },
  {
    label: "More",
    subItems: [
      { label: "Home", href: "#" },
      { label: "Features", href: "#" },
      { label: "Go-Shopping", href: "#" },
    ],
  },
];

const Navbar = () => {
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
  const toggleMobileMenu = () => setIsMobileMenuOpen(!isMobileMenuOpen);

  return (
    <header className="w-full border-b bg-slate-800/40 text-foreground">
      <div className="mx-auto container p-3 md:px-16 grid grid-cols-2 lg:grid-cols-3 items-center justify-between">
        {/* Desktop Navigation */}
        <nav
          className="hidden lg:flex justify-self-start gap-2"
          role="navigation"
          aria-label="Primary Navigation"
        >
          <NavbarNavigationLinks className="hidden lg:flex justify-self-center gap-2" />
        </nav>

        {/* Logo */}
        <Link
          href="#"
          className="h-9 w-fit flex gap-2 lg:justify-self-center"
          aria-label="Go to homepage"
        >
          <LogoSvg className="h-full w-fit  fill-primary object-contain select-none pointer-events-none" />

          <span className="sr-only">Site Name</span>
        </Link>

        {/* Desktop Actions */}
        <NavbarCtaAction className="hidden lg:flex items-center gap-2 justify-self-end" />

        {/* Mobile Menu Toggle */}
        <button
          onClick={toggleMobileMenu}
          className="lg:hidden cursor-pointer justify-self-end"
          aria-label={isMobileMenuOpen ? "Close menu" : "Open menu"}
          aria-expanded={isMobileMenuOpen}
        >
          {isMobileMenuOpen ? <X /> : <Menu />}
          <span className="sr-only">Toggle Menu</span>
        </button>
      </div>

      {/* Mobile Menu */}
      {isMobileMenuOpen && (
        <>
          <nav
            className="lg:hidden p-4 border-t space-y-2"
            role="navigation"
            aria-label="Mobile Navigation"
          >
            <NavbarNavigationLinks />

            {/* Mobile Actions */}
            <NavbarCtaAction className="flex flex-col gap-2" />
          </nav>
        </>
      )}
    </header>
  );
};

function NavbarNavigationLinks({ className }: { className?: string }) {
  const isMobile = useIsMobile();
  return (
    <NavigationMenu
      className={className}
      role="navigation"
      aria-label="Primary Navigation"
      viewport={isMobile}
    >
      <NavigationMenuList className="flex-col items-start lg:flex-row">
        {navItems.map((item) =>
          item.subItems ? (
            <NavigationMenuItem key={item.label + "NavbarOne"}>
              <NavigationMenuTrigger
                className={cn(buttonVariants({ variant: "ghost" }), "px-4!")}
                aria-expanded="false"
                aria-label={`${item.label} navigation options`}
              >
                {item.label}
              </NavigationMenuTrigger>
              <NavigationMenuContent>
                <ul className="grid w-fit gap-3" role="menu">
                  {item.subItems.map((sub) => (
                    <li key={sub.label + "NavbarOne"} role="none">
                      <NavigationMenuLink asChild role="menuitem">
                        <Link
                          className={cn(
                            buttonVariants({ variant: "ghost" }),
                            "w-full items-start",
                          )}
                          href={sub.href}
                        >
                          {sub.label}
                        </Link>
                      </NavigationMenuLink>
                    </li>
                  ))}
                </ul>
              </NavigationMenuContent>
            </NavigationMenuItem>
          ) : (
            <NavigationMenuItem key={item.label + "NavbarOne"}>
              <NavigationMenuLink asChild>
                <Link
                  href={item.href}
                  className={buttonVariants({ variant: "ghost" })}
                >
                  {item.label}
                </Link>
              </NavigationMenuLink>
            </NavigationMenuItem>
          ),
        )}
      </NavigationMenuList>
    </NavigationMenu>
  );
}

function NavbarCtaAction({ className }: { className?: string }) {
  return (
    <ul className={className}>
      <li>
        <Link
          className={cn(buttonVariants({ variant: "outline" }), "w-full")}
          href="#"
          aria-label="Log in"
        >
          Log in
        </Link>
      </li>
      <li>
        <Link
          className={cn(buttonVariants(), "w-full")}
          href="#"
          aria-label="Sign up"
        >
          Sign up
        </Link>
      </li>
    </ul>
  );
}

export default Navbar;