(function() {
    'use strict';

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

    // Pinterest icon component
    const PinterestIcon = () => (
        wp.element.createElement('svg', {
            width: 24,
            height: 24,
            viewBox: '0 0 24 24',
            fill: 'currentColor'
        },
        wp.element.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/follow-button', {
        title: __('Pinterest Follow Button', 'pinnerpress'),
        description: __('Add a customizable Pinterest follow button to your content.', 'pinnerpress'),
        icon: PinterestIcon,
        category: 'pinnerpress',
        keywords: [
            __('pinterest', 'pinnerpress'),
            __('follow', 'pinnerpress'),
            __('social', 'pinnerpress'),
        ],
        supports: {
            align: ['left', 'center', 'right'],
            html: false,
        },
        attributes: {
            pinterestUrl: {
                type: 'string',
                default: ''
            },
            buttonText: {
                type: 'string',
                default: ''
            },
            buttonColor: {
                type: 'string',
                default: ''
            },
            textColor: {
                type: 'string',
                default: ''
            },
            buttonSize: {
                type: 'string',
                default: 'medium'
            },
            showIcon: {
                type: 'boolean',
                default: true
            },
            alignment: {
                type: 'string',
                default: 'left'
            },
            openInNewTab: {
                type: 'boolean',
                default: true
            }
        },

        edit: function(props) {
            const { attributes, setAttributes } = props;
            const {
                pinterestUrl,
                buttonText,
                buttonColor,
                textColor,
                buttonSize,
                showIcon,
                alignment,
                openInNewTab
            } = attributes;
            
            // Get defaults from localized script
            const defaults = window.pinnerpressFollowDefaults || {
                pinterestUrl: '',
                buttonText: 'Follow on Pinterest',
                buttonColor: '#E60023',
                textColor: '#ffffff'
            };
            
            // Use attribute values or defaults
            const currentPinterestUrl = pinterestUrl || defaults.pinterestUrl;
            const currentButtonText = buttonText || defaults.buttonText;
            const currentButtonColor = buttonColor || defaults.buttonColor;
            const currentTextColor = textColor || defaults.textColor;

            const sizeOptions = [
                { label: __('Small', 'pinnerpress'), value: 'small' },
                { label: __('Medium', 'pinnerpress'), value: 'medium' },
                { label: __('Large', 'pinnerpress'), value: 'large' }
            ];

            const alignmentOptions = [
                { label: __('Left', 'pinnerpress'), value: 'left' },
                { label: __('Center', 'pinnerpress'), value: 'center' },
                { label: __('Right', 'pinnerpress'), value: 'right' }
            ];

            const buttonStyle = {
                backgroundColor: currentButtonColor,
                color: currentTextColor,
                padding: buttonSize === 'small' ? '6px 12px' : buttonSize === 'large' ? '12px 24px' : '8px 16px',
                fontSize: buttonSize === 'small' ? '12px' : buttonSize === 'large' ? '16px' : '14px',
                borderRadius: '4px',
                border: 'none',
                textDecoration: 'none',
                display: 'inline-flex',
                alignItems: 'center',
                gap: '6px',
                cursor: 'pointer',
                fontWeight: '600'
            };

            const wrapperStyle = {
                textAlign: alignment,
                margin: '10px 0'
            };

            return wp.element.createElement(Fragment, null,
                wp.element.createElement(InspectorControls, null,
                    wp.element.createElement(PanelBody, {
                        title: __('Pinterest Settings', 'pinnerpress'),
                        initialOpen: true
                    },
                        wp.element.createElement(TextControl, {
                            label: __('Pinterest URL', 'pinnerpress'),
                            value: pinterestUrl,
                            onChange: (value) => setAttributes({ pinterestUrl: value }),
                            placeholder: defaults.pinterestUrl || __('https://www.pinterest.com/yourusername', 'pinnerpress'),
                            help: __('Enter your Pinterest profile URL. Leave empty to use the default from General settings.', 'pinnerpress')
                        }),
                        wp.element.createElement(TextControl, {
                            label: __('Button Text', 'pinnerpress'),
                            value: buttonText,
                            onChange: (value) => setAttributes({ buttonText: value }),
                            placeholder: defaults.buttonText,
                            help: __('Leave empty to use the default from General settings.', 'pinnerpress')
                        }),
                        wp.element.createElement(ToggleControl, {
                            label: __('Show Pinterest Icon', 'pinnerpress'),
                            checked: showIcon,
                            onChange: (value) => setAttributes({ showIcon: value })
                        }),
                        wp.element.createElement(ToggleControl, {
                            label: __('Open in New Tab', 'pinnerpress'),
                            checked: openInNewTab,
                            onChange: (value) => setAttributes({ openInNewTab: value })
                        })
                    ),
                    wp.element.createElement(PanelBody, {
                        title: __('Appearance', 'pinnerpress'),
                        initialOpen: false
                    },
                        wp.element.createElement(SelectControl, {
                            label: __('Button Size', 'pinnerpress'),
                            value: buttonSize,
                            options: sizeOptions,
                            onChange: (value) => setAttributes({ buttonSize: value })
                        }),
                        wp.element.createElement(SelectControl, {
                            label: __('Alignment', 'pinnerpress'),
                            value: alignment,
                            options: alignmentOptions,
                            onChange: (value) => setAttributes({ alignment: value })
                        })
                    ),
                    wp.element.createElement(PanelColorSettings, {
                        title: __('Color Settings', 'pinnerpress'),
                        initialOpen: false,
                        colorSettings: [
                            {
                                value: buttonColor,
                                onChange: (value) => setAttributes({ buttonColor: value }),
                                label: __('Button Color', 'pinnerpress') + (buttonColor ? '' : ' (' + __('Using default', 'pinnerpress') + ')')
                            },
                            {
                                value: textColor,
                                onChange: (value) => setAttributes({ textColor: value }),
                                label: __('Text Color', 'pinnerpress') + (textColor ? '' : ' (' + __('Using default', 'pinnerpress') + ')')
                            }
                        ]
                    })
                ),
                wp.element.createElement('div', {
                    className: 'pinnerpress-follow-block-editor'
                },
                    !currentPinterestUrl ? 
                        wp.element.createElement('div', {
                            style: {
                                padding: '20px',
                                border: '2px dashed #ccc',
                                textAlign: 'center',
                                color: '#666'
                            }
                        },
                            wp.element.createElement(PinterestIcon),
                            wp.element.createElement('p', null, __('Pinterest Follow Button', 'pinnerpress')),
                            wp.element.createElement('p', { style: { fontSize: '14px' } }, 
                                __('Enter your Pinterest URL in the settings or set a default in General settings to preview the button.', 'pinnerpress')
                            )
                        ) :
                        wp.element.createElement('div', { style: wrapperStyle },
                            wp.element.createElement('a', {
                                href: '#',
                                style: buttonStyle,
                                onClick: (e) => e.preventDefault()
                            },
                                showIcon && wp.element.createElement('svg', {
                                    width: '16',
                                    height: '16',
                                    viewBox: '0 0 24 24',
                                    fill: 'currentColor'
                                },
                                wp.element.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'
                                })),
                                wp.element.createElement('span', null, currentButtonText)
                            )
                        )
                )
            );
        },

        save: function() {
            // Server-side rendering, so return null
            return null;
        }
    });
})(); 