sexy/components/layout/NavBar.tsx

"use client";

import { useState } from "react";
import Link from "next/link";
import { usePathname, useRouter } from "next/navigation";
import { useTheme } from "next-themes";
import { Moon, Sun, LogOut, Gauge, SlidersHorizontal, ListMusic, Bluetooth, BarChart3 } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Sheet, SheetContent, SheetDescription, SheetTitle } from "@/components/ui/sheet";
import { ConnectionStatus } from "./ConnectionStatus";
import { BrandMark } from "./BrandMark";
import { cn } from "@/lib/utils";

const LINKS = [
  { href: "/", label: "Dashboard", icon: Gauge },
  { href: "/control", label: "Control", icon: SlidersHorizontal },
  { href: "/sessions", label: "Sessions", icon: ListMusic },
  { href: "/devices", label: "Devices", icon: Bluetooth },
  { href: "/stats", label: "Stats", icon: BarChart3 },
];

function isActive(pathname: string, href: string): boolean {
  return href === "/" ? pathname === "/" : pathname === href || pathname.startsWith(`${href}/`);
}

/** Desktop tab strip - borderless chips; the active tab lights up with a
 * primary-tinted fill, matching the drawer rows' active treatment. */
function NavLinks({ onNavigate }: { onNavigate?: () => void }) {
  const pathname = usePathname();
  return (
    <>
      {LINKS.map((link) => {
        const active = isActive(pathname, link.href);
        return (
          <Link
            key={link.href}
            href={link.href}
            onClick={onNavigate}
            className={cn(
              "flex items-center gap-1.5 rounded-md px-2.5 py-1.5 text-sm font-medium transition-colors",
              active ? "bg-primary/10 text-foreground" : "text-muted-foreground hover:text-foreground",
            )}
          >
            <link.icon className={cn("size-3.5", active && "text-primary")} />
            {link.label}
          </Link>
        );
      })}
    </>
  );
}

/** Drawer rows for the mobile menu - icon + label, styled as tappable
 * console rows rather than the desktop tab strip's underline treatment. */
function MobileNavLinks({ onNavigate }: { onNavigate: () => void }) {
  const pathname = usePathname();
  return (
    <>
      {LINKS.map((link) => {
        const active = isActive(pathname, link.href);
        return (
          <Link
            key={link.href}
            href={link.href}
            onClick={onNavigate}
            className={cn(
              "flex items-center gap-3 rounded-lg px-3 py-3 text-sm font-medium transition-colors",
              active ? "bg-primary/10 text-foreground" : "text-muted-foreground hover:bg-accent/50 hover:text-foreground",
            )}
          >
            <link.icon className={cn("size-4 shrink-0", active && "text-primary")} />
            {link.label}
          </Link>
        );
      })}
    </>
  );
}

/** Hamburger that morphs into an X - the top/bottom bars rotate into place
 * and the middle bar collapses, rather than a straight icon swap. */
function MenuToggleIcon({ open }: { open: boolean }) {
  return (
    <span className="relative flex size-4 shrink-0 flex-col items-center justify-center" aria-hidden>
      <span
        className={cn(
          "absolute h-0.5 w-4 rounded-full bg-current transition-transform duration-300 ease-out motion-reduce:transition-none",
          open ? "translate-y-0 rotate-45" : "-translate-y-[5px] rotate-0",
        )}
      />
      <span
        className={cn(
          "absolute h-0.5 w-4 rounded-full bg-current transition-all duration-200 ease-out motion-reduce:transition-none",
          open ? "scale-x-0 opacity-0" : "scale-x-100 opacity-100",
        )}
      />
      <span
        className={cn(
          "absolute h-0.5 w-4 rounded-full bg-current transition-transform duration-300 ease-out motion-reduce:transition-none",
          open ? "translate-y-0 -rotate-45" : "translate-y-[5px] rotate-0",
        )}
      />
    </span>
  );
}

export function NavBar() {
  const { theme, setTheme } = useTheme();
  const router = useRouter();
  const [menuOpen, setMenuOpen] = useState(false);

  async function handleLogout() {
    await fetch("/api/auth/logout", { method: "POST" });
    router.push("/login");
    router.refresh();
  }

  return (
    <header className="sticky top-0 z-40 border-b border-border bg-background/80 backdrop-blur-lg">
      <div className="mx-auto flex h-14 max-w-6xl items-center gap-3 px-4">
        <Link href="/" className="mr-2 flex items-center gap-2">
          <BrandMark size={26} />
          <span className="font-heading text-lg font-semibold">Sexy</span>
        </Link>

        <nav className="hidden items-center gap-1.5 md:flex">
          <NavLinks />
        </nav>

        <div className="ml-auto flex items-center gap-2">
          <ConnectionStatus />

          <div className="hidden items-center gap-2 md:flex">
            <Button
              variant="ghost"
              size="icon"
              aria-label="Toggle theme"
              onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
            >
              <Sun className="hidden size-4 dark:block" />
              <Moon className="block size-4 dark:hidden" />
            </Button>
            <Button variant="ghost" size="icon" aria-label="Log out" onClick={handleLogout}>
              <LogOut className="size-4" />
            </Button>
          </div>

          <Button
            variant="ghost"
            size="icon-sm"
            className="md:hidden"
            aria-label={menuOpen ? "Close menu" : "Open menu"}
            onClick={() => setMenuOpen((open) => !open)}
          >
            <MenuToggleIcon open={menuOpen} />
          </Button>

          <Sheet open={menuOpen} onOpenChange={setMenuOpen}>
            <SheetContent side="right" className="w-72 gap-0 p-0">
              <div className="flex items-center gap-2 px-4 pt-4 pb-3">
                <BrandMark size={24} animated />
                <SheetTitle className="font-heading text-lg font-semibold">Sexy</SheetTitle>
              </div>
              <SheetDescription className="px-4 pb-3 text-xs">
                Jump to another page or manage your session.
              </SheetDescription>
              <div className="bp-hairline" />

              <nav className="flex flex-1 flex-col gap-1 p-3">
                <MobileNavLinks onNavigate={() => setMenuOpen(false)} />
              </nav>

              <div className="bp-hairline" />
              <div className="flex flex-col gap-1 p-3">
                <button
                  type="button"
                  onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
                  className="flex items-center gap-3 rounded-lg px-3 py-3 text-sm font-medium text-muted-foreground transition-colors hover:bg-accent/50 hover:text-foreground"
                >
                  <Sun className="hidden size-4 dark:block" />
                  <Moon className="block size-4 dark:hidden" />
                  {theme === "dark" ? "Switch to light mode" : "Switch to dark mode"}
                </button>
                <button
                  type="button"
                  onClick={() => void handleLogout()}
                  className="flex items-center gap-3 rounded-lg px-3 py-3 text-sm font-medium text-muted-foreground transition-colors hover:bg-destructive/10 hover:text-destructive"
                >
                  <LogOut className="size-4" />
                  Log out
                </button>
              </div>
            </SheetContent>
          </Sheet>
        </div>
      </div>
    </header>
  );
}