/**
 * aieo/latest-posts-overlay — block editor UI.
 *
 * UMD globals only (wp.*); no build step. Lets editors set an optional
 * section heading (with the shared "feature heading" style — big thin
 * uppercase + underline, same as the product sliders / brand / reviews
 * blocks), choose the card style (overlay vs the legacy glass layout),
 * post count and current-post exclusion. Live preview via ServerSideRender.
 */
( 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 SelectControl     = wp.components.SelectControl;
    var RangeControl      = wp.components.RangeControl;
    var TextControl       = wp.components.TextControl;
    var ToggleControl     = wp.components.ToggleControl;
    var __                = wp.i18n.__;

    registerBlockType( 'aieo/latest-posts-overlay', {
        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: __( 'Heading', 'ai-eshop-optimizer' ), initialOpen: true },
                        el( TextControl, {
                            label: __( 'Section title', 'ai-eshop-optimizer' ),
                            help: __( 'Leave empty for no heading.', 'ai-eshop-optimizer' ),
                            value: attrs.secHeading || '',
                            onChange: setAttr( 'secHeading' ),
                        } ),
                        el( ToggleControl, {
                            label: __( 'Feature heading style (large, like product sliders)', 'ai-eshop-optimizer' ),
                            help: __( 'Inherits the big thin-uppercase title + underline used by the product sliders.', 'ai-eshop-optimizer' ),
                            checked: !! attrs.secHeadingFeature,
                            onChange: setAttr( 'secHeadingFeature' ),
                        } ),
                        el( SelectControl, {
                            label: __( 'Heading alignment', 'ai-eshop-optimizer' ),
                            value: attrs.secAlign || 'left',
                            options: [
                                { value: 'left',   label: __( 'Left', 'ai-eshop-optimizer' ) },
                                { value: 'center', label: __( 'Center', 'ai-eshop-optimizer' ) },
                                { value: 'right',  label: __( 'Right', 'ai-eshop-optimizer' ) },
                            ],
                            onChange: setAttr( 'secAlign' ),
                        } )
                    ),
                    el( PanelBody, { title: __( 'Layout', 'ai-eshop-optimizer' ), initialOpen: false },
                        el( SelectControl, {
                            label: __( 'Card style', 'ai-eshop-optimizer' ),
                            value: attrs.cardStyle || 'overlay',
                            options: [
                                { value: 'overlay', label: __( 'Overlay (dark gradient)', 'ai-eshop-optimizer' ) },
                                { value: 'glass',   label: __( 'Glass (tall cards, frosted bar)', 'ai-eshop-optimizer' ) },
                            ],
                            onChange: setAttr( 'cardStyle' ),
                        } ),
                        el( RangeControl, {
                            label: __( 'Posts to show', 'ai-eshop-optimizer' ),
                            value: attrs.posts || 5,
                            onChange: setAttr( 'posts' ),
                            min: 1, max: 12, step: 1,
                        } ),
                        el( ToggleControl, {
                            label: __( 'Exclude current post', 'ai-eshop-optimizer' ),
                            checked: !! attrs.excludeCurrent,
                            onChange: setAttr( 'excludeCurrent' ),
                        } )
                    )
                ),
                el( 'div', blockProps,
                    ServerSideRender
                        ? el( ServerSideRender, { block: 'aieo/latest-posts-overlay', attributes: attrs } )
                        : el( 'p', {}, __( 'Latest Posts Overlay', 'ai-eshop-optimizer' ) )
                )
            );
        },
        save: function () { return null; }
    } );
}( window.wp ) );
