// Yorumlar Bileşeni
class Comments extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            comments: [],
            loading: false,
            loadingComments: false,
            newComment: { name: '', email: '', comment: '' }
        };
    }

    componentDidMount() {
        this.loadComments();
    }

    loadComments = () => {
        this.setState({ loadingComments: true });
        
        fetch(`/api/comment.php?article_id=${this.props.articleId}`)
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    this.setState({ comments: data.comments });
                }
                this.setState({ loadingComments: false });
            })
            .catch(error => {
                console.error('Yorumlar yüklenirken hata:', error);
                this.setState({ loadingComments: false });
            });
    }

    handleSubmit = (e) => {
        e.preventDefault();
        this.setState({ loading: true });
        
        const formData = new FormData();
        formData.append('article_id', this.props.articleId);
        formData.append('name', this.state.newComment.name);
        formData.append('email', this.state.newComment.email);
        formData.append('comment', this.state.newComment.comment);
        
        fetch('/api/comment.php', {
            method: 'POST',
            body: formData
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                alert('Yorumunuz başarıyla eklendi. Onay bekliyor.');
                this.setState({ 
                    newComment: { name: '', email: '', comment: '' },
                    loading: false 
                });
            } else {
                alert(data.message);
                this.setState({ loading: false });
            }
        })
        .catch(error => {
            console.error('Yorum gönderme hatası:', error);
            alert('Bir hata oluştu. Lütfen tekrar deneyin.');
            this.setState({ loading: false });
        });
    }

    handleInputChange = (field, value) => {
        this.setState({
            newComment: {
                ...this.state.newComment,
                [field]: value
            }
        });
    }

    render() {
        return (
            <div className="comments-section">
                <h3>Yorumlar ({this.state.comments.length})</h3>
                
                {this.state.loadingComments ? (
                    <div className="loading">Yorumlar yükleniyor...</div>
                ) : (
                    <div className="comments-list">
                        {this.state.comments.length === 0 ? (
                            <p className="no-comments">Henüz yorum yapılmamış. İlk yorumu siz yapın!</p>
                        ) : (
                            this.state.comments.map(comment => (
                                <div key={comment.id} className="comment-item">
                                    <div className="comment-header">
                                        <strong>{comment.name}</strong>
                                        <span className="comment-date">{comment.created_at}</span>
                                    </div>
                                    <div className="comment-content">{comment.comment}</div>
                                    
                                    {comment.replies && comment.replies.length > 0 && (
                                        <div className="comment-replies">
                                            {comment.replies.map((reply, idx) => (
                                                <div key={idx} className="comment-reply">
                                                    <div className="comment-reply-header">
                                                        <strong>{reply.admin_name || 'Yönetici'}</strong>
                                                        <span className="comment-date">{reply.created_at}</span>
                                                    </div>
                                                    <div className="comment-reply-content">{reply.reply}</div>
                                                </div>
                                            ))}
                                        </div>
                                    )}
                                </div>
                            ))
                        )}
                    </div>
                )}
                
                <form onSubmit={this.handleSubmit} className="comment-form">
                    <h4>Yorum Yap</h4>
                    <div className="form-row">
                        <input 
                            type="text" 
                            placeholder="Adınız" 
                            value={this.state.newComment.name}
                            onChange={(e) => this.handleInputChange('name', e.target.value)}
                            required 
                        />
                        <input 
                            type="email" 
                            placeholder="Email" 
                            value={this.state.newComment.email}
                            onChange={(e) => this.handleInputChange('email', e.target.value)}
                            required 
                        />
                    </div>
                    <textarea 
                        placeholder="Yorumunuz" 
                        value={this.state.newComment.comment}
                        onChange={(e) => this.handleInputChange('comment', e.target.value)}
                        required
                        rows="4"
                    ></textarea>
                    <button type="submit" disabled={this.state.loading}>
                        {this.state.loading ? 'Gönderiliyor...' : 'Yorum Gönder'}
                    </button>
                </form>
            </div>
        );
    }
}

// CSS stilleri
const commentsStyles = `
.comments-section {
    margin-top: 2rem;
    padding: 2rem;
    background: white;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.comments-section h3 {
    color: #2c3e50;
    margin-bottom: 1.5rem;
    border-bottom: 2px solid #3498db;
    padding-bottom: 0.5rem;
}

.comments-list {
    margin-bottom: 2rem;
}

.comment-item {
    border-bottom: 1px solid #ecf0f1;
    padding: 1rem 0;
}

.comment-item:last-child {
    border-bottom: none;
}

.comment-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.comment-header strong {
    color: #2c3e50;
    font-size: 1rem;
}

.comment-date {
    color: #7f8c8d;
    font-size: 0.9rem;
}

.comment-content {
    color: #34495e;
    line-height: 1.6;
    margin-left: 0;
}

.comment-replies {
    margin-top: 1rem;
    border-left: 3px solid #e91e63;
    padding-left: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.comment-reply {
    background: #fef3f7;
    border-radius: 6px;
    padding: 0.75rem;
}

.comment-reply-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    color: #c2185b;
}

.comment-reply-content {
    color: #3c2f3d;
    line-height: 1.4;
}

.no-comments {
    text-align: center;
    color: #7f8c8d;
    font-style: italic;
    padding: 2rem;
}

.comment-form {
    border-top: 2px solid #ecf0f1;
    padding-top: 1.5rem;
}

.comment-form h4 {
    color: #2c3e50;
    margin-bottom: 1rem;
}

.form-row {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
}

.form-row input {
    flex: 1;
    padding: 0.8rem;
    border: 2px solid #ddd;
    border-radius: 5px;
    font-size: 1rem;
    transition: border-color 0.3s ease;
}

.form-row input:focus {
    outline: none;
    border-color: #3498db;
}

.comment-form textarea {
    width: 100%;
    padding: 0.8rem;
    border: 2px solid #ddd;
    border-radius: 5px;
    font-size: 1rem;
    resize: vertical;
    margin-bottom: 1rem;
    transition: border-color 0.3s ease;
}

.comment-form textarea:focus {
    outline: none;
    border-color: #3498db;
}

.comment-form button {
    background: #3498db;
    color: white;
    padding: 0.8rem 2rem;
    border: none;
    border-radius: 5px;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.comment-form button:hover:not(:disabled) {
    background: #2980b9;
}

.comment-form button:disabled {
    background: #bdc3c7;
    cursor: not-allowed;
}

.loading {
    text-align: center;
    color: #7f8c8d;
    padding: 2rem;
}

@media (max-width: 768px) {
    .form-row {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .comment-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
}
`;

// CSS'i head'e ekle
if (typeof document !== 'undefined') {
    const commentsStyle = document.createElement('style');
    commentsStyle.textContent = commentsStyles;
    document.head.appendChild(commentsStyle);
}

// Global değişken olarak tanımla
window.Comments = Comments;