function ws_elementor_preview_width_display() {
    echo <<<'HTML'

(function () {
    'use strict';

    const devices = [
        ['Custom', '', ''],
        ['iPhone 17 PMax/16 PMax', 440, 956],
        ['iPhone 17/17 Pro/16 Pro', 402, 874],
        ['iPhone 15/15 Pro/16/16e', 393, 852],
        ['iPhone 15 PMax/15+/16+', 430, 932],
        ['iPhone 14 Pro', 393, 852],
        ['iPhone 14 PMax', 430, 932],
        ['iPhone 12/12 Pro/13/13 Pro/14', 390, 844],
        ['iPhone 12 PMax/13 PMax/14+', 428, 926],
        ['iPhone 12 mini/13 mini', 360, 780],
        ['iPhone XR/XS Max/11/11 PMax', 414, 896],
        ['iPhone X/XS/11 Pro', 375, 812],
        ['iPhone SE 2020/2022', 375, 667],
        ['Galaxy S25 Ultra/S26 Ultra', 412, 891],
        ['Galaxy S25+/S26+', 412, 891],
        ['Galaxy S25/S26', 360, 780],
        ['Galaxy S24 Ultra', 412, 889],
        ['Galaxy S24+', 412, 889],
        ['Galaxy S24', 360, 780],
        ['Galaxy S22 Ultra/S23 Ultra', 384, 854],
        ['Galaxy S22+/S23+', 360, 780],
        ['Galaxy S22/S23', 360, 780],
        ['Galaxy S21 Ultra', 384, 854],
        ['Galaxy S20/S20+/S21/S21+', 360, 800],
        ['Galaxy S10/S10+', 360, 760],
        ['Galaxy S9/S9+', 360, 740],
        ['Galaxy Z Fold 6', 966, 1162],
        ['Galaxy Z Flip 6', 360, 840],
        ['Galaxy A55/A35', 412, 892],
        ['Galaxy A54/A34', 412, 892],
        ['Galaxy A53/A33', 412, 915],
        ['Galaxy A52/A32', 412, 915],
        ['Galaxy A51/A50', 412, 892]
    ];

    let currentMode = '';

    const savedSizes = {
        desktop: null,
        tablet: null,
        mobile: null
    };

    function getCurrentMode() {
        const mobileButton = document.querySelector(
            '[data-testid="switch-device-to-mobile"][aria-selected="true"]'
        );

        const tabletButton = document.querySelector(
            '[data-testid="switch-device-to-tablet"][aria-selected="true"]'
        );

        if (mobileButton) {
            return 'mobile';
        }

        if (tabletButton) {
            return 'tablet';
        }

        return 'desktop';
    }

    function getPreview() {
        return (
            document.getElementById('elementor-preview-responsive-wrapper') ||
            document.querySelector('.elementor-preview-responsive-wrapper') ||
            document.querySelector('iframe#elementor-preview-iframe')
        );
    }

    function cleanValue(value) {
        value = String(value).trim();

        if (!value) {
            return '';
        }

        if (/^\d+$/.test(value)) {
            return value + 'px';
        }

        return value;
    }

    function applySizeToPreview(width, height) {
        const preview = getPreview();

        if (!preview) {
            return;
        }

        preview.style.width = width || '';
        preview.style.maxWidth = width || '';
        preview.style.height = height || '';
        preview.style.maxHeight = height || '';
    }

    function applyCustomSize() {
        const mode = getCurrentMode();
        const widthInput = document.getElementById('ws-preview-width');
        const heightInput = document.getElementById('ws-preview-height');

        if (!widthInput || !heightInput) {
            return;
        }

        const width = cleanValue(widthInput.value);
        const height = cleanValue(heightInput.value);

        savedSizes[mode] = {
            width: width,
            height: height
        };

        applySizeToPreview(width, height);
    }

    function createDisplay() {
        let display = document.getElementById(
            'ws-elementor-size-display'
        );

        if (display) {
            return display;
        }

        display = document.createElement('div');
        display.id = 'ws-elementor-size-display';

        let options = '';

        devices.forEach(function (device, index) {
            options +=
                '' +
                device[0] +
                '';
        });

        display.innerHTML =
            '' +
            options +
            '' +
            '<span style="margin-left:6px">W:</span>' +
            '' +
            '<span>H:</span>' +
            '';

        Object.assign(display.style, {
            position: 'fixed',
            top: '7px',
            left: '50%',
            transform: 'translateX(calc(-50% - 350px))',
            color: '#ffffff',
            background: 'rgba(0,0,0,0.75)',
            padding: '5px 10px',
            zIndex: '999999',
            fontSize: '13px',
            fontFamily: 'monospace',
            borderRadius: '4px',
            pointerEvents: 'auto',
            whiteSpace: 'nowrap'
        });

        document.body.appendChild(display);

        const select = document.getElementById('ws-device-select');
        const widthInput = document.getElementById('ws-preview-width');
        const heightInput = document.getElementById('ws-preview-height');

        if (!select || !widthInput || !heightInput) {
            return display;
        }

        [select, widthInput, heightInput].forEach(function (element) {
            Object.assign(element.style, {
                background: '#2C2F33',
                color: '#E6E6E6',
                border: '1px solid #444',
                borderRadius: '3px',
                height: '22px',
                padding: '0 4px',
                fontSize: '12px',
                fontFamily: 'inherit',
                boxSizing: 'border-box',
                margin: '0 4px'
            });
        });

        select.style.minWidth = '180px';
        widthInput.style.width = '58px';
        heightInput.style.width = '58px';

        widthInput.addEventListener('change', function () {
            select.value = '0';
            applyCustomSize();
        });

        heightInput.addEventListener('change', function () {
            select.value = '0';
            applyCustomSize();
        });

        select.addEventListener('change', function () {
            const selected = devices[Number(this.value)];

            if (!selected || !selected[1] || !selected[2]) {
                return;
            }

            widthInput.value = selected[1] + 'px';
            heightInput.value = selected[2] + 'px';

            applyCustomSize();
        });

        return display;
    }

    function updateDisplay() {
        const preview = getPreview();

        createDisplay();

        const mode = getCurrentMode();

        const deviceSelect = document.getElementById(
            'ws-device-select'
        );

        const widthInput = document.getElementById(
            'ws-preview-width'
        );

        const heightInput = document.getElementById(
            'ws-preview-height'
        );

        if (!deviceSelect || !widthInput || !heightInput) {
            return;
        }

        deviceSelect.style.display =
            mode === 'mobile' ? 'inline-block' : 'none';

        if (
            !preview ||
            document.activeElement === widthInput ||
            document.activeElement === heightInput
        ) {
            return;
        }

        if (mode !== currentMode) {
            currentMode = mode;

            if (savedSizes[mode]) {
                widthInput.value = savedSizes[mode].width;
                heightInput.value = savedSizes[mode].height;

                applySizeToPreview(
                    savedSizes[mode].width,
                    savedSizes[mode].height
                );
            } else {
                widthInput.value = '';
                heightInput.value = '';
                deviceSelect.value = '0';

                applySizeToPreview('', '');
            }

            return;
        }

        const rectangle = preview.getBoundingClientRect();

        widthInput.value = Math.round(rectangle.width) + 'px';
        heightInput.value = Math.round(rectangle.height) + 'px';
    }

    window.setInterval(updateDisplay, 250);
    window.addEventListener('resize', updateDisplay);

    if (document.readyState === 'loading') {
        document.addEventListener(
            'DOMContentLoaded',
            updateDisplay
        );
    } else {
        updateDisplay();
    }
})();

HTML;
}

add_action(
    'elementor/editor/after_enqueue_scripts',
    'ws_elementor_preview_width_display'
);