wp.domReady(function () {
    var el = wp.element.createElement;
    var __ = wp.i18n.__;
    var registerBlockType = wp.blocks.registerBlockType;
    var InspectorControls = wp.blockEditor.InspectorControls;
    var BlockControls = wp.blockEditor.BlockControls;
    var useBlockProps = wp.blockEditor.useBlockProps;
    var InnerBlocks = wp.blockEditor.InnerBlocks;
    var PanelBody = wp.components.PanelBody;
    var SelectControl = wp.components.SelectControl;
    var ToolbarGroup = wp.components.ToolbarGroup;
    var ToolbarButton = wp.components.ToolbarButton;
    var ColorPalette = wp.components.ColorPalette;
    var BaseControl = wp.components.BaseControl;

    // Spacing token scale
    var spacingOptions = [
        { label: __('None', 'blockenberg'), value: 'none' },
        { label: __('XS (8px)', 'blockenberg'), value: 'xs' },
        { label: __('S (16px)', 'blockenberg'), value: 's' },
        { label: __('M (32px)', 'blockenberg'), value: 'm' },
        { label: __('L (48px)', 'blockenberg'), value: 'l' },
        { label: __('XL (64px)', 'blockenberg'), value: 'xl' }
    ];

    // Background presets
    var backgroundOptions = [
        { label: __('None', 'blockenberg'), value: 'none' },
        { label: __('Light', 'blockenberg'), value: 'light' },
        { label: __('Dark', 'blockenberg'), value: 'dark' },
        { label: __('Accent', 'blockenberg'), value: 'accent' },
        { label: __('Custom', 'blockenberg'), value: 'custom' }
    ];

    // Max width options
    var maxWidthOptions = [
        { label: '1024px', value: '1024' },
        { label: '1200px', value: '1200' },
        { label: '1440px', value: '1440' }
    ];

    // Section icon
    var sectionIcon = el('svg', { 
        width: 24, 
        height: 24, 
        viewBox: '0 0 24 24', 
        xmlns: 'http://www.w3.org/2000/svg' 
    },
        el('path', { 
            d: 'M3 5h18v2H3V5zm0 12h18v2H3v-2zm0-6h18v2H3v-2z',
            fill: 'currentColor'
        })
    );

    registerBlockType('blockenberg/section', {
        title: __('Section', 'blockenberg'),
        icon: sectionIcon,
        category: 'blockenberg',
        description: __('A container section for organizing content with rows and columns.', 'blockenberg'),
        
        edit: function (props) {
            var attributes = props.attributes;
            var setAttributes = props.setAttributes;
            var a = attributes;

            var blockProps = useBlockProps({
                className: [
                    'bkbg-section',
                    'bkbg-section--width-' + a.contentWidth,
                    'bkbg-section--padding-' + a.paddingY,
                    'bkbg-section--bg-' + a.background
                ].join(' '),
                style: {
                    '--bkbg-section-max-width': a.boxedMaxWidth + 'px',
                    '--bkbg-section-custom-bg': a.backgroundColor || undefined
                }
            });

            // Toolbar controls
            var toolbar = el(BlockControls, {},
                el(ToolbarGroup, {},
                    el(ToolbarButton, {
                        icon: 'align-full-width',
                        label: __('Full Width', 'blockenberg'),
                        isPressed: a.contentWidth === 'full',
                        onClick: function () { setAttributes({ contentWidth: 'full' }); }
                    }),
                    el(ToolbarButton, {
                        icon: 'align-center',
                        label: __('Boxed', 'blockenberg'),
                        isPressed: a.contentWidth === 'boxed',
                        onClick: function () { setAttributes({ contentWidth: 'boxed' }); }
                    })
                )
            );

            // Inspector controls
            var inspector = el(InspectorControls, {},
                el(PanelBody, { title: __('Section Settings', 'blockenberg'), initialOpen: true },
                    el(SelectControl, {
                        label: __('Content Width', 'blockenberg'),
                        value: a.contentWidth,
                        options: [
                            { label: __('Full Width', 'blockenberg'), value: 'full' },
                            { label: __('Boxed', 'blockenberg'), value: 'boxed' }
                        ],
                        onChange: function (v) { setAttributes({ contentWidth: v }); }
                    }),
                    a.contentWidth === 'boxed' && el(SelectControl, {
                        label: __('Max Width', 'blockenberg'),
                        value: a.boxedMaxWidth,
                        options: maxWidthOptions,
                        onChange: function (v) { setAttributes({ boxedMaxWidth: v }); }
                    }),
                    el(SelectControl, {
                        label: __('Vertical Padding', 'blockenberg'),
                        value: a.paddingY,
                        options: spacingOptions,
                        onChange: function (v) { setAttributes({ paddingY: v }); }
                    })
                ),
                el(PanelBody, { title: __('Background', 'blockenberg'), initialOpen: false },
                    el(SelectControl, {
                        label: __('Background Preset', 'blockenberg'),
                        value: a.background,
                        options: backgroundOptions,
                        onChange: function (v) { 
                            setAttributes({ background: v });
                            if (v !== 'custom') {
                                setAttributes({ backgroundColor: '' });
                            }
                        }
                    }),
                    a.background === 'custom' && el(BaseControl, {
                        label: __('Custom Color', 'blockenberg')
                    },
                        el(ColorPalette, {
                            value: a.backgroundColor,
                            onChange: function (color) { setAttributes({ backgroundColor: color }); }
                        })
                    )
                )
            );

            // Inner blocks template - only allow Row blocks
            var innerBlocksTemplate = [
                ['blockenberg/row', { columnsCount: 1 }]
            ];
            var allowedBlocks = ['blockenberg/row'];

            return el('div', blockProps,
                toolbar,
                inspector,
                el('div', { className: 'bkbg-section__inner' },
                    el(InnerBlocks, {
                        template: innerBlocksTemplate,
                        allowedBlocks: allowedBlocks,
                        templateLock: false,
                        renderAppender: false
                    })
                )
            );
        },

        save: function (props) {
            var a = props.attributes;
            var blockProps = useBlockProps.save({
                className: [
                    'bkbg-section',
                    'bkbg-section--width-' + a.contentWidth,
                    'bkbg-section--padding-' + a.paddingY,
                    'bkbg-section--bg-' + a.background
                ].join(' '),
                style: {
                    '--bkbg-section-max-width': a.boxedMaxWidth + 'px',
                    '--bkbg-section-custom-bg': a.backgroundColor || undefined
                }
            });

            return el('div', blockProps,
                el('div', { className: 'bkbg-section__inner' },
                    el(InnerBlocks.Content)
                )
            );
        }
    });
});