(function(blocks, element, components, blockEditor, i18n) {
    const el = element.createElement;
    const __ = i18n.__;
    const InspectorControls = blockEditor.InspectorControls;
    const PanelBody = components.PanelBody;
    const RangeControl = components.RangeControl;
    const SelectControl = components.SelectControl;
    const TextControl = components.TextControl;

    blocks.registerBlockType('comment-image-boost/gallery', {
        title: __('Comment Image Gallery', 'comment-image-boost'),
        icon: 'format-gallery',
        category: 'widgets',
        attributes: {
            post_id: { type: 'number', default: 0 },
            limit: { type: 'number', default: 24 },
            columns: { type: 'number', default: 4 },
            layout: { type: 'string', default: 'grid' }
        },
        edit: function(props) {
            const attrs = props.attributes;
            const setAttributes = props.setAttributes;

            return el(
                'div',
                { className: 'ciboost-block-placeholder' },
                el(
                    InspectorControls,
                    {},
                    el(
                        PanelBody,
                        { title: __('Gallery settings', 'comment-image-boost'), initialOpen: true },
                        el(TextControl, {
                            label: __('Post ID', 'comment-image-boost'),
                            type: 'number',
                            value: attrs.post_id || 0,
                            onChange: function(value) {
                                setAttributes({ post_id: parseInt(value, 10) || 0 });
                            }
                        }),
                        el(RangeControl, {
                            label: __('Image limit', 'comment-image-boost'),
                            value: attrs.limit || 24,
                            min: 1,
                            max: 100,
                            onChange: function(value) {
                                setAttributes({ limit: value || 24 });
                            }
                        }),
                        el(RangeControl, {
                            label: __('Columns', 'comment-image-boost'),
                            value: attrs.columns || 4,
                            min: 1,
                            max: 6,
                            onChange: function(value) {
                                setAttributes({ columns: value || 4 });
                            }
                        }),
                        el(SelectControl, {
                            label: __('Layout', 'comment-image-boost'),
                            value: attrs.layout || 'grid',
                            options: [
                                { label: __('Grid', 'comment-image-boost'), value: 'grid' },
                                { label: __('Carousel', 'comment-image-boost'), value: 'carousel' }
                            ],
                            onChange: function(value) {
                                setAttributes({ layout: value });
                            }
                        })
                    )
                ),
                el(
                    'div',
                    {
                        style: {
                            border: '1px solid #dcdcde',
                            borderRadius: '8px',
                            padding: '18px',
                            background: '#fff'
                        }
                    },
                    el('strong', {}, __('Comment Image Gallery', 'comment-image-boost')),
                    el('p', {}, __('This dynamic block renders approved comment images on the front end.', 'comment-image-boost'))
                )
            );
        },
        save: function() {
            return null;
        }
    });
})(window.wp.blocks, window.wp.element, window.wp.components, window.wp.blockEditor, window.wp.i18n);
