"use client"

import { Fragment, useEffect, useState } from "react"
import { cn } from "@/lib/utils"
import { ThemeSwitch } from "../../components/custom/theme-switch"
import { useTranslations } from "next-intl"
import { LocaleSwitch } from "../../components/custom/locale-switch"
import { Button } from "@/components/ui/button"
import { Menu, X } from "lucide-react"
import { Link, usePathname } from "@/i18n/navigation"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"

export default function Navbar() {
  const [scrolled, setScrolled] = useState(false);
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
  const pathname = usePathname()
  const t = useTranslations('pages');

  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 10)

    onScroll()

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

  useEffect(() => {
    const mediaQueryList = window.matchMedia("(min-width: 768px)");

    const onChange = (event: MediaQueryListEvent) => {
      if (event.matches) setMobileMenuOpen(false);
    };

    mediaQueryList.addEventListener("change", onChange);
    return () => mediaQueryList.removeEventListener("change", onChange);
  }, []);

  const navLinks = [
    { href: "/", label: t("home") },
    { href: "/about", label: t("aboutMe") },
    { href: "/projects", label: t("projects") },
  ];

  const isActiveHref = (href: string) => {
    if (!pathname) return false
    if (href === "/") return pathname === "/"
    return pathname === href || pathname.startsWith(`${href}/`)
  }

  return (
    <header className="sticky top-0 left-0 w-full z-50 flex justify-center p-4 md:p-10">

      <nav
        className={cn(
          "relative flex-1 flex items-center justify-between px-5 py-3 md:px-7 md:py-4 rounded-full transition-all duration-700 border bg-transparent",

          scrolled
            ? [
                "border-foreground/10",
                "backdrop-blur-xl backdrop-saturate-150",
                "shadow-[0_4px_24px_-4px_hsl(0_0%_0%/0.12),inset_0_1px_0_0_hsl(0_0%_100%/0.12)]",
              ].join(" ")
            : "border-foreground/0"
        )}
      >
        <Link href="/"><h1 className={cn("text-4xl font-medium")}>bH</h1></Link>

        <ul className="hidden md:flex items-center gap-8 text-sm text-foreground/60">
          {navLinks.map((link) => (
            <li key={link.href}>
              <Link
                href={link.href}
                aria-current={isActiveHref(link.href) ? "page" : undefined}
                className={cn(
                  "transition hover:text-foreground",
                  isActiveHref(link.href) && "text-foreground"
                )}
              >
                {link.label}
              </Link>
            </li>
          ))}
        </ul>
        
        <div className="hidden md:flex gap-3">
          <ThemeSwitch/>
          <LocaleSwitch/>
        </div>

        <DropdownMenu open={mobileMenuOpen} onOpenChange={setMobileMenuOpen}>
          <DropdownMenuTrigger asChild>
            <Button
              variant="outline"
              size="icon"
              className="md:hidden"
              aria-label="Toggle menu"
            >
              {mobileMenuOpen ? <X className="size-5" /> : <Menu className="size-5" />}
            </Button>
          </DropdownMenuTrigger>

          <DropdownMenuContent
            align="end"
            sideOffset={12}
            className="md:hidden"
          >
            {navLinks.map((link, index) => (
              <Fragment key={link.href}>
                <DropdownMenuItem
                  asChild
                  className={cn(isActiveHref(link.href) && "font-medium text-foreground")}
                >
                  <Link href={link.href} aria-current={isActiveHref(link.href) ? "page" : undefined}>
                    {link.label}
                  </Link>
                </DropdownMenuItem>
                {index < navLinks.length - 1 ? (
                  <DropdownMenuSeparator/>
                ) : null}
              </Fragment>
            ))}

            <DropdownMenuSeparator />

            <div className="flex items-center justify-between px-2 py-1.5">
              <ThemeSwitch />
              <LocaleSwitch />
            </div>
          </DropdownMenuContent>
        </DropdownMenu>
      </nav>
    </header>
  )
}
