/**
 * PDF Sign & Fill - Gutenberg Block
 */
(function(blocks, element, components, editor) {
    const { registerBlockType } = blocks;
    const { createElement: el, Fragment } = element;
    const { SelectControl, TextControl, PanelBody, Placeholder } = components;
    const { InspectorControls } = editor;

    // Block icon
    const blockIcon = el('svg', { 
        width: 24, 
        height: 24, 
        viewBox: '0 0 24 24',
        fill: 'none',
        xmlns: 'http://www.w3.org/2000/svg'
    },
        el('path', { 
            d: 'M14 2H6C4.9 2 4 2.9 4 4V20C4 21.1 4.9 22 6 22H18C19.1 22 20 21.1 20 20V8L14 2Z',
            fill: '#0073aa'
        }),
        el('path', {
            d: 'M14 2V8H20',
            stroke: '#fff',
            strokeWidth: 2
        }),
        el('path', {
            d: 'M8 15L10 17L16 11',
            stroke: '#fff',
            strokeWidth: 2,
            strokeLinecap: 'round',
            strokeLinejoin: 'round'
        })
    );

    // Register the block
    registerBlockType('swpdf/signature-form', {
        title: 'signwpdf PDF Sign & Fill',
        description: 'Add a PDF signature form to collect e-signatures',
        icon: blockIcon,
        category: 'widgets',
        keywords: ['pdf', 'signature', 'sign', 'form', 'document', 'esign'],
        
        attributes: {
            templateType: {
                type: 'string',
                default: ''
            },
            title: {
                type: 'string',
                default: 'Sign Document'
            }
        },

        edit: function(props) {
            const { attributes, setAttributes } = props;
            const { templateType, title } = attributes;
            
            // Get templates from localized data
            const templates = window.swpdfBlockData ? window.swpdfBlockData.templates : [];
            
            // Build options for select
            const templateOptions = [
                { value: '', label: '— Select a Template —' }
            ].concat(templates);

            // Inspector controls (sidebar)
            const inspectorControls = el(InspectorControls, {},
                el(PanelBody, { title: 'Form Settings', initialOpen: true },
                    el(SelectControl, {
                        label: 'PDF Template',
                        value: templateType,
                        options: templateOptions,
                        onChange: function(value) {
                            setAttributes({ templateType: value });
                        },
                        help: 'Select which PDF template to display'
                    }),
                    el(TextControl, {
                        label: 'Form Title',
                        value: title,
                        onChange: function(value) {
                            setAttributes({ title: value });
                        },
                        help: 'The heading shown above the form'
                    })
                )
            );

            // Block preview
            let blockContent;
            
            if (!templateType) {
                // No template selected - show placeholder
                blockContent = el(Placeholder, {
                    icon: blockIcon,
                    label: 'signwpdf PDF Sign & Fill',
                    instructions: 'Select a PDF template from the block settings to display a signature form.'
                },
                    el(SelectControl, {
                        value: templateType,
                        options: templateOptions,
                        onChange: function(value) {
                            setAttributes({ templateType: value });
                        }
                    })
                );
            } else {
                // Template selected - show preview
                const selectedTemplate = templates.find(t => t.value === templateType);
                const templateName = selectedTemplate ? selectedTemplate.label : templateType;
                
                blockContent = el('div', {
                    style: {
                        border: '2px dashed #0073aa',
                        borderRadius: '8px',
                        padding: '30px',
                        textAlign: 'center',
                        background: '#f0f6fc'
                    }
                },
                    el('div', { style: { fontSize: '32px', marginBottom: '10px' } }, '📝'),
                    el('h3', { style: { margin: '0 0 5px 0', color: '#0073aa' } }, title),
                    el('p', { style: { margin: '0', color: '#666' } }, 
                        'Template: ', 
                        el('strong', {}, templateName)
                    ),
                    el('p', { 
                        style: { 
                            margin: '15px 0 0 0', 
                            fontSize: '12px', 
                            color: '#999',
                            background: '#fff',
                            padding: '8px 12px',
                            borderRadius: '4px',
                            display: 'inline-block'
                        } 
                    }, 
                        'Shortcode: [swpdf_signature_form type="' + templateType + '"]'
                    )
                );
            }

            return el(Fragment, {},
                inspectorControls,
                blockContent
            );
        },

        save: function() {
            // Render via PHP callback
            return null;
        }
    });

})(
    window.wp.blocks,
    window.wp.element,
    window.wp.components,
    window.wp.blockEditor || window.wp.editor
);
