script.js

// Main JavaScript for ArbibStack Academy

// Initialize the application
document.addEventListener('DOMContentLoaded', function() {
    initializeApp();
    setupEventListeners();
    loadUserProgress();
});

// Application initialization
function initializeApp() {
    console.log('🚀 ArbibStack Academy Initialized');
    
    // Check if user is logged in
    const token = localStorage.getItem('arbibstack_token');
    if (token) {
        updateUIForLoggedInUser();
    }
    
    // Initialize tooltips if any
    initializeTooltips();
}

// Setup event listeners
function setupEventListeners() {
    // Mobile menu toggle
    const mobileMenuBtn = document.getElementById('mobile-menu-btn');
    const mobileMenu = document.getElementById('mobile-menu');
    
    if (mobileMenuBtn && mobileMenu) {
        mobileMenuBtn.addEventListener('click', function() {
            mobileMenu.classList.toggle('hidden');
        });
    }
    
    // Search functionality
    const searchInput = document.getElementById('search-input');
    if (searchInput) {
        searchInput.addEventListener('input', debounce(handleSearch, 300));
    }
    
    // Course enrollment
    const enrollButtons = document.querySelectorAll('.enroll-btn');
    enrollButtons.forEach(button => {
        button.addEventListener('click', handleEnrollment);
    });
}

// Handle course enrollment
function handleEnrollment(event) {
    const courseId = event.target.dataset.courseId;
    const token = localStorage.getItem('arbibstack_token');
    
    if (!token) {
        window.location.href = '/login.html';
        return;
    }
    
    // Show loading state
    event.target.innerHTML = '<span class="loading-dots">Enrollment</span>';
    event.target.disabled = true;
    
    // Simulate API call
    setTimeout(() => {
        enrollInCourse(courseId, token);
    }, 1500);
}

// Simulate course enrollment API call
function enrollInCourse(courseId, token) {
    // In a real app, this would be an API call
    console.log(`Enrolling in course: ${courseId}`);
    
    // Update UI
    const button = document.querySelector(`[data-course-id="${courseId}"]`);
    button.innerHTML = 'Enrolled ✓';
    button.classList.remove('bg-primary', 'hover:bg-red-700');
    button.classList.add('bg-green-600');
    
    // Show success message
    showNotification('Successfully enrolled in course!', 'success');
}

// Search functionality
function handleSearch(event) {
    const query = event.target.value.toLowerCase();
    
    if (query.length < 2) {
        clearSearchResults();
        return;
    }
    
    // Simulate search API call
    const results = simulateSearch(query);
    displaySearchResults(results);
}

// Simulate search results
function simulateSearch(query) {
    const courses = [
        { id: 1, title: 'MongoDB Basics', type: 'course' },
        { id: 2, title: 'Express.js REST API', type: 'course' },
        { id: 3, title: 'React Hooks Guide', type: 'course' },
        { id: 4, title: 'Node.js Fundamentals', type: 'course' },
        { id: 5, title: 'MERN Stack Project', type: 'project' }
    ];
    
    return courses.filter(course => 
        course.title.toLowerCase().includes(query)
    );
}

// Display search results
function displaySearchResults(results) {
    const searchResults = document.getElementById('search-results');
    if (!searchResults) return;
    
    searchResults.innerHTML = '';
    
    if (results.length === 0) {
        searchResults.innerHTML = '<div class="p-4 text-gray-500">No results found</div>';
        searchResults.classList.remove('hidden');
        return;
    }
    
    results.forEach(result => {
        const resultElement = document.createElement('a');
        resultElement.href = `/${result.type === 'course' ? 'course' : 'project'}.html?id=${result.id}`;
        resultElement.className = 'block p-4 hover:bg-gray-100 border-b border-gray-200';
        resultElement.innerHTML = `
            <div class="flex items-center">
                <i data-feather="${result.type === 'course' ? 'book' : 'folder'}" class="mr-3"></i>
                <span>${result.title}</span>
            </div>
        `;
        searchResults.appendChild(resultElement);
    });
    
    searchResults.classList.remove('hidden');
}

// Clear search results
function clearSearchResults() {
    const searchResults = document.getElementById('search-results');
    if (searchResults) {
        searchResults.classList.add('hidden');
    }
}

// Load user progress from localStorage
function loadUserProgress() {
    const progress = localStorage.getItem('arbibstack_progress');
    if (progress) {
        updateProgressBars(JSON.parse(progress));
    }
}

// Update progress bars
function updateProgressBars(progress) {
    Object.keys(progress).forEach(course => {
        const progressBar = document.getElementById(`progress-${course}`);
        if (progressBar) {
            progressBar.style.width = `${progress[course]}%`;
            progressBar.textContent = `${progress[course]}%`;
        }
    });
}

// Show notification
function showNotification(message, type = 'info') {
    const notification = document.createElement('div');
    notification.className = `fixed top-4 right-4 p-4 rounded-lg shadow-lg z-50 ${
        type === 'success' ? 'bg-green-500 text-white' :
        type === 'error' ? 'bg-red-500 text-white' :
        'bg-blue-500 text-white'
    }`;
    notification.innerHTML = `
        <div class="flex items-center">
            <i data-feather="${
                type === 'success' ? 'check-circle' :
                type === 'error' ? 'alert-circle' :
                'info'
            }" class="mr-2"></i>
            <span>${message}</span>
        </div>
    `;
    
    document.body.appendChild(notification);
    
    // Animate in
    setTimeout(() => {
        notification.style.transform = 'translateX(100%)';
        notification.style.opacity = '0';
        setTimeout(() => {
            document.body.removeChild(notification);
        }, 300);
    }, 3000);
    
    feather.replace();
}

// Update UI for logged in user
function updateUIForLoggedInUser() {
    const userMenu = document.getElementById('user-menu');
    const authButtons = document.getElementById('auth-buttons');
    
    if (userMenu && authButtons) {
        userMenu.classList.remove('hidden');
        authButtons.classList.add('hidden');
    }
}

// Initialize tooltips
function initializeTooltips() {
    // Tooltip initialization would go here
    // Using a library like Tippy.js in a real implementation
}

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

// Export functions for use in other modules
window.ArbibStack = {
    initializeApp,
    handleEnrollment,
    showNotification,
    updateProgressBars
};