"use client";

import { Menu, X } from "lucide-react";
import Image from "next/image";
import Link from "next/link";
import { useLocale, useTranslations } from "next-intl";
import { useState } from "react";

import { ThemeToggle } from "@/components/theme-toggle";
import { Button } from "@/src/components/ui/button";

const navItems = [
  { key: "home", path: "" },
  { key: "portfolio", path: "/portfolio" },
  { key: "products", path: "/products" },
  { key: "about", path: "/about" },
  { key: "contact", path: "/contact" },
];

type NavbarProps = {
  isAdmin?: boolean;
};

export function Navbar({ isAdmin = false }: NavbarProps) {
  const [isOpen, setIsOpen] = useState(false);
  const locale = useLocale();
  const t = useTranslations("navigation");

  return (
    <header className="sticky top-0 z-40 border-b border-default bg-surface backdrop-blur">
      <div className="mx-auto flex w-full max-w-6xl items-center justify-between gap-4 px-4 py-3 sm:px-6 lg:px-8">
        <div className="flex items-center gap-3">
          <Link
            href={`/${locale}`}
            className="inline-flex items-center rounded-md border border-input bg-card px-3 py-2 shadow-xs"
          >
            <Image
              src="/logos/light-primary.svg"
              alt="mohfarawati logo"
              width={140}
              height={24}
              className="block h-6 w-auto dark:hidden"
              priority
            />
            <Image
              src="/logos/dark-primary.svg"
              alt="mohfarawati logo"
              width={140}
              height={24}
              className="hidden h-6 w-auto dark:block"
              priority
            />
          </Link>
          <nav className="hidden items-center gap-5 md:flex">
            {navItems.map((item) => (
              <Link
                key={item.key}
                href={`/${locale}${item.path}`}
                className="text-sm text-muted transition hover:text-fg"
              >
                {t(item.key)}
              </Link>
            ))}
            {isAdmin ? (
              <a href="/root" className="text-sm text-muted transition hover:text-fg">
                {t("root")}
              </a>
            ) : null}
          </nav>
        </div>

        <div className="hidden items-center gap-2 md:flex">
          <ThemeToggle />
          <Button type="button" variant="outline" size="sm" className="text-xs">
            {t("languagePlaceholder")}
          </Button>
        </div>

        <Button
          type="button"
          onClick={() => setIsOpen((open) => !open)}
          variant="outline"
          size="icon"
          className="md:hidden"
          aria-label={isOpen ? t("closeMenu") : t("openMenu")}
        >
          {isOpen ? <X className="h-4 w-4" /> : <Menu className="h-4 w-4" />}
        </Button>
      </div>

      {isOpen ? (
        <div className="border-t border-default px-4 py-4 md:hidden">
          <nav className="flex flex-col gap-3">
            {navItems.map((item) => (
              <Link
                key={item.key}
                href={`/${locale}${item.path}`}
                className="text-sm text-muted"
                onClick={() => setIsOpen(false)}
              >
                {t(item.key)}
              </Link>
            ))}
            {isAdmin ? (
              <a href="/root" className="text-sm text-muted" onClick={() => setIsOpen(false)}>
                {t("root")}
              </a>
            ) : null}
          </nav>
          <div className="mt-4 flex items-center gap-2">
            <ThemeToggle />
            <Button type="button" variant="outline" size="sm" className="text-xs">
              {t("languagePlaceholder")}
            </Button>
          </div>
        </div>
      ) : null}
    </header>
  );
}