/**
 * Peligent AI — Gutenberg Block Editor buttons
 *
 * Adds a "Peligent AI" panel to the post editor sidebar with
 * "Write Content" and "Generate Image" buttons.
 * Mirrors the Classic Editor media_buttons functionality.
 */
(function () {
    var el = wp.element.createElement;
    var registerPlugin = wp.plugins.registerPlugin;
    var PluginDocumentSettingPanel =
        (wp.editor && wp.editor.PluginDocumentSettingPanel) ||
        (wp.editPost && wp.editPost.PluginDocumentSettingPanel);
    var useSelect = wp.data.useSelect;

    if (!PluginDocumentSettingPanel) {
        return;
    }

    var wmSvg =
        "data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M12 2L14.5 9.5L22 12L14.5 14.5L12 22L9.5 14.5L2 12L9.5 9.5Z%27 fill=%27white%27 opacity=%270.13%27/%3E%3C/svg%3E";

    var btnBase = {
        border: 'none',
        color: '#fff',
        padding: '9px 34px 9px 14px',
        borderRadius: '6px',
        fontSize: '13px',
        fontWeight: '500',
        cursor: 'pointer',
        display: 'flex',
        alignItems: 'center',
        gap: '6px',
        width: '100%',
        justifyContent: 'center',
        backgroundRepeat: 'no-repeat',
        backgroundPosition: 'right 8px center',
        backgroundSize: '22px 22px',
        backgroundImage: 'url(' + wmSvg + ')',
        transition: 'background-color 0.2s ease'
    };

    function PeligentPanel() {
        var postType = useSelect(function (select) {
            return select('core/editor').getCurrentPostType();
        });
        var postId = useSelect(function (select) {
            return select('core/editor').getCurrentPostId();
        });

        if (postType !== 'post') {
            return null;
        }

        return el(
            PluginDocumentSettingPanel,
            {
                name: 'peligent-ai-panel',
                title: el(
                    'span',
                    { style: { display: 'flex', alignItems: 'center', gap: '6px' } },
                    el('img', {
                        src:
                            (typeof PELIGENT_AI_CLIENT !== 'undefined' && PELIGENT_AI_CLIENT.icon) ||
                            '',
                        alt: '',
                        width: 18,
                        height: 18,
                        style: { display: PELIGENT_AI_CLIENT && PELIGENT_AI_CLIENT.icon ? 'block' : 'none' }
                    }),
                    'Peligent AI'
                ),
                className: 'peligent-gutenberg-panel'
            },
            el(
                'div',
                { style: { display: 'flex', flexDirection: 'column', gap: '8px' } },
                el(
                    'button',
                    {
                        type: 'button',
                        onClick: function () {
                            if (typeof window.peligentGenerateBlogContent === 'function') {
                                window.peligentGenerateBlogContent(postId);
                            } else {
                                alert('Peligent is loading, please try again in a moment.');
                            }
                        },
                        style: Object.assign({}, btnBase, { backgroundColor: '#2663EB' }),
                        onMouseOver: function (e) {
                            e.currentTarget.style.backgroundColor = '#1d4ed8';
                        },
                        onMouseOut: function (e) {
                            e.currentTarget.style.backgroundColor = '#2663EB';
                        }
                    },
                    el(
                        'svg',
                        {
                            width: 15,
                            height: 15,
                            viewBox: '0 0 24 24',
                            fill: 'none',
                            stroke: 'currentColor',
                            strokeWidth: 2,
                            strokeLinecap: 'round',
                            strokeLinejoin: 'round'
                        },
                        el('path', { d: 'M12 20h9' }),
                        el('path', {
                            d: 'M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z'
                        })
                    ),
                    'Peligent Write Content'
                ),
                el(
                    'button',
                    {
                        type: 'button',
                        onClick: function () {
                            if (typeof window.peligentGenerateBlogImage === 'function') {
                                window.peligentGenerateBlogImage(postId);
                            } else {
                                alert('Peligent is loading, please try again in a moment.');
                            }
                        },
                        style: Object.assign({}, btnBase, { backgroundColor: '#7c3aed' }),
                        onMouseOver: function (e) {
                            e.currentTarget.style.backgroundColor = '#6d28d9';
                        },
                        onMouseOut: function (e) {
                            e.currentTarget.style.backgroundColor = '#7c3aed';
                        }
                    },
                    el(
                        'svg',
                        {
                            width: 15,
                            height: 15,
                            viewBox: '0 0 24 24',
                            fill: 'none',
                            stroke: 'currentColor',
                            strokeWidth: 2,
                            strokeLinecap: 'round',
                            strokeLinejoin: 'round'
                        },
                        el('rect', { x: 3, y: 3, width: 18, height: 18, rx: 2, ry: 2 }),
                        el('circle', { cx: 8.5, cy: 8.5, r: 1.5 }),
                        el('polyline', { points: '21 15 16 10 5 21' })
                    ),
                    'Peligent Generate Image'
                )
            )
        );
    }

    registerPlugin('peligent-ai-buttons', {
        render: PeligentPanel,
        icon: null
    });
})();
