/**
 * Custom Editor.js Block Tool for embedding predefined HTML snippets.
 * Uses iframe for WYSIWYG preview - snippets look exactly like on the live page.
 */
class HtmlSnippetTool {
    static get toolbox() {
        return {
            title: 'HTML Snippet',
            icon: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="16 18 22 12 16 6"></polyline><polyline points="8 6 2 12 8 18"></polyline></svg>'
        };
    }

    constructor({ data, api }) {
        this.data = {
            id: data.id || '',
            globalAttributes: data.globalAttributes || data.attributes || ''
        };
        this.api = api;
        this.wrapper = undefined;
    }

    render() {
        this.wrapper = document.createElement('div');
        this.wrapper.classList.add('ce-snippet-wrapper');
        this.wrapper.style.border = '1px solid #ddd';
        this.wrapper.style.borderRadius = '5px';
        this.wrapper.style.background = '#fafafa';
        this.wrapper.style.width = '100%';
        this.wrapper.style.boxSizing = 'border-box';

        this._showInput();

        return this.wrapper;
    }

    _showInput() {
        this.wrapper.innerHTML = '';
        
        const title = document.createElement('h4');
        title.style.marginTop = '0';
        title.style.marginBottom = '10px';
        title.style.padding = '15px 15px 0 15px';
        title.innerText = 'HTML Snippet ID & Custom Attributes:';
        title.style.fontSize = '14px';
        title.style.color = '#333';
        
        const inputContainer = document.createElement('div');
        inputContainer.style.display = 'flex';
        inputContainer.style.gap = '10px';
        inputContainer.style.padding = '0 15px 15px 15px';

        const input = document.createElement('input');
        input.classList.add('ce-input');
        input.placeholder = 'Enter Snippet ID (e.g., test_banner)';
        input.value = this.data.id;
        input.style.flex = '1';
        
        input.addEventListener('input', (e) => {
            this.data.id = e.target.value.trim();
        });

        const attrInput = document.createElement('input');
        attrInput.classList.add('ce-input');
        attrInput.placeholder = 'Custom Attributes (e.g. data-aos="fade-up" style="...")';
        attrInput.value = this.data.globalAttributes || '';
        attrInput.style.flex = '1';

        attrInput.addEventListener('input', (e) => {
            this.data.globalAttributes = e.target.value.trim();
        });

        inputContainer.appendChild(input);
        inputContainer.appendChild(attrInput);

        this.wrapper.appendChild(title);
        this.wrapper.appendChild(inputContainer);
    }

    save(blockContent) {
        return {
            id: this.data.id,
            globalAttributes: this.data.globalAttributes || ''
        };
    }
}

// Register the plugin globally
window.SISEditorPlugins = window.SISEditorPlugins || {};
window.SISEditorPlugins['snippet'] = {
    class: HtmlSnippetTool
};