import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useCallback, useEffect, useRef, useState } from "react";
import { useEditContext } from "../client/editContext";
import { PlaceholderDropZones } from "../page-editor-chrome/PlaceholderDropZones";
import { FieldEditedIndicators } from "../page-editor-chrome/FieldEditedIndicators";
import { CommentHighlightings } from "../page-editor-chrome/CommentHighlightings";
import { SuggestionHighlightings } from "../page-editor-chrome/SuggestionHighlightings";
export function MiniMap({ deviceHeight, scroll, mainViewIframeRef, pageViewContext, }) {
    const editContext = useEditContext();
    const [scale, setScale] = useState(1);
    const minimapRef = useRef(null);
    const scaleContainerRef = useRef(null);
    const iframeRef = useRef(null);
    const [minimapReady, setMinimapReady] = useState(false);
    const [refreshScale, setRefreshScale] = useState(0);
    const observerRef = useRef(null);
    const resizeObserverRef = useRef(null);
    const assetLoadHandlerRef = useRef(null);
    const minimapContainerRef = useRef(null);
    if (!mainViewIframeRef.current)
        return null;
    const getScrollContainer = useCallback(() => {
        const doc = mainViewIframeRef.current?.contentWindow?.document;
        return doc?.scrollingElement || doc?.body || null;
    }, [mainViewIframeRef]);
    const calcAndUpdateScale = () => {
        const viewport = pageViewContext.viewport;
        const minimapHeight = minimapContainerRef.current?.clientHeight;
        const scrollContainer = getScrollContainer();
        if (!viewport || !scrollContainer)
            return;
        const width = viewport.width;
        const scaleX = (editContext?.configuration.outline.width || 100) / width;
        const scaleY = Math.max(deviceHeight || 0, minimapHeight || viewport.height) /
            scrollContainer.scrollHeight;
        const newScale = Math.min(scaleX, scaleY, 1);
        updateScale(newScale);
        setScale(newScale);
        syncDimensions();
        return newScale;
    };
    // Prevent scale/width feedback loop by tracking previous values
    const prevScaleRef = useRef(scale);
    const prevWidthRef = useRef(0);
    const currentWidth = Math.max(30, scale * (pageViewContext.viewport.width || 0));
    // Only update if change is significant (>1px) to avoid minor oscillations
    let miniMapWidth;
    if (prevWidthRef.current < currentWidth ||
        (Math.abs(currentWidth - prevWidthRef.current) > 1 &&
            Math.abs(scale - prevScaleRef.current) > 0.01)) {
        prevWidthRef.current = currentWidth;
        prevScaleRef.current = scale;
        miniMapWidth = currentWidth;
    }
    else {
        miniMapWidth = prevWidthRef.current;
    }
    function getNodePath(node) {
        const path = [];
        let current = node;
        if (node?.tagName === "HTML")
            return null;
        while (current &&
            current !== current.ownerDocument?.documentElement &&
            current.parentNode) {
            const index = Array.prototype.indexOf.call(current.parentNode.childNodes, current);
            path.unshift(index);
            current = current.parentNode;
        }
        return path;
    }
    function findCorrespondingNode(node) {
        const path = getNodePath(node);
        if (!path)
            return null;
        const minimapDoc = iframeRef.current?.contentDocument;
        if (!minimapDoc)
            return null;
        let correspondingNode = minimapDoc.documentElement;
        let originalNode = mainViewIframeRef.current?.contentWindow?.document.documentElement;
        for (const index of path) {
            if (!originalNode || !correspondingNode)
                return null;
            if (originalNode.childNodes.length !== correspondingNode.childNodes.length)
                return null;
            originalNode = originalNode.childNodes[index];
            correspondingNode = correspondingNode.childNodes[index];
        }
        return correspondingNode || null;
    }
    function updateCorrespondingNode(node) {
        const path = getNodePath(node);
        if (!path)
            return;
        const minimapDoc = iframeRef.current?.contentDocument;
        if (!minimapDoc)
            return;
        let correspondingNode = minimapDoc.documentElement;
        let originalNode = mainViewIframeRef.current?.contentWindow?.document.documentElement;
        for (const index of path) {
            if (originalNode && correspondingNode) {
                if (originalNode.childNodes.length !== correspondingNode.childNodes.length) {
                    // When the mismatch is at the document root (HTML), only sync the
                    // body element instead of replacing the entire innerHTML. Replacing
                    // HTML.innerHTML causes a visible flash and can create a duplicate
                    // HEAD element in the minimap iframe.
                    if (originalNode.tagName === "HTML") {
                        const srcBody = originalNode.ownerDocument?.body;
                        const dstBody = correspondingNode.ownerDocument?.body;
                        if (srcBody && dstBody) {
                            dstBody.innerHTML = srcBody.innerHTML;
                        }
                        return;
                    }
                    correspondingNode.innerHTML = originalNode.innerHTML;
                    return;
                }
            }
            if (originalNode) {
                originalNode = originalNode.childNodes[index];
            }
            if (correspondingNode) {
                correspondingNode = correspondingNode.childNodes[index];
            }
        }
        if (correspondingNode && originalNode) {
            if (originalNode.tagName === "HEAD") {
                correspondingNode.innerHTML = originalNode.innerHTML;
            }
            else if (correspondingNode.parentNode?.nodeType === Node.DOCUMENT_NODE) {
                correspondingNode.innerHTML = originalNode.innerHTML;
            }
            else {
                correspondingNode.outerHTML = originalNode.outerHTML;
            }
        }
    }
    const handleLoad = () => {
        if (!mainViewIframeRef?.current?.contentWindow?.document)
            return;
        if (!iframeRef.current)
            return;
        observerRef.current?.disconnect();
        resizeObserverRef.current?.disconnect();
        const sourceDoc = mainViewIframeRef.current.contentWindow.document;
        if (assetLoadHandlerRef.current) {
            sourceDoc.removeEventListener("load", assetLoadHandlerRef.current, true);
            assetLoadHandlerRef.current = null;
        }
        mirrorIframeContent(mainViewIframeRef.current, iframeRef.current);
        const observer = new MutationObserver((mutationsList) => {
            const minimapDoc = iframeRef.current?.contentDocument;
            if (!minimapDoc)
                return;
            // Sync attribute mutations lightweight — copy only the changed attribute
            const attributeMutations = mutationsList.filter((x) => x.type === "attributes" && x.attributeName && x.target.parentElement);
            for (const mutation of attributeMutations) {
                const target = mutation.target;
                if (!target || target.tagName === "HTML")
                    continue;
                const correspondingNode = findCorrespondingNode(target);
                if (!correspondingNode)
                    continue;
                const attrName = mutation.attributeName;
                const value = target.getAttribute(attrName);
                if (value !== null) {
                    correspondingNode.setAttribute(attrName, value);
                }
                else {
                    correspondingNode.removeAttribute(attrName);
                }
            }
            // Structural mutations (childList / characterData) need full DOM sync
            const structuralMutations = mutationsList.filter((x) => x.type === "childList" || x.type === "characterData");
            if (structuralMutations.length === 0)
                return;
            const targetNodes = structuralMutations
                .filter((x) => x.type === "childList" && x.target.parentElement)
                .map((m) => m.target)
                .concat(structuralMutations
                .filter((x) => x.type === "characterData")
                .map((m) => m.target.parentElement));
            const distinctTargetNodes = Array.from(new Set(targetNodes));
            const nodesToRemove = new Set();
            for (let i = 0; i < distinctTargetNodes.length; i++) {
                for (let j = 0; j < distinctTargetNodes.length; j++) {
                    if (i !== j) {
                        if (distinctTargetNodes[i]?.contains(distinctTargetNodes[j])) {
                            nodesToRemove.add(distinctTargetNodes[j]);
                        }
                    }
                }
            }
            const filteredNodes = distinctTargetNodes.filter((node) => !nodesToRemove.has(node));
            filteredNodes.forEach((targetNode) => {
                updateCorrespondingNode(targetNode);
            });
            // Re-bake dimensions in the same tick as the structural sync so the
            // source/destination tree pairing stays consistent — MutationObserver
            // callbacks are microtasks, no other JS can run between the two.
            syncDimensions();
            setRefreshScale((x) => x + 1);
        });
        observer.observe(mainViewIframeRef.current.contentWindow.document, {
            childList: true, // observe direct children changes
            subtree: true, // observe all descendants changes
            characterData: true, // observe text changes
            attributes: true, // observe attribute changes (like style or class)
        });
        // Catch async layout changes that don't trigger the MutationObserver:
        // image/video metadata loading, web font swap-in, CSS animations
        // settling, and iframe-size changes from device-mode toggles.
        const ro = new ResizeObserver(() => {
            syncDimensions();
        });
        ro.observe(sourceDoc.documentElement);
        resizeObserverRef.current = ro;
        const onAssetLoad = () => {
            syncDimensions();
        };
        // <img>/<video>/<iframe> 'load' events don't bubble — capture phase
        // catches them at the document root.
        sourceDoc.addEventListener("load", onAssetLoad, true);
        assetLoadHandlerRef.current = onAssetLoad;
        setMinimapReady(true);
        observerRef.current = observer;
    };
    useEffect(() => {
        if (mainViewIframeRef?.current) {
            mainViewIframeRef?.current.addEventListener("load", handleLoad);
        }
        handleLoad();
        // Cleanup function
        return () => {
            observerRef.current?.disconnect();
            observerRef.current = null;
            resizeObserverRef.current?.disconnect();
            resizeObserverRef.current = null;
            const sourceDoc = mainViewIframeRef?.current?.contentWindow?.document ?? null;
            if (sourceDoc && assetLoadHandlerRef.current) {
                sourceDoc.removeEventListener("load", assetLoadHandlerRef.current, true);
            }
            assetLoadHandlerRef.current = null;
            mainViewIframeRef?.current?.removeEventListener("load", handleLoad);
        };
    }, [mainViewIframeRef.current, iframeRef.current]);
    useEffect(() => {
        calcAndUpdateScale();
    }, [
        refreshScale,
        mainViewIframeRef,
        //pageViewContext?.windowSize,
        pageViewContext?.zoom,
        pageViewContext.viewport,
        pageViewContext.deviceHeight,
        pageViewContext.deviceWidth,
    ]);
    if (!editContext) {
        return null;
    }
    const scrollDocumentTo = (y) => {
        if (!mainViewIframeRef?.current)
            return;
        const scrollContainer = getScrollContainer();
        if (!scrollContainer)
            return;
        scrollContainer.scrollTo({
            top: y,
            behavior: "smooth",
        });
    };
    const scrollHeight = getScrollContainer()?.scrollHeight;
    const scrollTop = scroll;
    const viewport = pageViewContext.viewport;
    function mirrorIframeContent(sourceIframe, targetIframe) {
        const sourceDoc = sourceIframe.contentDocument;
        const targetDoc = targetIframe.contentDocument;
        // Check that both documents AND their documentElements exist
        if (sourceDoc?.documentElement && targetDoc?.documentElement) {
            const sourceHtml = sourceDoc.documentElement.innerHTML;
            targetDoc.documentElement.innerHTML = sourceHtml;
            targetDoc.documentElement.style.overflow = "hidden";
            const targetHead = targetDoc.documentElement.querySelector("head");
            // Inject CSS to constrain media elements in minimap. Width/height for
            // <video> are now baked by syncDimensions() so we no longer need the
            // viewport-unit (`max-height: 100vh`) hack that misresolved against the
            // tall minimap iframe.
            let style = targetHead?.querySelector("style[data-minimap-constraints]");
            if (!style && targetHead) {
                style = targetDoc.createElement("style");
                style.setAttribute("data-minimap-constraints", "true");
                style.textContent = `
          video, img, picture, iframe {
            max-width: 100% !important;
            height: auto !important;
          }
        `;
                targetHead.appendChild(style);
            }
        }
        syncDimensions();
        setRefreshScale((x) => x + 1);
    }
    // Bake the main iframe's resolved layout (width/height per element, plus
    // top/left for absolute/fixed elements) into the minimap clone as inline
    // !important px styles. This neutralizes vh/vw drift between the two
    // iframes (their layout viewports differ — main = deviceHeight, minimap =
    // scrollHeight) and any other unit/calc/percentage that would resolve
    // differently inside the minimap document.
    function syncDimensions() {
        const sourceDoc = mainViewIframeRef.current?.contentDocument;
        const targetDoc = iframeRef.current?.contentDocument;
        if (!sourceDoc?.body || !targetDoc?.body)
            return;
        const srcView = sourceDoc.defaultView;
        if (!srcView)
            return;
        walkDimensions(sourceDoc.body, targetDoc.body, srcView);
    }
    function walkDimensions(src, dst, srcView) {
        // We can't use `instanceof HTMLElement` here because src/dst live in
        // different window realms (main iframe / minimap iframe) than this
        // component, so each realm has its own HTMLElement constructor and the
        // check would always be false. Use duck typing instead.
        const srcEl = src;
        const dstEl = dst;
        const dstStyle = dstEl.style;
        if (dstStyle && typeof srcEl.getBoundingClientRect === "function") {
            const rect = srcEl.getBoundingClientRect();
            if (rect.width > 0 || rect.height > 0) {
                dstStyle.setProperty("width", `${rect.width}px`, "important");
                dstStyle.setProperty("height", `${rect.height}px`, "important");
            }
            const cs = srcView.getComputedStyle(srcEl);
            if (cs.position === "absolute" || cs.position === "fixed") {
                const offsetParent = srcEl.offsetParent;
                const parentRect = offsetParent?.getBoundingClientRect();
                if (parentRect) {
                    dstStyle.setProperty("left", `${rect.left - parentRect.left}px`, "important");
                    dstStyle.setProperty("top", `${rect.top - parentRect.top}px`, "important");
                    dstStyle.removeProperty("right");
                    dstStyle.removeProperty("bottom");
                }
            }
        }
        // Walk children in lock-step. Bail at any divergent subtree — the
        // MutationObserver path keeps structures aligned, so this is purely
        // defensive.
        const sChildren = src.children;
        const dChildren = dst.children;
        const len = Math.min(sChildren.length, dChildren.length);
        for (let i = 0; i < len; i++) {
            walkDimensions(sChildren[i], dChildren[i], srcView);
        }
    }
    const updateScale = (scale) => {
        const scrollContainer = getScrollContainer();
        if (!iframeRef.current || !scaleContainerRef.current)
            return;
        if (!scrollContainer)
            return;
        scaleContainerRef.current.style.transform = `scale(${scale})`;
        scaleContainerRef.current.style.transformOrigin = "0 0";
        iframeRef.current.style.width = `${scrollContainer?.clientWidth}px`;
        iframeRef.current.style.height = `${scrollContainer?.scrollHeight}px`;
    };
    const handleClick = (e) => {
        const scrollContainer = getScrollContainer();
        if (!scrollContainer)
            return;
        // Check if click was on an interactive element (button, link, or element with pointer-events-auto)
        const target = e.target;
        const isInteractiveElement = target.closest('button, a, [role="button"], .placeholder-dropzone, [data-testid="placeholder-dropzone"], [data-testid="placeholder-dropzone-button"], .pointer-events-auto');
        if (isInteractiveElement) {
            // Don't scroll if user clicked on an interactive element (like dropzone buttons, comment icons, etc.)
            return;
        }
        const iframeRect = iframeRef.current?.getBoundingClientRect();
        if (!iframeRect)
            return;
        // Calculate click position relative to the minimap container
        const containerRect = minimapContainerRef.current?.getBoundingClientRect();
        if (!containerRect)
            return;
        const absY = e.clientY - containerRect.top;
        const scaledHeight = scrollContainer.scrollHeight * scale;
        const relY = (absY / scaledHeight) * scrollContainer.scrollHeight;
        e.stopPropagation();
        scrollDocumentTo(relY - viewport.height / 2);
    };
    const handleScroll = useCallback((e) => {
        const scrollContainer = getScrollContainer();
        if (!scrollContainer)
            return;
        scrollContainer.scrollBy({
            behavior: "instant",
            left: 0,
            top: e.deltaY,
        });
        mainViewIframeRef.current?.contentWindow?.document.documentElement?.scrollBy({
            behavior: "instant",
            left: 0,
            top: e.deltaY,
        });
        e.stopPropagation();
    }, [getScrollContainer, mainViewIframeRef]);
    return (_jsxs("div", { "data-testid": "minimap-container", className: "relative cursor-pointer overflow-hidden bg-white", ref: minimapContainerRef, onPointerDownCapture: handleClick, onWheelCapture: handleScroll, style: {
            height: "100%",
            width: miniMapWidth + "px",
            boxShadow: "5px 0 5px -5px #333",
        }, children: [_jsx("div", { className: "bg-opacity-50 absolute inset-0 overflow-hidden select-none", style: {
                    boxShadow: "rgb(200, 200, 200) -10px 1px 13px -10px",
                }, children: _jsx("div", { ref: minimapRef, onDragOverCapture: handleClick, className: "h-full w-full", children: _jsx("div", { ref: scaleContainerRef, children: _jsx("iframe", { className: "pointer-events-none", ref: iframeRef, style: { visibility: minimapReady ? "visible" : "hidden" } }) }) }) }), scrollTop !== undefined &&
                scrollHeight !== undefined &&
                minimapReady && (_jsx("div", { className: "pointer-events-none absolute w-full bg-gray-300 opacity-60 hover:opacity-65", style: {
                    top: scrollTop * scale + "px",
                    height: viewport.height * scale + "px",
                } })), editContext.mode === "edit" && (_jsx(PlaceholderDropZones, { scale: scale, iframe: iframeRef.current, size: "small", scroll: 0, pageViewContext: pageViewContext })), _jsx(FieldEditedIndicators, { scale: scale, pageViewContext: pageViewContext, scroll: scroll }), editContext.showComments && (_jsx(CommentHighlightings, { iframe: iframeRef.current, scale: scale })), editContext.showSuggestedEdits && (_jsx(SuggestionHighlightings, { iframe: iframeRef.current, scale: scale }))] }));
}
//# sourceMappingURL=MiniMap.js.map