"use client";
import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
import { memo, useCallback, useMemo, useState } from "react";
/**
 * Catch tab for try_catch nodes.
 *
 * Displays:
 * - Protected tasks list (try block, read-only)
 * - Catch configuration (error variable, compensate toggle)
 * - Catch tasks list
 * - Remove catch handler action
 *
 * @since T09 (Branch Management UX)
 */
export const CatchTab = memo(function CatchTab({ node, mutations }) {
    const config = node.config;
    const tryTasks = useMemo(() => {
        const raw = config.try;
        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.try]);
    const catchBlock = useMemo(() => {
        const raw = config.catch;
        if (!raw || typeof raw !== "object")
            return null;
        const block = raw;
        return {
            as: block.as || "error",
            compensate: block.compensate === true,
            tasks: Array.isArray(block.do)
                ? block.do
                    .filter((t) => t != null && typeof t === "object")
                    .map((t) => ({
                    name: t.name || "unnamed",
                    kind: t.kind || "unknown",
                }))
                : [],
        };
    }, [config.catch]);
    const [errorVar, setErrorVar] = useState(catchBlock?.as ?? "error");
    const handleErrorVarBlur = useCallback(() => {
        const trimmed = errorVar.trim();
        if (trimmed && trimmed !== catchBlock?.as) {
            mutations.onUpdateCatchConfig?.(node.id, { as: trimmed });
        }
    }, [errorVar, catchBlock?.as, mutations, node.id]);
    const handleCompensateToggle = useCallback((e) => {
        mutations.onUpdateCatchConfig?.(node.id, { compensate: e.target.checked });
    }, [mutations, node.id]);
    const handleRemoveCatch = useCallback(() => {
        mutations.onRemoveCatchBlock?.(node.id);
    }, [mutations, node.id]);
    return (_jsxs("div", { className: "flex flex-col gap-4 px-3 py-3", children: [_jsxs("section", { children: [_jsxs("h3", { className: "text-xs font-semibold text-[var(--stgm-foreground,#1a1a2e)] mb-1.5", children: ["Protected tasks (", tryTasks.length, ")"] }), tryTasks.length === 0 ? (_jsx("p", { className: "text-[11px] text-[var(--stgm-muted-foreground,#737373)]", children: "No tasks in the try block." })) : (_jsx("div", { className: "flex flex-col gap-1", children: tryTasks.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}`))) }))] }), catchBlock ? (_jsxs("section", { children: [_jsx("h3", { className: "text-xs font-semibold text-[var(--stgm-foreground,#1a1a2e)] mb-1.5", children: "Catch handler" }), _jsxs("div", { className: "flex flex-col gap-2.5", children: [_jsxs("div", { children: [_jsx("label", { className: "mb-1 block text-[10px] font-medium text-[var(--stgm-muted-foreground,#737373)]", children: "Error variable name" }), _jsx("input", { type: "text", value: errorVar, onChange: (e) => setErrorVar(e.target.value), onBlur: handleErrorVarBlur, onKeyDown: (e) => { if (e.key === "Enter")
                                            handleErrorVarBlur(); }, 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: "error" }), _jsxs("p", { className: "mt-0.5 text-[10px] text-[var(--stgm-muted-foreground,#737373)]", children: ["Access in catch block as ", _jsxs("code", { className: "font-mono", children: ["$", "${", "$context.", errorVar, "}"] })] })] }), _jsxs("label", { className: "flex items-center gap-2 text-[11px] text-[var(--stgm-foreground,#1a1a2e)] cursor-pointer", children: [_jsx("input", { type: "checkbox", checked: catchBlock.compensate, onChange: handleCompensateToggle, className: "h-3 w-3 accent-[var(--stgm-primary,#6366f1)]" }), "Run compensation before catch block"] }), _jsxs("div", { children: [_jsxs("h4", { className: "text-[10px] font-medium text-[var(--stgm-muted-foreground,#737373)] mb-1", children: ["Catch tasks (", catchBlock.tasks.length, ")"] }), catchBlock.tasks.length === 0 ? (_jsx("p", { className: "text-[10px] text-[var(--stgm-muted-foreground,#737373)] italic", children: "No tasks in catch block" })) : (_jsx("div", { className: "flex flex-col gap-1", children: catchBlock.tasks.map((task, idx) => (_jsxs("div", { className: "flex items-center gap-2 rounded border border-dashed 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}`))) }))] }), _jsx("button", { type: "button", onClick: handleRemoveCatch, className: "mt-1 w-full rounded border border-[var(--stgm-destructive,#ef4444)]/30 px-2 py-1.5 text-[11px] font-medium text-[var(--stgm-destructive,#ef4444)] transition-colors hover:bg-[var(--stgm-destructive,#ef4444)]/10", children: "Remove catch handler" })] })] })) : (_jsx("section", { children: _jsx("p", { className: "text-[11px] text-[var(--stgm-muted-foreground,#737373)]", children: "No catch handler configured. Add one using the + button on the node." }) }))] }));
});
//# sourceMappingURL=CatchTab.js.map