"use client";
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { ChevronsUpDown, LogOut, Settings, SunMoon, User, } from "lucide-react";
import { cn } from "@stigmer/theme";
import { Menu, MenuContent, MenuGroup, MenuItem, MenuLabel, MenuRadioGroup, MenuRadioItem, MenuSeparator, MenuTrigger, } from "../internal/menu";
/**
 * User menu dropdown for sidebar navigation.
 *
 * Displays the current user (avatar + name/email) or a "Local mode"
 * indicator when unauthenticated, with optional color scheme switching,
 * settings navigation, app-specific extra items, and sign out.
 *
 * Designed for sidebar placement — the trigger uses `sidebar-*` design
 * tokens. The portaled dropdown uses standard `popover-*` / main-area
 * tokens per theme-token-guidelines (DD-005).
 *
 * Framework-agnostic: all actions are expressed as callback props
 * (DD-004). The consumer bridges to their routing, auth, and theme
 * systems.
 *
 * @example
 * ```tsx
 * <UserMenu
 *   user={{ name: "Jane", email: "jane@acme.com" }}
 *   colorMode="dark"
 *   onColorModeChange={(mode) => setTheme(mode)}
 *   onSettingsClick={() => router.push("/settings")}
 *   onSignOut={() => logout()}
 * />
 * ```
 */
export function UserMenu({ user, colorMode, onColorModeChange, onSettingsClick, onSignOut, extraItems, className, }) {
    const showColorScheme = colorMode != null && onColorModeChange != null;
    const showSettings = onSettingsClick != null;
    const showSignOut = onSignOut != null;
    const hasContentBeforeSignOut = showSettings || showColorScheme || extraItems;
    const displayName = user?.name ?? user?.email;
    const triggerLabel = user ? "User menu" : "Settings";
    return (_jsxs(Menu, { children: [_jsxs(MenuTrigger, { "aria-label": triggerLabel, className: cn("hover:bg-sidebar-accent flex w-full cursor-pointer items-center gap-2 rounded-lg px-2 py-1.5 transition-colors focus:outline-none", className), children: [_jsx(UserAvatar, { name: displayName }), user ? (_jsxs("div", { className: "flex min-w-0 flex-1 flex-col text-left", children: [user.name && (_jsx("span", { className: "truncate text-sm font-medium", children: user.name })), _jsx("span", { className: "text-sidebar-muted-foreground truncate text-xs", children: user.email })] })) : (_jsx("span", { className: "text-sidebar-muted-foreground truncate text-sm", children: "Local mode" })), _jsx(ChevronsUpDown, { className: "text-sidebar-muted-foreground ml-auto size-3.5 shrink-0" })] }), _jsxs(MenuContent, { align: "start", side: "top", sideOffset: 8, children: [showSettings && (_jsxs(MenuItem, { onClick: onSettingsClick, children: [_jsx(Settings, { className: "size-4" }), "Settings"] })), showSettings && showColorScheme && _jsx(MenuSeparator, {}), showColorScheme && (_jsx(ColorSchemeSection, { colorMode: colorMode, onColorModeChange: onColorModeChange })), extraItems && (_jsxs(_Fragment, { children: [(showSettings || showColorScheme) && _jsx(MenuSeparator, {}), extraItems] })), showSignOut && (_jsxs(_Fragment, { children: [hasContentBeforeSignOut && _jsx(MenuSeparator, {}), _jsxs(MenuItem, { onClick: onSignOut, children: [_jsx(LogOut, { className: "size-4" }), "Sign out"] })] }))] })] }));
}
// ---------------------------------------------------------------------------
// Internal sub-components
// ---------------------------------------------------------------------------
function ColorSchemeSection({ colorMode, onColorModeChange, }) {
    return (_jsxs(MenuGroup, { "aria-label": "Color scheme", children: [_jsxs(MenuLabel, { children: [_jsx(SunMoon, { className: "mr-1 inline size-3 align-[-2px]" }), "Color Scheme"] }), _jsxs(MenuRadioGroup, { value: colorMode, onValueChange: (val) => onColorModeChange(val), children: [_jsx(MenuRadioItem, { value: "light", children: "Light" }), _jsx(MenuRadioItem, { value: "dark", children: "Dark" }), _jsx(MenuRadioItem, { value: "system", children: "System" })] })] }));
}
function UserAvatar({ name }) {
    const initial = name ? name.charAt(0).toUpperCase() : null;
    return (_jsx("div", { className: cn("bg-sidebar-accent text-sidebar-accent-foreground border-sidebar-border", "flex size-6 shrink-0 items-center justify-center rounded-full border"), children: initial ? (_jsx("span", { className: "text-xs font-medium", children: initial })) : (_jsx(User, { className: "size-3.5" })) }));
}
//# sourceMappingURL=UserMenu.js.map