// Comments/Comments.jsx
import { useState, useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import './comments.css';
import { useAuthContext } from '../../../contexts/UserContext';
import { useInitiativeContext } from '../../../contexts/InitiativeProvider';
import { CommentItem } from '../CommentItem/CommentItem';
import { CommentForm } from '../CommentForm/CommentForm';
import { Link } from 'react-router-dom';

export const Comments = ({
    initiativeId,
    entityId,
    entityType = 'initiative',
    commentsEnabled = true,
    onCommentsChange
}) => {
    const { t } = useTranslation();
    const { isAuthentication } = useAuthContext();
    const {
        // Initiative functions
        getComments, addComment, updateComment, deleteComment, likeComment,
        // Project functions
        getProjectComments, addProjectComment, updateProjectComment, deleteProjectComment, likeProjectComment,
        commentsLoading,
        comments // ← Директно от контекста
    } = useInitiativeContext();

    const [showCommentForm, setShowCommentForm] = useState(false);
    const [isLoaded, setIsLoaded] = useState(false);

    const targetId = initiativeId || entityId;
    const isProject = entityType === 'project';

    const fetchComments = isProject ? getProjectComments : getComments;
    const submitComment = isProject ? addProjectComment : addComment;
    const updateCommentFunc = isProject ? updateProjectComment : updateComment;
    const deleteCommentFunc = isProject ? deleteProjectComment : deleteComment;
    const likeCommentFunc = isProject ? likeProjectComment : likeComment;

    // Вземаме коментарите директно от контекста
    const currentComments = comments[targetId] || [];

    useEffect(() => {
        if (!commentsEnabled || !targetId) return;

        const loadComments = async () => {
            try {
                await fetchComments(targetId);
                setIsLoaded(true);
            } catch (error) {
                console.error('Error fetching comments:', error);
                setIsLoaded(true);
            }
        };

        loadComments();
    }, [targetId, commentsEnabled, fetchComments]);

    const handleAddComment = async (content) => {
        if (!isAuthentication) {
            alert(t('comments.loginRequired'));
            return;
        }

        try {
            await submitComment(targetId, content);
            setShowCommentForm(false);
        } catch (error) {
            console.error('Error adding comment:', error);
        }
    };

    // Уведомяваме родителя за промяна в броя коментари
    useEffect(() => {
        if (onCommentsChange) {
            onCommentsChange(currentComments.length);
        }
    }, [currentComments.length, onCommentsChange]);

    if (!commentsEnabled) {
        return (
            <section className="initiative-comments-section" id="comments">
                <div className="initiative-comments-disabled">
                    <div className="initiative-comments-disabled-icon">🔒</div>
                    <h3 className="initiative-comments-disabled-title">
                        {t('comments.disabled.title')}
                    </h3>
                    <p className="initiative-comments-disabled-message">
                        {t('comments.disabled.message')}
                    </p>
                </div>
            </section>
        );
    }

    return (
        <section className="initiative-comments-section" id="comments">
            <div className="initiative-comments-header">
                <h2 className="initiative-comments-section-title">
                    {t('comments.title')} ({currentComments.length})
                </h2>

                {isAuthentication && (
                    <button
                        className="initiative-add-comment-btn"
                        onClick={() => setShowCommentForm(!showCommentForm)}
                    >
                        {showCommentForm ? t('comments.cancel') : t('comments.addComment')}
                    </button>
                )}
            </div>

            {!isAuthentication && (
                <div className="initiative-login-prompt">
                    <p>{t('comments.loginPrompt')}</p>
                    <Link to="/sign-up?tab=login" className="initiative-login-link">
                        {t('comments.loginLink')}
                    </Link>
                </div>
            )}

            {showCommentForm && (
                <CommentForm
                    onSubmit={handleAddComment}
                    onCancel={() => setShowCommentForm(false)}
                    placeholder={t('comments.placeholder')}
                />
            )}

            {commentsLoading && !isLoaded ? (
                <div className="initiative-comments-loading">
                    <div className="initiative-loading-spinner"></div>
                    <p>{t('comments.loading')}</p>
                </div>
            ) : (
                <div className="initiative-comments-list">
                    {currentComments.length === 0 ? (
                        <div className="initiative-no-comments">
                            <div className="initiative-no-comments-icon">💬</div>
                            <p>{t('comments.noComments')}</p>
                        </div>
                    ) : (
                        currentComments
                            .filter(comment => comment && comment.id)
                            .map(comment => (
                                <CommentItem
                                    key={comment.id}
                                    comment={comment}
                                    entityId={targetId}
                                    entityType={entityType}
                                    updateCommentFunc={updateCommentFunc}
                                    deleteCommentFunc={deleteCommentFunc}
                                    likeCommentFunc={likeCommentFunc}
                                    addCommentFunc={submitComment}
                                />
                            ))
                    )}
                </div>
            )}
        </section>
    );
};