"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { memo, useEffect, useMemo, useRef } from "react";
import { ReactFlow, Controls, MiniMap, Background, BackgroundVariant, MarkerType, useReactFlow, ReactFlowProvider, } from "@xyflow/react";
import { cn } from "@stigmer/theme";
import { WorkflowNode } from "./WorkflowNode.js";
import { CanvasTransitionEdge } from "./CanvasTransitionEdge.js";
import { CANVAS_TASK_NODE_TYPE, CANVAS_TRANSITION_EDGE_TYPE, yamlToGraph, toReactFlowElements, } from "./workflow-graph-conversions.js";
import { applyDagreLayout } from "./layout/index.js";
import { WorkflowGraphModeProvider } from "./WorkflowGraphModeContext.js";
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 React Flow graph preview for the code-mode editor side panel.
 *
 * Accepts YAML directly (unlike `WorkflowOverviewGraph` which requires
 * a `Workflow` proto). Uses the unified `WorkflowNode` / `CanvasTransitionEdge`
 * rendering system in `"overview"` mode for DD-001 consistency.
 */
export const WorkflowCodePreviewGraph = memo(function WorkflowCodePreviewGraph(props) {
    return (_jsx(ReactFlowProvider, { children: _jsx(WorkflowCodePreviewGraphInner, { ...props }) }));
});
function WorkflowCodePreviewGraphInner({ yaml, className, }) {
    const { nodes, edges } = useYamlToReactFlow(yaml);
    const { fitView } = useReactFlow();
    const didFitRef = useRef(false);
    const prevCountRef = useRef(0);
    useEffect(() => {
        if (nodes.length > 0 && nodes.length !== prevCountRef.current) {
            prevCountRef.current = nodes.length;
            setTimeout(() => fitView({ padding: 0.15, duration: 200 }), 50);
        }
        else if (nodes.length > 0 && !didFitRef.current) {
            didFitRef.current = true;
            setTimeout(() => fitView({ padding: 0.15, duration: 200 }), 50);
        }
    }, [nodes.length, fitView]);
    if (!yaml?.trim() || 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 tasks to visualize" }));
    }
    return (_jsx(WorkflowGraphModeProvider, { mode: "overview", children: _jsx("div", { className: cn("h-full w-full", className), children: _jsxs(ReactFlow, { nodes: nodes, edges: edges, nodeTypes: nodeTypes, edgeTypes: edgeTypes, defaultEdgeOptions: defaultEdgeOptions, nodesDraggable: false, nodesConnectable: false, elementsSelectable: false, 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 }), _jsx(MiniMap, { pannable: true, zoomable: true })] }) }) }));
}
function useYamlToReactFlow(yaml) {
    return useMemo(() => {
        if (!yaml?.trim())
            return { nodes: [], edges: [] };
        try {
            const graph = yamlToGraph(yaml);
            const laid = applyDagreLayout(graph);
            return toReactFlowElements(laid);
        }
        catch {
            return { nodes: [], edges: [] };
        }
    }, [yaml]);
}
//# sourceMappingURL=WorkflowCodePreviewGraph.js.map