import './bootstrap';

// ===== SCROLL ANIMATION (IntersectionObserver) =====
document.addEventListener('DOMContentLoaded', () => {
    const animatedElements = document.querySelectorAll('.fade-up, .fade-left, .fade-right, .scale-in');

    if (animatedElements.length > 0) {
        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.classList.add('visible');
                    observer.unobserve(entry.target);
                }
            });
        }, { threshold: 0.15, rootMargin: '0px 0px -50px 0px' });

        animatedElements.forEach(el => observer.observe(el));
    }

    // ===== NAVBAR SCROLL EFFECT =====
    const navbar = document.getElementById('main-navbar');
    if (navbar) {
        const handleScroll = () => {
            if (window.scrollY > 80) {
                navbar.classList.remove('navbar-transparent');
                navbar.classList.add('navbar-solid');
                navbar.querySelectorAll('.nav-link-scroll').forEach(link => {
                    link.classList.remove('text-white/80', 'hover:text-white');
                    link.classList.add('text-slate-600', 'hover:text-emerald-600');
                });
                const brand = navbar.querySelector('.nav-brand');
                if (brand) {
                    brand.classList.remove('text-white');
                    brand.classList.add('text-slate-800');
                }
                const loginBtn = navbar.querySelector('.nav-login');
                if (loginBtn) {
                    loginBtn.classList.remove('bg-white/10', 'border-white/20', 'text-white');
                    loginBtn.classList.add('bg-slate-900', 'text-white');
                }
            } else {
                navbar.classList.add('navbar-transparent');
                navbar.classList.remove('navbar-solid');
                navbar.querySelectorAll('.nav-link-scroll').forEach(link => {
                    link.classList.add('text-white/80', 'hover:text-white');
                    link.classList.remove('text-slate-600', 'hover:text-emerald-600');
                });
                const brand = navbar.querySelector('.nav-brand');
                if (brand) {
                    brand.classList.add('text-white');
                    brand.classList.remove('text-slate-800');
                }
                const loginBtn = navbar.querySelector('.nav-login');
                if (loginBtn) {
                    loginBtn.classList.add('bg-white/10', 'border-white/20', 'text-white');
                    loginBtn.classList.remove('bg-slate-900', 'text-white');
                }
            }
        };
        handleScroll();
        window.addEventListener('scroll', handleScroll, { passive: true });
    }

    // ===== MOBILE MENU TOGGLE =====
    const mobileBtn = document.getElementById('mobile-menu-btn');
    const mobileMenu = document.getElementById('mobile-menu');
    if (mobileBtn && mobileMenu) {
        mobileBtn.addEventListener('click', () => {
            mobileMenu.classList.toggle('hidden');
        });
        // Close on link click
        mobileMenu.querySelectorAll('a').forEach(link => {
            link.addEventListener('click', () => {
                mobileMenu.classList.add('hidden');
            });
        });
    }

    // ===== COUNTER ANIMATION =====
    const counters = document.querySelectorAll('[data-counter]');
    if (counters.length > 0) {
        const counterObserver = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    const el = entry.target;
                    const target = parseInt(el.getAttribute('data-counter'));
                    const suffix = el.getAttribute('data-suffix') || '';
                    const prefix = el.getAttribute('data-prefix') || '';
                    const duration = 2000;
                    const startTime = performance.now();

                    const animate = (currentTime) => {
                        const elapsed = currentTime - startTime;
                        const progress = Math.min(elapsed / duration, 1);
                        // ease-out cubic
                        const eased = 1 - Math.pow(1 - progress, 3);
                        const current = Math.floor(eased * target);
                        el.textContent = prefix + current.toLocaleString('id-ID') + suffix;

                        if (progress < 1) {
                            requestAnimationFrame(animate);
                        }
                    };
                    requestAnimationFrame(animate);
                    counterObserver.unobserve(el);
                }
            });
        }, { threshold: 0.5 });

        counters.forEach(el => counterObserver.observe(el));
    }

    // ===== TOAST AUTO-DISMISS =====
    const toasts = document.querySelectorAll('.toast-notification');
    toasts.forEach(toast => {
        setTimeout(() => {
            toast.classList.remove('toast-enter');
            toast.classList.add('toast-exit');
            setTimeout(() => toast.remove(), 300);
        }, 4000);
    });

    // ===== SCROLL TO TOP BUTTON =====
    const scrollTopBtn = document.getElementById('scroll-top-btn');
    if (scrollTopBtn) {
        window.addEventListener('scroll', () => {
            if (window.scrollY > 500) {
                scrollTopBtn.classList.remove('opacity-0', 'pointer-events-none', 'translate-y-4');
                scrollTopBtn.classList.add('opacity-100', 'translate-y-0');
            } else {
                scrollTopBtn.classList.add('opacity-0', 'pointer-events-none', 'translate-y-4');
                scrollTopBtn.classList.remove('opacity-100', 'translate-y-0');
            }
        }, { passive: true });

        scrollTopBtn.addEventListener('click', () => {
            window.scrollTo({ top: 0, behavior: 'smooth' });
        });
    }

    // ===== ADMIN SIDEBAR TOGGLE (MOBILE) =====
    const sidebarToggle = document.getElementById('sidebar-toggle');
    const sidebar = document.getElementById('admin-sidebar');
    const sidebarOverlay = document.getElementById('sidebar-overlay');

    if (sidebarToggle && sidebar) {
        sidebarToggle.addEventListener('click', () => {
            sidebar.classList.toggle('open');
            if (sidebarOverlay) sidebarOverlay.classList.toggle('active');
        });
        if (sidebarOverlay) {
            sidebarOverlay.addEventListener('click', () => {
                sidebar.classList.remove('open');
                sidebarOverlay.classList.remove('active');
            });
        }
    }

    // ===== IMAGE PREVIEW ON FILE INPUT =====
    const fileInputs = document.querySelectorAll('input[type="file"][data-preview]');
    fileInputs.forEach(input => {
        input.addEventListener('change', (e) => {
            const previewId = input.getAttribute('data-preview');
            const preview = document.getElementById(previewId);
            if (preview && e.target.files[0]) {
                const reader = new FileReader();
                reader.onload = (ev) => {
                    preview.src = ev.target.result;
                    preview.classList.remove('hidden');
                };
                reader.readAsDataURL(e.target.files[0]);
            }
        });
    });

});
