// Beğeni Butonu Bileşeni
class LikeButton extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            likeCount: props.likeCount || 0,
            loading: false,
            liked: false
        };
    }

    componentDidMount() {
        this.loadLikeCount();
    }

    loadLikeCount = () => {
        fetch(`/api/like.php?article_id=${this.props.articleId}`)
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    this.setState({ likeCount: data.like_count });
                }
            })
            .catch(error => {
                console.error('Beğeni sayısı yüklenirken hata:', error);
            });
    }

    handleLike = () => {
        if (this.state.loading || this.state.liked) return;
        
        this.setState({ loading: true });
        
        const formData = new FormData();
        formData.append('article_id', this.props.articleId);
        
        fetch('/api/like.php', {
            method: 'POST',
            body: formData
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                this.setState({ 
                    likeCount: data.like_count,
                    loading: false,
                    liked: true
                });
            } else {
                alert(data.message);
                this.setState({ loading: false });
            }
        })
        .catch(error => {
            console.error('Beğeni hatası:', error);
            alert('Bir hata oluştu. Lütfen tekrar deneyin.');
            this.setState({ loading: false });
        });
    }

    render() {
        return (
            <button 
                className={`like-button ${this.state.liked ? 'liked' : ''} ${this.state.loading ? 'loading' : ''}`}
                onClick={this.handleLike}
                disabled={this.state.loading || this.state.liked}
                title={this.state.liked ? 'Bu makaleyi beğendiniz' : 'Bu makaleyi beğenin'}
            >
                <i className={`fas fa-heart ${this.state.liked ? 'liked' : ''}`}></i>
                <span>{this.state.likeCount} Beğeni</span>
                {this.state.loading && <span className="loading-spinner">⟳</span>}
            </button>
        );
    }
}

// CSS stilleri
const likeButtonStyles = `
.like-button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    color: white;
    border: none;
    padding: 0.8rem 1.5rem;
    border-radius: 25px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 10px rgba(231, 76, 60, 0.3);
    position: relative;
    overflow: hidden;
}

.like-button:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(231, 76, 60, 0.4);
}

.like-button:active:not(:disabled) {
    transform: translateY(0);
}

.like-button.liked {
    background: linear-gradient(135deg, #27ae60, #2ecc71);
    box-shadow: 0 2px 10px rgba(39, 174, 96, 0.3);
    cursor: default;
}

.like-button.liked:hover {
    transform: none;
    box-shadow: 0 2px 10px rgba(39, 174, 96, 0.3);
}

.like-button.loading {
    background: linear-gradient(135deg, #95a5a6, #7f8c8d);
    cursor: not-allowed;
}

.like-button i {
    font-size: 1.1rem;
    transition: transform 0.3s ease;
}

.like-button:hover:not(:disabled) i {
    transform: scale(1.1);
}

.like-button.liked i {
    color: #fff;
    animation: heartBeat 0.6s ease-in-out;
}

.like-button span {
    font-size: 0.95rem;
}

.loading-spinner {
    animation: spin 1s linear infinite;
    margin-left: 0.5rem;
}

@keyframes heartBeat {
    0% { transform: scale(1); }
    50% { transform: scale(1.3); }
    100% { transform: scale(1); }
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.like-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s;
}

.like-button:hover:not(:disabled)::before {
    left: 100%;
}

@media (max-width: 768px) {
    .like-button {
        padding: 0.6rem 1.2rem;
        font-size: 0.9rem;
    }
    
    .like-button i {
        font-size: 1rem;
    }
}
`;

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

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