/**
 * aieo/brand-azindex — block editor UI.
 *
 * UMD-style (no build step): uses the wp.* globals Gutenberg exposes
 * in the editor. ServerSideRender keeps the editor preview byte-for-
 * byte identical to the front-end render so what the editor shows is
 * exactly what visitors get.
 *
 * Mirrors the registration pattern of `aieo/brand-rails` and
 * `aieo/brand-slider`. Without this file the block.json's `render: file`
 * still drives the FRONT-END output correctly, but the editor has no
 * way to register the block client-side and falls back to the
 * "Your site doesn't include support for this block" notice.
 */
( 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 SelectControl     = wp.components.SelectControl;
    var __                = wp.i18n.__;

    registerBlockType( 'aieo/brand-azindex', {
        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: __( 'A-Z Index', 'ai-eshop-optimizer' ), initialOpen: true },
                        el( ToggleControl, {
                            label:   __( 'Show product counts', 'ai-eshop-optimizer' ),
                            checked: !! attrs.showCounts,
                            onChange: setAttr( 'showCounts' ),
                            help:    __( 'Renders "(N brands)" next to each letter heading and "X products · Y in stock" inside each card.', 'ai-eshop-optimizer' ),
                        } ),
                        el( ToggleControl, {
                            label:   __( 'Show brand logos', 'ai-eshop-optimizer' ),
                            checked: !! attrs.showLogos,
                            onChange: setAttr( 'showLogos' ),
                            help:    __( 'Reads from wp_aieo_dmm_brand_extras.logo_image_id. Brands without a logo fall back to a plain text card.', 'ai-eshop-optimizer' ),
                        } ),
                        el( ToggleControl, {
                            label:   __( 'Sticky letter bar', 'ai-eshop-optimizer' ),
                            checked: !! attrs.stickyBar,
                            onChange: setAttr( 'stickyBar' ),
                            help:    __( 'Keeps the A–Z navigation pinned to the top of the viewport while the visitor scrolls the grid.', 'ai-eshop-optimizer' ),
                        } ),
                        el( ToggleControl, {
                            label:   __( 'Include "#" bucket for non-Latin brands', 'ai-eshop-optimizer' ),
                            checked: !! attrs.showHashBucket,
                            onChange: setAttr( 'showHashBucket' ),
                            help:    __( 'Brands starting with Greek, Cyrillic, or other non-A–Z characters bucket under "#".', 'ai-eshop-optimizer' ),
                        } ),
                        el( SelectControl, {
                            label:    __( 'Heading level', 'ai-eshop-optimizer' ),
                            value:    attrs.headingLevel || 'h2',
                            options:  [
                                { label: 'H2', value: 'h2' },
                                { label: 'H3', value: 'h3' },
                                { label: 'H4', value: 'h4' },
                            ],
                            onChange: setAttr( 'headingLevel' ),
                            help:    __( 'Used for each per-letter section heading. Pick the level that fits your page outline.', 'ai-eshop-optimizer' ),
                        } )
                    )
                ),
                el( 'div', blockProps,
                    ServerSideRender
                        ? el( ServerSideRender, {
                            block:      'aieo/brand-azindex',
                            attributes: attrs,
                            EmptyResponsePlaceholder: function () {
                                return el( 'div', { style: { padding: '20px', background: '#f6f7f7', border: '1px dashed #c3c4c7', textAlign: 'center', color: '#646970' } },
                                    __( 'A-Z brand index — no brands found yet. Populate wp_aieo_core_brand_vitals (Brand Vitals refresh) to see the directory.', 'ai-eshop-optimizer' )
                                );
                            }
                        } )
                        : el( 'div', { style: { padding: '20px', background: '#f6f7f7' } },
                            __( 'AIEO Brand A-Z Index — preview not available in this editor.', 'ai-eshop-optimizer' )
                        )
                )
            );
        },
        // Server-rendered: nothing to save client-side.
        save: function () { return null; },
    } );
} )( window.wp );
