// Car Comparison System JavaScript

class CarComparison {
    constructor() {
        this.init();
    }

    init() {
        this.bindEvents();
        this.updateCompareCounter();
    }

    bindEvents() {
        // Handle compare button clicks
        document.addEventListener('click', (e) => {
            if (e.target.closest('.btn-compare-add')) {
                e.preventDefault();
                const carId = e.target.closest('.btn-compare-add').dataset.carId;
                this.addToCompare(carId);
            }

            if (e.target.closest('.btn-compare-remove')) {
                e.preventDefault();
                const carId = e.target.closest('.btn-compare-remove').dataset.carId;
                this.removeFromCompare(carId);
            }

            if (e.target.closest('.btn-compare-clear')) {
                e.preventDefault();
                this.clearCompare();
            }
        });
    }

    async addToCompare(carId) {
        try {
            const response = await fetch('ajax/compare_handler.php', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                },
                body: `action=add&car_id=${carId}`
            });

            const result = await response.json();
            
            if (result.success) {
                this.showNotification(result.message, 'success');
                this.updateCompareCounter(result.count);
                this.updateCompareButtons(carId, 'added');
            } else {
                this.showNotification(result.message, 'error');
            }
        } catch (error) {
            console.error('Error adding to compare:', error);
            this.showNotification('حدث خطأ أثناء إضافة السيارة للمقارنة', 'error');
        }
    }

    async removeFromCompare(carId) {
        try {
            const response = await fetch('ajax/compare_handler.php', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                },
                body: `action=remove&car_id=${carId}`
            });

            const result = await response.json();
            
            if (result.success) {
                this.showNotification(result.message, 'success');
                this.updateCompareCounter(result.count);
                this.updateCompareButtons(carId, 'removed');
            } else {
                this.showNotification(result.message, 'error');
            }
        } catch (error) {
            console.error('Error removing from compare:', error);
            this.showNotification('حدث خطأ أثناء إزالة السيارة من المقارنة', 'error');
        }
    }

    async clearCompare() {
        if (!confirm('هل أنت متأكد من مسح جميع السيارات من المقارنة؟')) {
            return;
        }

        try {
            const response = await fetch('ajax/compare_handler.php', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                },
                body: 'action=clear'
            });

            const result = await response.json();
            
            if (result.success) {
                this.showNotification(result.message, 'success');
                this.updateCompareCounter(0);
                // Reload page to update all buttons
                setTimeout(() => {
                    window.location.reload();
                }, 1000);
            } else {
                this.showNotification(result.message, 'error');
            }
        } catch (error) {
            console.error('Error clearing compare:', error);
            this.showNotification('حدث خطأ أثناء مسح المقارنة', 'error');
        }
    }

    updateCompareCounter(count = null) {
        if (count === null) {
            // Get current count from server
            fetch('ajax/compare_handler.php', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                },
                body: 'action=get_count'
            })
            .then(response => response.json())
            .then(result => {
                if (result.success) {
                    this.updateCounterDisplay(result.count);
                }
            })
            .catch(error => console.error('Error getting count:', error));
        } else {
            this.updateCounterDisplay(count);
        }
    }

    updateCounterDisplay(count) {
        const counter = document.querySelector('.compare-counter');
        const badge = document.querySelector('.navbar .badge');
        
        if (counter) {
            counter.textContent = count;
            counter.style.display = count > 0 ? 'inline' : 'none';
        }
        
        if (badge) {
            badge.textContent = count;
            badge.style.display = count > 0 ? 'inline' : 'none';
        }

        // Update compare link visibility
        const compareLinks = document.querySelectorAll('.compare-link');
        compareLinks.forEach(link => {
            link.style.display = count > 0 ? 'inline-block' : 'none';
        });
    }

    updateCompareButtons(carId, action) {
        const addBtn = document.querySelector(`[data-car-id="${carId}"].btn-compare-add`);
        const removeBtn = document.querySelector(`[data-car-id="${carId}"].btn-compare-remove`);

        if (action === 'added') {
            if (addBtn) addBtn.style.display = 'none';
            if (removeBtn) removeBtn.style.display = 'inline-block';
        } else if (action === 'removed') {
            if (addBtn) addBtn.style.display = 'inline-block';
            if (removeBtn) removeBtn.style.display = 'none';
        }
    }

    showNotification(message, type = 'info') {
        // Create notification element
        const notification = document.createElement('div');
        notification.className = `alert alert-${type === 'success' ? 'success' : type === 'error' ? 'danger' : 'info'} alert-dismissible fade show position-fixed`;
        notification.style.cssText = 'top: 100px; right: 20px; z-index: 9999; min-width: 300px;';
        notification.innerHTML = `
            ${message}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        `;

        document.body.appendChild(notification);

        // Auto remove after 3 seconds
        setTimeout(() => {
            if (notification.parentNode) {
                notification.remove();
            }
        }, 3000);
    }
}

// Initialize when DOM is loaded
document.addEventListener('DOMContentLoaded', () => {
    new CarComparison();
});

// Export for use in other scripts
window.CarComparison = CarComparison;