(function(blocks, element, components, blockEditor) {
    var el = element.createElement;
    var SelectControl = components.SelectControl;
    var useBlockProps = blockEditor.useBlockProps;
    var InspectorControls = blockEditor.InspectorControls;
    var PanelBody = components.PanelBody;
    
    blocks.registerBlockType('askagento/filter', {
        title: 'AskAgento Product Filter',
        icon: 'filter',
        category: 'widgets',
        
        attributes: {
            filterId: {
                type: 'number',
                default: 0
            }
        },
        
        edit: function(props) {
            var filterId = props.attributes.filterId;
            var setAttributes = props.setAttributes;
            var blockProps = useBlockProps();
            
            var filterOptions = askagentoBlock.filters || [];
            
            var selectedFilter = filterOptions.find(function(f) {
                return f.value === filterId;
            });
            
            var filterName = selectedFilter && selectedFilter.value ? selectedFilter.label : 'No filter selected';
            
            return el('div', blockProps,
                el(InspectorControls, null,
                    el(PanelBody, { title: 'Filter Settings', initialOpen: true },
                        el(SelectControl, {
                            label: 'Select Filter',
                            value: filterId,
                            options: filterOptions,
                            onChange: function(value) {
                                setAttributes({ filterId: parseInt(value) });
                            }
                        })
                    )
                ),
                el('div', { className: 'askagento-block-preview' },
                    el('div', { className: 'askagento-block-icon' }, '🔍'),
                    el('div', { className: 'askagento-block-title' }, 'Product Filter'),
                    el('div', { className: 'askagento-block-filter' }, filterName)
                )
            );
        },
        
        save: function() {
            return null; // Dynamic block
        }
    });
    
})(
    window.wp.blocks,
    window.wp.element,
    window.wp.components,
    window.wp.blockEditor
);
