"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { memo, useState, useCallback, useMemo } from "react";
const inputClass = "w-full rounded-md border border-[var(--stgm-border,#d4d4d8)] bg-[var(--stgm-background,#fff)] px-2 py-1.5 text-xs text-[var(--stgm-foreground,#1a1a2e)] placeholder:text-[var(--stgm-muted-foreground,#a3a3a3)] focus:outline-none focus:ring-1 focus:ring-[var(--stgm-ring,#3b82f6)]";
/**
 * Specialized configuration form for `agent_call` tasks.
 *
 * Organizes agent-specific fields into semantic sections: Agent identity,
 * harness selection, message prompt, environment variables, execution
 * config (model, timeout, temperature, cost cap), and structured output.
 *
 * Composes primitive field controls rather than rendering a generic
 * schema form — following the research report guidance that "the forms
 * should educate the user about the semantics of each step."
 *
 * @since T10 (Inspector Panel Refactor)
 */
export const AgentCallForm = memo(function AgentCallForm({ node, onFieldChange, }) {
    const config = node.config;
    const execConfig = (config.config ?? {});
    const outputContract = (config.output ?? {});
    const hasOutput = Object.keys(outputContract).length > 0;
    const [showOutput, setShowOutput] = useState(hasOutput);
    const handleChange = useCallback((field, value) => {
        onFieldChange(field, value === "" ? undefined : value);
    }, [onFieldChange]);
    const handleExecConfigChange = useCallback((field, value) => {
        onFieldChange("config", {
            ...execConfig,
            [field]: value === "" ? undefined : value,
        });
    }, [execConfig, onFieldChange]);
    const handleOutputChange = useCallback((field, value) => {
        onFieldChange("output", {
            ...outputContract,
            [field]: value === "" ? undefined : value,
        });
    }, [outputContract, onFieldChange]);
    const toggleOutput = useCallback(() => {
        if (showOutput) {
            onFieldChange("output", undefined);
            setShowOutput(false);
        }
        else {
            setShowOutput(true);
        }
    }, [showOutput, onFieldChange]);
    const envEntries = useMemo(() => {
        const env = config.env;
        if (!env || typeof env !== "object" || Array.isArray(env))
            return [];
        return Object.entries(env);
    }, [config.env]);
    return (_jsxs("div", { className: "flex flex-col gap-4 px-3 py-3", children: [_jsxs("section", { className: "flex flex-col gap-2", children: [_jsx(SectionLabel, { children: "Agent" }), _jsx(FieldRow, { label: "Agent", hint: 'Slug or "org/slug" format', required: true, children: _jsx("input", { type: "text", value: typeof config.agent === "string" ? config.agent : "", onChange: (e) => handleChange("agent", e.target.value), placeholder: "e.g., code-reviewer or acme/analyst", className: inputClass, "data-testid": "agent-call-agent-input" }) }), _jsx(FieldRow, { label: "Harness", hint: "Execution engine for this agent call", children: _jsxs("div", { className: "flex gap-3", children: [_jsxs("label", { className: "flex items-center gap-1.5 text-xs", children: [_jsx("input", { type: "radio", name: `${node.id}-harness`, checked: !config.harness || config.harness === "HARNESS_NATIVE" || config.harness === "native", onChange: () => handleChange("harness", undefined), className: "h-3.5 w-3.5 border-[var(--stgm-border,#d4d4d8)] text-[var(--stgm-primary,#6366f1)]" }), "Native"] }), _jsxs("label", { className: "flex items-center gap-1.5 text-xs", children: [_jsx("input", { type: "radio", name: `${node.id}-harness`, checked: config.harness === "cursor" || config.harness === "HARNESS_CURSOR", onChange: () => handleChange("harness", "cursor"), className: "h-3.5 w-3.5 border-[var(--stgm-border,#d4d4d8)] text-[var(--stgm-primary,#6366f1)]" }), "Cursor"] })] }) })] }), _jsxs("section", { className: "flex flex-col gap-2", children: [_jsx(SectionLabel, { children: "Message" }), _jsx(FieldRow, { label: "Prompt", hint: "Instructions sent to the agent. Supports ${ } expressions.", required: true, children: _jsx("textarea", { value: typeof config.message === "string" ? config.message : "", onChange: (e) => handleChange("message", e.target.value), placeholder: "Analyze this data: ${ $context.fetchData.body }", rows: 4, className: `${inputClass} resize-y font-mono border-[var(--stgm-chart-purple,#8b5cf6)]/40`, "data-testid": "agent-call-message-input" }) })] }), envEntries.length > 0 && (_jsxs("section", { className: "flex flex-col gap-2", children: [_jsx(SectionLabel, { children: "Environment" }), _jsx("div", { className: "flex flex-col gap-1.5", children: envEntries.map(([key, val]) => (_jsxs("div", { className: "flex items-start gap-1", children: [_jsx("input", { type: "text", value: key, readOnly: true, className: `${inputClass} w-1/3 bg-[var(--stgm-muted,#f5f5f5)]` }), _jsx("input", { type: "text", value: typeof val === "string" ? val : "", onChange: (e) => {
                                        const env = { ...(config.env ?? {}) };
                                        env[key] = e.target.value || undefined;
                                        handleChange("env", env);
                                    }, placeholder: "value", className: `${inputClass} flex-1` })] }, key))) })] })), _jsxs("section", { className: "flex flex-col gap-2", children: [_jsx(SectionLabel, { children: "Execution" }), _jsx(FieldRow, { label: "Model", hint: "Override the agent's default model", children: _jsx("input", { type: "text", value: typeof execConfig.model === "string" ? execConfig.model : "", onChange: (e) => handleExecConfigChange("model", e.target.value), placeholder: "Agent default", className: inputClass, "data-testid": "agent-call-model-input" }) }), _jsx(FieldRow, { label: "Timeout", hint: "Seconds (1\u20133600)", children: _jsx("input", { type: "number", value: typeof execConfig.timeout === "number" ? execConfig.timeout : "", onChange: (e) => handleExecConfigChange("timeout", e.target.value ? parseInt(e.target.value, 10) : undefined), placeholder: "300", min: 1, max: 3600, className: inputClass }) }), _jsx(FieldRow, { label: "Temperature", hint: "0.0 (deterministic) to 1.0 (creative)", children: _jsx("input", { type: "number", value: typeof execConfig.temperature === "number" ? execConfig.temperature : "", onChange: (e) => handleExecConfigChange("temperature", e.target.value ? parseFloat(e.target.value) : undefined), placeholder: "0.7", min: 0, max: 1, step: 0.1, className: inputClass }) }), _jsx(FieldRow, { label: "Max cost", hint: "Per-task cap in micro-USD (1 USD = 1,000,000)", children: _jsx("input", { type: "number", value: typeof execConfig.max_cost_micros === "number" ? execConfig.max_cost_micros : "", onChange: (e) => handleExecConfigChange("max_cost_micros", e.target.value ? parseInt(e.target.value, 10) : undefined), placeholder: "No limit", min: 0, className: inputClass }) })] }), _jsxs("section", { className: "flex flex-col gap-2", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(SectionLabel, { children: "Structured output" }), _jsxs("label", { className: "flex cursor-pointer items-center gap-1.5", children: [_jsx("input", { type: "checkbox", checked: showOutput, onChange: toggleOutput, className: "h-3.5 w-3.5 rounded border-[var(--stgm-border,#d4d4d8)] text-[var(--stgm-primary,#6366f1)]" }), _jsx("span", { className: "text-[10px] text-[var(--stgm-muted-foreground,#737373)]", children: showOutput ? "Enabled" : "Disabled" })] })] }), showOutput && (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(FieldRow, { label: "Schema", hint: "JSON Schema for the agent's structured response", children: _jsx(OutputSchemaEditor, { value: outputContract.schema, onChange: (v) => handleOutputChange("schema", v) }) }), _jsx(FieldRow, { label: "On invalid", hint: "Policy when output fails schema validation", children: _jsxs("select", { value: typeof outputContract.on_invalid === "string" ? outputContract.on_invalid : "", onChange: (e) => handleOutputChange("on_invalid", e.target.value || undefined), className: inputClass, children: [_jsx("option", { value: "", children: "Fail (default)" }), _jsx("option", { value: "ON_INVALID_RETRY", children: "Retry" }), _jsx("option", { value: "ON_INVALID_FALLBACK", children: "Fallback" })] }) }), (outputContract.on_invalid === "ON_INVALID_RETRY") && (_jsx(FieldRow, { label: "Max retries", hint: "1\u20135 attempts", children: _jsx("input", { type: "number", value: typeof outputContract.max_retries === "number" ? outputContract.max_retries : "", onChange: (e) => handleOutputChange("max_retries", e.target.value ? parseInt(e.target.value, 10) : undefined), placeholder: "1", min: 1, max: 5, className: inputClass }) })), _jsx(FieldRow, { label: "Fallback task", hint: "Task to branch to if validation fails", children: _jsx("input", { type: "text", value: typeof outputContract.fallback_task === "string" ? outputContract.fallback_task : "", onChange: (e) => handleOutputChange("fallback_task", e.target.value || undefined), placeholder: "Optional", className: inputClass }) })] }))] })] }));
});
// ---------------------------------------------------------------------------
// Output schema editor (JSON textarea with parse validation)
// ---------------------------------------------------------------------------
function OutputSchemaEditor({ value, onChange, }) {
    const strValue = value != null ? JSON.stringify(value, null, 2) : "";
    const [localValue, setLocalValue] = useState(strValue);
    const [parseError, setParseError] = useState(null);
    const handleChange = useCallback((e) => {
        const raw = e.target.value;
        setLocalValue(raw);
        if (!raw.trim()) {
            setParseError(null);
            onChange(undefined);
            return;
        }
        try {
            const parsed = JSON.parse(raw);
            setParseError(null);
            onChange(parsed);
        }
        catch {
            setParseError("Invalid JSON Schema");
        }
    }, [onChange]);
    return (_jsxs("div", { className: "flex flex-col gap-0.5", children: [_jsx("textarea", { value: localValue, onChange: handleChange, rows: 5, className: `${inputClass} resize-y font-mono text-[11px]`, placeholder: '{ "type": "object", "properties": { ... } }' }), parseError && (_jsx("span", { className: "text-[10px] text-[var(--stgm-destructive,#ef4444)]", children: parseError }))] }));
}
// ---------------------------------------------------------------------------
// Shared
// ---------------------------------------------------------------------------
function SectionLabel({ children }) {
    return (_jsx("h4", { className: "text-[11px] font-semibold uppercase tracking-wide text-[var(--stgm-muted-foreground,#737373)]", children: children }));
}
function FieldRow({ label, hint, required, children, }) {
    return (_jsxs("div", { className: "flex flex-col gap-1", children: [_jsxs("label", { className: "flex items-center gap-1 text-[11px] font-medium text-[var(--stgm-foreground,#1a1a2e)]", children: [label, required && _jsx("span", { className: "text-[var(--stgm-destructive,#ef4444)]", "aria-label": "required", children: "*" })] }), hint && (_jsx("p", { className: "text-[10px] leading-tight text-[var(--stgm-muted-foreground,#737373)]", children: hint })), children] }));
}
//# sourceMappingURL=AgentCallForm.js.map