/**
 * Custom EditorJS Blocks
 * Replicates WordPress Gutenberg Blocks with simple placeholder & rich interfaces
 */

class GenericPlaceholderBlock {
    constructor(props = {}) {
        this.api = props.api;
        this.data = props.data || {};
        this.config = props.config || {};
        this.title = this.config.title || 'Block';
        this.icon = this.config.icon || '<i class="fas fa-cube"></i>';
        this.desc = this.config.desc || 'Placeholder for ' + this.title;
    }

    render() {
        this.wrapper = document.createElement('div');
        this.wrapper.className = 'w-100 p-4 mb-3 border bg-light text-center rounded text-muted outline-none';
        this.wrapper.style.borderStyle = 'dashed !important';
        this.wrapper.style.background = '#f8f9fa';

        this.iconEl = document.createElement('div');
        this.iconEl.innerHTML = this.icon;
        this.iconEl.style.fontSize = '24px';
        this.iconEl.style.marginBottom = '10px';
        this.iconEl.style.color = '#6c757d';

        this.titleEl = document.createElement('h5');
        this.titleEl.textContent = this.title;
        this.titleEl.className = 'mb-1 fs-6 fw-bold text-dark';

        this.descEl = document.createElement('p');
        this.descEl.textContent = this.desc;
        this.descEl.className = 'mb-0 small';

        this.wrapper.appendChild(this.iconEl);
        this.wrapper.appendChild(this.titleEl);
        this.wrapper.appendChild(this.descEl);

        return this.wrapper;
    }

    save() {
        return {
            type: this.config.type || 'placeholder',
            title: this.title
        };
    }
}

// TEXT BLOCKS
class PreformattedBlock extends GenericPlaceholderBlock {
    constructor(props = {}) {
        props.config = props.config || { title: 'Preformatted', icon: '<i class="fas fa-file-code"></i>', type: 'preformatted', desc: 'Add text that respects your spacing and tabs, and also allows styling.'};
        super(props);
    }
    render() {
        this.wrapper = document.createElement('pre');
        this.wrapper.className = 'p-3 bg-light border rounded';
        this.wrapper.contentEditable = true;
        this.wrapper.innerHTML = (this.data && this.data.text) ? this.data.text : '';
        this.wrapper.style.outline = 'none';
        this.wrapper.setAttribute('data-placeholder', 'Write preformatted text...');
        return this.wrapper;
    }
    save() { return { text: this.wrapper ? this.wrapper.innerHTML : '' }; }
}

class PullquoteBlock extends GenericPlaceholderBlock {
    constructor(props = {}) {
        props.config = props.config || { title: 'Pullquote', icon: '<i class="fas fa-quote-right"></i>', type: 'pullquote' };
        super(props);
    }
    render() {
        this.wrapper = document.createElement('div');
        this.wrapper.className = 'p-4 border-top border-bottom text-center my-4';
        
        this.quote = document.createElement('h3');
        this.quote.contentEditable = true;
        this.quote.className = 'fst-italic mb-3';
        this.quote.style.color = '#333';
        this.quote.style.outline = 'none';
        this.quote.innerHTML = (this.data && this.data.text) ? this.data.text : 'Add quote here...';

        this.citation = document.createElement('p');
        this.citation.contentEditable = true;
        this.citation.className = 'text-uppercase small mb-0 fw-bold text-muted';
        this.citation.style.outline = 'none';
        this.citation.innerHTML = (this.data && this.data.citation) ? this.data.citation : 'Add citation';

        this.wrapper.appendChild(this.quote);
        this.wrapper.appendChild(this.citation);
        return this.wrapper;
    }
    save() { return { text: this.quote ? this.quote.innerHTML : '', citation: this.citation ? this.citation.innerHTML : '' }; }
}

class VerseBlock extends PreformattedBlock {
    constructor(props = {}) {
        props.config = props.config || { title: 'Verse', icon: '<i class="fas fa-feather-alt"></i>', type: 'verse', desc: 'Insert poetry. Use special spacing formats.' };
        super(props);
    }
}

// DESIGN BLOCKS
class ButtonBlock {
    constructor(props = {}) {
        this.data = props.data || { text: 'Click Here', url: '', style: 'primary' };
    }
    render() {
        this.wrapper = document.createElement('div');
        this.wrapper.className = 'text-center my-3 p-3 border bg-light rounded';
        
        this.btn = document.createElement('a');
        this.btn.contentEditable = true;
        this.btn.className = 'btn btn-' + (this.data.style || 'primary');
        this.btn.innerHTML = this.data.text || 'Click Here';
        this.btn.style.outline = 'none';
        this.btn.style.display = 'inline-block';
        this.btn.onclick = (e) => e.preventDefault();

        this.urlInput = document.createElement('input');
        this.urlInput.type = 'text';
        this.urlInput.placeholder = 'Button URL...';
        this.urlInput.className = 'form-control form-control-sm mt-2 d-inline-block';
        this.urlInput.style.maxWidth = '300px';
        this.urlInput.value = this.data.url || '';

        this.wrapper.appendChild(this.btn);
        this.wrapper.appendChild(document.createElement('br'));
        this.wrapper.appendChild(this.urlInput);
        return this.wrapper;
    }
    save() { return { text: this.btn ? this.btn.innerText : 'Click Here', url: this.urlInput ? this.urlInput.value : '', style: this.data.style || 'primary' }; }
}

class SeparatorBlock {
    constructor(props = {}) { this.data = props.data || {}; }
    render() {
        this.wrapper = document.createElement('div');
        this.wrapper.className = 'my-4 text-center';
        this.wrapper.innerHTML = '<hr class="w-50 mx-auto" style="border-top: 3px solid #01508c;">';
        return this.wrapper;
    }
    save() { return {}; }
}

class SpacerBlock {
    constructor(props = {}) { this.data = props.data || { height: 40 }; }
    render() {
        this.wrapper = document.createElement('div');
        this.wrapper.className = 'w-100 bg-light border border-dashed rounded d-flex align-items-center justify-content-center';
        this.wrapper.style.height = (this.data.height || 40) + 'px';
        this.wrapper.style.borderStyle = 'dashed !important';
        
        this.input = document.createElement('input');
        this.input.type = 'number';
        this.input.value = this.data.height || 40;
        this.input.className = 'form-control form-control-sm text-center';
        this.input.style.width = '80px';
        this.input.onchange = (e) => {
            this.wrapper.style.height = e.target.value + 'px';
        };

        this.wrapper.appendChild(this.input);
        return this.wrapper;
    }
    save() { return { height: this.input ? this.input.value : 40 }; }
}

// WIDGETS
class ShortcodeBlock {
    constructor(props = {}) { this.data = props.data || { code: '' }; }
    render() {
        this.wrapper = document.createElement('div');
        this.wrapper.className = 'p-2 my-2 border rounded bg-white';
        
        this.input = document.createElement('input');
        this.input.type = 'text';
        this.input.placeholder = 'Write shortcode here... e.g. [gallery]';
        this.input.className = 'form-control font-monospace text-center';
        this.input.style.border = 'none';
        this.input.style.boxShadow = 'none';
        this.input.value = this.data.code || '';
        
        this.wrapper.appendChild(this.input);
        return this.wrapper;
    }
    save() { return { code: this.input ? this.input.value : '' }; }
}

class SearchBlock extends GenericPlaceholderBlock { constructor(p = {}) { p.config = p.config || { title: 'Search', icon: '<i class="fas fa-search"></i>', type: 'search', desc: 'Add a search block.' }; super(p); } }
class ArchivesBlock extends GenericPlaceholderBlock { constructor(p = {}) { p.config = p.config || { title: 'Archives', icon: '<i class="fas fa-archive"></i>', type: 'archives', desc: 'Display a monthly archive of your posts.' }; super(p); } }
class CalendarBlock extends GenericPlaceholderBlock { constructor(p = {}) { p.config = p.config || { title: 'Calendar', icon: '<i class="fas fa-calendar-alt"></i>', type: 'calendar', desc: 'A calendar of your site posts.' }; super(p); } }
class SocialIconsBlock extends GenericPlaceholderBlock { constructor(p = {}) { p.config = p.config || { title: 'Social Icons', icon: '<i class="fas fa-share-alt"></i>', type: 'social', desc: 'Display icons linking to your social profiles.' }; super(p); } }
class LatestPostsBlock extends GenericPlaceholderBlock { constructor(p = {}) { p.config = p.config || { title: 'Latest Posts', icon: '<i class="fas fa-list-ul"></i>', type: 'latest-posts', desc: 'Display a list of your most recent posts.' }; super(p); } }
class CategoriesListBlock extends GenericPlaceholderBlock { constructor(p = {}) { p.config = p.config || { title: 'Categories List', icon: '<i class="fas fa-th-large"></i>', type: 'categories', desc: 'Display a list of all categories.' }; super(p); } }

// LAYOUT
class ColumnsBlock extends GenericPlaceholderBlock { constructor(p = {}) { p.config = p.config || { title: 'Columns', icon: '<i class="fas fa-columns"></i>', type: 'columns', desc: 'Multi-column layout placeholder.' }; super(p); } }
class GroupBlock extends GenericPlaceholderBlock { constructor(p = {}) { p.config = p.config || { title: 'Group', icon: '<i class="fas fa-object-group"></i>', type: 'group', desc: 'Grouped block collection placeholder.' }; super(p); } }
class StackBlock extends GenericPlaceholderBlock { constructor(p = {}) { p.config = p.config || { title: 'Stack', icon: '<i class="fas fa-layer-group"></i>', type: 'stack', desc: 'Vertical stack layout placeholder.' }; super(p); } }
class RowBlock extends GenericPlaceholderBlock { constructor(p = {}) { p.config = p.config || { title: 'Row', icon: '<i class="fas fa-grip-lines"></i>', type: 'row', desc: 'Horizontal row layout placeholder.' }; super(p); } }
class GridBlock extends GenericPlaceholderBlock { constructor(p = {}) { p.config = p.config || { title: 'Grid', icon: '<i class="fas fa-th"></i>', type: 'grid', desc: 'Grid layout placeholder.' }; super(p); } }

// THEME
class NavigationBlock extends GenericPlaceholderBlock { constructor(p = {}) { p.config = p.config || { title: 'Navigation', icon: '<i class="fas fa-compass"></i>', type: 'navigation', desc: 'Site navigation menu.' }; super(p); } }
class SiteLogoBlock extends GenericPlaceholderBlock { constructor(p = {}) { p.config = p.config || { title: 'Site Logo', icon: '<i class="fas fa-mountain"></i>', type: 'site-logo', desc: 'Display site logo.' }; super(p); } }
class SiteTitleBlock extends GenericPlaceholderBlock { constructor(p = {}) { p.config = p.config || { title: 'Site Title', icon: '<i class="fas fa-heading"></i>', type: 'site-title', desc: 'Display site title.' }; super(p); } }
class AuthorBlock extends GenericPlaceholderBlock { constructor(p = {}) { p.config = p.config || { title: 'Author', icon: '<i class="fas fa-user"></i>', type: 'author', desc: 'Display post author details.' }; super(p); } }
class AvatarBlock extends GenericPlaceholderBlock { constructor(p = {}) { p.config = p.config || { title: 'Avatar', icon: '<i class="fas fa-user-circle"></i>', type: 'avatar', desc: 'Display a user avatar.' }; super(p); } }

// TEXT - NEW
class DetailsBlock {
    constructor(props = {}) { this.data = props.data || { summary: 'Click to expand', content: 'Write details here...' }; }
    render() {
        this.wrapper = document.createElement('details');
        this.wrapper.className = 'p-3 border rounded bg-white my-2';
        this.wrapper.style.outline = 'none';
        this.summaryEl = document.createElement('summary');
        this.summaryEl.contentEditable = true;
        this.summaryEl.style.outline = 'none';
        this.summaryEl.style.cursor = 'pointer';
        this.summaryEl.style.fontWeight = 'bold';
        this.summaryEl.innerHTML = this.data.summary || 'Click to expand';
        this.contentEl = document.createElement('div');
        this.contentEl.contentEditable = true;
        this.contentEl.style.outline = 'none';
        this.contentEl.style.marginTop = '10px';
        this.contentEl.innerHTML = this.data.content || 'Write content...';
        this.wrapper.appendChild(this.summaryEl);
        this.wrapper.appendChild(this.contentEl);
        return this.wrapper;
    }
    save() { return { summary: this.summaryEl ? this.summaryEl.innerHTML : 'Click to expand', content: this.contentEl ? this.contentEl.innerHTML : '' }; }
}
class ClassicBlock extends GenericPlaceholderBlock { constructor(p = {}) { p.config = p.config || { title: 'Classic', icon: '<i class="fas fa-keyboard"></i>', type: 'classic', desc: 'Classic rich text editor.' }; super(p); } }

// DESIGN - NEW
class MoreBlock extends GenericPlaceholderBlock { constructor(p = {}) { p.config = p.config || { title: 'More', icon: '<i class="fas fa-ellipsis-h"></i>', type: 'more', desc: 'Read More separator.' }; super(p); } }

// WIDGETS - NEW  
class TermsListBlock extends GenericPlaceholderBlock { constructor(p = {}) { p.config = p.config || { title: 'Terms List', icon: '<i class="fas fa-th-large"></i>', type: 'terms-list', desc: 'Display a list of terms.' }; super(p); } }
class LatestCommentsBlock extends GenericPlaceholderBlock { constructor(p = {}) { p.config = p.config || { title: 'Latest Comments', icon: '<i class="fas fa-comments"></i>', type: 'latest-comments', desc: 'Display latest comments.' }; super(p); } }
class PageListBlock extends GenericPlaceholderBlock { constructor(p = {}) { p.config = p.config || { title: 'Page List', icon: '<i class="fas fa-file-alt"></i>', type: 'page-list', desc: 'Display a list of pages.' }; super(p); } }
class RssBlock extends GenericPlaceholderBlock { constructor(p = {}) { p.config = p.config || { title: 'RSS', icon: '<i class="fas fa-rss"></i>', type: 'rss', desc: 'RSS feed display.' }; super(p); } }
class TagCloudBlock extends GenericPlaceholderBlock { constructor(p = {}) { p.config = p.config || { title: 'Tag Cloud', icon: '<i class="fas fa-tags"></i>', type: 'tag-cloud', desc: 'Tag cloud.' }; super(p); } }

// THEME - NEW
class SiteTaglineBlock extends GenericPlaceholderBlock { constructor(p = {}) { p.config = p.config || { title: 'Site Tagline', icon: '<i class="fas fa-minus"></i>', type: 'site-tagline', desc: 'Site tagline/description.' }; super(p); } }
class QueryLoopBlock extends GenericPlaceholderBlock { constructor(p = {}) { p.config = p.config || { title: 'Query Loop', icon: '<i class="fas fa-infinity"></i>', type: 'query-loop', desc: 'Query loop for posts.' }; super(p); } }
class PostTitleBlock extends GenericPlaceholderBlock { constructor(p = {}) { p.config = p.config || { title: 'Title', icon: '<i class="fas fa-font"></i>', type: 'post-title', desc: 'Post title.' }; super(p); } }
class PostExcerptBlock extends GenericPlaceholderBlock { constructor(p = {}) { p.config = p.config || { title: 'Excerpt', icon: '<i class="fas fa-align-left"></i>', type: 'post-excerpt', desc: 'Post excerpt.' }; super(p); } }
class FeaturedImageBlock extends GenericPlaceholderBlock { constructor(p = {}) { p.config = p.config || { title: 'Featured Image', icon: '<i class="far fa-image"></i>', type: 'featured-image', desc: 'Featured image.' }; super(p); } }
class AuthorNameBlock extends GenericPlaceholderBlock { constructor(p = {}) { p.config = p.config || { title: 'Author Name', icon: '<i class="fas fa-user"></i>', type: 'author-name', desc: 'Author name.' }; super(p); } }
class PostDateBlock extends GenericPlaceholderBlock { constructor(p = {}) { p.config = p.config || { title: 'Date', icon: '<i class="far fa-calendar"></i>', type: 'post-date', desc: 'Post date.' }; super(p); } }
class ModifiedDateBlock extends GenericPlaceholderBlock { constructor(p = {}) { p.config = p.config || { title: 'Modified Date', icon: '<i class="fas fa-calendar-check"></i>', type: 'modified-date', desc: 'Modified date.' }; super(p); } }
class PostCategoriesBlock extends GenericPlaceholderBlock { constructor(p = {}) { p.config = p.config || { title: 'Categories', icon: '<i class="fas fa-folder"></i>', type: 'post-categories', desc: 'Post categories.' }; super(p); } }
class PostTagsBlock extends GenericPlaceholderBlock { constructor(p = {}) { p.config = p.config || { title: 'Tags', icon: '<i class="fas fa-tag"></i>', type: 'post-tags', desc: 'Post tags.' }; super(p); } }

// EMBEDS - Functional URL input block
class EmbedBlock {
    constructor(props = {}) {
        this.data = props.data || { url: '', platform: '' };
        this.config = props.config || {};
        this.platform = this.config.platform || this.data.platform || 'Embed';
        this.icon = this.config.icon || '<i class="fas fa-code"></i>';
    }
    render() {
        this.wrapper = document.createElement('div');
        this.wrapper.className = 'p-4 border rounded bg-white text-center my-2';
        this.wrapper.style.borderStyle = 'dashed';
        var iconDiv = document.createElement('div');
        iconDiv.innerHTML = this.icon;
        iconDiv.style.fontSize = '28px';
        iconDiv.style.marginBottom = '8px';
        iconDiv.style.color = '#1e1e1e';
        var label = document.createElement('p');
        label.className = 'fw-bold mb-2';
        label.textContent = this.platform;
        this.urlInput = document.createElement('input');
        this.urlInput.type = 'url';
        this.urlInput.placeholder = 'Paste ' + this.platform + ' URL to embed...';
        this.urlInput.className = 'form-control form-control-sm text-center';
        this.urlInput.style.maxWidth = '400px';
        this.urlInput.style.margin = '0 auto';
        this.urlInput.value = this.data.url || '';
        this.previewDiv = document.createElement('div');
        this.previewDiv.className = 'mt-2';
        if (this.data.url) this._renderPreview(this.data.url);
        this.urlInput.addEventListener('change', () => { this._renderPreview(this.urlInput.value); });
        this.wrapper.appendChild(iconDiv);
        this.wrapper.appendChild(label);
        this.wrapper.appendChild(this.urlInput);
        this.wrapper.appendChild(this.previewDiv);
        return this.wrapper;
    }
    _renderPreview(url) {
        if (!url) { this.previewDiv.innerHTML = ''; return; }
        // YouTube embed
        var ytMatch = url.match(/(?:youtube\.com\/watch\?v=|youtu\.be\/)([\w-]+)/);
        if (ytMatch) { this.previewDiv.innerHTML = '<iframe width="100%" height="315" src="https://www.youtube.com/embed/' + ytMatch[1] + '" frameborder="0" allowfullscreen style="border-radius:8px;margin-top:10px;"></iframe>'; return; }
        // Vimeo embed
        var vmMatch = url.match(/vimeo\.com\/(\d+)/);
        if (vmMatch) { this.previewDiv.innerHTML = '<iframe width="100%" height="315" src="https://player.vimeo.com/video/' + vmMatch[1] + '" frameborder="0" style="border-radius:8px;margin-top:10px;"></iframe>'; return; }
        // Spotify embed
        if (url.includes('spotify.com')) { var spUrl = url.replace('open.spotify.com/', 'open.spotify.com/embed/'); this.previewDiv.innerHTML = '<iframe src="' + spUrl + '" width="100%" height="152" frameborder="0" style="border-radius:12px;margin-top:10px;" allow="autoplay;clipboard-write;encrypted-media;fullscreen;picture-in-picture"></iframe>'; return; }
        this.previewDiv.innerHTML = '<p class="text-muted small mt-2"><i class="fas fa-link"></i> ' + url + '</p>';
    }
    save() { return { url: this.urlInput ? this.urlInput.value : '', platform: this.platform }; }
}
