"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { memo, useState, useCallback, useRef, useEffect } from "react";
import { Popover } from "@base-ui/react/popover";
import { cn } from "@stigmer/theme";
import { useStigmerPortalContainer } from "../../portal-container.js";
const MODE_CONFIG = {
    "switch-case": {
        title: "Add Case",
        namePlaceholder: "e.g. enterprise",
        nameLabel: "Case name",
        showCondition: true,
        showErrorType: false,
    },
    "fork-branch": {
        title: "Add Branch",
        namePlaceholder: "e.g. enrich_crm",
        nameLabel: "Branch name",
        showCondition: false,
        showErrorType: false,
    },
    "catch-handler": {
        title: "Add Catch Handler",
        namePlaceholder: "e.g. timeout_error",
        nameLabel: "Handler name",
        showCondition: false,
        showErrorType: true,
    },
};
/**
 * Inline popover for adding a branch to a switch_case, fork, or try_catch node.
 *
 * Renders a minimal form with contextual fields based on `mode`:
 * - switch-case: name + condition expression
 * - fork-branch: name only
 * - catch-handler: name + error type filter
 *
 * @since T08 (Contextual Task Picker)
 */
export const BranchAddPopover = memo(function BranchAddPopover({ open, onOpenChange, onSubmit, anchorRef, mode, existingNames, side = "bottom", align = "start", }) {
    const portalContainer = useStigmerPortalContainer();
    const config = MODE_CONFIG[mode];
    const nameRef = useRef(null);
    const [name, setName] = useState("");
    const [condition, setCondition] = useState("");
    const [errorType, setErrorType] = useState("");
    const [nameError, setNameError] = useState(null);
    useEffect(() => {
        if (open) {
            setName("");
            setCondition("");
            setErrorType("");
            setNameError(null);
            requestAnimationFrame(() => nameRef.current?.focus());
        }
    }, [open]);
    const validateAndSubmit = useCallback(() => {
        const trimmedName = name.trim();
        if (!trimmedName) {
            setNameError("Name is required");
            return;
        }
        if (!/^[a-zA-Z_][a-zA-Z0-9_]*$/.test(trimmedName)) {
            setNameError("Must start with a letter or underscore, alphanumeric only");
            return;
        }
        if (existingNames?.has(trimmedName)) {
            setNameError("This name already exists");
            return;
        }
        const result = {
            name: trimmedName,
            ...(config.showCondition && condition.trim() && { condition: condition.trim() }),
            ...(config.showErrorType && errorType.trim() && { errorType: errorType.trim() }),
        };
        onSubmit(result);
        onOpenChange(false);
    }, [name, condition, errorType, existingNames, config, onSubmit, onOpenChange]);
    const handleKeyDown = useCallback((e) => {
        if (e.key === "Enter") {
            e.preventDefault();
            validateAndSubmit();
        }
    }, [validateAndSubmit]);
    return (_jsx(Popover.Root, { open: open, onOpenChange: onOpenChange, children: _jsx(Popover.Portal, { container: portalContainer, children: _jsx(Popover.Positioner, { anchor: anchorRef, side: side, align: align, sideOffset: 8, children: _jsx(Popover.Popup, { className: cn("stgm z-popover w-60 overflow-hidden rounded-lg border border-border bg-popover shadow-md text-popover-foreground"), children: _jsxs("div", { className: "flex flex-col", onKeyDown: handleKeyDown, children: [_jsx("div", { className: "border-b border-border px-3 py-2", children: _jsx("p", { className: "text-xs font-semibold text-[var(--stgm-foreground,#1a1a2e)]", children: config.title }) }), _jsxs("div", { className: "space-y-2.5 p-3", children: [_jsxs("div", { children: [_jsx("label", { className: "mb-1 block text-[10px] font-medium text-[var(--stgm-muted-foreground,#737373)]", children: config.nameLabel }), _jsx("input", { ref: nameRef, type: "text", value: name, onChange: (e) => {
                                                    setName(e.target.value);
                                                    setNameError(null);
                                                }, placeholder: config.namePlaceholder, className: cn("w-full rounded border bg-[var(--stgm-input-bg,var(--stgm-background,#fff))] px-2 py-1.5 text-xs text-[var(--stgm-foreground,#1a1a2e)] placeholder:text-[var(--stgm-muted-foreground,#737373)] outline-none focus:ring-1 focus:ring-[var(--stgm-ring,#3b82f6)]", nameError ? "border-[var(--stgm-destructive,#ef4444)]" : "border-border"), "aria-invalid": !!nameError, "aria-describedby": nameError ? "branch-name-error" : undefined }), nameError && (_jsx("p", { id: "branch-name-error", className: "mt-0.5 text-[10px] text-[var(--stgm-destructive,#ef4444)]", children: nameError }))] }), config.showCondition && (_jsxs("div", { children: [_jsxs("label", { className: "mb-1 block text-[10px] font-medium text-[var(--stgm-muted-foreground,#737373)]", children: ["Condition", _jsx("span", { className: "ml-1 font-normal", children: "(optional)" })] }), _jsx("input", { type: "text", value: condition, onChange: (e) => setCondition(e.target.value), placeholder: 'e.g. $.plan == "enterprise"', className: "w-full rounded border border-border bg-[var(--stgm-input-bg,var(--stgm-background,#fff))] px-2 py-1.5 text-xs font-mono text-[var(--stgm-foreground,#1a1a2e)] placeholder:text-[var(--stgm-muted-foreground,#737373)] outline-none focus:ring-1 focus:ring-[var(--stgm-ring,#3b82f6)]" })] })), config.showErrorType && (_jsxs("div", { children: [_jsxs("label", { className: "mb-1 block text-[10px] font-medium text-[var(--stgm-muted-foreground,#737373)]", children: ["Error type filter", _jsx("span", { className: "ml-1 font-normal", children: "(optional)" })] }), _jsx("input", { type: "text", value: errorType, onChange: (e) => setErrorType(e.target.value), placeholder: "e.g. TimeoutError", className: "w-full rounded border border-border bg-[var(--stgm-input-bg,var(--stgm-background,#fff))] px-2 py-1.5 text-xs text-[var(--stgm-foreground,#1a1a2e)] placeholder:text-[var(--stgm-muted-foreground,#737373)] outline-none focus:ring-1 focus:ring-[var(--stgm-ring,#3b82f6)]" })] })), _jsx("button", { type: "button", onClick: validateAndSubmit, className: "w-full rounded bg-[var(--stgm-primary,#3b82f6)] px-3 py-1.5 text-xs font-medium text-[var(--stgm-primary-foreground,#fff)] transition-colors hover:bg-[var(--stgm-primary,#3b82f6)]/90 focus:outline-none focus:ring-2 focus:ring-[var(--stgm-ring,#3b82f6)] focus:ring-offset-1", children: config.title })] })] }) }) }) }) }));
});
//# sourceMappingURL=BranchAddPopover.js.map