"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { memo, useCallback, useState, useMemo } from "react";
const ERROR_POLICY_OPTIONS = [
    { value: "FOR_EACH_FAIL_FAST", label: "Fail fast", description: "Stop on first error, cancel in-flight iterations" },
    { value: "FOR_EACH_CONTINUE", label: "Continue", description: "Continue remaining iterations, collect failures in output" },
    { value: "FOR_EACH_SKIP", label: "Skip", description: "Skip failed items silently, exclude from output" },
];
/**
 * Iteration tab for for_each nodes.
 *
 * Displays:
 * - Variable name (each)
 * - Collection expression (in)
 * - Concurrency (max_parallelism)
 * - Batch size (when parallel)
 * - Error policy (on_error)
 * - Nested tasks (do block, read-only listing)
 *
 * @since T09 (Branch Management UX)
 */
export const IterationTab = memo(function IterationTab({ node, mutations, }) {
    const config = node.config;
    const currentValues = useMemo(() => ({
        each: config.each || "",
        in: config.in || "",
        max_parallelism: config.max_parallelism || 0,
        batch_size: config.batch_size || 0,
        on_error: config.on_error || "FOR_EACH_FAIL_FAST",
    }), [config.each, config.in, config.max_parallelism, config.batch_size, config.on_error]);
    const nestedTasks = useMemo(() => {
        const raw = config.do;
        if (!Array.isArray(raw))
            return [];
        return raw
            .filter((t) => t != null && typeof t === "object")
            .map((t) => ({
            name: t.name || "unnamed",
            kind: t.kind || "unknown",
        }));
    }, [config.do]);
    const [each, setEach] = useState(currentValues.each);
    const [inExpr, setInExpr] = useState(currentValues.in);
    const [parallelism, setParallelism] = useState(currentValues.max_parallelism);
    const [batchSize, setBatchSize] = useState(currentValues.batch_size);
    const [onError, setOnError] = useState(currentValues.on_error);
    const commitField = useCallback((field, value) => {
        mutations.onUpdateForEachConfig?.(node.id, { [field]: value });
    }, [mutations, node.id]);
    const handleEachBlur = useCallback(() => {
        const trimmed = each.trim();
        if (trimmed && trimmed !== currentValues.each) {
            commitField("each", trimmed);
        }
    }, [each, currentValues.each, commitField]);
    const handleInBlur = useCallback(() => {
        const trimmed = inExpr.trim();
        if (trimmed && trimmed !== currentValues.in) {
            commitField("in", trimmed);
        }
    }, [inExpr, currentValues.in, commitField]);
    const handleParallelismBlur = useCallback(() => {
        if (parallelism !== currentValues.max_parallelism) {
            commitField("max_parallelism", parallelism);
        }
    }, [parallelism, currentValues.max_parallelism, commitField]);
    const handleBatchSizeBlur = useCallback(() => {
        if (batchSize !== currentValues.batch_size) {
            commitField("batch_size", batchSize);
        }
    }, [batchSize, currentValues.batch_size, commitField]);
    const handleErrorPolicyChange = useCallback((value) => {
        setOnError(value);
        commitField("on_error", value);
    }, [commitField]);
    return (_jsxs("div", { className: "flex flex-col gap-4 px-3 py-3", children: [_jsxs("div", { children: [_jsx("label", { className: "mb-1 block text-[10px] font-medium text-[var(--stgm-muted-foreground,#737373)]", children: "Item variable name" }), _jsx("input", { type: "text", value: each, onChange: (e) => setEach(e.target.value), onBlur: handleEachBlur, onKeyDown: (e) => { if (e.key === "Enter")
                            handleEachBlur(); }, className: "w-full rounded border border-[var(--stgm-border,#e5e5e5)] bg-[var(--stgm-input-bg,var(--stgm-background,#fff))] px-2 py-1.5 text-xs font-mono text-[var(--stgm-foreground,#1a1a2e)] outline-none focus:ring-1 focus:ring-[var(--stgm-ring,#3b82f6)]", placeholder: "item" }), _jsxs("p", { className: "mt-0.5 text-[10px] text-[var(--stgm-muted-foreground,#737373)]", children: ["Access as ", _jsxs("code", { className: "font-mono", children: ["${", "$data.", each || "item", "}"] }), " in nested tasks"] })] }), _jsxs("div", { children: [_jsx("label", { className: "mb-1 block text-[10px] font-medium text-[var(--stgm-muted-foreground,#737373)]", children: "Collection expression" }), _jsx("input", { type: "text", value: inExpr, onChange: (e) => setInExpr(e.target.value), onBlur: handleInBlur, onKeyDown: (e) => { if (e.key === "Enter")
                            handleInBlur(); }, className: "w-full rounded border border-[var(--stgm-border,#e5e5e5)] bg-[var(--stgm-input-bg,var(--stgm-background,#fff))] px-2 py-1.5 text-xs font-mono text-[var(--stgm-foreground,#1a1a2e)] outline-none focus:ring-1 focus:ring-[var(--stgm-ring,#3b82f6)]", placeholder: "${ $data.items }" })] }), _jsxs("div", { children: [_jsx("label", { className: "mb-1 block text-[10px] font-medium text-[var(--stgm-muted-foreground,#737373)]", children: "Concurrency (max_parallelism)" }), _jsx("input", { type: "number", min: 0, value: parallelism, onChange: (e) => setParallelism(Math.max(0, parseInt(e.target.value) || 0)), onBlur: handleParallelismBlur, className: "w-full rounded border border-[var(--stgm-border,#e5e5e5)] bg-[var(--stgm-input-bg,var(--stgm-background,#fff))] px-2 py-1.5 text-xs text-[var(--stgm-foreground,#1a1a2e)] outline-none focus:ring-1 focus:ring-[var(--stgm-ring,#3b82f6)]" }), _jsx("p", { className: "mt-0.5 text-[10px] text-[var(--stgm-muted-foreground,#737373)]", children: parallelism === 0 ? "Sequential execution (one at a time)" : `Up to ${parallelism} iterations in parallel` })] }), parallelism > 0 && (_jsxs("div", { children: [_jsx("label", { className: "mb-1 block text-[10px] font-medium text-[var(--stgm-muted-foreground,#737373)]", children: "Batch size" }), _jsx("input", { type: "number", min: 0, value: batchSize, onChange: (e) => setBatchSize(Math.max(0, parseInt(e.target.value) || 0)), onBlur: handleBatchSizeBlur, className: "w-full rounded border border-[var(--stgm-border,#e5e5e5)] bg-[var(--stgm-input-bg,var(--stgm-background,#fff))] px-2 py-1.5 text-xs text-[var(--stgm-foreground,#1a1a2e)] outline-none focus:ring-1 focus:ring-[var(--stgm-ring,#3b82f6)]" }), _jsx("p", { className: "mt-0.5 text-[10px] text-[var(--stgm-muted-foreground,#737373)]", children: batchSize === 0 ? "No batching — all items available for parallel execution" : `Process ${batchSize} items per batch` })] })), parallelism > 0 && (_jsxs("fieldset", { children: [_jsx("legend", { className: "text-[10px] font-medium text-[var(--stgm-muted-foreground,#737373)] mb-1.5", children: "Error policy" }), _jsx("div", { className: "flex flex-col gap-1.5", children: ERROR_POLICY_OPTIONS.map((opt) => (_jsxs("label", { className: "flex items-start gap-2 text-[11px] text-[var(--stgm-foreground,#1a1a2e)] cursor-pointer", children: [_jsx("input", { type: "radio", name: `error-policy-${node.id}`, value: opt.value, checked: onError === opt.value, onChange: () => handleErrorPolicyChange(opt.value), className: "mt-0.5 h-3 w-3 accent-[var(--stgm-primary,#6366f1)]" }), _jsxs("span", { children: [_jsx("span", { className: "font-medium", children: opt.label }), _jsx("br", {}), _jsx("span", { className: "text-[10px] text-[var(--stgm-muted-foreground,#737373)]", children: opt.description })] })] }, opt.value))) })] })), _jsxs("section", { children: [_jsxs("h3", { className: "text-xs font-semibold text-[var(--stgm-foreground,#1a1a2e)] mb-1.5", children: ["Loop body (", nestedTasks.length, " ", nestedTasks.length === 1 ? "task" : "tasks", ")"] }), nestedTasks.length === 0 ? (_jsx("p", { className: "text-[11px] text-[var(--stgm-muted-foreground,#737373)]", children: "No tasks in loop body." })) : (_jsx("div", { className: "flex flex-col gap-1", children: nestedTasks.map((task, idx) => (_jsxs("div", { className: "flex items-center gap-2 rounded border border-[var(--stgm-border,#e5e5e5)] px-2 py-1", children: [_jsx("span", { className: "text-[10px] font-mono text-[var(--stgm-muted-foreground,#737373)]", children: task.kind }), _jsx("span", { className: "text-[11px] text-[var(--stgm-foreground,#1a1a2e)] truncate", children: task.name })] }, `${task.name}-${idx}`))) }))] })] }));
});
//# sourceMappingURL=IterationTab.js.map