/**
 * ==================================================================================
 *    Action Recognition Dataset - JavaScript
 * ==================================================================================
 *    Project: Action Recognition Dataset
 *    Category: Video Data / Data Science
 *    
 * ==================================================================================
 *    DEVELOPER INFORMATION
 * ==================================================================================
 *    Website: RSK World (https://rskworld.in)
 *    Founded by: Molla Samser
 *    Designer & Tester: Rima Khatun
 *    
 *    Contact Information:
 *    - Email: help@rskworld.in
 *    - Email: support@rskworld.in
 *    - Phone: +91 93305 39277
 *    
 * ==================================================================================
 *    COPYRIGHT
 * ==================================================================================
 *    © 2026 RSK World. All Rights Reserved.
 *    
 * ==================================================================================
 */

// Wait for DOM to be fully loaded
document.addEventListener('DOMContentLoaded', function() {
    initNavbar();
    initMobileMenu();
    initBackToTop();
    initCounterAnimation();
    initCodeTabs();
    initFolderToggle();
    initVideoPlayer();
    initSmoothScroll();
});

/**
 * Navbar scroll effect
 * Adds background blur and shadow when scrolled
 */
function initNavbar() {
    const navbar = document.getElementById('navbar');
    
    function handleScroll() {
        if (window.scrollY > 50) {
            navbar.classList.add('scrolled');
        } else {
            navbar.classList.remove('scrolled');
        }
    }
    
    window.addEventListener('scroll', handleScroll);
    handleScroll(); // Check initial state
}

/**
 * Mobile menu toggle
 */
function initMobileMenu() {
    const mobileMenuBtn = document.getElementById('mobileMenuBtn');
    const mobileMenu = document.getElementById('mobileMenu');
    
    if (!mobileMenuBtn || !mobileMenu) return;
    
    mobileMenuBtn.addEventListener('click', function() {
        mobileMenu.classList.toggle('active');
        this.classList.toggle('active');
    });
    
    // Close menu when clicking on a link
    const mobileLinks = mobileMenu.querySelectorAll('.mobile-link');
    mobileLinks.forEach(link => {
        link.addEventListener('click', function() {
            mobileMenu.classList.remove('active');
            mobileMenuBtn.classList.remove('active');
        });
    });
    
    // Close menu when clicking outside
    document.addEventListener('click', function(e) {
        if (!mobileMenu.contains(e.target) && !mobileMenuBtn.contains(e.target)) {
            mobileMenu.classList.remove('active');
            mobileMenuBtn.classList.remove('active');
        }
    });
}

/**
 * Back to top button
 */
function initBackToTop() {
    const backToTop = document.getElementById('backToTop');
    
    if (!backToTop) return;
    
    function handleScroll() {
        if (window.scrollY > 500) {
            backToTop.classList.add('visible');
        } else {
            backToTop.classList.remove('visible');
        }
    }
    
    window.addEventListener('scroll', handleScroll);
    
    backToTop.addEventListener('click', function() {
        window.scrollTo({
            top: 0,
            behavior: 'smooth'
        });
    });
}

/**
 * Counter animation for stats
 */
function initCounterAnimation() {
    const counters = document.querySelectorAll('.stat-number[data-count]');
    
    const observerOptions = {
        threshold: 0.5,
        rootMargin: '0px'
    };
    
    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                animateCounter(entry.target);
                observer.unobserve(entry.target);
            }
        });
    }, observerOptions);
    
    counters.forEach(counter => {
        observer.observe(counter);
    });
}

/**
 * Animate a single counter
 */
function animateCounter(element) {
    const target = parseInt(element.getAttribute('data-count'));
    const duration = 2000;
    const step = target / (duration / 16);
    let current = 0;
    
    const timer = setInterval(() => {
        current += step;
        if (current >= target) {
            element.textContent = target.toLocaleString();
            clearInterval(timer);
        } else {
            element.textContent = Math.floor(current).toLocaleString();
        }
    }, 16);
}

/**
 * Code tabs functionality
 */
function initCodeTabs() {
    const tabs = document.querySelectorAll('.code-tab');
    const panels = document.querySelectorAll('.code-panel');
    
    tabs.forEach(tab => {
        tab.addEventListener('click', function() {
            const targetTab = this.getAttribute('data-tab');
            
            // Remove active class from all tabs and panels
            tabs.forEach(t => t.classList.remove('active'));
            panels.forEach(p => p.classList.remove('active'));
            
            // Add active class to clicked tab and corresponding panel
            this.classList.add('active');
            document.getElementById(targetTab).classList.add('active');
        });
    });
}

/**
 * Folder toggle in file tree
 */
function initFolderToggle() {
    // Toggle folder function is called inline in HTML
    // This function handles the visual feedback
}

function toggleFolder(element) {
    const parent = element.closest('.tree-item');
    const subTree = parent.querySelector('.sub-tree');
    
    if (subTree) {
        subTree.classList.toggle('collapsed');
        const icon = element.querySelector('i');
        if (icon) {
            icon.classList.toggle('fa-folder');
            icon.classList.toggle('fa-folder-open');
        }
    }
}

/**
 * Real Video Player for hero section
 * Displays actual sample videos from the dataset
 */
function initVideoPlayer() {
    const heroVideo = document.getElementById('heroVideo');
    const actionLabel = document.getElementById('actionLabel');
    const confidenceValue = document.getElementById('confidenceValue');
    const videoTitle = document.getElementById('videoTitle');
    const prevBtn = document.getElementById('prevVideo');
    const nextBtn = document.getElementById('nextVideo');
    const currentIndexEl = document.getElementById('currentVideoIndex');
    const totalVideosEl = document.getElementById('totalVideos');
    const thumbnails = document.querySelectorAll('.thumbnail');
    const timelineProgress = document.getElementById('timelineProgress');
    
    if (!heroVideo) return;
    
    // Video list with labels and confidence scores
    const videos = [
        { src: 'sample_data/train/dancing/dancing_001.mp4', label: 'Dancing', confidence: 98.5, file: 'dancing_001.mp4' },
        { src: 'sample_data/train/running/running_001.mp4', label: 'Running', confidence: 96.2, file: 'running_001.mp4' },
        { src: 'sample_data/train/walking/walking_001.mp4', label: 'Walking', confidence: 97.8, file: 'walking_001.mp4' },
        { src: 'sample_data/train/jumping/jumping_001.mp4', label: 'Jumping', confidence: 94.8, file: 'jumping_001.mp4' },
        { src: 'sample_data/train/yoga/yoga_001.mp4', label: 'Yoga', confidence: 95.3, file: 'yoga_001.mp4' },
        { src: 'sample_data/train/stretching/stretching_001.mp4', label: 'Stretching', confidence: 93.7, file: 'stretching_001.mp4' },
        { src: 'sample_data/train/exercising/exercising_001.mp4', label: 'Exercising', confidence: 92.5, file: 'exercising_001.mp4' }
    ];
    
    let currentIndex = 0;
    
    // Update total videos count
    if (totalVideosEl) {
        totalVideosEl.textContent = videos.length;
    }
    
    function loadVideo(index) {
        const video = videos[index];
        
        // Update video source
        heroVideo.src = video.src;
        heroVideo.load();
        heroVideo.play().catch(e => console.log('Auto-play prevented'));
        
        // Update labels with animation
        if (actionLabel) {
            actionLabel.style.opacity = '0';
            setTimeout(() => {
                actionLabel.textContent = video.label;
                if (confidenceValue) {
                    confidenceValue.textContent = video.confidence + '%';
                }
                actionLabel.style.opacity = '1';
            }, 200);
        }
        
        // Update video title
        if (videoTitle) {
            videoTitle.textContent = video.file;
        }
        
        // Update index display
        if (currentIndexEl) {
            currentIndexEl.textContent = index + 1;
        }
        
        // Update thumbnail active state
        thumbnails.forEach((thumb, i) => {
            if (i === index) {
                thumb.classList.add('active');
            } else {
                thumb.classList.remove('active');
            }
        });
    }
    
    // Navigation buttons
    if (prevBtn) {
        prevBtn.addEventListener('click', () => {
            currentIndex = (currentIndex - 1 + videos.length) % videos.length;
            loadVideo(currentIndex);
        });
    }
    
    if (nextBtn) {
        nextBtn.addEventListener('click', () => {
            currentIndex = (currentIndex + 1) % videos.length;
            loadVideo(currentIndex);
        });
    }
    
    // Thumbnail click handlers
    thumbnails.forEach((thumb, index) => {
        thumb.addEventListener('click', () => {
            currentIndex = index;
            loadVideo(currentIndex);
        });
    });
    
    // Video timeline progress
    if (heroVideo && timelineProgress) {
        heroVideo.addEventListener('timeupdate', () => {
            const progress = (heroVideo.currentTime / heroVideo.duration) * 100;
            timelineProgress.style.width = progress + '%';
        });
        
        // Loop to next video when current ends
        heroVideo.addEventListener('ended', () => {
            currentIndex = (currentIndex + 1) % videos.length;
            loadVideo(currentIndex);
        });
    }
    
    // Auto-cycle videos every 8 seconds
    let autoPlayInterval = setInterval(() => {
        currentIndex = (currentIndex + 1) % videos.length;
        loadVideo(currentIndex);
    }, 8000);
    
    // Pause auto-cycle on hover
    const videoShowcase = document.querySelector('.video-showcase');
    if (videoShowcase) {
        videoShowcase.addEventListener('mouseenter', () => {
            clearInterval(autoPlayInterval);
        });
        
        videoShowcase.addEventListener('mouseleave', () => {
            autoPlayInterval = setInterval(() => {
                currentIndex = (currentIndex + 1) % videos.length;
                loadVideo(currentIndex);
            }, 8000);
        });
    }
    
    // Initial setup
    if (actionLabel) {
        actionLabel.style.transition = 'opacity 0.2s ease';
    }
}

/**
 * Smooth scroll for navigation links
 */
function initSmoothScroll() {
    const links = document.querySelectorAll('a[href^="#"]');
    
    links.forEach(link => {
        link.addEventListener('click', function(e) {
            const href = this.getAttribute('href');
            
            if (href === '#') return;
            
            e.preventDefault();
            
            const target = document.querySelector(href);
            if (target) {
                const offsetTop = target.offsetTop - 80;
                
                window.scrollTo({
                    top: offsetTop,
                    behavior: 'smooth'
                });
            }
        });
    });
}

/**
 * Add scroll reveal animations
 */
function initScrollReveal() {
    const elements = document.querySelectorAll('.feature-card, .overview-card');
    
    const observerOptions = {
        threshold: 0.1,
        rootMargin: '0px 0px -50px 0px'
    };
    
    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.style.opacity = '1';
                entry.target.style.transform = 'translateY(0)';
                observer.unobserve(entry.target);
            }
        });
    }, observerOptions);
    
    elements.forEach((el, index) => {
        el.style.opacity = '0';
        el.style.transform = 'translateY(30px)';
        el.style.transition = `opacity 0.6s ease ${index * 0.1}s, transform 0.6s ease ${index * 0.1}s`;
        observer.observe(el);
    });
}

/**
 * Utility: Debounce function
 */
function debounce(func, wait) {
    let timeout;
    return function executedFunction(...args) {
        const later = () => {
            clearTimeout(timeout);
            func(...args);
        };
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
    };
}

/**
 * Utility: Throttle function
 */
function throttle(func, limit) {
    let inThrottle;
    return function(...args) {
        if (!inThrottle) {
            func.apply(this, args);
            inThrottle = true;
            setTimeout(() => inThrottle = false, limit);
        }
    };
}

// Console greeting for developers
console.log('%c🎬 Action Recognition Dataset', 'font-size: 24px; font-weight: bold; color: #00d4ff;');
console.log('%cDeveloped by RSK World (rskworld.in)', 'font-size: 14px; color: #94a3b8;');
console.log('%cFounder: Molla Samser | Designer: Rima Khatun', 'font-size: 12px; color: #64748b;');
console.log('%cContact: help@rskworld.in | +91 93305 39277', 'font-size: 12px; color: #64748b;');