/**
 * AIEO Responsive (per-device) controls.
 *
 * WordPress's native spacing/typography controls are single-value (core only
 * scales fonts fluidly, not true per-device values). This adds explicit
 * DESKTOP vs MOBILE (≤767px) overrides for padding / margin / font-size to
 * EVERY AIEO block at once — via global editor filters, so no per-block wiring
 * and any future aieo/* block inherits it automatically.
 *
 * The server side (class-aieo-responsive-controls.php) reads the same six
 * attributes off the block and emits a scoped <style> + wrapper at render.
 */
(function (wp) {
    if (!wp || !wp.hooks || !wp.element || !wp.components || !wp.blockEditor || !wp.compose) { return; }

    var el       = wp.element.createElement;
    var Fragment = wp.element.Fragment;
    var __       = (wp.i18n && wp.i18n.__) ? wp.i18n.__ : function (s) { return s; };
    var addFilter = wp.hooks.addFilter;
    var InspectorControls = wp.blockEditor.InspectorControls;
    var PanelBody   = wp.components.PanelBody;
    var TextControl = wp.components.TextControl;
    var SelectControl = wp.components.SelectControl;
    var createHigherOrderComponent = wp.compose.createHigherOrderComponent;

    var ATTRS = ['aieoPadD', 'aieoPadM', 'aieoMarD', 'aieoMarM', 'aieoFsD', 'aieoFsM', 'aieoEdge', 'aieoSlider'];

    function isAieo(name) { return typeof name === 'string' && name.indexOf('aieo/') === 0; }

    // 1) Register the six string attributes on every aieo/* block.
    addFilter('blocks.registerBlockType', 'aieo/responsive-controls', function (settings, name) {
        if (!isAieo(name)) { return settings; }
        settings.attributes = settings.attributes || {};
        ATTRS.forEach(function (k) {
            if (!settings.attributes[k]) { settings.attributes[k] = { type: 'string', default: '' }; }
        });
        return settings;
    });

    // 2) Add the "Responsive (per device)" panel to the Styles tab of every aieo/* block.
    var withPanel = createHigherOrderComponent(function (BlockEdit) {
        return function (props) {
            if (!isAieo(props.name)) { return el(BlockEdit, props); }
            var a = props.attributes, set = props.setAttributes;
            function fld(label, key, ph) {
                return el(TextControl, {
                    label: label, value: a[key] || '', placeholder: ph || '',
                    onChange: function (v) { var o = {}; o[key] = v; set(o); }
                });
            }
            function row() {
                return el('div', { style: { display: 'flex', gap: '8px' } }, Array.prototype.slice.call(arguments));
            }
            var panel = el(InspectorControls, { group: 'styles' },
                el(PanelBody, { title: __('Responsive (per device)', 'ai-eshop-optimizer'), initialOpen: false },
                    el('p', { style: { fontSize: '11px', opacity: 0.7, margin: '0 0 10px' } },
                        __('Explicit desktop vs mobile (≤767px) overrides. Use CSS units — e.g. 24px, 1.5rem, or a shorthand like "20px 0". Leave blank to inherit.', 'ai-eshop-optimizer')),
                    row(
                        fld(__('Padding — desktop', 'ai-eshop-optimizer'), 'aieoPadD', '20px 0'),
                        fld(__('Padding — mobile', 'ai-eshop-optimizer'), 'aieoPadM', '10px 0')
                    ),
                    row(
                        fld(__('Margin — desktop', 'ai-eshop-optimizer'), 'aieoMarD', ''),
                        fld(__('Margin — mobile', 'ai-eshop-optimizer'), 'aieoMarM', '')
                    ),
                    row(
                        fld(__('Font size — desktop', 'ai-eshop-optimizer'), 'aieoFsD', '1.1rem'),
                        fld(__('Font size — mobile', 'ai-eshop-optimizer'), 'aieoFsM', '.95rem')
                    ),
                    el('hr', { style: { margin: '12px 0 10px', border: 0, borderTop: '1px solid #e0e0e0' } }),
                    SelectControl && el(SelectControl, {
                        label: __('Run to page edge — mobile', 'ai-eshop-optimizer'),
                        help: __('Break the mobile page gutter so a carousel runs to the screen edge. "Right" is the usual choice for sliders; off-screen cards stay clipped (no horizontal scroll).', 'ai-eshop-optimizer'),
                        value: a.aieoEdge || '',
                        options: [
                            { value: '', label: __('Off (default)', 'ai-eshop-optimizer') },
                            { value: 'right', label: __('Right edge', 'ai-eshop-optimizer') },
                            { value: 'left', label: __('Left edge', 'ai-eshop-optimizer') },
                            { value: 'both', label: __('Both edges (full-bleed)', 'ai-eshop-optimizer') }
                        ],
                        onChange: function (v) { set({ aieoEdge: v }); }
                    }),
                    SelectControl && el(SelectControl, {
                        label: __('Slider style', 'ai-eshop-optimizer'),
                        help: __('Apply the recommendations-carousel scroller chrome: a pink scroll-progress bar over a thin line. The block keeps its own cards — this just restyles the scroller.', 'ai-eshop-optimizer'),
                        value: a.aieoSlider || '',
                        options: [
                            { value: '', label: __('Default', 'ai-eshop-optimizer') },
                            { value: 'recos', label: __('Recos carousel (pink progress)', 'ai-eshop-optimizer') }
                        ],
                        onChange: function (v) { set({ aieoSlider: v }); }
                    })
                )
            );
            return el(Fragment, {}, el(BlockEdit, props), panel);
        };
    }, 'withAieoResponsive');
    addFilter('editor.BlockEdit', 'aieo/responsive-controls', withPanel);
})(window.wp);
