import {
    forceSimulation,
    forceLink,
    forceCenter,
    forceManyBody,
    forceCollide,
} from "d3-force";
import * as d3 from "d3";
import DOMPurify from "isomorphic-dompurify";

const internals = {
    styleSheet: "/plugins/causalloop/causalloop.css",
    theme: {
        positive: "#23C17C",
        negative: "#FA2B00",
        node: "#0F261F",
        halo: "#FFFFFF",
    },
    icons: {
        play: `data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="grey"><path d="M8 5v14l11-7z"/></svg>`,
        pause: `data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="grey"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/></svg>`,
        step: `data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="grey"><path d="M6 18l8.5-6L6 6v12zM16 6v12h2V6h-2z"/></svg>`,
        reset: `data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="grey"><path d="M12 5V1L7 6l5 5V7c3.31 0 6 2.69 6 6s-2.69 6-6 6-6-2.69-6-6H4c0 4.42 3.58 8 8 8s8-3.58 8-8-3.58-8-8-8z"/></svg>`,
        download: `data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" viewBox="0 0 24 24" fill="grey"><g><rect fill="none" height="24" width="24"/></g><g><path d="M5,20h14v-2H5V20z M19,9h-4V3H9v6H5l7,7L19,9z"/></g></svg>`,
        zoom: `data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" viewBox="0 0 24 24"><g><rect fill="none" height="24" width="24"/></g><g><g><g><path fill="grey" d="M15,3l2.3,2.3l-2.89,2.87l1.42,1.42L18.7,6.7L21,9V3H15z M3,9l2.3-2.3l2.87,2.89l1.42-1.42L6.7,5.3L9,3H3V9z M9,21 l-2.3-2.3l2.89-2.87l-1.42-1.42L5.3,17.3L3,15v6H9z M21,15l-2.3,2.3l-2.87-2.89l-1.42,1.42l2.89,2.87L15,21h6V15z"/></g></g></g></svg>`,
    },
    dimensions: {
        full: {
            width: 806,
            height: 620,
            minSize: 11,
            initialSize: 14,
            maxSize: 22,
            growthFactor: 0.2,
            collideRadius: 2,
            collideExtra: 25,
            haloWidth: 4,
            edgeLabelHaloWidth: 3,
            edgeWidth: 1.5,
            curveOffset: 20,
            linkDistance: 180,
            chargeStrength: -700,
            maxLabelWidth: 10,
            edgeFontSize: "11px",
            flowInterval: 1500,
            flowDuration: 1200,
            dotRadius: 4,
        },
        thumbnail: {
            width: 403,
            height: 310,
            minSize: 9,
            initialSize: 11,
            maxSize: 17,
            growthFactor: 0.1,
            collideRadius: 2,
            collideExtra: 10,
            haloWidth: 3,
            edgeLabelHaloWidth: 2,
            edgeWidth: 1,
            curveOffset: 12,
            linkDistance: 80,
            chargeStrength: -300,
            maxLabelWidth: 10,
            edgeFontSize: "10px",
            flowInterval: 1500,
            flowDuration: 1200,
            dotRadius: 3,
        },
    },
    lineRegex:
        /([^\s].*?)([+-])>\s*([^\s].*?)(?:\[((?:\d+(?:\.\d+)?)|(?:\.\d+))\])?$/,

    /**
     * Parses the causal loop diagram line by line and generates an object
     * that looks like this:
     * - nodes: Set<String>
     * - connections: Object<String, Array<{weight: Number, target: String}>>
     * - state: Object<String, Number>
     */
    parse(text) {
        const nodes = new Set();
        const connections = {};
        const seenConnections = new Set();
        for (const rawLine of text.split("\n")) {
            const matches = rawLine.match(internals.lineRegex);
            if (matches === null) continue;

            const source = matches[1]?.trim();
            const target = matches[3]?.trim();
            const direction = matches[2]?.trim();
            if (!source || !target) continue;

            const connectionKey = `${source}\0${target}`;
            if (seenConnections.has(connectionKey)) continue;
            seenConnections.add(connectionKey);

            let weight = parseFloat(matches[4]) || 1;
            if (direction === "-") weight = -weight;

            nodes.add(source);
            nodes.add(target);
            (connections[source] ??= []).push({ weight, target });
        }
        const state = Object.fromEntries([...nodes].map((id) => [id, 1]));
        return { nodes, connections, state };
    },

    /**
     * Wraps a label string into multiple lines so no line exceeds
     * maxLabelWidth characters.
     */
    wrapLabel(text, maxLabelWidth) {
        if (text.length <= maxLabelWidth) return [text];
        const words = text.split(/\s+/);
        const lines = [];
        let currentLine = words[0];
        for (let index = 1; index < words.length; index++) {
            if (currentLine.length + 1 + words[index].length <= maxLabelWidth) {
                currentLine += " " + words[index];
            } else {
                lines.push(currentLine);
                currentLine = words[index];
            }
        }
        lines.push(currentLine);
        return lines;
    },

    /**
     * Builds the d3 graph data (nodes, links, and a bidirectional predicate)
     * from a parsed diagram.
     */
    buildGraphData(parsedDiagram, maxLabelWidth) {
        const graphNodes = [...parsedDiagram.nodes].map((id) => {
            const lines = internals.wrapLabel(id, maxLabelWidth);
            const maxLineLength = Math.max(...lines.map((line) => line.length));
            return { id, lines, maxLineLength };
        });
        const graphLinks = Object.entries(parsedDiagram.connections).flatMap(
            ([source, outgoing]) =>
                outgoing.map(({ target, weight }) => ({
                    source,
                    target,
                    weight,
                })),
        );
        const linkKeys = new Set(
            graphLinks.map((link) => `${link.source}\0${link.target}`),
        );
        const isBidirectional = (link) =>
            linkKeys.has(`${link.target.id}\0${link.source.id}`);
        return { graphNodes, graphLinks, isBidirectional };
    },

    /**
     * Appends the positive/negative arrow markers to the SVG's <defs>.
     */
    drawMarkers(svg, theme) {
        svg.append("defs")
            .selectAll("marker")
            .data([
                { id: "arrow-positive", color: theme.positive },
                { id: "arrow-negative", color: theme.negative },
            ])
            .join("marker")
            .attr("id", (marker) => marker.id)
            .attr("viewBox", "0 0 10 6")
            .attr("refX", 10)
            .attr("refY", 3)
            .attr("markerWidth", 10)
            .attr("markerHeight", 6)
            .attr("orient", "auto")
            .append("path")
            .attr("d", "M0,0 L10,3 L0,6 Z")
            .attr("fill", (marker) => marker.color);
    },

    /**
     * Draws the edges group and returns the path selection.
     */
    drawEdges(svg, graphLinks, theme, edgeWidth) {
        return svg
            .append("g")
            .attr("fill", "none")
            .selectAll("path")
            .data(graphLinks)
            .join("path")
            .attr("stroke", (link) =>
                link.weight > 0 ? theme.positive : theme.negative,
            )
            .attr("stroke-width", edgeWidth)
            .attr("marker-end", (link) =>
                link.weight > 0
                    ? "url(#arrow-positive)"
                    : "url(#arrow-negative)",
            );
    },

    /**
     * Draws the edge-label group and returns the text selection.
     */
    drawEdgeLabels(svg, graphLinks, theme, edgeFontSize, edgeLabelHaloWidth) {
        return svg
            .append("g")
            .attr("font-family", "serif")
            .attr("font-size", edgeFontSize)
            .selectAll("text")
            .data(graphLinks)
            .join("text")
            .attr("text-anchor", "middle")
            .attr("dy", "-4")
            .attr("fill", (link) =>
                link.weight > 0 ? theme.positive : theme.negative,
            )
            .attr("stroke", theme.halo)
            .attr("stroke-width", edgeLabelHaloWidth)
            .attr("paint-order", "stroke")
            .text((link) => (link.weight > 0 ? "S(+)" : "O(-)"));
    },

    /**
     * Draws the node-label group (with wrapped tspans) and returns the text
     * selection. sizeFor is a callback because font-size tracks live state.
     */
    drawNodes(svg, graphNodes, theme, sizeFor, haloWidth) {
        const lineHeight = 1.2;
        return svg
            .append("g")
            .attr("font-family", "serif")
            .selectAll("text")
            .data(graphNodes)
            .join("text")
            .attr("text-anchor", "middle")
            .attr("fill", theme.node)
            .attr("stroke", theme.halo)
            .attr("stroke-width", haloWidth)
            .attr("paint-order", "stroke")
            .attr("font-size", (graphNode) => `${sizeFor(graphNode)}px`)
            .attr("class", "label")
            .attr("data-title", (graphNode) => graphNode.id)
            .each(function (graphNode) {
                const element = d3.select(this);
                const verticalOffset =
                    0.35 - ((graphNode.lines.length - 1) * 1.2) / 2;
                graphNode.lines.forEach((line, index) => {
                    element
                        .append("tspan")
                        .attr(
                            "dy",
                            index === 0
                                ? `${verticalOffset}em`
                                : `${lineHeight}em`,
                        )
                        .text(line);
                });
            });
    },

    /**
     * Computes the SVG path string for a causal link, inset by each node's
     * halo and curved outward for bidirectional links.
     */
    computeEdgePath(
        link,
        isBidirectional,
        scaleFactor,
        collideRadius,
        curveOffset,
    ) {
        const nodeMargin = (
            graphNode,
            absoluteUnitX,
            absoluteUnitY,
            extraPadding,
        ) => {
            const factor = scaleFactor(graphNode);
            const halfWidth = graphNode.maxLineLength * collideRadius * factor;
            const halfHeight = 8 * graphNode.lines.length * factor;
            return (
                absoluteUnitX * halfWidth +
                absoluteUnitY * halfHeight +
                extraPadding
            );
        };
        const { source, target } = link;
        const deltaX = target.x - source.x;
        const deltaY = target.y - source.y;
        const length = Math.sqrt(deltaX * deltaX + deltaY * deltaY) || 1;
        const unitX = deltaX / length;
        const unitY = deltaY / length;
        const absoluteUnitX = Math.abs(unitX);
        const absoluteUnitY = Math.abs(unitY);
        const sourceMargin = nodeMargin(
            source,
            absoluteUnitX,
            absoluteUnitY,
            4,
        );
        const targetMargin = nodeMargin(
            target,
            absoluteUnitX,
            absoluteUnitY,
            8,
        );
        const startX = source.x + unitX * sourceMargin;
        const startY = source.y + unitY * sourceMargin;
        const endX = target.x - unitX * targetMargin;
        const endY = target.y - unitY * targetMargin;

        if (!isBidirectional(link)) {
            return `M${startX},${startY} L${endX},${endY}`;
        }
        const perpendicularX = -unitY * curveOffset;
        const perpendicularY = unitX * curveOffset;
        const controlX = (startX + endX) / 2 + perpendicularX;
        const controlY = (startY + endY) / 2 + perpendicularY;
        return `M${startX},${startY} Q${controlX},${controlY} ${endX},${endY}`;
    },

    /**
     * Returns the xy position for an edge label, offset outward for
     * bidirectional links so labels don't overlap the curves.
     */
    labelPosition(link, isBidirectional, curveOffset) {
        const midpointX = (link.source.x + link.target.x) / 2;
        const midpointY = (link.source.y + link.target.y) / 2;
        if (!isBidirectional(link)) return { x: midpointX, y: midpointY };
        const deltaX = link.target.x - link.source.x;
        const deltaY = link.target.y - link.source.y;
        const length = Math.sqrt(deltaX * deltaX + deltaY * deltaY) || 1;
        return {
            x: midpointX + -(deltaY / length) * curveOffset,
            y: midpointY + (deltaX / length) * curveOffset,
        };
    },

    /**
     * Given an existing SVG element, a parsed diagram (see #parse()), and a
     * dimensions object, sets up the d3 state to draw in the SVG and returns
     * functions to control its state or pre-render the object.
     */
    renderToSVG($element, parsedDiagram, dimensions, options = {}) {
        const {
            width,
            height,
            minSize,
            initialSize,
            maxSize,
            growthFactor,
            collideRadius,
            collideExtra,
            haloWidth,
            edgeLabelHaloWidth,
            edgeWidth,
            curveOffset,
            linkDistance,
            chargeStrength,
            maxLabelWidth,
            edgeFontSize,
            flowInterval,
            flowDuration,
            dotRadius,
        } = dimensions;
        const { theme } = internals;
        const minStateFactor = minSize / initialSize;
        const maxStateFactor = maxSize / initialSize;

        const sizeFor = (graphNode) =>
            Math.max(
                minSize,
                Math.min(
                    maxSize,
                    initialSize * parsedDiagram.state[graphNode.id],
                ),
            );
        const scaleFactor = (graphNode) => sizeFor(graphNode) / initialSize;
        const radiusFor = (graphNode) =>
            graphNode.maxLineLength * collideRadius * scaleFactor(graphNode) +
            collideExtra;

        const { graphNodes, graphLinks, isBidirectional } =
            internals.buildGraphData(parsedDiagram, maxLabelWidth);

        const svg = d3.select($element).attr("viewBox", [0, 0, width, height]);
        svg.selectAll("*").remove();

        internals.drawMarkers(svg, theme);
        const edge = internals.drawEdges(svg, graphLinks, theme, edgeWidth);
        const edgeLabel = internals.drawEdgeLabels(
            svg,
            graphLinks,
            theme,
            edgeFontSize,
            edgeLabelHaloWidth,
        );
        const node = internals.drawNodes(
            svg,
            graphNodes,
            theme,
            sizeFor,
            haloWidth,
        );
        const dotGroup = svg.append("g").attr("class", "flow-dots");

        const pathByKey = new Map();
        edge.each(function (link) {
            pathByKey.set(`${link.source}\0${link.target}`, this);
        });

        const simulation = forceSimulation(graphNodes)
            .force(
                "link",
                forceLink(graphLinks)
                    .id((graphNode) => graphNode.id)
                    .distance(linkDistance),
            )
            .force("charge", forceManyBody().strength(chargeStrength))
            .force("center", forceCenter(width / 2, height / 2))
            .force("collide", forceCollide().radius(radiusFor))
            .on("tick", ticked);

        let flowTimer = null;
        let firingNodes = null;

        function updateSizes() {
            node.attr("font-size", (graphNode) => `${sizeFor(graphNode)}px`);
            simulation.force("collide").radius(radiusFor);
            simulation.alpha(0.2).restart();
            options.onChange?.();
        }

        function isDirty() {
            return [...parsedDiagram.nodes].some(
                (id) => parsedDiagram.state[id] !== 1,
            );
        }

        function applyDelta(id, delta) {
            const next = parsedDiagram.state[id] * (1 + delta);
            parsedDiagram.state[id] = Math.max(
                minStateFactor,
                Math.min(maxStateFactor, next),
            );
        }

        function animateDot(sourceId, targetId, delta) {
            const pathElement = pathByKey.get(`${sourceId}\0${targetId}`);
            if (!pathElement) return;
            const length = pathElement.getTotalLength();
            if (!length) return;
            const dot = dotGroup
                .append("circle")
                .attr("r", dotRadius)
                .attr("fill", delta >= 0 ? theme.positive : theme.negative)
                .attr("stroke", theme.halo)
                .attr("stroke-width", 1);
            dot.transition()
                .duration(flowDuration)
                .ease(d3.easeLinear)
                .attrTween("transform", () => (progress) => {
                    const point = pathElement.getPointAtLength(
                        progress * length,
                    );
                    return `translate(${point.x},${point.y})`;
                })
                .on("end", () => {
                    dot.remove();
                    applyDelta(targetId, delta);
                    updateSizes();
                });
        }

        function tickFlow() {
            if (!firingNodes || firingNodes.size === 0) {
                // re-seed from the first node when the cascade dies out
                const seedNodeId = parsedDiagram.nodes.values().next().value;
                if (!seedNodeId) return;
                applyDelta(seedNodeId, growthFactor);
                firingNodes = new Map([[seedNodeId, growthFactor]]);
                updateSizes();
            }
            const nextFiring = new Map();
            for (const [sourceId, sourceDelta] of firingNodes) {
                const outgoing = parsedDiagram.connections[sourceId] || [];
                for (const { target: targetId, weight } of outgoing) {
                    const targetDelta = sourceDelta * weight;
                    if (!targetDelta) continue;
                    animateDot(sourceId, targetId, targetDelta);
                    nextFiring.set(
                        targetId,
                        (nextFiring.get(targetId) ?? 0) + targetDelta,
                    );
                }
            }
            firingNodes = nextFiring;
        }

        function ticked() {
            const padding = 40;
            graphNodes.forEach((graphNode) => {
                graphNode.x = Math.max(
                    padding,
                    Math.min(width - padding, graphNode.x),
                );
                graphNode.y = Math.max(
                    padding,
                    Math.min(height - padding, graphNode.y),
                );
            });

            edge.attr("d", (link) =>
                internals.computeEdgePath(
                    link,
                    isBidirectional,
                    scaleFactor,
                    collideRadius,
                    curveOffset,
                ),
            );
            edgeLabel
                .attr(
                    "x",
                    (link) =>
                        internals.labelPosition(
                            link,
                            isBidirectional,
                            curveOffset,
                        ).x,
                )
                .attr(
                    "y",
                    (link) =>
                        internals.labelPosition(
                            link,
                            isBidirectional,
                            curveOffset,
                        ).y,
                );
            node.attr("x", (graphNode) => graphNode.x)
                .attr("y", (graphNode) => graphNode.y)
                .each(function (graphNode) {
                    d3.select(this).selectAll("tspan").attr("x", graphNode.x);
                });
        }

        function pause() {
            if (flowTimer) {
                flowTimer.stop();
                flowTimer = null;
            }
            dotGroup.selectAll("*").interrupt().remove();
            firingNodes = null;
        }

        function reset() {
            pause();
            for (const id of parsedDiagram.nodes) {
                parsedDiagram.state[id] = 1;
            }
            updateSizes();
        }

        return {
            update() {
                simulation.alpha(0.3).restart();
            },
            settle() {
                simulation.tick(300);
                simulation.stop();
                ticked();
            },
            play() {
                if (flowTimer) return;
                tickFlow();
                flowTimer = d3.interval(tickFlow, flowInterval);
            },
            pause,
            reset,
            step() {
                tickFlow();
            },
            isPlaying() {
                return flowTimer !== null;
            },
            isDirty,
        };
    },

    // Returns HTML that shows a message in the wiki.
    message(text) {
        return `
        <div class="viewer" data-item="viewer" style="width:98%">
          <div style="width:80%; padding:8px; color:gray; background-color:#eee; margin:0 auto; text-align:center">
            <i>${text}</i>
          </div>
        </div>`;
    },

    /**
     * Wraps the SVG with the prelude and xml version and starts a download.
     */
    download(filename, text) {
        const svgWithNamespace = text.replace(
            "<svg",
            '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"',
        );
        const svgContent =
            '<?xml version="1.0" encoding="UTF-8"?>\n' + svgWithNamespace;
        const blob = new Blob([svgContent], { type: "image/svg+xml" });
        const url = URL.createObjectURL(blob);
        const element = document.createElement("a");
        element.setAttribute("href", url);
        element.setAttribute("download", filename);
        element.style.display = "none";
        document.body.appendChild(element);
        element.click();
        document.body.removeChild(element);
        URL.revokeObjectURL(url);
    },

    /**
     * Replaces the image in a dialog with the new image data.
     */
    replaceImage(window, imageData) {
        try {
            const $container = window.document.querySelector("main");
            $container.innerHTML = imageData;
        } catch (error) {
            console.error(
                "causalloop: Could not replace image. The DOM wasn't ready!",
                error,
            );
        }
    },

    // SVG Helpers /////////////////////////////////////////////////////////////

    /**
     * Creates an SVG element
     */
    createSVG() {
        return document.createElementNS("http://www.w3.org/2000/svg", "svg");
    },

    /**
     * Creates a pre-rendered SVG by settling the animation.
     */
    renderStandaloneSVG(item) {
        const svg = internals.createSVG();
        const { settle } = internals.renderToSVG(
            svg,
            internals.parse(item.text),
            internals.dimensions.full,
        );
        settle();
        return svg;
    },

    // Event Handlers //////////////////////////////////////////////////////////

    // Runs a callback when the dialog is loaded.
    // readyState is "complete" on the initial empty window, so we must
    // also verify the dialog's href to know the document is really ours.
    onDialogReady(dialog, callback) {
        const isReady =
            dialog.document.readyState === "complete" &&
            dialog.document.location.href.includes(
                "/plugins/causalloop/dialog/",
            );
        if (isReady) {
            callback();
        } else {
            dialog.addEventListener("load", callback, { once: true });
        }
    },

    // Triggered when the download button is clicked.
    // It downloads the SVG file.
    onDownload($item, item) {
        const svg = internals.renderStandaloneSVG(item);
        const slug = $item.parents(".page").attr("id");
        internals.download(`${slug}.svg`, svg.outerHTML);
    },

    // Triggered when the zoom button is clicked.
    // It opens the dialog and loads the image
    onZoom(event, item) {
        const target = event.shiftKey ? "_blank" : "causalloop";
        const dialog = window.open(
            "/plugins/causalloop/dialog/#",
            target,
            "popup,height=600,width=800",
        );

        if (!dialog || dialog.closed) {
            console.error("causalloop: Failed to open dialog.");
            return;
        }

        const imageData = internals.renderStandaloneSVG(item).outerHTML;
        internals.onDialogReady(dialog, () =>
            internals.replaceImage(dialog, imageData),
        );
    },

    // Triggered when the play button is clicked.
    // It toggles the available icons and starts the animation.
    onPlay(event, renderer, $item) {
        if (!renderer) return;
        const $icon = $(event.currentTarget).find("img");
        const $stepButton = $item.find('a[data-action="step"]').parent();
        if (renderer.isPlaying()) {
            renderer.pause();
            $icon.attr("src", internals.icons.play);
            $stepButton.css("display", "");
        } else {
            renderer.play();
            $icon.attr("src", internals.icons.pause);
            $stepButton.css("display", "none");
        }
    },

    // Triggered when the step button is clicked.
    // Moves the animation one iteration.
    onStep(renderer) {
        renderer?.step();
    },

    // Triggered when the reset button is clicked.
    // Resets the animation.
    onReset(renderer, $item) {
        if (!renderer) return;
        renderer.reset();
        $item
            .find('a[data-action="play"] img')
            .attr("src", internals.icons.play);
    },
};

/**
 * Runs once for each block. Do setup for the block before rendering.
 */
const emit = function emit($item) {
    const hasStyleSheet = [...document.styleSheets].some((styleSheet) =>
        styleSheet.href?.endsWith(internals.styleSheet),
    );

    if (!hasStyleSheet) {
        console.log("Adding causalloop stylesheet.");
        const link = document.createElement("link");
        link.rel = "stylesheet";
        link.href = internals.styleSheet;
        link.type = "text/css";
        document.getElementsByTagName("head")[0].appendChild(link);
    }

    return $item.append(internals.message("Loading Causal Loop Diagram"));
};

/**
 * Bind to events on the rendered block. Called once per block.
 * Convention is that double click opens the editor.
 *
 * @param {JQuery} $item the HTML element representing the block.
 * @param {Object} item the configuration for that particular object.
 */
const bind = async function bind($item, item) {
    let renderer = null;
    $item.on("dblclick", () => wiki.textEditor($item, item));

    $item.on("click", "a", async (event) => {
        const action = event.currentTarget.dataset?.action;
        if (!action) return;
        event.stopPropagation();
        event.preventDefault();

        switch (action) {
            case "download":
                internals.onDownload($item, item);
                break;
            case "zoom":
                internals.onZoom(event, item);
                break;
            case "play":
                internals.onPlay(event, renderer, $item);
                break;
            case "step":
                internals.onStep(renderer);
                break;
            case "reset":
                internals.onReset(renderer, $item);
                break;
        }
    });

    try {
        const $element = internals.createSVG();
        renderer = internals.renderToSVG(
            $element,
            internals.parse(item.text),
            internals.dimensions.thumbnail,
            {
                onChange() {
                    const dirty = renderer?.isDirty() ?? false;
                    $item
                        .find('a[data-action="reset"]')
                        .parent()
                        .css("display", dirty ? "" : "none");
                },
            },
        );
        $item.find(".viewer").html(`
            <article class="causalloop thumbnail"></article>
            <nav class="actions">
                <menu>
                    <li style="display:none"><a href="#" data-action="reset" title="Reset"><img width="18" height="18" alt="reset" src='${internals.icons.reset}'></a></li>
                    <li><a href="#" data-action="play" title="Play/Pause"><img width="18" height="18" alt="play/pause" src='${internals.icons.play}'></a></li>
                    <li><a href="#" data-action="step" title="Step"><img width="18" height="18" alt="step" src='${internals.icons.step}'></a></li>
                    <li><a href="#" data-action="download" title="Download"><img width="18" height="18" alt="download" src='${internals.icons.download}'></a></li>
                    <li><a href="#" data-action="zoom" title="Zoom"><img width="18" height="18" alt="toggle zoom" src='${internals.icons.zoom}'></a></li>
                </menu>
            </nav>
            `);
        $item.find(".causalloop").append($element);

        $item.find("svg text.label").on("click", function (event) {
            const title = this.dataset.title;
            const $page = $item.parents(".page");
            wiki.pageHandler.context = wiki.lineup
                .atKey($page.data("key"))
                .getContext();
            wiki.doInternalLink(title, event.shiftKey ? null : $page);
        });
    } catch (error) {
        console.log("Failed to parse causal loop diagram: ", error);
        $item.html(internals.message(error.message));
    }
};

/**
 * On load, attempt to add the emit and bind functions to window, as these
 * are called by the wiki plugin manager.
 */
if (typeof window !== "undefined" && window !== null) {
    if (!window.plugins.causalloop) {
        window.plugins.causalloop = { emit, bind };
    }
}

const expand = function (text) {
    return DOMPurify.sanitize(text);
};

export const causalloop =
    typeof window === "undefined" ? { expand } : undefined;