"use client";
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { memo, useCallback, useMemo } from "react";
import { Menu } from "@base-ui/react/menu";
import { Separator } from "@base-ui/react/separator";
import { cn } from "@stigmer/theme";
import { useStigmerPortalContainer } from "../portal-container.js";
import { TrashIcon, DuplicateIcon, PlusIcon } from "./canvas-icons.js";
import { getShortcutHint } from "./shortcut-registry.js";
// ---------------------------------------------------------------------------
// Styling constants
// ---------------------------------------------------------------------------
const POPUP_CLASS = cn("stgm z-50 min-w-[160px] rounded-md border border-[var(--stgm-border,#e5e5e5)] bg-[var(--stgm-popover,var(--stgm-background,#fff))] p-1 shadow-md", "outline-none");
const ITEM_CLASS = cn("flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-xs text-[var(--stgm-popover-foreground,var(--stgm-foreground,#1a1a2e))] outline-none", "data-[highlighted]:bg-[var(--stgm-accent,#e5e5e5)]");
const DESTRUCTIVE_ITEM_CLASS = cn("flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-xs text-[var(--stgm-destructive,#ef4444)] outline-none", "data-[highlighted]:bg-[var(--stgm-destructive,#ef4444)]/10");
const DISABLED_ITEM_CLASS = cn("flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-xs text-[var(--stgm-muted-foreground,#737373)] outline-none", "opacity-50");
const SHORTCUT_HINT_CLASS = "ml-auto pl-4 text-[10px] tracking-wide text-[var(--stgm-muted-foreground,#737373)]";
const SEPARATOR_CLASS = "my-1 h-px bg-[var(--stgm-border,#e5e5e5)]";
// ---------------------------------------------------------------------------
// CanvasContextMenu
// ---------------------------------------------------------------------------
/**
 * Right-click context menu for the workflow canvas editor.
 *
 * Renders different menu items depending on the {@link CanvasContextMenuTarget}:
 * - **Node**: Delete Task, Duplicate Task, Add Task After
 * - **Edge**: Delete Connection, Insert Task
 * - **Pane**: Add Task, Select All, Auto-layout
 *
 * Uses `@base-ui/react/menu` in controlled mode with a virtual anchor
 * positioned at the right-click coordinates. Portaled via
 * `useStigmerPortalContainer()` to inherit `--stgm-*` tokens.
 *
 * @since T05 (Context Menu + Duplicate)
 */
export const CanvasContextMenu = memo(function CanvasContextMenu({ open, onOpenChange, target, position, onDeleteNode, onDuplicateNode, onAddTaskAfter, onToggleDisabled, onWrapInTryCatch, onCopyNode, onRenameNode, onViewYaml, onDeleteEdge, onInsertTaskOnEdge, onAddTaskAtPosition, onSelectAll, onAutoLayout, onPaste, hasClipboard, onFitView, onCopySelection, onDuplicateSelection, onDisableSelection, onDeleteSelection, className, }) {
    const portalContainer = useStigmerPortalContainer();
    const virtualAnchor = useMemo(() => {
        if (!position)
            return undefined;
        const { x, y } = position;
        return {
            getBoundingClientRect: () => ({
                x,
                y,
                width: 0,
                height: 0,
                top: y,
                right: x,
                bottom: y,
                left: x,
            }),
        };
    }, [position]);
    const handleOpenChange = useCallback((nextOpen) => {
        onOpenChange(nextOpen);
    }, [onOpenChange]);
    if (!target || !position)
        return null;
    return (_jsx(Menu.Root, { open: open, onOpenChange: handleOpenChange, modal: false, children: _jsx(Menu.Portal, { container: portalContainer, children: _jsx(Menu.Positioner, { anchor: virtualAnchor, side: "bottom", align: "start", sideOffset: 0, children: _jsxs(Menu.Popup, { className: cn(POPUP_CLASS, className), children: [target.type === "node" && (_jsx(NodeMenuItems, { nodeId: target.id, taskName: target.taskName, onDelete: onDeleteNode, onDuplicate: onDuplicateNode, onAddTaskAfter: onAddTaskAfter, onToggleDisabled: onToggleDisabled, onWrapInTryCatch: onWrapInTryCatch, onCopy: onCopyNode, onRename: onRenameNode, onViewYaml: onViewYaml })), target.type === "edge" && (_jsx(EdgeMenuItems, { edgeId: target.id, onDelete: onDeleteEdge, onInsertTask: onInsertTaskOnEdge })), target.type === "pane" && (_jsx(PaneMenuItems, { onAddTask: onAddTaskAtPosition, onSelectAll: onSelectAll, onAutoLayout: onAutoLayout, onPaste: onPaste, hasClipboard: hasClipboard, onFitView: onFitView })), target.type === "selection" && (_jsx(SelectionMenuItems, { count: target.count, onCopy: onCopySelection, onDuplicate: onDuplicateSelection, onDisable: onDisableSelection, onDelete: onDeleteSelection }))] }) }) }) }));
});
// ---------------------------------------------------------------------------
// Node menu items
// ---------------------------------------------------------------------------
function NodeMenuItems({ nodeId, taskName, onDelete, onDuplicate, onAddTaskAfter, onToggleDisabled, onWrapInTryCatch, onCopy, onRename, onViewYaml, }) {
    return (_jsxs(_Fragment, { children: [onRename && (_jsxs(Menu.Item, { className: ITEM_CLASS, onClick: () => onRename(nodeId), label: "Rename task", children: [_jsx(RenameIcon, {}), "Rename"] })), onDuplicate && (_jsxs(Menu.Item, { className: ITEM_CLASS, onClick: () => onDuplicate(nodeId), label: "Duplicate task", children: [_jsx(DuplicateIcon, {}), "Duplicate", _jsx("span", { className: SHORTCUT_HINT_CLASS, children: getShortcutHint("duplicate") })] })), onCopy && (_jsxs(Menu.Item, { className: ITEM_CLASS, onClick: () => onCopy(nodeId), label: "Copy task", children: [_jsx(CopyIcon, {}), "Copy", _jsx("span", { className: SHORTCUT_HINT_CLASS, children: getShortcutHint("copy") })] })), onAddTaskAfter && (_jsxs(Menu.Item, { className: ITEM_CLASS, onClick: () => onAddTaskAfter(nodeId), label: "Add task after", children: [_jsx(PlusIcon, {}), "Add task after\u2026", _jsx("span", { className: SHORTCUT_HINT_CLASS, children: getShortcutHint("addTaskAfter") })] })), _jsx(Separator, { className: SEPARATOR_CLASS }), onToggleDisabled && (_jsxs(Menu.Item, { className: ITEM_CLASS, onClick: () => onToggleDisabled(nodeId), label: "Toggle disabled", children: [_jsx(DisableIcon, {}), "Disable / Bypass"] })), onWrapInTryCatch && (_jsxs(Menu.Item, { className: ITEM_CLASS, onClick: () => onWrapInTryCatch(nodeId), label: "Wrap in try/catch", children: [_jsx(ShieldIcon, {}), "Wrap in Try/Catch"] })), onViewYaml && (_jsxs(Menu.Item, { className: ITEM_CLASS, onClick: () => onViewYaml(nodeId), label: "View YAML", children: [_jsx(CodeIcon, {}), "View YAML"] })), _jsx(Separator, { className: SEPARATOR_CLASS }), onDelete && (_jsxs(Menu.Item, { className: DESTRUCTIVE_ITEM_CLASS, onClick: () => onDelete(nodeId), "aria-label": `Delete task ${taskName}`, label: "Delete task", children: [_jsx(TrashIcon, {}), "Delete", _jsx("span", { className: SHORTCUT_HINT_CLASS, children: getShortcutHint("delete") })] }))] }));
}
// ---------------------------------------------------------------------------
// Edge menu items
// ---------------------------------------------------------------------------
function EdgeMenuItems({ edgeId, onDelete, onInsertTask, }) {
    return (_jsxs(_Fragment, { children: [onInsertTask && (_jsxs(Menu.Item, { className: ITEM_CLASS, onClick: () => onInsertTask(edgeId), label: "Insert task", children: [_jsx(PlusIcon, {}), "Insert task\u2026"] })), onInsertTask && onDelete && (_jsx(Separator, { className: SEPARATOR_CLASS })), onDelete && (_jsxs(Menu.Item, { className: DESTRUCTIVE_ITEM_CLASS, onClick: () => onDelete(edgeId), label: "Delete connection", children: [_jsx(TrashIcon, {}), "Delete connection"] }))] }));
}
// ---------------------------------------------------------------------------
// Pane menu items
// ---------------------------------------------------------------------------
function PaneMenuItems({ onAddTask, onSelectAll, onAutoLayout, onPaste, hasClipboard, onFitView, }) {
    return (_jsxs(_Fragment, { children: [onAddTask && (_jsxs(Menu.Item, { className: ITEM_CLASS, onClick: onAddTask, label: "Add task", children: [_jsx(PlusIcon, {}), "Add task\u2026", _jsx("span", { className: SHORTCUT_HINT_CLASS, children: getShortcutHint("addTaskAfter") })] })), onPaste && (_jsxs(Menu.Item, { className: hasClipboard ? ITEM_CLASS : DISABLED_ITEM_CLASS, onClick: hasClipboard ? onPaste : undefined, label: "Paste", "aria-disabled": !hasClipboard, children: [_jsx(PasteIcon, {}), "Paste", _jsx("span", { className: SHORTCUT_HINT_CLASS, children: getShortcutHint("paste") })] })), _jsx(Separator, { className: SEPARATOR_CLASS }), onSelectAll && (_jsxs(Menu.Item, { className: ITEM_CLASS, onClick: onSelectAll, label: "Select all", children: [_jsx(SelectAllIcon, {}), "Select all", _jsx("span", { className: SHORTCUT_HINT_CLASS, children: getShortcutHint("selectAll") })] })), onAutoLayout && (_jsxs(Menu.Item, { className: ITEM_CLASS, onClick: onAutoLayout, label: "Auto-layout", children: [_jsx(LayoutIcon, {}), "Auto-layout"] })), onFitView && (_jsxs(Menu.Item, { className: ITEM_CLASS, onClick: onFitView, label: "Zoom to fit", children: [_jsx(FitViewIcon, {}), "Zoom to fit"] }))] }));
}
// ---------------------------------------------------------------------------
// Selection menu items (multi-select right-click)
// ---------------------------------------------------------------------------
function SelectionMenuItems({ count, onCopy, onDuplicate, onDisable, onDelete, }) {
    const label = `${count} task${count > 1 ? "s" : ""}`;
    return (_jsxs(_Fragment, { children: [onCopy && (_jsxs(Menu.Item, { className: ITEM_CLASS, onClick: onCopy, label: `Copy ${label}`, children: [_jsx(CopyIcon, {}), "Copy ", label, _jsx("span", { className: SHORTCUT_HINT_CLASS, children: getShortcutHint("copy") })] })), onDuplicate && (_jsxs(Menu.Item, { className: ITEM_CLASS, onClick: onDuplicate, label: `Duplicate ${label}`, children: [_jsx(DuplicateIcon, {}), "Duplicate ", label, _jsx("span", { className: SHORTCUT_HINT_CLASS, children: getShortcutHint("duplicate") })] })), onDisable && (_jsxs(Menu.Item, { className: ITEM_CLASS, onClick: onDisable, label: `Disable ${label}`, children: [_jsx(DisableIcon, {}), "Disable ", label] })), (onCopy || onDuplicate || onDisable) && onDelete && (_jsx(Separator, { className: SEPARATOR_CLASS })), onDelete && (_jsxs(Menu.Item, { className: DESTRUCTIVE_ITEM_CLASS, onClick: onDelete, label: `Delete ${label}`, children: [_jsx(TrashIcon, {}), "Delete ", label, _jsx("span", { className: SHORTCUT_HINT_CLASS, children: getShortcutHint("delete") })] }))] }));
}
// ---------------------------------------------------------------------------
// Icons (context-menu-specific; shared icons imported from canvas-icons.tsx)
// ---------------------------------------------------------------------------
function SelectAllIcon() {
    return (_jsxs("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", stroke: "currentColor", strokeWidth: "1.3", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [_jsx("rect", { x: "2", y: "2", width: "10", height: "10", rx: "1", strokeDasharray: "2 2" }), _jsx("path", { d: "M5 7l1.5 1.5L9 5.5" })] }));
}
function LayoutIcon() {
    return (_jsxs("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", stroke: "currentColor", strokeWidth: "1.3", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [_jsx("rect", { x: "4", y: "1.5", width: "6", height: "3", rx: "0.5" }), _jsx("rect", { x: "1", y: "9.5", width: "5", height: "3", rx: "0.5" }), _jsx("rect", { x: "8", y: "9.5", width: "5", height: "3", rx: "0.5" }), _jsx("path", { d: "M7 4.5V7M7 7H3.5M7 7h3.5M3.5 7v2.5M10.5 7v2.5" })] }));
}
function CopyIcon() {
    return (_jsxs("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", stroke: "currentColor", strokeWidth: "1.3", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [_jsx("rect", { x: "5", y: "5", width: "7", height: "7", rx: "1" }), _jsx("path", { d: "M9 5V3a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v5a1 1 0 0 0 1 1h2" })] }));
}
function PasteIcon() {
    return (_jsxs("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", stroke: "currentColor", strokeWidth: "1.3", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [_jsx("path", { d: "M5.5 2H4a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1H8.5" }), _jsx("rect", { x: "5", y: "1", width: "4", height: "2.5", rx: "0.5" })] }));
}
function RenameIcon() {
    return (_jsx("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", stroke: "currentColor", strokeWidth: "1.3", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: _jsx("path", { d: "M8.5 2.5l3 3M2 12l.7-2.8L9.6 2.3a1 1 0 0 1 1.4 0l1.7 1.7a1 1 0 0 1 0 1.4L5.8 12.3 3 13z" }) }));
}
function DisableIcon() {
    return (_jsxs("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", stroke: "currentColor", strokeWidth: "1.3", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [_jsx("circle", { cx: "7", cy: "7", r: "5" }), _jsx("path", { d: "M3.5 10.5l7-7" })] }));
}
function ShieldIcon() {
    return (_jsx("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", stroke: "currentColor", strokeWidth: "1.3", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: _jsx("path", { d: "M7 1.5L2 3.5v3c0 3.5 2.2 5.5 5 6.5 2.8-1 5-3 5-6.5v-3L7 1.5z" }) }));
}
function CodeIcon() {
    return (_jsx("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", stroke: "currentColor", strokeWidth: "1.3", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: _jsx("path", { d: "M4.5 4L1.5 7l3 3M9.5 4l3 3-3 3M8 2l-2 10" }) }));
}
function FitViewIcon() {
    return (_jsxs("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", stroke: "currentColor", strokeWidth: "1.3", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [_jsx("path", { d: "M1.5 5V2.5a1 1 0 0 1 1-1H5M9 1.5h2.5a1 1 0 0 1 1 1V5M12.5 9v2.5a1 1 0 0 1-1 1H9M5 12.5H2.5a1 1 0 0 1-1-1V9" }), _jsx("rect", { x: "4", y: "4", width: "6", height: "6", rx: "0.5" })] }));
}
//# sourceMappingURL=CanvasContextMenu.js.map