// JavaScript functions for the main page

// Modal functions
function openBookingModal(serviceId, serviceName, price, duration) {
    document.getElementById('serviceName').textContent = serviceName;
    document.getElementById('serviceDetails').textContent = `السعر: EGP ${price} | المدة: ${duration} دقيقة`;
    document.getElementById('bookingServiceId').value = serviceId;
    document.getElementById('bookingModal').style.display = 'flex';
}

function closeModal(modalId) {
    document.getElementById(modalId).style.display = 'none';
}

// Close modal when clicking outside
window.onclick = function(event) {
    if (event.target.classList.contains('modal')) {
        event.target.style.display = 'none';
    }
}

// Navbar scroll effect
window.addEventListener('scroll', function() {
    const navbar = document.querySelector('.navbar');
    if (navbar) {
        if (window.scrollY > 50) {
            navbar.classList.add('scrolled');
        } else {
            navbar.classList.remove('scrolled');
        }
    }
});

// Smooth scrolling for anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function (e) {
        e.preventDefault();
        const target = document.querySelector(this.getAttribute('href'));
        if (target) {
            target.scrollIntoView({
                behavior: 'smooth',
                block: 'start'
            });
        }
    });
});

// Draggable cart button
const cartBtn = document.getElementById('floating-cart');
if (cartBtn) {
    let isDragging = false;
    let dragStartX, dragStartY, initialX, initialY;

    cartBtn.addEventListener('mousedown', startDrag);
    cartBtn.addEventListener('touchstart', startDrag, { passive: false });

    function startDrag(e) {
        isDragging = true;
        if (e.type === 'touchstart') {
            dragStartX = e.touches[0].clientX;
            dragStartY = e.touches[0].clientY;
        } else {
            dragStartX = e.clientX;
            dragStartY = e.clientY;
            e.preventDefault();
        }
        const rect = cartBtn.getBoundingClientRect();
        initialX = rect.left;
        initialY = rect.top;

        document.addEventListener('mousemove', drag);
        document.addEventListener('touchmove', drag, { passive: false });
        document.addEventListener('mouseup', stopDrag);
        document.addEventListener('touchend', stopDrag);
    }

    function drag(e) {
        if (!isDragging) return;
        e.preventDefault();
        let currentX, currentY;
        if (e.type === 'touchmove') {
            currentX = e.touches[0].clientX;
            currentY = e.touches[0].clientY;
        } else {
            currentX = e.clientX;
            currentY = e.clientY;
        }

        const newX = initialX + (currentX - dragStartX);
        const newY = initialY + (currentY - dragStartY);

        // Keep within viewport bounds
        const maxX = window.innerWidth - cartBtn.offsetWidth;
        const maxY = window.innerHeight - cartBtn.offsetHeight;

        cartBtn.style.left = Math.max(0, Math.min(newX, maxX)) + 'px';
        cartBtn.style.top = Math.max(0, Math.min(newY, maxY)) + 'px';
        cartBtn.style.right = 'auto';
        cartBtn.style.bottom = 'auto';
        cartBtn.style.transform = 'none';
    }

    function stopDrag() {
        isDragging = false;
        document.removeEventListener('mousemove', drag);
        document.removeEventListener('touchmove', drag);
        document.removeEventListener('mouseup', stopDrag);
        document.removeEventListener('touchend', stopDrag);
    }
}

// AJAX add to cart
async function addToCart(productId, button) {
    try {
        console.log('Adding product to cart:', productId);
        const formData = new FormData();
        formData.append('product_id', productId);
        formData.append('add_to_cart', '1');

        const response = await fetch('', {
            method: 'POST',
            body: formData,
            headers: {
                'X-Requested-With': 'XMLHttpRequest'
            }
        });

        const data = await response.json();
        console.log('Cart response:', data);

        if (data.success) {
            // Update cart count using server response
            const cartCountElements = document.querySelectorAll('.cart-count');
            cartCountElements.forEach(el => {
                el.textContent = data.cart_count;
                el.style.display = data.cart_count > 0 ? 'flex' : 'none';
            });

            // Show success message
            showNotification(data.message, 'success');

            // Animate button
            if (button) {
                button.style.transform = 'scale(1.2)';
                setTimeout(() => {
                    button.style.transform = 'scale(1)';
                }, 200);
            }
        } else {
            showNotification(data.message, 'error');
        }
    } catch (error) {
        console.error('Cart error:', error);
        showNotification('حدث خطأ في الاتصال', 'error');
    }
}

function showNotification(message, type) {
    // Remove existing notification
    const existing = document.querySelector('.notification');
    if (existing) existing.remove();

    // Create notification
    const notification = document.createElement('div');
    notification.className = `notification fixed top-4 right-4 z-50 p-4 rounded-lg shadow-lg ${type === 'success' ? 'bg-green-500' : 'bg-red-500'} text-white`;
    notification.textContent = message;

    document.body.appendChild(notification);

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

// User menu functionality
document.addEventListener('DOMContentLoaded', function() {
    const profileTrigger = document.getElementById('profileTrigger');
    const userMenu = document.getElementById('userMenu');

    if (profileTrigger && userMenu) {
        // Toggle menu on click
        profileTrigger.addEventListener('click', function(event) {
            event.stopPropagation();
            userMenu.classList.toggle('hidden');
        });

        // Close menu when clicking outside
        document.addEventListener('click', function(event) {
            if (!profileTrigger.contains(event.target) && !userMenu.contains(event.target)) {
                userMenu.classList.add('hidden');
            }
        });
    }

    // Add to cart button functionality
    const addToCartButtons = document.querySelectorAll('.add-to-cart-btn');
    console.log('Found', addToCartButtons.length, 'add to cart buttons');

    addToCartButtons.forEach(button => {
        button.addEventListener('click', function(e) {
            e.preventDefault();
            const productId = this.getAttribute('data-product-id');
            console.log('Add to cart clicked for product:', productId);
            if (productId) {
                addToCart(productId, this);
            }
        });
    });

    // Wishlist functionality
    const wishlistButtons = document.querySelectorAll('form button[name="toggle_wishlist"]');
    console.log('Found', wishlistButtons.length, 'wishlist buttons');

    wishlistButtons.forEach(button => {
        button.addEventListener('click', function(e) {
            e.preventDefault();
            const form = this.closest('form');
            const formData = new FormData(form);

            console.log('Wishlist toggle clicked');

            fetch('', {
                method: 'POST',
                body: formData
            })
            .then(response => response.text())
            .then(data => {
                console.log('Wishlist response:', data);
                location.reload(); // Reload to show updated wishlist status
            })
            .catch(error => {
                console.error('Wishlist error:', error);
                showNotification('حدث خطأ في إضافة المنتج للأماني', 'error');
            });
        });
    });

    // Simple Features Carousel
    function initSimpleCarousel() {
        console.log('🚀 بدء تهيئة الكروسل...');

        const track = document.getElementById('featuresTrack');
        const prevBtn = document.getElementById('prevBtn');
        const nextBtn = document.getElementById('nextBtn');
        const dots = document.querySelectorAll('.dot');

        if (!track) {
            console.error('❌ لم يتم العثور على track العنصر');
            return;
        }

        const slides = track.children;
        console.log('📊 عدد الشرائح:', slides.length);

        if (slides.length === 0) {
            console.error('❌ لا توجد شرائح في الكروسل');
            return;
        }

        let currentIndex = 0;
        let autoPlayInterval;

        function updateCarousel() {
            try {
                const slideWidth = slides[0].offsetWidth;
                console.log('📍 الانتقال للشريحة:', currentIndex, 'عرض الشريحة:', slideWidth);

                // تأكد من أن العرض صحيح
                if (slideWidth === 0) {
                    console.warn('⚠️ عرض الشريحة صفر، قد تكون مخفية');
                    return;
                }

                track.style.transform = `translateX(-${currentIndex * slideWidth}px)`;
                console.log('✅ تم تطبيق التحويل:', `translateX(-${currentIndex * slideWidth}px)`);

                // تحديث النقاط
                dots.forEach((dot, index) => {
                    if (index === currentIndex) {
                        dot.classList.add('active', 'bg-purple-600');
                        dot.classList.remove('bg-gray-300');
                    } else {
                        dot.classList.remove('active', 'bg-purple-600');
                        dot.classList.add('bg-gray-300');
                    }
                });

            } catch (error) {
                console.error('❌ خطأ في تحديث الكروسل:', error);
            }
        }

        function nextSlide() {
            currentIndex = (currentIndex + 1) % slides.length;
            console.log('➡️ الانتقال للشريحة التالية:', currentIndex);
            updateCarousel();
        }

        function prevSlide() {
            currentIndex = currentIndex === 0 ? slides.length - 1 : currentIndex - 1;
            console.log('⬅️ الانتقال للشريحة السابقة:', currentIndex);
            updateCarousel();
        }

        function goToSlide(index) {
            currentIndex = index;
            console.log('🎯 الانتقال للشريحة:', index);
            updateCarousel();
        }

        // إضافة مستمعي الأحداث - الأزرار محذوفة، التمرير التلقائي فقط

        dots.forEach((dot, index) => {
            dot.addEventListener('click', (e) => {
                e.preventDefault();
                console.log('🖱️ تم النقر على النقطة:', index);
                goToSlide(index);
            });
        });

        // التشغيل التلقائي
        function startAutoPlay() {
            console.log('▶️ بدء التشغيل التلقائي');
            autoPlayInterval = setInterval(() => {
                console.log('⏰ تشغيل تلقائي - الشريحة التالية');
                nextSlide();
            }, 3000);
        }

        function stopAutoPlay() {
            console.log('⏸️ إيقاف التشغيل التلقائي');
            if (autoPlayInterval) {
                clearInterval(autoPlayInterval);
            }
        }

        // إيقاف عند التحويم
        const carouselContainer = track.closest('.features-carousel');
        if (carouselContainer) {
            carouselContainer.addEventListener('mouseenter', stopAutoPlay);
            carouselContainer.addEventListener('mouseleave', startAutoPlay);
        }

        // إعادة حساب العرض عند تغيير حجم النافذة
        window.addEventListener('resize', () => {
            // تأخير إعادة الحساب قليلاً لضمان اكتمال تغيير الحجم
            setTimeout(() => {
                updateCarousel();
            }, 100);
        });

        // بدء التشغيل التلقائي
        startAutoPlay();

        // تحديث عند تغيير حجم النافذة
        window.addEventListener('resize', () => {
            console.log('📏 تم تغيير حجم النافذة');
            updateCarousel();
        });

        // التحديث الأولي بعد فترة قصيرة
        setTimeout(() => {
            console.log('🎬 التحديث الأولي للكروسل');
            updateCarousel();
        }, 500);

        console.log('✅ تم تهيئة الكروسل بنجاح');
    }

    // تهيئة الكروسل عند تحميل الصفحة
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', initSimpleCarousel);
    } else {
        initSimpleCarousel();
    }
});