Comments.jsx

import { useState, useEffect } from 'react';
import './Comments.css';

const API_BASE = 'https://auth.goygoyengine.com/api/easycomment/v1';

export const Comments = ({ theme = 'light' }) => {
    const [comments, setComments] = useState([]);
    const [username, setUsername] = useState('');
    const [commentText, setCommentText] = useState('');
    const [replyTo, setReplyTo] = useState(null);

    useEffect(() => {
        loadComments();
    }, []);

    const loadComments = async () => {
        try {
            const response = await fetch(
                `${API_BASE}/comments?comment_url=${encodeURIComponent(window.location.href)}`
            );
            const data = await response.json();

            // Organize comments and replies
            const mainComments = data.filter(c => !c.answer_comment_id);
            const replies = data.filter(c => c.answer_comment_id);

            // Group replies with their parent comments
            const organizedComments = mainComments.map(comment => ({
                ...comment,
                replies: replies.filter(r => r.answer_comment_id === comment.comment_id)
            }));

            setComments(organizedComments);
        } catch (error) {
            console.error('Error loading comments:', error);
        }
    };

    const submitComment = async (e, parentId = null) => {
        e.preventDefault();
        if (!commentText.trim()) return;

        try {
            const response = await fetch(`${API_BASE}/comments`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    comment_url: window.location.href,
                    username: username || 'Anonymous',
                    text: commentText,
                    answer_comment_id: parentId
                })
            });

            if (response.ok) {
                setCommentText('');
                setReplyTo(null);
                loadComments();
            }
        } catch (error) {
            console.error('Error posting comment:', error);
        }
    };

    const Comment = ({ comment, isReply }) => (
        <div className={`gdb-comment ${isReply ? 'reply' : ''}`}>
            <div className="gdb-comment-header">
                <span className="gdb-comment-username">
                    {comment.username || 'Anonymous'}
                </span>
                <span className="gdb-comment-time">
                    {new Date(comment.timestamp).toLocaleString()}
                </span>
            </div>
            <p className="gdb-comment-text">{comment.text}</p>
            {!isReply && (
                <button 
                    className="gdb-reply-button"
                    onClick={() => setReplyTo(comment.comment_id)}
                >
                    Reply
                </button>
            )}
            {replyTo === comment.comment_id && (
                <form 
                    className="gdb-reply-form"
                    onSubmit={(e) => submitComment(e, comment.comment_id)}
                >
                    <input
                        type="text"
                        placeholder="Your name (optional)"
                        value={username}
                        onChange={(e) => setUsername(e.target.value)}
                        className="gdb-name-input"
                    />
                    <textarea
                        placeholder="Write your reply..."
                        value={commentText}
                        onChange={(e) => setCommentText(e.target.value)}
                        className="gdb-comment-input"
                    />
                    <div className="gdb-button-group">
                        <button type="submit" className="gdb-submit-button">
                            Submit
                        </button>
                        <button 
                            type="button" 
                            className="gdb-cancel-button"
                            onClick={() => setReplyTo(null)}
                        >
                            Cancel
                        </button>
                    </div>
                </form>
            )}
            {comment.replies?.map(reply => (
                <Comment 
                    key={reply.comment_id} 
                    comment={reply} 
                    isReply={true}
                />
            ))}
        </div>
    );

    return (
        <div className={`gdb-comments-container ${theme}`}>
            <h3 className="gdb-comments-title">
                Comments ({comments.reduce((acc, c) => acc + 1 + (c.replies?.length || 0), 0)})
            </h3>
            
            <form className="gdb-comment-form" onSubmit={(e) => submitComment(e)}>
                <input
                    type="text"
                    placeholder="Your name (optional)"
                    value={username}
                    onChange={(e) => setUsername(e.target.value)}
                    className="gdb-name-input"
                />
                <textarea
                    placeholder="Write your comment..."
                    value={commentText}
                    onChange={(e) => setCommentText(e.target.value)}
                    className="gdb-comment-input"
                />
                <button type="submit" className="gdb-submit-button">
                    Post Comment
                </button>
            </form>

            <div className="gdb-comments-list">
                {comments.map(comment => (
                    <Comment 
                        key={comment.comment_id} 
                        comment={comment} 
                        isReply={false}
                    />
                ))}
            </div>
        </div>
    );
};

export default Comments;