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

"use client";

import { useEffect, useState } from "react";
import Link from "next/link";
import { usePathname, useRouter } from "next/navigation";
import { useTheme } from "next-themes";
import { BookOpen, Calendar, Package, ChefHat, User, FolderOpen, ShoppingCart, Shield, Search, Compass, Menu, Sun, Moon, Monitor, Apple, LifeBuoy, Settings, LogOut } from "lucide-react";
import { cn } from "@/lib/utils";
import { Button, buttonVariants } from "@/components/ui/button";
import type { FeaturePrefs } from "@/lib/feature-prefs";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import {
  Sheet,
  SheetClose,
  SheetContent,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@/components/ui/sheet";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { NotificationBell } from "@/components/social/notification-bell";
import { MessagesNavLink } from "@/components/social/messages-nav-link";
import { authClient } from "@/lib/auth/client";
import { useTranslations } from "next-intl";

const NAV_ITEMS = [
  { href: "/recipes", key: "recipes", icon: BookOpen, feature: null },
  { href: "/explore", key: "explore", icon: Search, feature: null },
  { href: "/collections", key: "collections", icon: FolderOpen, feature: "collections" },
  { href: "/meal-plan", key: "mealPlan", icon: Calendar, feature: "mealPlan" },
  { href: "/nutrition", key: "nutrition", icon: Apple, feature: "nutrition" },
  { href: "/pantry", key: "pantry", icon: Package, feature: "pantry" },
  { href: "/shopping-lists", key: "shopping", icon: ShoppingCart, feature: "shoppingLists" },
] as const;

export function Nav() {
  const pathname = usePathname();
  const router = useRouter();
  const { data: session } = authClient.useSession();
  const isAdmin = (session?.user as { role?: string } | undefined)?.role === "admin";
  const username = (session?.user as { username?: string } | undefined)?.username;
  const { theme, setTheme } = useTheme();
  const t = useTranslations("nav");

  // Defaults to "everything on" until the fetch resolves, matching the
  // backend default — avoids a flash of items disappearing on load for the
  // (much more common) case where a user hasn't hidden anything.
  const [featurePrefs, setFeaturePrefs] = useState<FeaturePrefs>({
    nutrition: true, pantry: true, mealPlan: true, shoppingLists: true, collections: true, messages: true,
  });

  useEffect(() => {
    function load() {
      fetch("/api/v1/users/me/feature-prefs")
        .then((res) => (res.ok ? res.json() : null))
        .then((json) => { if (json?.data) setFeaturePrefs(json.data); })
        .catch(() => {});
    }
    load();
    // Settings → Features saves on the same origin without a full nav
    // remount, so it fires this event to make the change visible immediately
    // rather than only on the next page load.
    window.addEventListener("epicure:feature-prefs-changed", load);
    return () => window.removeEventListener("epicure:feature-prefs-changed", load);
  }, []);

  const visibleNavItems = NAV_ITEMS.filter((item) => item.feature === null || featurePrefs[item.feature]);
  const THEME_OPTIONS = [
    { value: "light", icon: Sun, label: t("lightMode") },
    { value: "dark", icon: Moon, label: t("darkMode") },
    { value: "system", icon: Monitor, label: t("systemMode") },
  ] as const;
  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">
        <Sheet>
          <SheetTrigger
            render={<Button variant="ghost" size="icon" className="md:hidden" aria-label={t("menu")} />}
          >
            <Menu className="h-5 w-5" />
            <span className="sr-only">{t("menu")}</span>
          </SheetTrigger>
          <SheetContent side="left">
            <SheetHeader>
              <SheetTitle className="flex items-center gap-2">
                <ChefHat className="h-5 w-5" />
                Epicure
              </SheetTitle>
            </SheetHeader>
            <nav className="flex flex-col gap-1 px-2">
              {visibleNavItems.map(({ href, key, icon: Icon }) => (
                <SheetClose
                  key={href}
                  nativeButton={false}
                  render={
                    <Link
                      href={href}
                      className={cn(
                        buttonVariants({ variant: "ghost", size: "sm" }),
                        "justify-start",
                        pathname.startsWith(href) && "bg-accent"
                      )}
                    />
                  }
                >
                  <Icon className="h-4 w-4" />
                  {t(key)}
                </SheetClose>
              ))}
            </nav>
          </SheetContent>
        </Sheet>
        <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">
          {featurePrefs.messages && <MessagesNavLink />}
          <NotificationBell />
          <DropdownMenu>
            <DropdownMenuTrigger className="rounded-full outline-none focus-visible:ring-2 focus-visible:ring-ring">
              <Avatar className="h-8 w-8">
                <AvatarImage src={session?.user?.image ?? ""} alt={session?.user?.name ?? ""} />
                <AvatarFallback>
                  <User className="h-4 w-4" />
                </AvatarFallback>
              </Avatar>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="end" className="w-48">
              {username && (
                <DropdownMenuItem>
                  <Link href={`/u/${username}`} className="w-full flex items-center gap-2">
                    <User className="h-3.5 w-3.5" />
                    {t("viewProfile")}
                  </Link>
                </DropdownMenuItem>
              )}
              <DropdownMenuItem>
                <Link href="/settings" className="w-full flex items-center gap-2">
                  <Settings className="h-3.5 w-3.5" />
                  {t("settings")}
                </Link>
              </DropdownMenuItem>
              <DropdownMenuItem>
                <Link href="/support" className="w-full flex items-center gap-2">
                  <LifeBuoy className="h-3.5 w-3.5" />
                  {t("support")}
                </Link>
              </DropdownMenuItem>
              <DropdownMenuSeparator />
              <div
                role="group"
                aria-label={t("systemMode")}
                className="mx-1.5 my-1 flex items-center gap-0.5 rounded-md border bg-muted/50 p-0.5"
              >
                {THEME_OPTIONS.map(({ value, icon: Icon, label }) => (
                  <button
                    key={value}
                    type="button"
                    title={label}
                    aria-label={label}
                    aria-pressed={theme === value}
                    onClick={(e) => {
                      e.preventDefault();
                      setTheme(value);
                    }}
                    className={cn(
                      "flex flex-1 items-center justify-center rounded-sm p-1.5 text-muted-foreground transition-colors hover:text-foreground",
                      theme === value && "bg-background text-foreground shadow-sm"
                    )}
                  >
                    <Icon className="h-3.5 w-3.5" />
                    <span className="sr-only">{label}</span>
                  </button>
                ))}
              </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
                className="gap-2"
                onClick={() => {
                  void authClient.signOut({
                    fetchOptions: {
                      onSuccess: () => {
                        router.push("/login");
                        router.refresh();
                      },
                    },
                  });
                }}
              >
                <LogOut className="h-3.5 w-3.5" />
                {t("signOut")}
              </DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>
        </div>
      </div>
    </header>
  );
}