import { Fragment, jsx, jsxs } from "react/jsx-runtime";
import { Column, Row } from "../layouts/index.js";
import { useEdges, useNodes, useReactFlow } from "../xyflow/react.js";
import { FLOATING_CANVAS_PANEL_OFFSET } from "../constants.js";
import { FloatingCanvasPanel } from "./FloatingCanvasPanel/index.js";
function safeStringify(obj, indent = 2) {
    const seen = new WeakSet();
    return JSON.stringify(obj, (_key, value)=>{
        if ('object' == typeof value && null !== value) {
            if (seen.has(value)) return '[Circular Reference]';
            seen.add(value);
        }
        if (value && 'object' == typeof value && '$$typeof' in value) {
            const componentName = value.type?.name || value.type?.displayName || 'React.Component';
            return `[React Element: ${componentName}]`;
        }
        if ('function' == typeof value) return `[Function: ${value.name || 'anonymous'}]`;
        if (void 0 === value) return '[undefined]';
        if (value instanceof HTMLElement) return `[HTMLElement: ${value.tagName}]`;
        return value;
    }, indent);
}
function NodeInfoContent({ node, position, absPosition: _absPosition, width, height }) {
    const { id, type, selected, data } = node;
    return /*#__PURE__*/ jsxs(Column, {
        gap: 4,
        pt: 4,
        px: 16,
        children: [
            /*#__PURE__*/ jsxs(Row, {
                gap: 4,
                children: [
                    /*#__PURE__*/ jsx("span", {
                        className: "text-sm font-mono",
                        children: "ID:"
                    }),
                    /*#__PURE__*/ jsx("span", {
                        className: "text-sm font-mono font-bold",
                        children: id
                    })
                ]
            }),
            /*#__PURE__*/ jsxs(Row, {
                gap: 4,
                children: [
                    /*#__PURE__*/ jsx("span", {
                        className: "text-sm font-mono",
                        children: "Type:"
                    }),
                    /*#__PURE__*/ jsx("span", {
                        className: "text-sm font-mono font-bold",
                        children: type || 'default'
                    })
                ]
            }),
            /*#__PURE__*/ jsxs(Row, {
                gap: 4,
                children: [
                    /*#__PURE__*/ jsx("span", {
                        className: "text-sm font-mono",
                        children: "Selected:"
                    }),
                    /*#__PURE__*/ jsx("span", {
                        className: "text-sm font-mono font-bold",
                        children: selected ? 'Yes' : 'No'
                    })
                ]
            }),
            /*#__PURE__*/ jsxs(Row, {
                gap: 4,
                children: [
                    /*#__PURE__*/ jsx("span", {
                        className: "text-sm font-mono",
                        children: "Position:"
                    }),
                    /*#__PURE__*/ jsxs("span", {
                        className: "text-sm font-mono font-bold",
                        children: [
                            "(",
                            position.x.toFixed(0),
                            ", ",
                            position.y.toFixed(0),
                            ")"
                        ]
                    })
                ]
            }),
            void 0 !== width && void 0 !== height && /*#__PURE__*/ jsxs(Row, {
                gap: 4,
                children: [
                    /*#__PURE__*/ jsx("span", {
                        className: "text-sm font-mono",
                        children: "Size:"
                    }),
                    /*#__PURE__*/ jsxs("span", {
                        className: "text-sm font-mono font-bold",
                        children: [
                            width.toFixed(0),
                            " \xd7 ",
                            height.toFixed(0)
                        ]
                    })
                ]
            }),
            data && Object.keys(data).length > 0 && /*#__PURE__*/ jsxs(Column, {
                gap: 4,
                children: [
                    /*#__PURE__*/ jsx("span", {
                        className: "text-sm font-mono text-foreground-muted",
                        children: "Data:"
                    }),
                    /*#__PURE__*/ jsx("pre", {
                        style: {
                            fontFamily: 'monospace',
                            whiteSpace: 'pre-wrap',
                            wordWrap: 'break-word',
                            padding: 8,
                            background: 'var(--canvas-background-secondary)',
                            overflow: 'auto',
                            height: 300,
                            color: 'var(--canvas-foreground-de-emp)',
                            userSelect: 'text'
                        },
                        children: 'string' == typeof data ? data : safeStringify(data)
                    })
                ]
            })
        ]
    });
}
function EdgeInfoContent({ edge }) {
    const { id, type, source, target, sourceHandle, targetHandle, selected, data, label, animated, markerStart, markerEnd } = edge;
    return /*#__PURE__*/ jsxs(Column, {
        gap: 4,
        pt: 4,
        px: 16,
        children: [
            /*#__PURE__*/ jsxs(Row, {
                gap: 4,
                children: [
                    /*#__PURE__*/ jsx("span", {
                        className: "text-sm font-mono",
                        children: "ID:"
                    }),
                    /*#__PURE__*/ jsx("span", {
                        className: "text-sm font-mono font-bold",
                        children: id
                    })
                ]
            }),
            /*#__PURE__*/ jsxs(Row, {
                gap: 4,
                children: [
                    /*#__PURE__*/ jsx("span", {
                        className: "text-sm font-mono",
                        children: "Type:"
                    }),
                    /*#__PURE__*/ jsx("span", {
                        className: "text-sm font-mono font-bold",
                        children: type || 'default'
                    })
                ]
            }),
            /*#__PURE__*/ jsxs(Row, {
                gap: 4,
                children: [
                    /*#__PURE__*/ jsx("span", {
                        className: "text-sm font-mono",
                        children: "Selected:"
                    }),
                    /*#__PURE__*/ jsx("span", {
                        className: "text-sm font-mono font-bold",
                        children: selected ? 'Yes' : 'No'
                    })
                ]
            }),
            /*#__PURE__*/ jsxs(Row, {
                gap: 4,
                children: [
                    /*#__PURE__*/ jsx("span", {
                        className: "text-sm font-mono",
                        children: "Source:"
                    }),
                    /*#__PURE__*/ jsx("span", {
                        className: "text-sm font-mono font-bold",
                        children: source
                    })
                ]
            }),
            /*#__PURE__*/ jsxs(Row, {
                gap: 4,
                children: [
                    /*#__PURE__*/ jsx("span", {
                        className: "text-sm font-mono",
                        children: "Target:"
                    }),
                    /*#__PURE__*/ jsx("span", {
                        className: "text-sm font-mono font-bold",
                        children: target
                    })
                ]
            }),
            sourceHandle && /*#__PURE__*/ jsxs(Row, {
                gap: 4,
                children: [
                    /*#__PURE__*/ jsx("span", {
                        className: "text-sm font-mono",
                        children: "Source Handle:"
                    }),
                    /*#__PURE__*/ jsx("span", {
                        className: "text-sm font-mono font-bold",
                        children: sourceHandle
                    })
                ]
            }),
            targetHandle && /*#__PURE__*/ jsxs(Row, {
                gap: 4,
                children: [
                    /*#__PURE__*/ jsx("span", {
                        className: "text-sm font-mono",
                        children: "Target Handle:"
                    }),
                    /*#__PURE__*/ jsx("span", {
                        className: "text-sm font-mono font-bold",
                        children: targetHandle
                    })
                ]
            }),
            void 0 !== animated && /*#__PURE__*/ jsxs(Row, {
                gap: 4,
                children: [
                    /*#__PURE__*/ jsx("span", {
                        className: "text-sm font-mono",
                        children: "Animated:"
                    }),
                    /*#__PURE__*/ jsx("span", {
                        className: "text-sm font-mono font-bold",
                        children: animated ? 'Yes' : 'No'
                    })
                ]
            }),
            label && /*#__PURE__*/ jsxs(Row, {
                gap: 4,
                children: [
                    /*#__PURE__*/ jsx("span", {
                        className: "text-sm font-mono",
                        children: "Label:"
                    }),
                    /*#__PURE__*/ jsx("span", {
                        className: "text-sm font-mono font-bold",
                        children: 'string' == typeof label ? label : '[React Element]'
                    })
                ]
            }),
            (markerStart || markerEnd) && /*#__PURE__*/ jsxs(Row, {
                gap: 4,
                children: [
                    /*#__PURE__*/ jsx("span", {
                        className: "text-sm font-mono",
                        children: "Markers:"
                    }),
                    /*#__PURE__*/ jsx("span", {
                        className: "text-sm font-mono font-bold",
                        children: markerStart && markerEnd ? 'Both ends' : markerStart ? 'Start only' : 'End only'
                    })
                ]
            }),
            data && Object.keys(data).length > 0 && /*#__PURE__*/ jsxs(Column, {
                gap: 4,
                children: [
                    /*#__PURE__*/ jsx("span", {
                        className: "text-sm font-mono text-foreground-muted",
                        children: "Data:"
                    }),
                    /*#__PURE__*/ jsx("pre", {
                        style: {
                            fontFamily: 'monospace',
                            whiteSpace: 'pre-wrap',
                            wordWrap: 'break-word',
                            padding: 8,
                            background: 'var(--canvas-background-secondary)',
                            overflow: 'auto',
                            height: 300,
                            color: 'var(--canvas-foreground-de-emp)',
                            userSelect: 'text'
                        },
                        children: 'string' == typeof data ? data : safeStringify(data)
                    })
                ]
            })
        ]
    });
}
function NodeInspector({ nodeFilter, edgeFilter, showCloseButton = false, onClose, inspectNodes = true, inspectEdges = true } = {}) {
    const { getInternalNode } = useReactFlow();
    const nodes = useNodes();
    const edges = useEdges();
    const selectedNodeIds = new Set(nodes.filter((node)=>node.selected).map((node)=>node.id));
    const selectedEdgeIds = new Set(edges.filter((edge)=>edge.selected).map((edge)=>edge.id));
    const nodesToShow = inspectNodes ? nodes.filter((node)=>{
        if (nodeFilter && !nodeFilter(node)) return false;
        return selectedNodeIds.has(node.id);
    }) : [];
    const edgesToShow = inspectEdges ? edges.filter((edge)=>{
        if (edgeFilter && !edgeFilter(edge)) return false;
        return selectedEdgeIds.has(edge.id);
    }) : [];
    if (0 === nodesToShow.length && 0 === edgesToShow.length) return null;
    return /*#__PURE__*/ jsxs(Fragment, {
        children: [
            nodesToShow.map((node)=>{
                const internalNode = getInternalNode(node.id);
                if (!internalNode) return null;
                const absPosition = internalNode.internals.positionAbsolute;
                const width = node.measured?.width ?? node.width;
                const height = node.measured?.height ?? node.height;
                return /*#__PURE__*/ jsx(FloatingCanvasPanel, {
                    nodeId: node.id,
                    title: "Node Inspector",
                    placement: "right-start",
                    offset: FLOATING_CANVAS_PANEL_OFFSET,
                    onClose: showCloseButton ? onClose : void 0,
                    children: /*#__PURE__*/ jsx(NodeInfoContent, {
                        node: node,
                        position: node.position,
                        absPosition: absPosition,
                        width: width,
                        height: height
                    })
                }, `node-${node.id}`);
            }),
            edgesToShow.map((edge, index)=>{
                const sourceNode = nodes.find((n)=>n.id === edge.source);
                const nodeId = sourceNode?.id || void 0;
                return /*#__PURE__*/ jsx(FloatingCanvasPanel, {
                    nodeId: nodeId,
                    title: "Edge Inspector",
                    placement: "right-start",
                    offset: FLOATING_CANVAS_PANEL_OFFSET + (nodesToShow.length > 0 ? 420 : 0) + 420 * index,
                    onClose: showCloseButton ? onClose : void 0,
                    children: /*#__PURE__*/ jsx(EdgeInfoContent, {
                        edge: edge
                    })
                }, `edge-${edge.id}`);
            })
        ]
    });
}
export { NodeInspector };
