Epicure/apps/web/components/layout/nav.tsx

"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { BookOpen, Calendar, Package, ChefHat, User, Rss, FolderOpen, ShoppingCart, Shield, Languages, Search, Compass } from "lucide-react";
import { cn } from "@/lib/utils";
import { buttonVariants } from "@/components/ui/button";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { authClient } from "@/lib/auth/client";
import { useLocale, SUPPORTED_LOCALES, type Locale } from "@/lib/i18n/provider";
import { useTranslations } from "next-intl";

const NAV_ITEMS = [
  { href: "/recipes", key: "recipes", icon: BookOpen },
  { href: "/explore", key: "explore", icon: Compass },
  { href: "/search", key: "search", icon: Search },
  { href: "/feed", key: "feed", icon: Rss },
  { href: "/collections", key: "collections", icon: FolderOpen },
  { href: "/meal-plan", key: "mealPlan", icon: Calendar },
  { href: "/pantry", key: "pantry", icon: Package },
  { href: "/shopping-lists", key: "shopping", icon: ShoppingCart },
] as const;

export function Nav() {
  const pathname = usePathname();
  const { data: session } = authClient.useSession();
  const isAdmin = (session?.user as { role?: string } | undefined)?.role === "admin";
  const { locale, setLocale } = useLocale();
  const t = useTranslations("nav");
  return (
    <header className="sticky top-0 z-50 border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
      <div className="container mx-auto flex h-14 items-center gap-6 px-4">
        <Link href="/recipes" className="flex items-center gap-2 font-semibold">
          <ChefHat className="h-5 w-5" />
          <span>Epicure</span>
        </Link>
        <nav className="hidden md:flex items-center gap-1">
          {NAV_ITEMS.map(({ href, key, icon: Icon }) => (
            <Link
              key={href}
              href={href}
              className={cn(
                buttonVariants({ variant: "ghost", size: "sm" }),
                pathname.startsWith(href) && "bg-accent"
              )}
            >
              <Icon className="h-4 w-4" />
              {t(key)}
            </Link>
          ))}
        </nav>
        <div className="ml-auto flex items-center gap-2">
          <DropdownMenu>
            <DropdownMenuTrigger className="rounded-full outline-none focus-visible:ring-2 focus-visible:ring-ring">
              <Avatar className="h-8 w-8">
                <AvatarImage src="" alt="" />
                <AvatarFallback>
                  <User className="h-4 w-4" />
                </AvatarFallback>
              </Avatar>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="end" className="w-48">
              <DropdownMenuItem>
                <Link href="/settings" className="w-full">{t("settings")}</Link>
              </DropdownMenuItem>
              <DropdownMenuItem>
                <Link href="/settings/api-keys" className="w-full">{t("apiKeys")}</Link>
              </DropdownMenuItem>
              <DropdownMenuItem>
                <Link href="/settings/webhooks" className="w-full">{t("webhooks")}</Link>
              </DropdownMenuItem>
              <DropdownMenuSeparator />
              <div className="px-2 py-1.5">
                <p className="text-xs text-muted-foreground flex items-center gap-1.5 mb-1.5">
                  <Languages className="h-3.5 w-3.5" />
                  {t("language")}
                </p>
                <div className="flex gap-1">
                  {SUPPORTED_LOCALES.map((l) => (
                    <button
                      key={l.code}
                      onClick={() => setLocale(l.code as Locale)}
                      className={cn(
                        "flex-1 rounded px-2 py-1 text-xs transition-colors",
                        locale === l.code
                          ? "bg-primary text-primary-foreground"
                          : "bg-muted hover:bg-accent"
                      )}
                    >
                      {l.label}
                    </button>
                  ))}
                </div>
              </div>
              {isAdmin && (
                <>
                  <DropdownMenuSeparator />
                  <DropdownMenuItem>
                    <Link href="/admin" className="w-full flex items-center gap-2">
                      <Shield className="h-3.5 w-3.5 text-destructive" />
                      {t("admin")}
                    </Link>
                  </DropdownMenuItem>
                </>
              )}
              <DropdownMenuSeparator />
              <DropdownMenuItem onClick={() => authClient.signOut()}>
                {t("signOut")}
              </DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>
        </div>
      </div>
    </header>
  );
}