/**
 * Kuchikomi Wall - Gutenberg Block Editor Script
 *
 * No-build approach: uses global wp.* objects.
 * Enqueued with deps: wp-blocks, wp-element, wp-block-editor, wp-components, wp-i18n
 */
( function( blocks, element, blockEditor, components, i18n ) {

    var el  = element.createElement;
    var Fragment = element.Fragment;
    var InspectorControls = blockEditor.InspectorControls;
    var useBlockProps     = blockEditor.useBlockProps;
    var PanelBody    = components.PanelBody;
    var SelectControl = components.SelectControl;
    var RangeControl  = components.RangeControl;
    var __           = i18n.__;

    var templateLabels = {
        card:   'Card Grid',
        slider: 'Slider',
        list:   'List',
    };

    blocks.registerBlockType( 'kuchikomi-wall/wall', {

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

            var blockProps = useBlockProps( {
                className: 'kuchikomi-wall-editor-preview',
            } );

            return el( Fragment, null,

                // --- Sidebar controls ---
                el( InspectorControls, null,
                    el( PanelBody, {
                        title: __( 'Display Settings', 'kuchikomi-wall' ),
                        initialOpen: true,
                    },
                        el( SelectControl, {
                            label: __( 'Template', 'kuchikomi-wall' ),
                            value: attributes.template,
                            options: [
                                { label: __( 'Card Grid', 'kuchikomi-wall' ), value: 'card'   },
                                { label: __( 'Slider',    'kuchikomi-wall' ), value: 'slider' },
                                { label: __( 'List',      'kuchikomi-wall' ), value: 'list'   },
                            ],
                            onChange: function( val ) { setAttributes( { template: val } ); },
                        } ),

                        el( SelectControl, {
                            label: __( 'Color Scheme', 'kuchikomi-wall' ),
                            value: attributes.color,
                            options: [
                                { label: __( 'Light',           'kuchikomi-wall' ), value: 'light' },
                                { label: __( 'Dark',            'kuchikomi-wall' ), value: 'dark'  },
                                { label: __( 'Match Site Theme','kuchikomi-wall' ), value: 'site'  },
                            ],
                            onChange: function( val ) { setAttributes( { color: val } ); },
                        } ),

                        el( RangeControl, {
                            label: __( 'Number of Reviews', 'kuchikomi-wall' ),
                            value: attributes.limit,
                            min: 1,
                            max: 20,
                            onChange: function( val ) { setAttributes( { limit: val } ); },
                        } ),

                        el( RangeControl, {
                            label: __( 'Columns', 'kuchikomi-wall' ),
                            value: attributes.columns,
                            min: 1,
                            max: 4,
                            onChange: function( val ) { setAttributes( { columns: val } ); },
                        } )
                    ),

                    el( PanelBody, {
                        title: __( 'Filter Settings', 'kuchikomi-wall' ),
                        initialOpen: false,
                    },
                        el( SelectControl, {
                            label: __( 'Source', 'kuchikomi-wall' ),
                            value: attributes.source,
                            options: [
                                { label: __( 'All Sources',    'kuchikomi-wall' ), value: 'all'     },
                                { label: __( 'Manual',         'kuchikomi-wall' ), value: 'manual'  },
                                { label: __( 'Google Reviews', 'kuchikomi-wall' ), value: 'google'  },
                                { label: __( 'X (Twitter)',    'kuchikomi-wall' ), value: 'x_embed' },
                            ],
                            onChange: function( val ) { setAttributes( { source: val } ); },
                        } ),

                        el( RangeControl, {
                            label: __( 'Minimum Rating (stars)', 'kuchikomi-wall' ),
                            value: attributes.minRating,
                            min: 1,
                            max: 5,
                            onChange: function( val ) { setAttributes( { minRating: val } ); },
                        } )
                    )
                ),

                // --- Editor placeholder ---
                el( 'div', blockProps,
                    el( 'div', { className: 'kuchikomi-wall-placeholder' },
                        el( 'span', { className: 'kuchikomi-wall-placeholder__icon dashicons dashicons-star-filled' } ),
                        el( 'strong', { className: 'kuchikomi-wall-placeholder__title' },
                            'Kuchikomi Wall'
                        ),
                        el( 'span', { className: 'kuchikomi-wall-placeholder__meta' },
                            ( templateLabels[ attributes.template ] || attributes.template ) +
                            ' · ' + attributes.limit + ' ' + __( 'reviews', 'kuchikomi-wall' ) +
                            ' · ' + attributes.color
                        )
                    )
                )
            );
        },

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

    } );

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