"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { memo, useCallback, useEffect, useMemo, useRef } from "react";
import { ReactFlow, Controls, Background, BackgroundVariant, MarkerType, useReactFlow, ReactFlowProvider, } from "@xyflow/react";
import { cn } from "@stigmer/theme";
import { WorkflowNode } from "./WorkflowNode";
import { CanvasTransitionEdge } from "./CanvasTransitionEdge";
import { CANVAS_TASK_NODE_TYPE, CANVAS_TRANSITION_EDGE_TYPE } from "./workflow-graph-conversions";
import { WorkflowGraphModeProvider } from "./WorkflowGraphModeContext";
import { useWorkflowDiffGraph } from "./useWorkflowDiffGraph";
import { DiffSummaryBar } from "./diff";
const nodeTypes = {
    [CANVAS_TASK_NODE_TYPE]: WorkflowNode,
};
const edgeTypes = {
    [CANVAS_TRANSITION_EDGE_TYPE]: CanvasTransitionEdge,
};
const defaultEdgeOptions = {
    markerEnd: { type: MarkerType.ArrowClosed, width: 16, height: 16 },
};
/**
 * Read-only visual diff graph canvas for comparing two workflow versions.
 *
 * Reuses the same `WorkflowNode` / `NodeShell` rendering system from the
 * visual editor, wrapped in diff mode context to show change badges and
 * status highlighting instead of editing affordances.
 *
 * Follows the `WorkflowExecutionGraph` outer/inner pattern with
 * `ReactFlowProvider`.
 *
 * @since T14 (AI-Assisted Workflow Creation)
 */
export const WorkflowDiffGraph = memo(function WorkflowDiffGraph(props) {
    return (_jsx(ReactFlowProvider, { children: _jsx(WorkflowDiffGraphInner, { ...props }) }));
});
function WorkflowDiffGraphInner({ beforeYaml, afterYaml, onTaskClick, className, }) {
    const { nodes, edges, diff, error, selectedTaskName, setSelectedTaskName, } = useWorkflowDiffGraph({ beforeYaml, afterYaml });
    const { fitView } = useReactFlow();
    const didFitRef = useRef(false);
    useEffect(() => {
        if (nodes.length > 0 && !didFitRef.current) {
            didFitRef.current = true;
            setTimeout(() => fitView({ padding: 0.15, duration: 300 }), 50);
        }
    }, [nodes.length, fitView]);
    const handleNodeClick = useCallback((_event, node) => {
        const data = node.data;
        if (data.isSentinel)
            return;
        const name = data.taskName;
        const next = name === selectedTaskName ? null : name;
        setSelectedTaskName(next);
        if (next && onTaskClick && diff) {
            const entry = diff.nodes.get(node.id);
            if (entry)
                onTaskClick(next, entry);
        }
    }, [selectedTaskName, setSelectedTaskName, onTaskClick, diff]);
    const handlePaneClick = useCallback(() => {
        setSelectedTaskName(null);
    }, [setSelectedTaskName]);
    const nodesWithSelection = useMemo(() => nodes.map((n) => ({
        ...n,
        selected: n.data.taskName === selectedTaskName,
    })), [nodes, selectedTaskName]);
    if (error) {
        return (_jsx("div", { className: cn("flex h-full flex-col items-center justify-center gap-2 px-6 text-center", className), children: _jsx("p", { className: "text-sm text-[var(--stgm-muted-foreground,#737373)]", children: error }) }));
    }
    if (nodes.length === 0) {
        return (_jsx("div", { className: cn("flex h-full items-center justify-center text-sm text-[var(--stgm-muted-foreground,#737373)]", className), children: "No changes to display" }));
    }
    return (_jsx(WorkflowGraphModeProvider, { mode: "diff", children: _jsxs("div", { className: cn("relative h-full w-full", className), children: [diff && (_jsx("div", { className: "absolute left-3 top-3 z-50", children: _jsx(DiffSummaryBar, { diff: diff }) })), _jsxs(ReactFlow, { nodes: nodesWithSelection, edges: edges, nodeTypes: nodeTypes, edgeTypes: edgeTypes, defaultEdgeOptions: defaultEdgeOptions, onNodeClick: handleNodeClick, onPaneClick: handlePaneClick, nodesDraggable: false, nodesConnectable: false, elementsSelectable: true, panOnDrag: true, zoomOnScroll: true, fitView: false, minZoom: 0.2, maxZoom: 2, proOptions: { hideAttribution: true }, children: [_jsx(Background, { variant: BackgroundVariant.Dots, gap: 16, size: 1 }), _jsx(Controls, { showInteractive: false })] })] }) }));
}
//# sourceMappingURL=WorkflowDiffGraph.js.map