(function() {
    'use strict';

    const { registerBlockType } = wp.blocks;
    const { InspectorControls, PanelColorSettings } = wp.blockEditor;
    const { PanelBody, TextControl, SelectControl, ToggleControl } = wp.components;
    const { Fragment, createElement } = wp.element;
    const { __ } = wp.i18n;

    // Default values if not set
    const defaults = window.defaults || {
        pinterestUrl: '',
        bgColor: '#E60023',
        borderColor: '#E60023',
        textColor: '#FFFFFF',
        title: 'Follow us on Pinterest',
        buttonText: 'Follow',
        buttonBgColor: '#FFFFFF',
        buttonTextColor: '#E60023',
        logo: 'pinterest',
        profileImage: ''
    };

    // Pinterest icon component
    const PinterestIcon = () => (
        createElement('svg', {
            width: 24,
            height: 24,
            viewBox: '0 0 24 24',
            fill: 'currentColor'
        },
        createElement('path', {
            d: 'M12 0C5.373 0 0 5.372 0 12c0 5.084 3.163 9.426 7.627 11.174-.105-.949-.2-2.405.042-3.441.219-.937 1.407-5.965 1.407-5.965s-.359-.719-.359-1.782c0-1.668.967-2.914 2.171-2.914 1.023 0 1.518.769 1.518 1.69 0 1.029-.655 2.568-.994 3.995-.283 1.194.599 2.169 1.777 2.169 2.133 0 3.772-2.249 3.772-5.495 0-2.873-2.064-4.882-5.012-4.882-3.414 0-5.418 2.561-5.418 5.207 0 1.031.397 2.138.893 2.738.098.119.112.224.083.345l-.333 1.36c-.053.22-.174.267-.402.161-1.499-.698-2.436-2.888-2.436-4.649 0-3.785 2.75-7.262 7.929-7.262 4.163 0 7.398 2.967 7.398 6.931 0 4.136-2.607 7.464-6.227 7.464-1.216 0-2.357-.631-2.75-1.378l-.748 2.853c-.271 1.043-1.002 2.35-1.492 3.146C9.57 23.812 10.763 24 12.001 24c6.624 0 11.999-5.373 11.999-12C24 5.372 18.626.001 12.001.001z'
        }))
    );
    
    registerBlockType('pinnerpress/callout-banner', {
        title: __('Pinterest Callout Banner', 'pinnerpress'),
        description: __('Display a call-to-action banner for Pinterest following', 'pinnerpress'),
        icon: 'megaphone',
        category: 'pinnerpress',
        keywords: [
            __('pinterest', 'pinnerpress'),
            __('callout', 'pinnerpress'),
            __('banner', 'pinnerpress'),
            __('call to action', 'pinnerpress'),
        ],
        supports: {
            align: ['wide', 'full'],
            html: false,
        },
        attributes: {
            pinterestUrl: {
                type: 'string',
                default: defaults.pinterestUrl || ''
            },
            bgColor: {
                type: 'string',
                default: defaults.bgColor || '#E60023'
            },
            borderColor: {
                type: 'string',
                default: defaults.borderColor || '#E60023'
            },
            textColor: {
                type: 'string',
                default: defaults.textColor || '#FFFFFF'
            },
            title: {
                type: 'string',
                default: defaults.title || __('Follow us on Pinterest', 'pinnerpress')
            },
            buttonText: {
                type: 'string',
                default: defaults.buttonText || __('Follow', 'pinnerpress')
            },
            buttonBgColor: {
                type: 'string',
                default: defaults.buttonBgColor || '#FFFFFF'
            },
            buttonTextColor: {
                type: 'string',
                default: defaults.buttonTextColor || '#E60023'
            },
            logo: {
                type: 'string',
                default: defaults.logo || 'pinterest'
            },
            openInNewTab: {
                type: 'boolean',
                default: true
            }
        },
        
        edit: function(props) {
            const { attributes, setAttributes } = props;
            const {
                pinterestUrl,
                bgColor,
                borderColor,
                textColor,
                title,
                buttonText,
                buttonBgColor,
                buttonTextColor,
                logo,
                openInNewTab
            } = attributes;
            
            // Logo options
            const logoOptions = [
                { label: __('Pinterest Logo', 'pinnerpress'), value: 'pinterest' },
                { label: __('Profile Image', 'pinnerpress'), value: 'profile' },
                { label: __('No Logo', 'pinnerpress'), value: 'none' }
            ];
            
            // Build logo element
            let logoElement = null;
            if (logo === 'pinterest') {
                logoElement = createElement('div', { className: 'pinnerpress-logo' },
                    createElement('svg', {
                        xmlns: 'http://www.w3.org/2000/svg',
                        viewBox: '0 0 24 24',
                        style: { width: '38px', height: '38px', fill: textColor }
                    },
                    createElement('path', {
                        d: 'M12 0C5.373 0 0 5.373 0 12c0 4.99 3.657 9.132 8.48 10.099-.118-.859-.224-2.178.045-3.116.244-.834 1.577-5.313 1.577-5.313s-.402-.803-.402-1.986c0-1.863 1.08-3.254 2.42-3.254 1.142 0 1.693.859 1.693 1.89 0 1.151-.733 2.87-1.11 4.467-.318 1.322.672 2.401 1.99 2.401 2.388 0 4.224-2.516 4.224-6.14 0-3.204-2.303-5.442-5.581-5.442-3.803 0-6.037 2.849-6.037 5.794 0 1.148.438 2.382 1.054 3.049.117.13.134.244.099.377-.109.427-.354 1.35-.398 1.539-.062.248-.2.302-.461.182-1.723-.796-2.797-3.294-2.797-5.301 0-4.33 3.141-8.306 9.067-8.306 4.754 0 8.442 3.384 8.442 7.917 0 4.715-2.969 8.502-7.085 8.502-1.381 0-2.681-.712-3.123-1.557l-.847 3.216c-.306 1.156-1.14 2.6-1.699 3.487C9.19 23.414 10.573 24 12 24c6.627 0 12-5.373 12-12S18.627 0 12 0z'
                    }))
                );
            } else if (logo === 'profile' && defaults.profileImage) {
                logoElement = createElement('div', { className: 'pinnerpress-logo' },
                    createElement('img', {
                        src: defaults.profileImage,
                        alt: __('Profile', 'pinnerpress'),
                        style: { width: '48px', height: '48px', borderRadius: '50%', objectFit: 'cover' }
                    })
                );
            }
            
            return createElement(Fragment, {},
                createElement(InspectorControls, {},
                    createElement(PanelBody, { title: __('Banner Settings', 'pinnerpress'), initialOpen: true },
                        createElement(TextControl, {
                            label: __('Pinterest URL', 'pinnerpress'),
                            value: pinterestUrl,
                            onChange: (value) => setAttributes({ pinterestUrl: value }),
                            help: __('Enter your Pinterest profile or board URL', 'pinnerpress')
                        }),
                        
                        createElement(TextControl, {
                            label: __('Banner Title', 'pinnerpress'),
                            value: title,
                            onChange: (value) => setAttributes({ title: value })
                        }),
                        
                        createElement(TextControl, {
                            label: __('Button Text', 'pinnerpress'),
                            value: buttonText,
                            onChange: (value) => setAttributes({ buttonText: value })
                        }),
                        
                        createElement(SelectControl, {
                            label: __('Logo', 'pinnerpress'),
                            value: logo,
                            options: logoOptions,
                            onChange: (value) => setAttributes({ logo: value })
                        }),
                        
                        createElement(ToggleControl, {
                            label: __('Open in new tab', 'pinnerpress'),
                            checked: openInNewTab,
                            onChange: (value) => setAttributes({ openInNewTab: value })
                        })
                    ),
                    
                    createElement(PanelColorSettings, {
                        title: __('Color Settings', 'pinnerpress'),
                        colorSettings: [
                            {
                                value: bgColor,
                                onChange: (value) => setAttributes({ bgColor: value }),
                                label: __('Background Color', 'pinnerpress')
                            },
                            {
                                value: borderColor,
                                onChange: (value) => setAttributes({ borderColor: value }),
                                label: __('Border Color', 'pinnerpress')
                            },
                            {
                                value: textColor,
                                onChange: (value) => setAttributes({ textColor: value }),
                                label: __('Text Color', 'pinnerpress')
                            },
                            {
                                value: buttonBgColor,
                                onChange: (value) => setAttributes({ buttonBgColor: value }),
                                label: __('Button Background Color', 'pinnerpress')
                            },
                            {
                                value: buttonTextColor,
                                onChange: (value) => setAttributes({ buttonTextColor: value }),
                                label: __('Button Text Color', 'pinnerpress')
                            }
                        ]
                    })
                ),
                
                createElement('div', { className: 'pinnerpress-callout-banner-editor' },
                    createElement('div', {
                        className: 'pinnerpress-call-out-banner',
                        style: {
                            backgroundColor: bgColor,
                            padding: '15px 25px',
                            borderRadius: '6px',
                            display: 'flex',
                            alignItems: 'center',
                            justifyContent: 'space-between',
                            textAlign: 'center',
                            flexWrap: 'nowrap',
                            maxWidth: '100%',
                            border: `2px solid ${borderColor}`
                        }
                    },
                        logoElement,
                        
                        createElement('div', {
                            className: 'pinnerpress-content',
                            style: { flex: 1, margin: '0 20px' }
                        },
                            createElement('h3', {
                                className: 'pinnerpress-title',
                                style: { color: textColor, margin: 0, fontSize: '18px', fontWeight: 600 }
                            }, title)
                        ),
                        
                        createElement('div', { className: 'pinnerpress-button-wrapper' },
                            createElement('span', {
                                className: 'pinnerpress-button',
                                style: {
                                    backgroundColor: buttonBgColor,
                                    color: buttonTextColor,
                                    padding: '10px 24px',
                                    borderRadius: '24px',
                                    textDecoration: 'none',
                                    display: 'inline-block',
                                    fontWeight: 500,
                                    fontSize: '16px'
                                }
                            }, buttonText)
                        )
                    )
                )
            );
        },
        
        save: function() {
            // Rendering happens in PHP
            return null;
        }
    });
})();