"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { cn } from "@stigmer/theme";
import { Popover } from "@base-ui/react/popover";
import { ConfigureIcon } from "./icons";
/**
 * Tier 2 configuration affordance for the composer toolbar.
 *
 * Renders a trigger button with an optional badge and warning indicator.
 * Opens a popover that either shows a menu list (when no panel is active)
 * or drills into the selected item's picker (when a panel is active).
 *
 * Uses a single popover with content switching rather than nested popovers,
 * avoiding z-index and focus-trap issues.
 */
export function ConfigureMenu({ open, onOpenChange, activePanel, onActivePanelChange, items, renderPanel, disabled, }) {
    const totalCount = items.reduce((sum, item) => sum + item.count, 0);
    const hasWarning = items.some((item) => item.hasWarning);
    const handleOpenChange = (nextOpen) => {
        onOpenChange(nextOpen);
        if (!nextOpen) {
            onActivePanelChange(null);
        }
    };
    if (items.length === 0)
        return null;
    const activePanelItem = activePanel
        ? items.find((i) => i.id === activePanel)
        : null;
    return (_jsxs(Popover.Root, { open: open, onOpenChange: handleOpenChange, children: [_jsxs(Popover.Trigger, { disabled: disabled, className: cn("inline-flex items-center gap-1 rounded-md px-2 py-1.5 text-xs transition-colors", "text-muted-foreground hover:text-foreground hover:bg-accent-hover", "disabled:pointer-events-none disabled:opacity-50"), "aria-label": "Configure agent, tools, and skills", children: [_jsx(ConfigureIcon, {}), _jsx("span", { className: "max-sm:hidden", children: "Configure" }), totalCount > 0 && (_jsx("span", { className: "rounded-full bg-primary-subtle px-1.5 text-[0.6rem] font-medium text-primary", children: totalCount })), hasWarning && totalCount === 0 && (_jsx("span", { className: "inline-block h-1.5 w-1.5 shrink-0 rounded-full bg-warning", "aria-label": "Configuration needed" }))] }), _jsx(Popover.Portal, { children: _jsx(Popover.Positioner, { sideOffset: 8, align: "start", children: _jsx(Popover.Popup, { className: cn("z-popover overflow-x-hidden overflow-y-auto rounded-lg border border-border", "bg-popover shadow-md text-popover-foreground", "max-h-[80vh]"), children: activePanelItem ? (_jsx(PanelView, { item: activePanelItem, onBack: () => onActivePanelChange(null), children: renderPanel(activePanel) })) : (_jsx(MenuList, { items: items, onSelect: onActivePanelChange })) }) }) })] }));
}
// ---------------------------------------------------------------------------
// Menu list — shown when no panel is drilled into
// ---------------------------------------------------------------------------
function MenuList({ items, onSelect, }) {
    return (_jsx("div", { className: "py-1", role: "menu", children: items.map((item) => (_jsxs("button", { type: "button", role: "menuitem", onClick: () => onSelect(item.id), className: cn("flex w-full items-center gap-2.5 px-3 py-2 text-sm transition-colors", "text-foreground hover:bg-accent-hover"), children: [_jsx("span", { className: "shrink-0 text-muted-foreground", children: item.icon }), _jsx("span", { className: "flex-1 text-left", children: item.label }), item.hasWarning && (_jsx("span", { className: "inline-block h-1.5 w-1.5 shrink-0 rounded-full bg-warning", "aria-label": "Needs configuration" })), item.count > 0 && (_jsx("span", { className: "rounded-full bg-primary-subtle px-1.5 text-[0.6rem] font-medium text-primary", children: item.count })), _jsx(ChevronRightIcon, {})] }, item.id))) }));
}
// ---------------------------------------------------------------------------
// Panel view — shown when a specific item is drilled into
// ---------------------------------------------------------------------------
function PanelView({ item, onBack, children, }) {
    return (_jsxs("div", { children: [_jsxs("div", { className: "flex items-center gap-2 border-b border-border-muted px-3 py-2", children: [_jsx("button", { type: "button", onClick: onBack, className: "shrink-0 rounded p-0.5 text-muted-foreground transition-colors hover:bg-accent-hover hover:text-foreground", "aria-label": "Back to configuration menu", children: _jsx(ChevronLeftIcon, {}) }), _jsx("span", { className: "shrink-0 text-muted-foreground", children: item.icon }), _jsx("span", { className: "text-sm font-medium text-foreground", children: item.label })] }), _jsx("div", { className: "p-3", children: children })] }));
}
// ---------------------------------------------------------------------------
// Icons — local to ConfigureMenu
// ---------------------------------------------------------------------------
function ChevronRightIcon() {
    return (_jsx("svg", { width: "12", height: "12", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", className: "shrink-0 text-muted-foreground", "aria-hidden": "true", children: _jsx("path", { d: "M6 4l4 4-4 4" }) }));
}
function ChevronLeftIcon() {
    return (_jsx("svg", { width: "14", height: "14", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: _jsx("path", { d: "M10 4l-4 4 4 4" }) }));
}
//# sourceMappingURL=ConfigureMenu.js.map