script.js

// Authentication state
let isAuthenticated = false;
let currentUser = null;

// Check authentication on page load
function checkAuth() {
    const token = localStorage.getItem('authToken');
    if (token && window.location.pathname.includes('login.html')) {
        window.location.href = 'index.html';
    } else if (!token && !window.location.pathname.includes('login.html')) {
        window.location.href = 'login.html';
    }
}

// Login function
function login(email, password) {
    // In a real app, this would be an API call
    if (email === 'admin@shopsphere.com' && password === 'admin123') {
        localStorage.setItem('authToken', 'dummy-token');
        localStorage.setItem('userRole', 'admin');
        isAuthenticated = true;
        currentUser = { email, role: 'admin' };
        return true;
    }
    return false;
}

// Logout function
function logout() {
    localStorage.removeItem('authToken');
    localStorage.removeItem('userRole');
    isAuthenticated = false;
    currentUser = null;
    window.location.href = 'login.html';
}

document.addEventListener('DOMContentLoaded', function() {
    checkAuth();

    // Handle login form submission
    const loginForm = document.getElementById('login-form');
    if (loginForm) {
        loginForm.addEventListener('submit', function(e) {
            e.preventDefault();
            const email = document.getElementById('email').value;
            const password = document.getElementById('password').value;
            
            if (login(email, password)) {
                window.location.href = 'index.html';
            } else {
                alert('Invalid credentials');
            }
        });
    }

    // Sample product data - in a real app, this would come from an API
const products = [
        {
            id: 1,
            name: 'Wireless Headphones',
            price: 99.99,
            stock: 45,
            image: 'http://static.photos/technology/200x200/1'
        },
        {
            id: 2,
            name: 'Smart Watch',
            price: 199.99,
            stock: 12,
            image: 'http://static.photos/technology/200x200/2'
        },
        {
            id: 3,
            name: 'Bluetooth Speaker',
            price: 59.99,
            stock: 30,
            image: 'http://static.photos/technology/200x200/3'
        }
    ];

    // Render products table
    const productsTable = document.getElementById('products-table');
    if (productsTable) {
        products.forEach(product => {
            const row = document.createElement('tr');
            row.className = 'hover:bg-gray-50';
            row.innerHTML = `
                <td class="px-6 py-4 whitespace-nowrap">
                    <div class="flex items-center">
                        <div class="flex-shrink-0 h-10 w-10">
                            <img class="h-10 w-10 rounded-full" src="${product.image}" alt="${product.name}">
                        </div>
                        <div class="ml-4">
                            <div class="text-sm font-medium text-gray-900">${product.name}</div>
                        </div>
                    </div>
                </td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$${product.price.toFixed(2)}</td>
                <td class="px-6 py-4 whitespace-nowrap">
                    <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${product.stock > 10 ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'}">
                        ${product.stock} in stock
                    </span>
                </td>
                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                    <a href="edit-product.html?id=${product.id}" class="text-primary hover:text-primary-600 mr-3">Edit</a>
                    <button class="text-red-600 hover:text-red-900" onclick="deleteProduct(${product.id})">Delete</button>
                </td>
            `;
            productsTable.appendChild(row);
        });
    }

    // Handle product form submission
    const productForm = document.getElementById('product-form');
    if (productForm) {
        productForm.addEventListener('submit', function(e) {
            e.preventDefault();
            alert('Product saved successfully!');
            window.location.href = 'index.html';
        });
    }
});
function deleteProduct(id) {
    if (!isAuthenticated) {
        alert('Please login to perform this action');
        return;
    }
    
    if (confirm('Are you sure you want to delete this product?')) {
        alert(`Product ${id} deleted`);
        // In a real app, you would call an API to delete the product
        // Then refresh the page or remove the row from the table
    }
}

// Add logout button to navbar
function setupNavbar() {
    const navbar = document.querySelector('custom-navbar');
    if (navbar && isAuthenticated) {
        const userMenu = navbar.shadowRoot.getElementById('user-menu-dropdown');
        if (userMenu) {
            userMenu.innerHTML = `
                <a href="account.html" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Your Profile</a>
                <a href="settings.html" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Settings</a>
                <a href="#" id="logout-btn" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Sign out</a>
            `;
            
            const logoutBtn = navbar.shadowRoot.getElementById('logout-btn');
            if (logoutBtn) {
                logoutBtn.addEventListener('click', logout);
            }
        }
    }
}

// Call setup functions
setupNavbar();