"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { memo, useState, useCallback, useMemo } from "react";
const HTTP_METHODS = ["GET", "POST", "PUT", "DELETE", "PATCH"];
const BODY_METHODS = new Set(["POST", "PUT", "PATCH"]);
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 `http_call` tasks.
 *
 * Organizes HTTP-specific fields into semantic sections: method + URL,
 * headers, request body, and timeout. Body section is only visible
 * for methods that support a request body (POST, PUT, PATCH).
 *
 * @since T10 (Inspector Panel Refactor)
 */
export const HttpCallForm = memo(function HttpCallForm({ node, onFieldChange, }) {
    const config = node.config;
    const endpoint = (config.endpoint ?? {});
    const method = typeof config.method === "string" ? config.method : "GET";
    const showBody = BODY_METHODS.has(method);
    const handleChange = useCallback((field, value) => {
        onFieldChange(field, value === "" ? undefined : value);
    }, [onFieldChange]);
    const handleEndpointChange = useCallback((field, value) => {
        onFieldChange("endpoint", {
            ...endpoint,
            [field]: value === "" ? undefined : value,
        });
    }, [endpoint, onFieldChange]);
    const headers = useMemo(() => {
        const h = config.headers;
        if (!h || typeof h !== "object" || Array.isArray(h))
            return {};
        return h;
    }, [config.headers]);
    const headerEntries = useMemo(() => Object.entries(headers), [headers]);
    const handleHeaderChange = useCallback((oldKey, newKey, value) => {
        const result = {};
        for (const [k, v] of Object.entries(headers)) {
            if (k === oldKey) {
                result[newKey] = value;
            }
            else {
                result[k] = v;
            }
        }
        handleChange("headers", Object.keys(result).length > 0 ? result : undefined);
    }, [headers, handleChange]);
    const addHeader = useCallback(() => {
        handleChange("headers", { ...headers, "": "" });
    }, [headers, handleChange]);
    const removeHeader = useCallback((key) => {
        const { [key]: _, ...rest } = headers;
        handleChange("headers", Object.keys(rest).length > 0 ? rest : undefined);
    }, [headers, handleChange]);
    const [bodyValue, setBodyValue] = useState(config.body != null ? JSON.stringify(config.body, null, 2) : "");
    const [bodyError, setBodyError] = useState(null);
    const handleBodyChange = useCallback((e) => {
        const raw = e.target.value;
        setBodyValue(raw);
        if (!raw.trim()) {
            setBodyError(null);
            handleChange("body", undefined);
            return;
        }
        try {
            const parsed = JSON.parse(raw);
            setBodyError(null);
            handleChange("body", parsed);
        }
        catch {
            setBodyError("Invalid JSON");
        }
    }, [handleChange]);
    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: "Request" }), _jsxs("div", { className: "flex gap-2", children: [_jsx("select", { value: method, onChange: (e) => handleChange("method", e.target.value), className: `${inputClass} w-24 shrink-0`, "data-testid": "http-call-method-select", children: HTTP_METHODS.map((m) => (_jsx("option", { value: m, children: m }, m))) }), _jsx("input", { type: "text", value: typeof endpoint.uri === "string" ? endpoint.uri : "", onChange: (e) => handleEndpointChange("uri", e.target.value), placeholder: "https://api.example.com/data", className: `${inputClass} flex-1 font-mono border-[var(--stgm-chart-purple,#8b5cf6)]/40`, "data-testid": "http-call-url-input" })] })] }), _jsxs("section", { className: "flex flex-col gap-2", children: [_jsx(SectionLabel, { children: "Headers" }), headerEntries.length > 0 && (_jsx("div", { className: "flex flex-col gap-1.5", children: headerEntries.map(([key, val], idx) => (_jsxs("div", { className: "flex items-start gap-1", children: [_jsx("input", { type: "text", value: key, onChange: (e) => handleHeaderChange(key, e.target.value, val), placeholder: "Header name", className: `${inputClass} w-2/5` }), _jsx("input", { type: "text", value: typeof val === "string" ? val : "", onChange: (e) => handleHeaderChange(key, key, e.target.value), placeholder: "Value", className: `${inputClass} flex-1` }), _jsx("button", { type: "button", onClick: () => removeHeader(key), className: "mt-1 text-[10px] text-[var(--stgm-destructive,#ef4444)] hover:underline", "aria-label": `Remove header ${key}`, children: "\u2715" })] }, idx))) })), _jsx("button", { type: "button", onClick: addHeader, className: "self-start text-[11px] font-medium text-[var(--stgm-primary,#6366f1)] hover:underline", children: "+ Add header" })] }), showBody && (_jsxs("section", { className: "flex flex-col gap-2", children: [_jsx(SectionLabel, { children: "Body" }), _jsxs("div", { className: "flex flex-col gap-0.5", children: [_jsx("textarea", { value: bodyValue, onChange: handleBodyChange, rows: 5, className: `${inputClass} resize-y font-mono text-[11px]`, placeholder: '{ "key": "value" }', "data-testid": "http-call-body-input" }), bodyError && (_jsx("span", { className: "text-[10px] text-[var(--stgm-destructive,#ef4444)]", children: bodyError }))] })] })), _jsxs("section", { className: "flex flex-col gap-2", children: [_jsx(SectionLabel, { children: "Settings" }), _jsx(FieldRow, { label: "Timeout", hint: "Seconds (1\u2013300)", children: _jsx("input", { type: "number", value: typeof config.timeout_seconds === "number" ? config.timeout_seconds : "", onChange: (e) => handleChange("timeout_seconds", e.target.value ? parseInt(e.target.value, 10) : undefined), placeholder: "30", min: 1, max: 300, className: inputClass }) })] })] }));
});
// ---------------------------------------------------------------------------
// 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, children, }) {
    return (_jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("label", { className: "text-[11px] font-medium text-[var(--stgm-foreground,#1a1a2e)]", children: label }), hint && (_jsx("p", { className: "text-[10px] leading-tight text-[var(--stgm-muted-foreground,#737373)]", children: hint })), children] }));
}
//# sourceMappingURL=HttpCallForm.js.map