User MenuUser Menu

"use client";

import * as React from "react";
import { UserMenu, type UserMenuTheme, type UserMenuWorkspace } from "@/components/ui/notchset/user-menu";

const workspaces: UserMenuWorkspace[] = [
  { id: "relay", name: "Relay", env: "PROD", slug: "relay", agents: "12 AGENTS" },
  { id: "relay-staging", name: "Relay", env: "STAGING", slug: "relay-staging" },
];

// The theme lives where ThemeSwitch and NotchsetThemeScript keep it: the dark class on <html> and
// localStorage "theme" (no entry means follow the system).
const KEY = "theme";
const listeners = new Set<() => void>();
function savedTheme(): UserMenuTheme {
  try {
    const t = localStorage.getItem(KEY);
    return t === "dark" || t === "light" ? t : "system";
  } catch {
    return "system";
  }
}
function applyTheme(t: UserMenuTheme) {
  const dark = t === "dark" || (t === "system" && matchMedia("(prefers-color-scheme: dark)").matches);
  document.documentElement.classList.toggle("dark", dark);
  document.documentElement.style.colorScheme = dark ? "dark" : "light";
  try {
    if (t === "system") localStorage.removeItem(KEY);
    else localStorage.setItem(KEY, t);
  } catch {
    // Blocked storage: the page still changes for this visit.
  }
  listeners.forEach((l) => l());
}
function subscribe(l: () => void) {
  listeners.add(l);
  window.addEventListener("storage", l);
  return () => {
    listeners.delete(l);
    window.removeEventListener("storage", l);
  };
}

export function AccountMenu({ openProfile, signOut }: { openProfile: () => void; signOut: () => Promise<void> }) {
  const [workspace, setWorkspace] = React.useState("relay");
  const theme = React.useSyncExternalStore(subscribe, savedTheme, () => "system" as const);
  return (
    <UserMenu
      user={{ name: "Maya Kerr", initials: "MK", role: "OWNER · 2FA ON" }}
      workspaces={workspaces}
      workspace={workspace}
      onWorkspaceChange={setWorkspace}
      links={[{ id: "profile", label: "PROFILE", hint: "⌘P", onSelect: openProfile }]}
      theme={theme}
      onThemeChange={applyTheme}
      onSignOut={signOut}
    />
  );
}