( function( blocks, element, blockEditor, components, serverSideRender ) {
    'use strict';

    var el                = element.createElement;
    var InspectorControls = blockEditor.InspectorControls;
    var PanelBody         = components.PanelBody;
    var TextControl       = components.TextControl;
    var TextareaControl   = components.TextareaControl;
    var SelectControl     = components.SelectControl;
    var ToggleControl     = components.ToggleControl;
    var RangeControl      = components.RangeControl;
    var ServerSideRender  = serverSideRender;

    var catOptions = ( window.flavorBlockData && window.flavorBlockData.categories )
        ? window.flavorBlockData.categories
        : [ { label: 'All Categories', value: '' } ];

    blocks.registerBlockType( 'flavor-menu/menu', {
        title:    'Flavor Menu',
        icon:     'food',
        category: 'widgets',

        attributes: {
            title:            { type: 'string',  default: 'Our Menu' },
            description:      { type: 'string',  default: '' },
            category:         { type: 'string',  default: '' },
            limit:            { type: 'integer', default: 12 },
            show_filter:      { type: 'string',  default: 'yes' },
            hide_all_btn:     { type: 'string',  default: '' },
            default_category: { type: 'string',  default: '' },
            currency:         { type: 'string',  default: '€' },
            el_class:         { type: 'string',  default: '' },
        },

        edit: function( props ) {
            var attr    = props.attributes;
            var setAttr = props.setAttributes;

            return [
                el( InspectorControls, { key: 'controls' },

                    // ── General ──────────────────────────────────────────────
                    el( PanelBody, { title: 'General', initialOpen: true },
                        el( TextControl, {
                            label:    'Heading',
                            value:    attr.title,
                            onChange: function( v ) { setAttr( { title: v } ); },
                        } ),
                        el( TextareaControl, {
                            label:    'Description',
                            value:    attr.description,
                            onChange: function( v ) { setAttr( { description: v } ); },
                        } ),
                        el( SelectControl, {
                            label:    'Filter by Category',
                            value:    attr.category,
                            options:  catOptions,
                            onChange: function( v ) { setAttr( { category: v } ); },
                        } ),
                        el( RangeControl, {
                            label:    'Max. Items',
                            value:    attr.limit,
                            min:      1,
                            max:      200,
                            onChange: function( v ) { setAttr( { limit: v } ); },
                        } )
                    ),

                    // ── Display ──────────────────────────────────────────────
                    el( PanelBody, { title: 'Display', initialOpen: false },
                        el( ToggleControl, {
                            label:    'Show Category Filter',
                            checked:  attr.show_filter === 'yes',
                            onChange: function( v ) { setAttr( { show_filter: v ? 'yes' : 'no' } ); },
                        } ),
                        attr.show_filter === 'yes' && el( ToggleControl, {
                            label:    'Hide "All" Button',
                            checked:  attr.hide_all_btn === 'yes',
                            onChange: function( v ) { setAttr( { hide_all_btn: v ? 'yes' : '' } ); },
                        } ),
                        attr.show_filter === 'yes' && el( SelectControl, {
                            label:    'Default Category (Preselect)',
                            value:    attr.default_category,
                            options:  catOptions,
                            onChange: function( v ) { setAttr( { default_category: v } ); },
                        } )
                    ),

                    // ── Advanced ─────────────────────────────────────────────
                    el( PanelBody, { title: 'Advanced', initialOpen: false },
                        el( TextControl, {
                            label:    'Currency Symbol',
                            value:    attr.currency,
                            onChange: function( v ) { setAttr( { currency: v } ); },
                        } ),
                        el( TextControl, {
                            label:    'Additional CSS Class',
                            value:    attr.el_class,
                            onChange: function( v ) { setAttr( { el_class: v } ); },
                        } )
                    )
                ),

                // Live preview via Server-Side Render
                el( ServerSideRender, {
                    key:        'preview',
                    block:      'flavor-menu/menu',
                    attributes: attr,
                } )
            ];
        },

        // Server-side rendered — no client markup needed
        save: function() {
            return null;
        },
    } );

} )(
    window.wp.blocks,
    window.wp.element,
    window.wp.blockEditor,
    window.wp.components,
    window.wp.serverSideRender
);
