/**
 * Besat Digital Menu - Animations & Micro-interactions
 * besat.solariha.com
 */

const BesatAnimations = {
    observer: null,

    /**
     * Initialize all animations
     */
    init() {
        this.initScrollReveal();
        this.initStaggerItems();
        this.initRippleButtons();
        this.initHoverEffects();
        this.initParallax();
    },

    /**
     * Scroll Reveal with Intersection Observer
     */
    initScrollReveal() {
        const elements = document.querySelectorAll('.besat-scroll-reveal');
        if (!elements.length) return;

        this.observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.classList.add('besat-scroll-reveal--visible');
                    this.observer.unobserve(entry.target);

                    BesatUtils.emit('besat:scroll:revealed', {
                        element: entry.target
                    });
                }
            });
        }, {
            threshold: 0.1,
            rootMargin: '0px 0px -50px 0px'
        });

        elements.forEach(el => this.observer.observe(el));
    },

    /**
     * Stagger animation for lists
     */
    initStaggerItems() {
        const staggerContainers = document.querySelectorAll('.besat-stagger');

        const staggerObserver = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    const items = entry.target.querySelectorAll('.besat-stagger__item');
                    items.forEach((item, index) => {
                        setTimeout(() => {
                            item.classList.add('besat-stagger__item--visible');
                        }, index * 80);
                    });
                    staggerObserver.unobserve(entry.target);
                }
            });
        }, { threshold: 0.05 });

        staggerContainers.forEach(c => staggerObserver.observe(c));
    },

    /**
     * Ripple effect for buttons
     */
    initRippleButtons() {
        document.querySelectorAll('.besat-ripple').forEach(btn => {
            btn.addEventListener('click', BesatUtils.createRipple);
        });
    },

    /**
     * Hover micro-interactions
     */
    initHoverEffects() {
        // Scale on hover for specific elements
        document.querySelectorAll('[data-besat-hover-scale]').forEach(el => {
            el.addEventListener('mouseenter', () => {
                el.style.transform = 'scale(1.02)';
            });
            el.addEventListener('mouseleave', () => {
                el.style.transform = 'scale(1)';
            });
        });
    },

    /**
     * Subtle parallax on header
     */
    initParallax() {
        const header = document.querySelector('.besat-header');
        if (!header) return;

        window.addEventListener('scroll', BesatUtils.throttle(() => {
            const scrolled = window.pageYOffset;
            if (scrolled < 400) {
                header.style.transform = `translateY(${scrolled * 0.3}px)`;
                header.style.opacity = Math.max(0.6, 1 - scrolled / 600);
            }
        }, 16));
    },

    /**
     * Confetti burst animation
     */
    confetti() {
        const container = document.createElement('div');
        container.className = 'besat-confetti';
        document.body.appendChild(container);

        const colors = ['#FF6B00', '#FFD93D', '#28A745', '#17A2B8', '#DC3545'];

        for (let i = 0; i < 50; i++) {
            const piece = document.createElement('div');
            const size = Math.random() * 8 + 4;
            piece.style.cssText = `
                position: absolute;
                width: ${size}px;
                height: ${size}px;
                background: ${colors[Math.floor(Math.random() * colors.length)]};
                border-radius: ${Math.random() > 0.5 ? '50%' : '2px'};
                top: 50%;
                left: ${Math.random() * 100}%;
                animation: confettiFall ${Math.random() * 2 + 1.5}s ease-out forwards;
                animation-delay: ${Math.random() * 0.3}s;
                opacity: 0;
            `;
            container.appendChild(piece);
        }

        // Add keyframes if not exists
        if (!document.querySelector('#besat-confetti-styles')) {
            const style = document.createElement('style');
            style.id = 'besat-confetti-styles';
            style.textContent = `
                @keyframes confettiFall {
                    0% { opacity: 1; transform: translateY(0) rotate(0deg) scale(1); }
                    100% { opacity: 0; transform: translateY(100vh) rotate(720deg) scale(0.3); }
                }
            `;
            document.head.appendChild(style);
        }

        setTimeout(() => container.remove(), 4000);
    },

    /**
     * Number count up animation
     */
    countUp(element, target, duration = 1000) {
        const start = 0;
        const increment = target / (duration / 16);
        let current = start;

        const timer = setInterval(() => {
            current += increment;
            if (current >= target) {
                current = target;
                clearInterval(timer);
            }
            element.textContent = BesatUtils.formatPrice(Math.floor(current));
        }, 16);
    },

    /**
     * Add item animation (fly to cart)
     */
    flyToCart(sourceEl) {
        const fab = document.querySelector('.besat-fab__btn');
        if (!fab || !sourceEl) return;

        const sourceRect = sourceEl.getBoundingClientRect();
        const fabRect = fab.getBoundingClientRect();

        const flyer = document.createElement('div');
        flyer.style.cssText = `
            position: fixed;
            top: ${sourceRect.top}px;
            left: ${sourceRect.left}px;
            width: 30px;
            height: 30px;
            background: var(--besat-primary);
            border-radius: 50%;
            z-index: 10000;
            transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            pointer-events: none;
            box-shadow: 0 4px 15px rgba(255,107,0,0.4);
        `;
        document.body.appendChild(flyer);

        requestAnimationFrame(() => {
            flyer.style.top = `${fabRect.top + fabRect.height / 2 - 15}px`;
            flyer.style.left = `${fabRect.left + fabRect.width / 2 - 15}px`;
            flyer.style.transform = 'scale(0.3)';
            flyer.style.opacity = '0.5';
        });

        setTimeout(() => {
            flyer.remove();
            BesatUtils.animate(fab, 'besat-animate-pop', 300);
        }, 600);
    }
};