// widget.js
class CommentWidget {
    constructor(container, options) {
        this.container = container;
        this.options = {
            apiUrl: 'https://api.yourdomain.com',
            pageId: container.dataset.pageId || window.location.pathname,
            theme: 'light',
            ...options
        };
        this.comments = [];
        this.init();
    }
    
    async init() {
        this.render();
        await this.loadComments();
        this.attachEventListeners();
    }
    
    render() {
        this.container.innerHTML = `
            <div class="comment-widget" data-theme="${this.options.theme}">
                <div class="comment-form-container"></div>
                <div class="comment-list"></div>
                <div class="comment-loading">Loading comments...</div>
            </div>
        `;
    }
    
    async loadComments() {
        const response = await fetch(
            `${this.options.apiUrl}/comments?page_id=${encodeURIComponent(this.options.pageId)}`
        );
        const { data } = await response.json();
        this.comments = data;
        this.renderComments();
    }
    
    renderComments() {
        const list = this.container.querySelector('.comment-list');
        const loading = this.container.querySelector('.comment-loading');
        loading.style.display = 'none';
        
        if (this.comments.length === 0) {
            list.innerHTML = '<p class="no-comments">No comments yet. Be the first!</p>';
            return;
        }
        
        list.innerHTML = this.comments.map(c => this.renderComment(c)).join('');
    }
    
    renderComment(comment) {
        const date = new Date(comment.created_at).toLocaleDateString();
        return `
            <article class="comment" data-id="${comment.id}">
                <header class="comment-header">
                    <img class="comment-avatar" 
                         src="${this.getGravatar(comment.author_email)}" 
                         alt="${comment.author_name}">
                    <span class="comment-author">${this.escapeHtml(comment.author_name)}</span>
                    <time class="comment-date">${date}</time>
                </header>
                <div class="comment-content">${this.escapeHtml(comment.content)}</div>
                <footer class="comment-actions">
                    <button class="reply-btn" data-id="${comment.id}">Reply</button>
                </footer>
                ${comment.replies ? this.renderReplies(comment.replies) : ''}
            </article>
        `;
    }
    
    escapeHtml(text) {
        const div = document.createElement('div');
        div.textContent = text;
        return div.innerHTML;
    }
    
    getGravatar(email) {
        // Use a default avatar if no email
        if (!email) return 'https://www.gravatar.com/avatar/?d=mp';
        const hash = this.md5(email.toLowerCase().trim());
        return `https://www.gravatar.com/avatar/${hash}?d=mp`;
    }
}

// Initialize
document.querySelectorAll('[data-comments]').forEach(el => {
    new CommentWidget(el);
});

// form.js
renderForm(parentId = null) {
    return `
        <form class="comment-form" data-parent="${parentId || ''}">
            <div class="form-group">
                <label for="author">Name *</label>
                <input type="text" id="author" name="author" required 
                       minlength="2" maxlength="100">
            </div>
            <div class="form-group">
                <label for="email">Email</label>
                <input type="email" id="email" name="email" 
                       placeholder="Optional, for Gravatar">
            </div>
            <div class="form-group">
                <label for="content">Comment *</label>
                <textarea id="content" name="content" required 
                          minlength="1" maxlength="5000" rows="4"></textarea>
            </div>
            <div class="form-actions">
                <button type="submit" class="submit-btn">Post Comment</button>
                ${parentId ? '<button type="button" class="cancel-btn">Cancel</button>' : ''}
            </div>
            <p class="form-note">
                Your comment will appear after moderation.
            </p>
        </form>
    `;
}

async handleSubmit(event) {
    event.preventDefault();
    const form = event.target;
    const submitBtn = form.querySelector('.submit-btn');
    
    submitBtn.disabled = true;
    submitBtn.textContent = 'Posting...';
    
    try {
        const response = await fetch(`${this.options.apiUrl}/comments`, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({
                page_id: this.options.pageId,
                parent_id: form.dataset.parent || null,
                author_name: form.author.value,
                author_email: form.email.value,
                content: form.content.value
            })
        });
        
        if (!response.ok) throw new Error('Failed to post comment');
        
        form.reset();
        this.showMessage('Comment submitted! It will appear after approval.');
    } catch (error) {
        this.showMessage('Failed to post comment. Please try again.', 'error');
    } finally {
        submitBtn.disabled = false;
        submitBtn.textContent = 'Post Comment';
    }
}

// Announce new comment to screen readers
function announceComment(message) {
    const announcement = document.createElement('div');
    announcement.setAttribute('role', 'status');
    announcement.setAttribute('aria-live', 'polite');
    announcement.textContent = message;
    document.body.appendChild(announcement);
    setTimeout(() => announcement.remove(), 1000);
}