'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from 'react';
import { cn } from '../../../utils/cn.js';
import { LuPlus, LuX } from 'react-icons/lu';
/**
 * Chip-style input for an ordered variable chain. First non-empty resolved value wins
 * at runtime — chain order matters. Users add chips via an @-popup picker, remove via
 * the × on each chip.
 */
export function VariableChainInput({ chain, variables, on_change, disabled, help, }) {
    const [popup_open, set_popup_open] = React.useState(false);
    const popup_ref = React.useRef(null);
    // Close popup on outside click
    React.useEffect(() => {
        if (!popup_open)
            return;
        const handler = (e) => {
            if (popup_ref.current && !popup_ref.current.contains(e.target)) {
                set_popup_open(false);
            }
        };
        document.addEventListener('mousedown', handler);
        return () => document.removeEventListener('mousedown', handler);
    }, [popup_open]);
    const remove_at = (index) => on_change(chain.filter((_, i) => i !== index));
    const add_variable = (trigger) => {
        on_change([...chain, trigger]);
        set_popup_open(false);
    };
    const available = variables.filter(v => !chain.includes(v.trigger));
    return (_jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-1.5 min-h-[2.25rem] p-1.5 border rounded-md bg-background", children: [chain.length === 0 && (_jsx("span", { className: "px-1 text-sm text-muted-foreground", children: "No variables \u2014 add one \u2192" })), chain.map((ref, i) => (_jsxs("span", { className: "inline-flex items-center gap-1 px-2 py-0.5 text-sm font-mono rounded bg-primary/10 text-primary border border-primary/20", children: [ref, !disabled && (_jsx("button", { type: "button", onClick: () => remove_at(i), "aria-label": `Remove ${ref}`, className: "hover:text-destructive transition-colors", children: _jsx(LuX, { className: "h-3 w-3" }) }))] }, `${ref}_${i}`))), !disabled && (_jsxs("div", { ref: popup_ref, className: "relative", children: [_jsxs("button", { type: "button", onClick: () => set_popup_open(o => !o), className: "inline-flex items-center gap-1 px-2 py-0.5 text-xs rounded border border-dashed border-muted-foreground/40 text-muted-foreground hover:text-foreground hover:border-foreground/60 transition-colors", children: [_jsx(LuPlus, { className: "h-3 w-3" }), chain.length === 0 ? 'Add variable' : 'Add fallback'] }), popup_open && (_jsx("div", { className: "absolute z-50 left-0 mt-1 min-w-[18rem] max-h-[20rem] overflow-y-auto border rounded-md bg-popover shadow-md p-1.5 space-y-0.5", children: available.length === 0 ? (_jsx("div", { className: "px-2 py-1.5 text-xs text-muted-foreground", children: "No more variables to add." })) : (available.map(v => (_jsxs("button", { type: "button", onClick: () => add_variable(v.trigger), className: cn('w-full flex flex-col items-start gap-0.5 px-2 py-1.5 text-left rounded', 'hover:bg-accent hover:text-accent-foreground transition-colors'), children: [_jsx("span", { className: "font-mono text-sm text-primary", children: v.trigger }), v.description && (_jsx("span", { className: "text-xs text-muted-foreground", children: v.description }))] }, v.trigger)))) }))] }))] }), help && (_jsx("p", { className: "text-xs text-muted-foreground", children: help })), chain.length > 1 && (_jsx("p", { className: "text-xs text-muted-foreground", children: "First non-empty value wins. Reorder by removing and re-adding." }))] }));
}
//# sourceMappingURL=variable_chain_input.js.map