/**
 * aieo/brand-rails — block editor UI.
 *
 * UMD-style: uses the wp.* globals exposed by Gutenberg in the editor
 * (no build step needed). InspectorControls let editors pick which rails
 * to show + the brand count + slides-per-view per rail. Live preview via
 * wp.serverSideRender so the editor reflects what the front-end will render.
 */
( function ( wp ) {
    if ( ! wp || ! wp.blocks || ! wp.element ) { return; }

    var el                 = wp.element.createElement;
    var Fragment           = wp.element.Fragment;
    var registerBlockType  = wp.blocks.registerBlockType;
    var ServerSideRender   = wp.serverSideRender;
    var InspectorControls  = wp.blockEditor.InspectorControls;
    var useBlockProps      = wp.blockEditor.useBlockProps;
    var PanelBody          = wp.components.PanelBody;
    var ToggleControl      = wp.components.ToggleControl;
    var RangeControl       = wp.components.RangeControl;
    var SelectControl      = wp.components.SelectControl;
    var __                 = wp.i18n.__;

    /**
     * Build a section (rail) inspector group: one toggle + an indented
     * Limit + SlidesPerView row that only appears when the toggle is on.
     */
    function railSection( props, key, label, opts ) {
        var attrs   = props.attributes;
        var setAttr = function ( k ) {
            return function ( v ) { var p = {}; p[ k ] = v; props.setAttributes( p ); };
        };
        var showKey   = 'show'   + key;             // showTop / showFeatured / ...
        var limitKey  = key.toLowerCase() + 'Limit'; // topLimit / featuredLimit / ...
        var slidesKey = key.toLowerCase() + 'SlidesPerView';
        var children  = [
            el( ToggleControl, {
                label: label,
                checked: !! attrs[ showKey ],
                onChange: setAttr( showKey ),
                help: opts && opts.help ? opts.help : null,
            } ),
        ];
        if ( attrs[ showKey ] ) {
            children.push( el( RangeControl, {
                label: __( 'Brands to show', 'ai-eshop-optimizer' ),
                value: attrs[ limitKey ] || 0,
                onChange: setAttr( limitKey ),
                min: 0, max: 30, step: 1,
                help: __( '0 = use the default below.', 'ai-eshop-optimizer' ),
            } ) );
            children.push( el( RangeControl, {
                label: __( 'Slides per view', 'ai-eshop-optimizer' ),
                value: attrs[ slidesKey ] || 0,
                onChange: setAttr( slidesKey ),
                min: 0, max: 8, step: 1,
                help: __( '0 = use the default below.', 'ai-eshop-optimizer' ),
            } ) );
        }
        return el.apply( null, [ PanelBody, { title: label, initialOpen: false } ].concat( children ) );
    }

    registerBlockType( 'aieo/brand-rails', {
        edit: function ( props ) {
            var attrs   = props.attributes;
            var setAttr = function ( k ) {
                return function ( v ) { var p = {}; p[ k ] = v; props.setAttributes( p ); };
            };
            var blockProps = useBlockProps ? useBlockProps() : {};

            return el( Fragment, {},
                el( InspectorControls, {},
                    el( PanelBody, { title: __( 'Defaults', 'ai-eshop-optimizer' ), initialOpen: true },
                        el( RangeControl, {
                            label: __( 'Default brands per rail', 'ai-eshop-optimizer' ),
                            value: attrs.limitPerRail || 10,
                            onChange: setAttr( 'limitPerRail' ),
                            min: 3, max: 30, step: 1,
                        } ),
                        el( RangeControl, {
                            label: __( 'Default slides per view', 'ai-eshop-optimizer' ),
                            value: attrs.slidesPerView || 5,
                            onChange: setAttr( 'slidesPerView' ),
                            min: 2, max: 8, step: 1,
                        } )
                    ),
                    railSection( props, 'Top',        __( 'Top Brands', 'ai-eshop-optimizer' ),         { help: __( 'Best-sellers, by total sales.', 'ai-eshop-optimizer' ) } ),
                    railSection( props, 'Featured',   __( 'Featured Brands', 'ai-eshop-optimizer' ) ),
                    railSection( props, 'New',        __( 'ΝΕΑ Brands', 'ai-eshop-optimizer' ) ),
                    attrs.showNew ? el( PanelBody, { title: __( 'ΝΕΑ Brands — Definition', 'ai-eshop-optimizer' ), initialOpen: false },
                        el( SelectControl, {
                            label: __( '"New" means', 'ai-eshop-optimizer' ),
                            value: attrs.newMode || 'new_product',
                            options: [
                                { value: 'new_product', label: __( 'Brand whose newest product is most recent', 'ai-eshop-optimizer' ) },
                                { value: 'new_brand',   label: __( 'Newest brand creation date',                'ai-eshop-optimizer' ) },
                            ],
                            onChange: setAttr( 'newMode' ),
                        } )
                    ) : null,
                    railSection( props, 'Favourites', __( 'Your Favourite Brands', 'ai-eshop-optimizer' ), { help: __( 'Per-user, hidden for anonymous viewers.', 'ai-eshop-optimizer' ) } )
                ),
                el( 'div', blockProps,
                    el( ServerSideRender, {
                        block: 'aieo/brand-rails',
                        attributes: attrs,
                    } )
                )
            );
        },
        save: function () { return null; }
    } );
}( window.wp ) );
