stackpilot/frontend/src/components/layout/TopNav.tsx

import { useEffect, useRef, useState } from "react";
import { NavLink, useNavigate } from "react-router-dom";
import { useQuery } from "@tanstack/react-query";
import {
  LayoutDashboard,
  Boxes,
  Network,
  Image,
  Database,
  FolderTree,
  LayoutTemplate,
  ScrollText,
  Settings,
  Moon,
  Sun,
  LogOut,
  Menu,
  X,
} from "lucide-react";
import { cn } from "@/lib/utils";
import { useAuthStore } from "@/store/auth";
import { useThemeStore } from "@/store/theme";
import { agentsApi } from "@/api/agents";
import { VersionBadge } from "./VersionBadge";

export const NAV_ITEMS = [
  { to: "/", label: "Dashboard", icon: LayoutDashboard, end: true },
  { to: "/stacks", label: "Stacks", icon: Boxes },
  { to: "/networks", label: "Networks", icon: Network },
  { to: "/images", label: "Images", icon: Image },
  { to: "/volumes", label: "Volumes", icon: Database },
  { to: "/files", label: "Files", icon: FolderTree },
  { to: "/templates", label: "Templates", icon: LayoutTemplate },
  { to: "/audit", label: "Audit", icon: ScrollText },
  { to: "/settings", label: "Settings", icon: Settings },
];

function LogoMark() {
  return (
    <svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true">
      <defs>
        <linearGradient id="sp-logo-grad" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%" stopColor="var(--sp-blue)" />
          <stop offset="100%" stopColor="var(--sp-blue-light)" />
        </linearGradient>
      </defs>
      <rect width="30" height="30" rx="9" fill="url(#sp-logo-grad)" />
      {/* Stacked-layers glyph */}
      <path
        d="M15 7.5 22 11.25 15 15 8 11.25 15 7.5Z"
        fill="#fff"
        fillOpacity="0.95"
      />
      <path
        d="M9.6 14.4 15 17.3l5.4-2.9L22 15.25 15 19 8 15.25l1.6-.85Z"
        fill="#fff"
        fillOpacity="0.6"
      />
      <path
        d="M9.6 18.4 15 21.3l5.4-2.9L22 19.25 15 23 8 19.25l1.6-.85Z"
        fill="#fff"
        fillOpacity="0.32"
      />
    </svg>
  );
}

function initials(name: string | undefined): string {
  if (!name) return "?";
  return name.slice(0, 2).toUpperCase();
}

export function TopNav() {
  const [drawerOpen, setDrawerOpen] = useState(false);
  const [menuOpen, setMenuOpen] = useState(false);
  const menuRef = useRef<HTMLDivElement>(null);
  const navigate = useNavigate();
  const user = useAuthStore((s) => s.user);
  const logout = useAuthStore((s) => s.logout);
  const { theme, toggle } = useThemeStore();

  const agents = useQuery({
    queryKey: ["agents"],
    queryFn: () => agentsApi.list(),
    refetchInterval: 30000,
  });
  const agentCount = agents.data?.length ?? 0;
  const agentsOnline = agents.data?.filter((a) => a.status === "online").length ?? 0;

  // Close avatar menu on outside click.
  useEffect(() => {
    if (!menuOpen) return;
    const onClick = (e: MouseEvent) => {
      if (menuRef.current && !menuRef.current.contains(e.target as Node)) {
        setMenuOpen(false);
      }
    };
    document.addEventListener("mousedown", onClick);
    return () => document.removeEventListener("mousedown", onClick);
  }, [menuOpen]);

  return (
    <>
      <header className="fixed inset-x-0 top-0 z-40 h-[60px] border-b border-sp-border bg-sp-bg/80 backdrop-blur-md">
        <div className="mx-auto flex h-full max-w-[1480px] items-center gap-3 px-4 sm:px-6">
          {/* Hamburger (mobile / narrow) */}
          <button
            onClick={() => setDrawerOpen(true)}
            className="rounded-lg p-2 text-sp-text-2 hover:bg-sp-surface lg:hidden"
            title="Open menu"
            aria-label="Open navigation menu"
          >
            <Menu className="h-5 w-5" />
          </button>

          {/* Logo */}
          <NavLink to="/" className="flex shrink-0 items-center gap-2.5">
            <LogoMark />
            <span className="sp-heading hidden text-[17px] sm:inline">StackPilot</span>
          </NavLink>

          {/* Pill nav */}
          <nav
            role="navigation"
            aria-label="Primary"
            className="mx-auto hidden items-center gap-0.5 rounded-pill border border-sp-border bg-sp-surface p-1 lg:flex"
          >
            {NAV_ITEMS.map(({ to, label, end }) => (
              <NavLink key={to} to={to} end={end}>
                {({ isActive }) => (
                  <span
                    aria-current={isActive ? "page" : undefined}
                    className={cn(
                      "block rounded-pill px-3.5 py-1.5 text-[13px] font-medium transition-colors",
                      isActive
                        ? "bg-sp-pill text-sp-pill-text"
                        : "text-sp-text-2 hover:bg-sp-surface-2 hover:text-sp-text-1"
                    )}
                  >
                    {label}
                  </span>
                )}
              </NavLink>
            ))}
          </nav>

          {/* Right cluster */}
          <div className="ml-auto flex shrink-0 items-center gap-2 lg:ml-0">
            <VersionBadge />
            {agentCount > 0 && (
              <button
                onClick={() => navigate("/settings")}
                className="hidden items-center gap-1.5 rounded-pill border border-sp-border bg-sp-surface px-2.5 py-1 text-xs font-medium text-sp-text-2 hover:text-sp-text-1 sm:flex"
                title={`${agentsOnline}/${agentCount} remote hosts online`}
              >
                <span
                  className={cn(
                    "h-2 w-2 rounded-full",
                    agentsOnline === agentCount ? "bg-sp-green" : "bg-sp-amber"
                  )}
                />
                {agentsOnline}/{agentCount}
              </button>
            )}
            <button
              onClick={toggle}
              className="rounded-pill border border-sp-border bg-sp-surface p-2 text-sp-text-2 hover:text-sp-text-1"
              title="Toggle theme"
            >
              {theme === "dark" ? <Sun className="h-4 w-4" /> : <Moon className="h-4 w-4" />}
            </button>
            <div className="relative" ref={menuRef}>
              <button
                onClick={() => setMenuOpen((v) => !v)}
                className="flex h-9 w-9 items-center justify-center rounded-full bg-sp-pill text-xs font-bold text-sp-pill-text"
                title={user?.username}
                aria-haspopup="menu"
                aria-expanded={menuOpen}
              >
                {initials(user?.username)}
              </button>
              {menuOpen && (
                <div className="sp-card absolute right-0 top-11 z-50 w-48 p-2 shadow-lg">
                  <div className="px-3 py-2">
                    <p className="truncate text-sm font-semibold text-sp-text-1">
                      {user?.username ?? "—"}
                    </p>
                    {user?.role === "admin" && <p className="sp-label mt-0.5">admin</p>}
                  </div>
                  <button
                    onClick={logout}
                    className="flex w-full items-center gap-2 rounded-lg px-3 py-2 text-sm text-sp-text-2 hover:bg-sp-surface-2 hover:text-sp-text-1"
                  >
                    <LogOut className="h-4 w-4" />
                    Logout
                  </button>
                </div>
              )}
            </div>
          </div>
        </div>
      </header>

      {/* Off-canvas drawer (narrow screens) */}
      {drawerOpen && (
        <div
          className="fixed inset-0 z-40 bg-black/50 lg:hidden"
          onClick={() => setDrawerOpen(false)}
        />
      )}
      <aside
        className={cn(
          "fixed inset-y-0 left-0 z-50 flex w-64 transform flex-col bg-sp-surface transition-transform lg:hidden",
          drawerOpen ? "translate-x-0" : "-translate-x-full"
        )}
        aria-hidden={!drawerOpen}
      >
        <div className="flex items-center justify-between px-5 py-4">
          <div className="flex items-center gap-2.5">
            <LogoMark />
            <span className="sp-heading text-[17px]">StackPilot</span>
          </div>
          <button
            onClick={() => setDrawerOpen(false)}
            className="rounded-lg p-1.5 text-sp-text-2 hover:bg-sp-surface-2"
            title="Close menu"
          >
            <X className="h-5 w-5" />
          </button>
        </div>
        <nav className="flex-1 space-y-1 overflow-y-auto px-3" aria-label="Primary">
          {NAV_ITEMS.map(({ to, label, icon: Icon, end }) => (
            <NavLink
              key={to}
              to={to}
              end={end}
              onClick={() => setDrawerOpen(false)}
              className={({ isActive }) =>
                cn(
                  "flex items-center gap-3 rounded-xl px-3 py-2.5 text-sm font-medium transition-colors",
                  isActive
                    ? "bg-sp-pill text-sp-pill-text"
                    : "text-sp-text-2 hover:bg-sp-surface-2 hover:text-sp-text-1"
                )
              }
            >
              <Icon className="h-5 w-5" />
              {label}
            </NavLink>
          ))}
        </nav>
        <div className="border-t border-sp-border p-4">
          <span className="sp-label">v{__APP_VERSION__}</span>
        </div>
      </aside>
    </>
  );
}