"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useId } from "react";
import { cn } from "@stigmer/theme";
const INPUT_CLASSES = cn("w-full rounded-md border border-input bg-background px-2.5 py-1.5 text-sm text-foreground", "placeholder:text-muted-foreground", "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring", "disabled:pointer-events-none disabled:opacity-50");
/**
 * Form fields for running a workflow execution.
 *
 * Renders auto-generated environment variable fields from the workflow's
 * `spec.env` declarations, an instance selector (hidden when 0-1 instances
 * exist), and a conditionally-visible trigger message textarea.
 *
 * Field ordering prioritizes required inputs (env vars) over optional
 * contextual fields (trigger message), following progressive disclosure.
 *
 * This component is presentational — it does not manage state or
 * submit. Pair with {@link useRunWorkflowFlow} for the full
 * behavior, or wire the props manually for custom integrations.
 *
 * All visuals flow through `--stgm-*` design tokens. Zero Console
 * dependencies — safe for platform builder embedding.
 *
 * @example
 * ```tsx
 * const flow = useRunWorkflowFlow({ ... });
 *
 * <WorkflowRunForm
 *   triggerMessage={flow.triggerMessage}
 *   onTriggerMessageChange={flow.setTriggerMessage}
 *   envDeclarations={flow.envDeclarations}
 *   runtimeEnv={flow.runtimeEnv}
 *   onEnvVarChange={flow.setEnvVar}
 *   instances={instances}
 *   selectedInstanceId={flow.selectedInstanceId}
 *   onInstanceChange={flow.setSelectedInstanceId}
 *   showTriggerMessage={flow.showTriggerMessage}
 *   onShowTriggerMessageChange={flow.setShowTriggerMessage}
 *   errors={flow.fieldErrors}
 *   disabled={flow.isSubmitting}
 * />
 * ```
 */
export function WorkflowRunForm({ triggerMessage, onTriggerMessageChange, envDeclarations, runtimeEnv, onEnvVarChange, instances, selectedInstanceId, onInstanceChange, defaultInstanceId, instanceEnvKeys, showTriggerMessage, onShowTriggerMessageChange, errors, disabled, className, }) {
    const formId = useId();
    const envEntries = Object.entries(envDeclarations);
    const userInstances = defaultInstanceId
        ? instances.filter((i) => i.metadata?.id !== defaultInstanceId)
        : instances;
    const showInstanceSelector = defaultInstanceId
        ? userInstances.length >= 1
        : instances.length > 1;
    return (_jsxs("div", { className: cn("flex flex-col gap-4", className), children: [showInstanceSelector && (_jsxs(FieldGroup, { children: [_jsx(FieldLabel, { htmlFor: `${formId}-instance`, children: "Instance" }), _jsxs("select", { id: `${formId}-instance`, value: selectedInstanceId ?? "", onChange: (e) => onInstanceChange(e.target.value || null), disabled: disabled, className: INPUT_CLASSES, children: [_jsx("option", { value: "", children: "Default (no specific configuration)" }), userInstances.map((inst) => {
                                const envCount = inst.spec?.environmentRefs?.length ?? 0;
                                const envSuffix = envCount > 0 ? ` (${envCount} env${envCount > 1 ? "s" : ""})` : "";
                                return (_jsxs("option", { value: inst.metadata?.id ?? "", children: [inst.metadata?.name || inst.metadata?.slug || inst.metadata?.id, envSuffix] }, inst.metadata?.id));
                            })] })] })), envEntries.length > 0 && (_jsxs("div", { className: "flex flex-col gap-3", children: [_jsx("h4", { className: "text-xs font-medium text-muted-foreground", children: "Environment Variables" }), envEntries.map(([key, decl]) => {
                        const fieldId = `${formId}-env-${key}`;
                        const fieldError = errors[key];
                        const satisfiedByInstance = instanceEnvKeys?.has(key) ?? false;
                        const isRequired = !decl.optional && !satisfiedByInstance;
                        return (_jsxs(FieldGroup, { children: [_jsxs(FieldLabel, { htmlFor: fieldId, children: [_jsx("code", { className: "text-xs", children: key }), isRequired && (_jsx("span", { className: "ml-1 text-destructive", "aria-label": "required", children: "*" }))] }), _jsx("input", { id: fieldId, type: decl.isSecret ? "password" : "text", value: runtimeEnv[key] ?? "", onChange: (e) => onEnvVarChange(key, e.target.value), placeholder: satisfiedByInstance
                                        ? "Provided by instance"
                                        : decl.optional
                                            ? "Optional"
                                            : "Required", disabled: disabled, "aria-invalid": !!fieldError, "aria-describedby": fieldError
                                        ? `${fieldId}-error`
                                        : decl.description || satisfiedByInstance
                                            ? `${fieldId}-desc`
                                            : undefined, className: cn(INPUT_CLASSES, fieldError && "border-destructive focus-visible:ring-destructive") }), satisfiedByInstance && !fieldError && (_jsxs(FieldHint, { id: `${fieldId}-desc`, children: ["Provided by instance environment.", " ", decl.description
                                            ? `${decl.description} `
                                            : "", "Enter a value to override."] })), !satisfiedByInstance && decl.description && !fieldError && (_jsx(FieldHint, { id: `${fieldId}-desc`, children: decl.description })), fieldError && (_jsx("p", { id: `${fieldId}-error`, className: "text-[0.7rem] text-destructive", role: "alert", children: fieldError }))] }, key));
                    })] })), showTriggerMessage ? (_jsxs(FieldGroup, { children: [_jsx(FieldLabel, { htmlFor: `${formId}-trigger`, children: "Trigger Input" }), _jsx("textarea", { id: `${formId}-trigger`, value: triggerMessage, onChange: (e) => onTriggerMessageChange(e.target.value), placeholder: "Optional message or JSON payload to trigger the workflow", disabled: disabled, rows: 3, className: cn(INPUT_CLASSES, "resize-y") }), _jsxs(FieldHint, { children: ["Accessible in the workflow as", " ", _jsx("code", { className: "text-[0.7rem]", children: "${ $input }" })] })] })) : (_jsx("button", { type: "button", onClick: () => onShowTriggerMessageChange(true), disabled: disabled, className: cn("self-start text-[0.7rem] text-muted-foreground underline-offset-2 hover:text-foreground hover:underline", "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:rounded-sm", "disabled:pointer-events-none disabled:opacity-50"), children: "+ Add trigger input" }))] }));
}
// ---------------------------------------------------------------------------
// Shared form primitives (internal to this file)
// ---------------------------------------------------------------------------
function FieldGroup({ children, }) {
    return _jsx("div", { className: "flex flex-col gap-1", children: children });
}
function FieldLabel({ htmlFor, children, }) {
    return (_jsx("label", { htmlFor: htmlFor, className: "text-xs font-medium text-foreground", children: children }));
}
function FieldHint({ id, children, }) {
    return (_jsx("p", { id: id, className: "text-[0.7rem] text-muted-foreground", children: children }));
}
//# sourceMappingURL=WorkflowRunForm.js.map