// src/index.js
export default {
    async fetch(request, env) {
        const url = new URL(request.url);
        
        // CORS headers
        const corsHeaders = {
            'Access-Control-Allow-Origin': 'https://yourdomain.com',
            'Access-Control-Allow-Methods': 'GET, POST, OPTIONS',
            'Access-Control-Allow-Headers': 'Content-Type',
        };
        
        if (request.method === 'OPTIONS') {
            return new Response(null, { headers: corsHeaders });
        }
        
        if (url.pathname === '/api/comments' && request.method === 'GET') {
            const pageId = url.searchParams.get('page_id');
            const { results } = await env.DB.prepare(
                'SELECT * FROM comments WHERE page_id = ? AND status = ? ORDER BY created_at DESC'
            ).bind(pageId, 'approved').all();
            
            return Response.json(results, { headers: corsHeaders });
        }
        
        if (url.pathname === '/api/comments' && request.method === 'POST') {
            const body = await request.json();
            
            await env.DB.prepare(
                'INSERT INTO comments (page_id, parent_id, author_name, content) VALUES (?, ?, ?, ?)'
            ).bind(body.page_id, body.parent_id, body.author_name, body.content).run();
            
            return Response.json({ success: true }, { status: 201, headers: corsHeaders });
        }
        
        return new Response('Not Found', { status: 404 });
    }
};

// public/widget.js
class CommentWidget {
    constructor(element) {
        this.el = element;
        this.apiUrl = element.dataset.api || '/api';
        this.pageId = element.dataset.pageId || window.location.pathname;
        this.init();
    }
    
    async init() {
        this.render();
        await this.loadComments();
        this.bindEvents();
    }
    
    render() {
        this.el.innerHTML = `
            <div class="comments-widget">
                <h3>Comments</h3>
                <form class="comment-form">
                    <input name="author_name" placeholder="Your name" required>
                    <textarea name="content" placeholder="Your comment" required></textarea>
                    <button type="submit">Post Comment</button>
                </form>
                <div class="comments-list"></div>
            </div>
        `;
    }
    
    async loadComments() {
        const res = await fetch(`${this.apiUrl}/comments?page_id=${this.pageId}`);
        const { data } = await res.json();
        
        const list = this.el.querySelector('.comments-list');
        list.innerHTML = data.length 
            ? data.map(c => this.commentHTML(c)).join('')
            : '<p>No comments yet.</p>';
    }
    
    commentHTML(c) {
        return `
            <article class="comment">
                <strong>${this.escape(c.author_name)}</strong>
                <time>${new Date(c.created_at).toLocaleDateString()}</time>
                <p>${this.escape(c.content)}</p>
            </article>
        `;
    }
    
    escape(str) {
        return str.replace(/[&<>"']/g, c => ({
            '&': '&amp;', '<': '&lt;', '>': '&gt;', 
            '"': '&quot;', "'": '&#39;'
        }[c]));
    }
    
    bindEvents() {
        const form = this.el.querySelector('form');
        form.addEventListener('submit', async (e) => {
            e.preventDefault();
            const data = Object.fromEntries(new FormData(form));
            data.page_id = this.pageId;
            
            await fetch(`${this.apiUrl}/comments`, {
                method: 'POST',
                headers: {'Content-Type': 'application/json'},
                body: JSON.stringify(data)
            });
            
            form.reset();
            alert('Comment submitted for review!');
        });
    }
}

// Auto-init
document.querySelectorAll('[data-comments]').forEach(el => new CommentWidget(el));