script.js

// Theme management
function initTheme() {
    const savedTheme = localStorage.getItem('theme') || 'light';
    document.documentElement.setAttribute('data-theme', savedTheme);
    updateThemeToggle(savedTheme);
}

function toggleTheme() {
    const currentTheme = document.documentElement.getAttribute('data-theme');
    const newTheme = currentTheme === 'light' ? 'dark' : 'light';
    
    document.documentElement.setAttribute('data-theme', newTheme);
    localStorage.setItem('theme', newTheme);
    updateThemeToggle(newTheme);
}

function updateThemeToggle(theme) {
    const toggle = document.querySelector('.theme-toggle');
    if (toggle) {
        toggle.innerHTML = theme === 'light' ? 
            '<i class="fas fa-moon"></i>' : 
            '<i class="fas fa-sun"></i>';
}

// Navigation and routing
function initNavigation() {
    // Show page based on hash
    function showPage() {
        const hash = window.location.hash.substring(1) || 'dashboard';
        const pages = document.querySelectorAll('.page');
        
        pages.forEach(page => {
            page.classList.remove('active');
            if (page.id === hash + '-page') {
                page.classList.add('active');
            }
        });
        
        // Update active nav item
        const navItems = document.querySelectorAll('.nav-item');
        navItems.forEach(item => {
            item.classList.remove('active');
            if (item.getAttribute('href') === `#${hash}`) {
                item.classList.add('active');
            }
        });
        
        // Update header title
        updateHeaderTitle(hash);
    }
    
    // Update header title based on current page
    function updateHeaderTitle(page) {
        const headerTitle = document.querySelector('.header-left h1');
        if (headerTitle) {
            const titles = {
                'dashboard': 'Dashboard Overview',
                'users': 'User Management',
                'settings': 'System Settings',
                'reports': 'Analytics Reports'
            };
            headerTitle.textContent = titles[page] || 'Dashboard';
        }
    }
    
    // Set initial page
    showPage();
    
    // Listen for hash changes
    window.addEventListener('hashchange', showPage);
    
    // Handle nav item clicks
    document.addEventListener('click', (e) => {
        if (e.target.closest('.nav-item')) {
            const navItem = e.target.closest('.nav-item');
            const href = navItem.getAttribute('href');
            if (href && href.startsWith('#')) {
                window.location.hash = href;
            }
        }
    });
}

// Sample data for users
function getUsers() {
    return [
        { id: 1, name: 'John Doe', email: 'john@example.com', role: 'Admin', status: 'Active', joinDate: '2024-01-15' },
        { id: 2, name: 'Jane Smith', email: 'jane@example.com', role: 'User', status: 'Active', joinDate: '2024-02-20' },
        { id: 3, name: 'Mike Johnson', email: 'mike@example.com', role: 'User', status: 'Inactive', joinDate: '2024-01-10' },
        { id: 4, name: 'Sarah Wilson', email: 'sarah@example.com', role: 'Moderator', status: 'Active', joinDate: '2024-03-05' },
        { id: 5, name: 'Tom Brown', email: 'tom@example.com', role: 'User', status: 'Active', joinDate: '2024-02-28' }
    ];
}

// Populate users table
function populateUsersTable() {
    const users = getUsers();
    const tableBody = document.querySelector('#users-table tbody');
    
    if (tableBody) {
        tableBody.innerHTML = users.map(user => `
            <tr>
                <td>${user.name}</td>
                <td>${user.email}</td>
                <td><span class="badge">${user.role}</span></td>
                <td><span class="status ${user.status.toLowerCase()}">${user.status}</span></td>
                <td>${user.joinDate}</td>
                <td>
                    <button class="btn btn-sm" onclick="editUser(${user.id})">Edit</button>
                    <button class="btn btn-sm btn-danger" onclick="deleteUser(${user.id})">Delete</button>
                </td>
            </tr>
        `).join('');
    }
}

// User management functions
function editUser(userId) {
    alert(`Editing user with ID: ${userId}`);
    // In a real app, you would show a modal or navigate to an edit form
}

function deleteUser(userId) {
    if (confirm('Are you sure you want to delete this user?')) {
        alert(`User ${userId} deleted`);
        // In a real app, you would make an API call here
    populateUsersTable(); // Refresh the table
    updateStats(); // Update dashboard stats
    }
}

// Update dashboard stats
function updateStats() {
    const users = getUsers();
    const activeUsers = users.filter(u => u.status === 'Active').length;
    
    // Update stats cards
    document.querySelector('#total-users').textContent = users.length;
    document.querySelector('#active-users').textContent = activeUsers;
    document.querySelector('#new-users').textContent = Math.floor(Math.random() * 10) + 1;
    document.querySelector('#revenue').textContent = `$${(Math.random() * 10000).toFixed(2)}`;
}

// Initialize everything when DOM is loaded
document.addEventListener('DOMContentLoaded', function() {
    initTheme();
    initNavigation();
    populateUsersTable();
    updateStats();
    
    // Add event listener for theme toggle
    document.addEventListener('click', (e) => {
        if (e.target.closest('.theme-toggle')) {
            toggleTheme();
        }
    });
    
    // Handle form submissions
    const userForm = document.getElementById('user-form');
    if (userForm) {
        userForm.addEventListener('submit', function(e) {
            e.preventDefault();
            alert('User saved successfully!');
            this.reset();
        });
    }
});

// Handle window resize for responsive sidebar
window.addEventListener('resize', function() {
    // You can add responsive behavior here if needed
});