path: root/makima/frontend/src/components/NavStrip.tsx

import { useAuth } from "../contexts/AuthContext";
import { RewriteLink } from "./RewriteLink";

interface NavLink {
  label: string;
  href: string;
  requiresAuth?: boolean;
  external?: boolean;
}

const NAV_LINKS: NavLink[] = [
  { label: "Listen", href: "/listen" },
  { label: "Directives", href: "/directives", requiresAuth: true },
  { label: "Orders", href: "/orders", requiresAuth: true },
  { label: "Contracts", href: "/contracts", requiresAuth: true },
  { label: "Mesh", href: "/mesh", requiresAuth: true },
  { label: "History", href: "/history", requiresAuth: true },
];

export function NavStrip() {
  const { isAuthenticated, isAuthConfigured, signOut, user } = useAuth();

  const handleSignOut = async () => {
    await signOut();
    window.location.href = "/login";
  };

  // Check if user has access (authenticated or auth not configured)
  const hasAccess = isAuthenticated || !isAuthConfigured;

  return (
    <nav
      className="flex items-center gap-2.5 px-3 py-2.5 border-t border-b border-dashed border-[rgba(117,170,252,0.35)] bg-[#0c1729] font-mono uppercase tracking-wide text-[11px]"
      aria-label="Main navigation"
    >
      <span className="text-[#9bc3ff] pr-2.5 border-r border-[rgba(117,170,252,0.35)]">
        NAV//
      </span>
      <div className="flex flex-wrap gap-2 items-center flex-1">
        {NAV_LINKS.map((link) => (
          <RewriteLink
            key={link.label}
            to={link.href}
            disabled={link.requiresAuth && !hasAccess}
            external={link.external}
          >
            {link.label}
          </RewriteLink>
        ))}
      </div>
      <div className="flex items-center gap-2 pl-2.5 border-l border-[rgba(117,170,252,0.35)]">
        {isAuthenticated && isAuthConfigured ? (
          <>
            {user?.email && (
              <span className="text-[#9bc3ff] opacity-60">{user.email}</span>
            )}
            <RewriteLink to="/settings">Settings</RewriteLink>
            <button
              type="button"
              onClick={handleSignOut}
              className="bg-transparent border-none text-[#9bc3ff] hover:text-white transition-colors cursor-pointer uppercase text-[11px] font-mono tracking-wide p-0"
            >
              Logout
            </button>
          </>
        ) : (
          <RewriteLink to="/login">Login</RewriteLink>
        )}
      </div>
    </nav>
  );
}