"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useMemo } from "react";
import { cn } from "@stigmer/theme";
import { useScrollShadows } from "../internal/useScrollShadows";
import { ScrollFade } from "../internal/ScrollFade";
/**
 * Compact key-value editor for session-scoped environment variables.
 *
 * Designed to render inside a popover within {@link SessionComposer}.
 * Each entry collects a variable name, value, secret toggle, and an
 * optional "save for future" toggle. By default values are ephemeral
 * (single execution); toggling "save for future" persists them to the
 * user's personal environment.
 *
 * This is a **pure presentational component** with no knowledge of
 * sessions, executions, or orchestration. Platform builders can use
 * it standalone with {@link useSessionVariables} for custom UIs.
 *
 * All visual properties flow through `--stgm-*` design tokens.
 *
 * @example
 * ```tsx
 * const sessionVariables = useSessionVariables();
 *
 * <SessionVariablesInput sessionVariables={sessionVariables} />
 * ```
 */
export function SessionVariablesInput({ sessionVariables, disabled = false, className, requiredByMap, }) {
    const entries = useScrollShadows();
    const duplicateKeys = useMemo(() => {
        const seen = new Set();
        const dupes = new Set();
        for (const entry of sessionVariables.entries) {
            const k = entry.key.trim();
            if (k === "")
                continue;
            if (seen.has(k))
                dupes.add(k);
            seen.add(k);
        }
        return dupes;
    }, [sessionVariables.entries]);
    return (_jsxs("div", { className: cn("w-80 space-y-3", className), "aria-label": "Session variables", children: [_jsxs("div", { className: "space-y-0.5", children: [_jsx("h3", { className: "text-xs font-medium text-foreground", children: "Session variables" }), _jsx("p", { className: "text-[0.65rem] text-muted-foreground", children: "Additional environment variables for this session." })] }), sessionVariables.entries.length > 0 ? (_jsxs("div", { className: "relative", children: [entries.canScrollUp && _jsx(ScrollFade, { position: "top" }), _jsx("div", { ref: entries.scrollRef, className: "max-h-64 space-y-2.5 overflow-y-auto", children: sessionVariables.entries.map((entry) => {
                            const isDuplicate = duplicateKeys.has(entry.key.trim());
                            return (_jsx(VariableEntryRow, { id: entry.id, entryKey: entry.key, value: entry.value, isSecret: entry.isSecret, saveForFuture: entry.saveForFuture, isDuplicate: isDuplicate, disabled: disabled, onUpdate: sessionVariables.updateEntry, onRemove: sessionVariables.removeEntry, requiredBy: entry.key.trim()
                                    ? requiredByMap?.[entry.key.trim()]
                                    : undefined }, entry.id));
                        }) }), entries.canScrollDown && _jsx(ScrollFade, { position: "bottom" })] })) : (_jsx("p", { className: "py-2 text-center text-[0.65rem] text-muted-foreground-subtle", children: "No variables added." })), _jsxs("button", { type: "button", onClick: sessionVariables.addEntry, disabled: disabled, className: cn("inline-flex w-full items-center justify-center gap-1 rounded-md py-1.5 text-xs", "border border-dashed border-border text-muted-foreground", "hover:border-border hover:bg-accent-hover hover:text-foreground", "disabled:pointer-events-none disabled:opacity-50"), children: [_jsx(PlusIcon, {}), _jsx("span", { children: "Add variable" })] })] }));
}
// ---------------------------------------------------------------------------
// Entry row
// ---------------------------------------------------------------------------
function VariableEntryRow({ id, entryKey, value, isSecret, saveForFuture, isDuplicate, disabled, onUpdate, onRemove, requiredBy, }) {
    const keyInputId = `stgm-sv-key-${id}`;
    const valInputId = `stgm-sv-val-${id}`;
    const removeLabel = entryKey.trim() || "entry";
    return (_jsxs("div", { className: "space-y-1.5", children: [_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx("input", { id: keyInputId, type: "text", value: entryKey, onChange: (e) => onUpdate(id, { key: e.target.value }), disabled: disabled, placeholder: "VARIABLE_NAME", autoComplete: "off", spellCheck: false, "aria-label": "Variable name", className: cn("min-w-0 flex-1 rounded-md border border-input bg-background px-2.5 py-1.5 font-mono text-xs text-foreground", "placeholder:text-muted-foreground-faint", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", "disabled:pointer-events-none disabled:opacity-50", isDuplicate && "border-warning") }), _jsx(SecretToggle, { checked: isSecret, disabled: disabled, onChange: (v) => onUpdate(id, { isSecret: v }) }), _jsx("button", { type: "button", onClick: () => onRemove(id), disabled: disabled, className: "shrink-0 rounded p-0.5 text-muted-foreground hover:text-destructive disabled:pointer-events-none disabled:opacity-50", "aria-label": `Remove ${removeLabel}`, children: _jsx(XIcon, {}) })] }), _jsx("div", { className: "relative", children: _jsx("input", { id: valInputId, type: isSecret ? "password" : "text", value: value, onChange: (e) => onUpdate(id, { value: e.target.value }), disabled: disabled, placeholder: isSecret ? "••••••••" : "value", autoComplete: "off", "aria-label": `Variable value${entryKey.trim() ? ` for ${entryKey.trim()}` : ""}`, className: cn("w-full rounded-md border border-input bg-background px-2.5 py-1.5 text-xs text-foreground", "placeholder:text-muted-foreground-faint", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", "disabled:pointer-events-none disabled:opacity-50") }) }), _jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx("button", { type: "button", role: "switch", "aria-checked": saveForFuture, "aria-label": saveForFuture ? "Saved for future runs" : "Used once only", disabled: disabled, onClick: () => onUpdate(id, { saveForFuture: !saveForFuture }), className: cn("relative inline-flex h-3.5 w-6 shrink-0 cursor-pointer rounded-full transition-colors", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1", "disabled:pointer-events-none disabled:opacity-50", saveForFuture ? "bg-primary" : "bg-input"), children: _jsx("span", { className: cn("pointer-events-none block h-2.5 w-2.5 translate-y-0.5 rounded-full bg-background shadow-sm ring-0 transition-transform", saveForFuture ? "translate-x-3" : "translate-x-0.5") }) }), _jsx("span", { className: "text-[0.6rem] text-muted-foreground", children: saveForFuture ? "Save for future runs" : "This run only" })] }), requiredBy && requiredBy.length > 0 && (_jsxs("p", { className: "text-[0.55rem] text-primary-muted", children: ["Used by: ", requiredBy.join(", ")] })), isDuplicate && (_jsx("p", { className: "text-[0.6rem] text-warning", role: "alert", children: "Duplicate key \u2014 last value wins." }))] }));
}
// ---------------------------------------------------------------------------
// Secret toggle (compact checkbox-style)
// ---------------------------------------------------------------------------
function SecretToggle({ checked, disabled, onChange, }) {
    return (_jsxs("button", { type: "button", role: "switch", "aria-checked": checked, "aria-label": checked ? "Marked as secret" : "Not marked as secret", disabled: disabled, onClick: () => onChange(!checked), className: cn("inline-flex shrink-0 items-center gap-0.5 rounded-md px-1.5 py-1 text-[0.55rem] font-medium uppercase tracking-wider transition-colors", "disabled:pointer-events-none disabled:opacity-50", checked
            ? "bg-primary-subtle text-primary"
            : "bg-muted-subtle text-muted-foreground hover:bg-muted"), children: [_jsx(LockIcon, {}), _jsx("span", { children: checked ? "secret" : "plain" })] }));
}
// ---------------------------------------------------------------------------
// Icons
// ---------------------------------------------------------------------------
function PlusIcon() {
    return (_jsx("svg", { width: "12", height: "12", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", "aria-hidden": "true", children: _jsx("path", { d: "M8 3v10M3 8h10" }) }));
}
function XIcon() {
    return (_jsx("svg", { width: "12", height: "12", viewBox: "0 0 14 14", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: _jsx("path", { d: "M4 4L10 10M10 4L4 10" }) }));
}
function LockIcon() {
    return (_jsxs("svg", { width: "8", height: "8", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [_jsx("rect", { x: "3", y: "8", width: "10", height: "7", rx: "1.5" }), _jsx("path", { d: "M5 8V5a3 3 0 0 1 6 0v3" })] }));
}
//# sourceMappingURL=SessionVariablesInput.js.map