// LLMO Ready - Blog Engine
// Renders blog posts from JSON data with full LLM optimization

class BlogEngine {
    constructor() {
        this.posts = [];
        this.currentPost = null;
    }

    // Load all posts from JSON
    async loadPosts() {
        try {
            const pathParts = window.location.pathname.split('/').filter(Boolean);
            const maybeLocale = pathParts[0];
            const availableLocales = ['en', 'de'];
            const locale = availableLocales.includes(maybeLocale) ? maybeLocale : null;

            let response = null;

            if (locale) {
                response = await fetch(`/${locale}/blog/data/posts.json`);
            }

            // Fallbacks (legacy)
            if (!response || !response.ok) {
                response = await fetch('data/posts.json');
            }

            if (!response.ok) {
                console.log('[Blog] Trying absolute path...');
                response = await fetch('/blog/data/posts.json');
            }
            
            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }
            
            const data = await response.json();
            this.posts = data.posts;
            console.log('[Blog] Loaded', this.posts.length, 'posts');
            return this.posts;
        } catch (error) {
            console.error('[Blog] Error loading posts:', error);
            return [];
        }
    }
    // Get post by slug
    getPostBySlug(slug) {
        return this.posts.find(post => post.slug === slug);
    }

    // Decode text (handles both real and escaped characters)
    decodeText(text) {
        if (!text) return '';
        
        // Handle escaped newlines from JSON
        text = text.replace(/\\n/g, '\n');
        
        // Decode Unicode escapes (e.g., \u201e for „)
        try {
            text = text.replace(/\\u([0-9a-fA-F]{4})/g, (match, hex) => {
                return String.fromCharCode(parseInt(hex, 16));
            });
        } catch (e) {
            console.warn('[Blog] Error decoding unicode:', e);
        }
        
        return text;
    }

    // Simple markdown renderer
    renderMarkdown(text) {
        if (!text) return '';
        
        // First decode any escaped characters
        text = this.decodeText(text);
        
        return text
            // Bold
            .replace(/\*\*(.*?)\*\*/g, '<strong class="font-bold text-white">$1</strong>')
            // Italic
            .replace(/\*(.*?)\*/g, '<em class="italic">$1</em>')
            // Links
            .replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" class="text-electric hover:underline">$1</a>')
            // Line breaks
            .replace(/  \n/g, '<br>')
            .replace(/\n\n/g, '</p><p class="mb-4">')
            .replace(/\n/g, '<br>');
    }

    // Render content blocks
    renderBlock(block) {
        switch (block.type) {
            case 'intro':
                return this.renderIntro(block);
            case 'section':
                return this.renderSection(block);
            case 'quote':
                return this.renderQuote(block);
            case 'list':
                return this.renderList(block);
            case 'image':
                return this.renderImage(block);
            case 'callout':
                return this.renderCallout(block);
            case 'code':
                return this.renderCode(block);
            case 'video':
                return this.renderVideo(block);
            default:
                console.warn('[Blog] Unknown block type:', block.type);
                return '';
        }
    }

    renderIntro(block) {
        return `
            <div class="intro-block mb-12 text-xl leading-relaxed text-white/90">
                <p>${this.renderMarkdown(block.text)}</p>
            </div>
        `;
    }

    renderSection(block) {
        return `
            <section class="content-section mb-12">
                ${block.heading ? `<h2 class="text-3xl font-headline font-bold text-white mb-6">${this.decodeText(block.heading)}</h2>` : ''}
                <div class="prose prose-lg text-white/80 leading-relaxed">
                    <p class="mb-4">${this.renderMarkdown(block.content)}</p>
                </div>
        `;
    }

    renderQuote(block) {
        return `
            <blockquote class="quote-block my-12 border-l-4 border-electric pl-8 py-4 bg-white/5 rounded-r-xl">
                <p class="text-2xl font-headline italic text-white/90 mb-2">${this.decodeText(block.text)}</p>
                ${block.author ? `<cite class="text-sm text-white/60">— ${this.decodeText(block.author)}</cite>` : ''}
            </blockquote>
        `;
    }

    renderList(block) {
        const listClass = block.style === 'checklist' ? 'checklist' : 'bullet-list';
        const icon = block.style === 'checklist' 
            ? '<svg class="w-5 h-5 text-neon mr-3 flex-shrink-0 mt-1" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>'
            : '<span class="text-electric mr-3">•</span>';

        const items = block.items.map(item => `
            <li class="flex items-start mb-4">
                ${icon}
                <span class="text-white/80 leading-relaxed">${this.renderMarkdown(item)}</span>
            </li>
        `).join('');

        return `
            <div class="list-block my-12">
                ${block.title ? `<h3 class="text-xl font-semibold text-white mb-6">${this.decodeText(block.title)}</h3>` : ''}
                <ul class="${listClass} bg-white/5 rounded-xl p-6">
                    ${items}
                </ul>
            </div>
        `;
    }

    renderImage(block) {
        return `
            <figure class="image-block my-12">
                <img 
                    src="${block.src}" 
                    alt="${block.alt || ''}"
                    ${block.width ? `width="${block.width}"` : ''}
                    ${block.height ? `height="${block.height}"` : ''}
                    class="w-full h-auto rounded-xl shadow-2xl"
                    loading="lazy"
                />
                ${block.caption ? `<figcaption class="mt-4 text-center text-white/60 text-sm italic">${this.decodeText(block.caption)}</figcaption>` : ''}
            </figure>
        `;
    }

    renderCallout(block) {
        const styles = {
            info: 'border-blue-500/50 bg-blue-500/10',
            warning: 'border-orange-500/50 bg-orange-500/10',
            success: 'border-neon/50 bg-neon/10',
            error: 'border-red-500/50 bg-red-500/10',
            cta: 'border-electric/50 bg-electric/10'
        };

        const icons = {
            info: '<svg class="w-6 h-6 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>',
            warning: '<svg class="w-6 h-6 text-orange-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path></svg>',
            success: '<svg class="w-6 h-6 text-neon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>',
            error: '<svg class="w-6 h-6 text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>',
            cta: '<svg class="w-6 h-6 text-electric" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>'
        };

        const styleClass = styles[block.style] || styles.info;
        const icon = icons[block.style] || icons.info;

        return `
            <div class="callout-block my-12 border-2 ${styleClass} rounded-xl p-6">
                <div class="flex items-start">
                    <div class="flex-shrink-0 mr-4">
                        ${icon}
                    </div>
                    <div class="flex-1">
                        ${block.title ? `<h4 class="text-lg font-semibold text-white mb-3">${this.decodeText(block.title)}</h4>` : ''}
                        <div class="text-white/80 leading-relaxed">
                            ${this.renderMarkdown(block.content)}
                        </div>
                        ${block.link ? `
                            <a href="${block.link}" class="inline-block mt-4 btn-primary px-6 py-3 rounded-xl font-semibold">
                                ${this.decodeText(block.linkText || 'Mehr erfahren')}
                            </a>
                        ` : ''}
                    </div>
                </div>
            </div>
        `;
    }

    renderCode(block) {
        return `
            <div class="code-block my-12">
                <pre class="bg-anthracite rounded-xl p-6 overflow-x-auto"><code class="language-${block.language || 'plaintext'} text-sm text-white">${this.escapeHtml(block.content)}</code></pre>
            </div>
        `;
    }

    renderVideo(block) {
        // Support for YouTube and Vimeo embeds
        let embedHtml = '';
        
        if (block.platform === 'youtube') {
            embedHtml = `<iframe width="100%" height="450" src="https://www.youtube.com/embed/${block.videoId}" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen class="rounded-xl"></iframe>`;
        } else if (block.platform === 'vimeo') {
            embedHtml = `<iframe src="https://player.vimeo.com/video/${block.videoId}" width="100%" height="450" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen class="rounded-xl"></iframe>`;
        }

        return `
            <div class="video-block my-12">
                ${embedHtml}
                ${block.caption ? `<p class="mt-4 text-center text-white/60 text-sm italic">${block.caption}</p>` : ''}
            </div>
        `;
    }

    // Helper: Escape HTML
    escapeHtml(text) {
        const map = {
            '&': '&amp;',
            '<': '&lt;',
            '>': '&gt;',
            '"': '&quot;',
            "'": '&#039;'
        };
        return text.replace(/[&<>"']/g, m => map[m]);
    }

    // Calculate reading time
    calculateReadingTime(content) {
        const wordsPerMinute = 200;
        let wordCount = 0;

        content.forEach(block => {
            if (block.text) wordCount += block.text.split(/\s+/).length;
            if (block.content) wordCount += block.content.split(/\s+/).length;
            if (block.items) {
                block.items.forEach(item => {
                    wordCount += item.split(/\s+/).length;
                });
            }
        });

        return Math.ceil(wordCount / wordsPerMinute);
    }

    // Format date
    formatDate(dateString) {
        const date = new Date(dateString);
        return date.toLocaleDateString('de-DE', {
            year: 'numeric',
            month: 'long',
            day: 'numeric'
        });
    }

    // Generate Schema.org JSON-LD
    generateSchemaMarkup(post) {
        const schema = post.schema || {};
        return `
            <script type="application/ld+json">
            ${JSON.stringify(schema, null, 2)}
            </script>
        `;
    }
}

// Export for use in other scripts
if (typeof module !== 'undefined' && module.exports) {
    module.exports = BlogEngine;
}