(function() {
    'use strict';

    // Wait for WordPress to be ready
    if (typeof wp === 'undefined') {
        return;
    }

    const { addFilter } = wp.hooks;
    const { createHigherOrderComponent } = wp.compose;
    const { Fragment } = wp.element;
    const { InspectorControls } = wp.blockEditor;

    // Add filter to modify image block rendering
    addFilter(
        'editor.BlockEdit',
        'caliph/image-block-border-fix',
        createHigherOrderComponent((BlockEdit) => {
            return (props) => {
                // Only process image blocks
                if (props.name !== 'core/image') {
                    return wp.element.createElement(BlockEdit, props);
                }

                // Check if block has border styles
                const hasBorder = props.attributes.style && 
                                (props.attributes.style.border || 
                                 (props.attributes.style.spacing && props.attributes.style.spacing.border));

                if (hasBorder) {
                    // Force the block to re-render with proper border handling
                    setTimeout(() => {
                        const blockElement = document.querySelector(`[data-block="${props.clientId}"]`);
                        if (blockElement) {
                            const img = blockElement.querySelector('img');
                            const figure = blockElement.querySelector('figure');
                            
                            if (img && figure) {
                                // Get computed styles
                                const computedStyle = window.getComputedStyle(img);
                                
                                // Move border properties to figure
                                if (computedStyle.border !== 'none') {
                                    figure.style.border = computedStyle.border;
                                }
                                if (computedStyle.borderRadius !== '0px') {
                                    figure.style.borderRadius = computedStyle.borderRadius;
                                    figure.style.overflow = 'hidden';
                                }
                                
                                // Remove border from img
                                img.style.setProperty('border', 'none', 'important');
                                img.style.setProperty('border-radius', '0', 'important');
                            }
                        }
                    }, 100);
                }

                return wp.element.createElement(BlockEdit, props);
            };
        })
    );

    // Add filter to modify block save output
    addFilter(
        'blocks.getSaveElement',
        'caliph/image-block-save-fix',
        (element, blockType, attributes) => {
            // Only process image blocks
            if (blockType.name !== 'core/image') {
                return element;
            }

            // Check if block has border styles
            const hasBorder = attributes.style && 
                            (attributes.style.border || 
                             (attributes.style.spacing && attributes.style.spacing.border));

            if (hasBorder && element && element.props && element.props.children) {
                // Clone the element to modify it
                const newElement = { ...element };
                
                // Find img and figure elements
                const findAndModifyElements = (children) => {
                    if (Array.isArray(children)) {
                        return children.map(child => findAndModifyElements(child));
                    } else if (children && children.props) {
                        if (children.type === 'img') {
                            // Remove border from img
                            const newProps = { ...children.props };
                            newProps.style = {
                                ...newProps.style,
                                border: 'none',
                                borderRadius: '0',
                                borderWidth: '0',
                                borderColor: 'transparent',
                                borderStyle: 'none'
                            };
                            return { ...children, props: newProps };
                        } else if (children.type === 'figure') {
                            // Add border to figure
                            const newProps = { ...children.props };
                            newProps.style = {
                                ...newProps.style,
                                border: 'inherit',
                                borderRadius: 'inherit',
                                borderWidth: 'inherit',
                                borderColor: 'inherit',
                                borderStyle: 'inherit',
                                overflow: 'hidden'
                            };
                            return { ...children, props: newProps };
                        } else if (children.props.children) {
                            return { ...children, props: { ...children.props, children: findAndModifyElements(children.props.children) } };
                        }
                    }
                    return children;
                };

                newElement.props.children = findAndModifyElements(element.props.children);
                return newElement;
            }

            return element;
        }
    );

    // Monitor for block changes
    if (wp.data && wp.data.subscribe) {
        wp.data.subscribe(() => {
            const selectedBlock = wp.data.select('core/block-editor').getSelectedBlock();
            if (selectedBlock && selectedBlock.name === 'core/image') {
                setTimeout(() => {
                    const blockElement = document.querySelector(`[data-block="${selectedBlock.clientId}"]`);
                    if (blockElement) {
                        const img = blockElement.querySelector('img');
                        const figure = blockElement.querySelector('figure');
                        
                        if (img && figure) {
                            const computedStyle = window.getComputedStyle(img);
                            
                            if (computedStyle.border !== 'none' || computedStyle.borderRadius !== '0px') {
                                // Move border to figure
                                figure.style.border = computedStyle.border;
                                figure.style.borderRadius = computedStyle.borderRadius;
                                figure.style.overflow = 'hidden';
                                
                                // Remove from img
                                img.style.setProperty('border', 'none', 'important');
                                img.style.setProperty('border-radius', '0', 'important');
                            }
                        }
                    }
                }, 50);
            }
        });
    }

    // Run periodically to catch any missed blocks
    setInterval(() => {
        const imageBlocks = document.querySelectorAll('.wp-block-image');
        imageBlocks.forEach(block => {
            const img = block.querySelector('img');
            const figure = block.querySelector('figure');
            
            if (img && figure) {
                const computedStyle = window.getComputedStyle(img);
                
                if (computedStyle.border !== 'none' || computedStyle.borderRadius !== '0px') {
                    // Move border to figure
                    figure.style.border = computedStyle.border;
                    figure.style.borderRadius = computedStyle.borderRadius;
                    figure.style.overflow = 'hidden';
                    
                    // Remove from img
                    img.style.setProperty('border', 'none', 'important');
                    img.style.setProperty('border-radius', '0', 'important');
                }
            }
        });
    }, 500);

})();