/**
 * AIEO Block Header — shared editor controls for the section-header pattern
 * (title → divider → description, uppercase, desktop/mobile sizes). Exposed as
 * window.aieoBlockHeader for every AIEO block's editor script to consume:
 *
 *   attributes: Object.assign({...own...}, window.aieoBlockHeader.attributes())
 *   inspector:  add window.aieoBlockHeader.panel(attrs, setAttributes)
 *   preview:    window.aieoBlockHeader.preview(attrs)   // for non-SSR blocks
 *
 * Mirrors the PHP defaults in class-aieo-block-header.php.
 */
(function (wp) {
    if (!wp || !wp.element || !wp.components) { return; }

    var el = wp.element.createElement;
    var __ = (wp.i18n && wp.i18n.__) ? wp.i18n.__ : function (s) { return s; };
    var C  = wp.components;

    var DEFAULTS = {
        secHeading: '', secHeadingUpper: true, secHeadingFeature: false, secHeadingSize: '2rem', secHeadingSizeM: '1.4rem',
        secDivider: true, secDesc: '', secDescSize: '1rem', secDescSizeM: '0.9rem', secAlign: 'left'
    };
    var BOOL = { secHeadingUpper: 1, secHeadingFeature: 1, secDivider: 1 };

    window.aieoBlockHeader = {
        defaults: DEFAULTS,

        attributes: function () {
            var a = {};
            Object.keys(DEFAULTS).forEach(function (k) {
                a[k] = { type: BOOL[k] ? 'boolean' : 'string', default: DEFAULTS[k] };
            });
            return a;
        },

        panel: function (a, set) {
            a = a || {};
            return el(C.PanelBody, { title: __('Section header', 'ai-eshop-optimizer'), initialOpen: false },
                el(C.TextControl, { label: __('Title', 'ai-eshop-optimizer'), value: a.secHeading || '', onChange: function (v) { set({ secHeading: v }); } }),
                el(C.ToggleControl, { label: __('Uppercase title', 'ai-eshop-optimizer'), checked: !!a.secHeadingUpper, onChange: function (v) { set({ secHeadingUpper: !!v }); } }),
                el(C.ToggleControl, { label: __('Feature heading style (large, like product sliders)', 'ai-eshop-optimizer'), help: __('Inherits the big thin-uppercase heading + full-width underline. Overrides the size/uppercase/divider options below.', 'ai-eshop-optimizer'), checked: !!a.secHeadingFeature, onChange: function (v) { set({ secHeadingFeature: !!v }); } }),
                el('div', { style: { display: 'flex', gap: '8px' } },
                    el(C.TextControl, { label: __('Title size — desktop', 'ai-eshop-optimizer'), value: a.secHeadingSize || '', onChange: function (v) { set({ secHeadingSize: v }); } }),
                    el(C.TextControl, { label: __('Title size — mobile', 'ai-eshop-optimizer'), value: a.secHeadingSizeM || '', onChange: function (v) { set({ secHeadingSizeM: v }); } })
                ),
                el(C.ToggleControl, { label: __('Divider line under title', 'ai-eshop-optimizer'), checked: !!a.secDivider, onChange: function (v) { set({ secDivider: !!v }); } }),
                el(C.TextareaControl, { label: __('Description', 'ai-eshop-optimizer'), value: a.secDesc || '', onChange: function (v) { set({ secDesc: v }); } }),
                el('div', { style: { display: 'flex', gap: '8px' } },
                    el(C.TextControl, { label: __('Desc size — desktop', 'ai-eshop-optimizer'), value: a.secDescSize || '', onChange: function (v) { set({ secDescSize: v }); } }),
                    el(C.TextControl, { label: __('Desc size — mobile', 'ai-eshop-optimizer'), value: a.secDescSizeM || '', onChange: function (v) { set({ secDescSizeM: v }); } })
                ),
                el(C.SelectControl, {
                    label: __('Alignment', 'ai-eshop-optimizer'), value: a.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: function (v) { set({ secAlign: v }); }
                })
            );
        },

        // In-editor preview for blocks that DON'T use ServerSideRender.
        preview: function (a) {
            a = a || {};
            if (!(a.secHeading || a.secDesc)) { return null; }
            return el('div', { style: { margin: '0 0 16px', textAlign: a.secAlign || 'left' } },
                a.secHeading ? el('div', { style: { fontWeight: 700, lineHeight: 1.15, fontSize: a.secHeadingSize || '2rem', textTransform: a.secHeadingUpper ? 'uppercase' : 'none', letterSpacing: a.secHeadingUpper ? '.02em' : 'normal', marginBottom: '8px' } }, a.secHeading) : null,
                a.secDivider ? el('hr', { style: { border: 0, borderTop: '1px solid currentColor', opacity: .25, margin: '0 0 10px' } }) : null,
                a.secDesc ? el('div', { style: { opacity: .85, lineHeight: 1.5, fontSize: a.secDescSize || '1rem' } }, a.secDesc) : null
            );
        }
    };
})(window.wp);
