/**
 * Editor registration for the `encypher/ad-slot` dynamic block (PRD E4).
 *
 * Hand-written ES5 against the global `wp.*` runtime: no JSX, no bundler, no
 * build step. The block has no save output — every front-end byte comes from
 * render.php — so this file only supplies the inserter entry and the layout
 * picker. It never loads an ad tag and never touches a third-party script.
 */
(function () {
    'use strict';

    if (!window.wp || !wp.blocks || !wp.element) {
        return;
    }

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

    var LAYOUTS = [
        { value: 'leaderboard_top', label: __('Leaderboard (top of page)', 'encypher-provenance') },
        { value: 'in_content', label: __('In content (between paragraphs)', 'encypher-provenance') },
        { value: 'sidebar_rail', label: __('Sidebar rail (widget)', 'encypher-provenance') },
        { value: 'sticky_footer', label: __('Sticky footer', 'encypher-provenance') },
    ];

    function labelFor(value) {
        for (var i = 0; i < LAYOUTS.length; i++) {
            if (LAYOUTS[i].value === value) {
                return LAYOUTS[i].label;
            }
        }
        return value;
    }

    wp.blocks.registerBlockType('encypher/ad-slot', {
        edit: function (props) {
            var layoutKey = props.attributes.layoutKey || 'in_content';
            var blockProps = useBlockProps({ className: 'encypher-ad-slot-placeholder' });

            return el(
                'div',
                blockProps,
                el(
                    InspectorControls,
                    null,
                    el(
                        PanelBody,
                        { title: __('Ad slot', 'encypher-provenance'), initialOpen: true },
                        el(SelectControl, {
                            label: __('Layout preset', 'encypher-provenance'),
                            value: layoutKey,
                            options: LAYOUTS,
                            onChange: function (value) {
                                props.setAttributes({ layoutKey: value });
                            },
                            help: __('The preset decides the registered AdCP format for this slot.', 'encypher-provenance'),
                        })
                    )
                ),
                el(
                    'div',
                    {
                        style: {
                            border: '1px dashed #949494',
                            padding: '12px',
                            textAlign: 'center',
                            color: '#50575e',
                            fontSize: '13px',
                        },
                    },
                    el('strong', null, __('Encypher ad slot', 'encypher-provenance')),
                    el('br'),
                    labelFor(layoutKey),
                    el('br'),
                    __('Reserved container. Activate this slot and paste your ad tag in Encypher > Ad Layouts.', 'encypher-provenance')
                )
            );
        },
        save: function () {
            return null;
        },
    });
})();
