/**
 * Main JavaScript File - DevStore Premium
 * Handles UI interactions, mobile navigation, and flash message behaviors.
 */

'use strict';

document.addEventListener('DOMContentLoaded', function() {
    
    // ==========================================================================
    // 1. STICKY HEADER SCROLL EFFECT
    // ==========================================================================
    const mainHeader = document.getElementById('mainHeader');
    
    if (mainHeader) {
        window.addEventListener('scroll', () => {
            if (window.scrollY > 20) {
                // Add a slightly darker background and stronger shadow when scrolled
                mainHeader.style.background = 'rgba(11, 15, 20, 0.95)';
                mainHeader.style.boxShadow = '0 4px 30px rgba(0, 0, 0, 0.5)';
            } else {
                // Revert to default transparent glass effect at the top
                mainHeader.style.background = 'rgba(11, 15, 20, 0.8)';
                mainHeader.style.boxShadow = 'none';
            }
        });
    }

    // ==========================================================================
    // 2. MOBILE MENU TOGGLE
    // ==========================================================================
    const mobileMenuBtn = document.getElementById('mobileMenuBtn');
    const mobileNav = document.getElementById('mobileNav');
    
    if (mobileMenuBtn && mobileNav) {
        mobileMenuBtn.addEventListener('click', function(e) {
            e.preventDefault();
            const isActive = mobileNav.classList.contains('active');
            
            if (isActive) {
                // Close menu
                mobileNav.classList.remove('active');
                // Reset hamburger icon bars
                const bars = this.querySelectorAll('.bar');
                bars[0].style.transform = 'none';
                bars[1].style.opacity = '1';
                bars[2].style.transform = 'none';
                document.body.style.overflow = ''; // Restore scrolling
            } else {
                // Open menu
                mobileNav.classList.add('active');
                // Animate hamburger to X
                const bars = this.querySelectorAll('.bar');
                bars[0].style.transform = 'translateY(7px) rotate(45deg)';
                bars[1].style.opacity = '0';
                bars[2].style.transform = 'translateY(-7px) rotate(-45deg)';
                document.body.style.overflow = 'hidden'; // Prevent background scrolling
            }
        });

        // Close mobile menu when clicking a link inside it
        const mobileLinks = mobileNav.querySelectorAll('.mobile-link, .mobile-btn');
        mobileLinks.forEach(link => {
            link.addEventListener('click', () => {
                mobileMenuBtn.click(); // Trigger the close action
            });
        });
    }

    // ==========================================================================
    // 3. FLASH MESSAGE AUTO-DISMISS
    // ==========================================================================
    const flashMessages = document.querySelectorAll('.flash-message');
    
    if (flashMessages.length > 0) {
        flashMessages.forEach(message => {
            // Auto hide after 5 seconds
            setTimeout(() => {
                message.style.opacity = '0';
                message.style.transform = 'translateX(100%)';
                message.style.transition = 'all 0.4s cubic-bezier(0.4, 0, 0.2, 1)';
                
                // Remove from DOM after animation completes
                setTimeout(() => {
                    if (message.parentNode) {
                        message.parentNode.removeChild(message);
                    }
                }, 400);
            }, 5000);
        });
    }

    // ==========================================================================
    // 4. ACTION CONFIRMATION DIALOGS
    // ==========================================================================
    // Usage: Add data-confirm="Are you sure?" to any link or button
    const confirmElements = document.querySelectorAll('[data-confirm]');
    
    if (confirmElements.length > 0) {
        confirmElements.forEach(element => {
            element.addEventListener('click', function(e) {
                const message = this.getAttribute('data-confirm');
                if (!confirm(message)) {
                    e.preventDefault();
                }
            });
        });
    }

    // ==========================================================================
    // 5. CUSTOM FILE INPUT UI (For later Admin/User pages)
    // ==========================================================================
    // Updates a label or text span with the name of the selected file
    const fileInputs = document.querySelectorAll('input[type="file"].custom-file-input');
    
    if (fileInputs.length > 0) {
        fileInputs.forEach(input => {
            input.addEventListener('change', function(e) {
                const fileName = e.target.files[0] ? e.target.files[0].name : 'No file chosen';
                const label = this.nextElementSibling; // Assuming label directly follows input
                
                if (label && label.classList.contains('custom-file-label')) {
                    label.textContent = fileName;
                }
            });
        });
    }
});