document.addEventListener('DOMContentLoaded', function () {
    const sidebar = document.getElementById('sidebar');
    const mainContent = document.getElementById('main-content');
    const sidebarToggler = document.getElementById('sidebar-toggler');

    if (sidebarToggler) {
        sidebarToggler.addEventListener('click', function () {
            sidebar.classList.toggle('sidebar-collapsed');
            mainContent.classList.toggle('main-content-shifted');
        });
    }

    // Off-canvas for mobile
    const offcanvasToggler = document.querySelector('[data-bs-toggle="offcanvas"]');
    if(offcanvasToggler) {
        const target = document.querySelector(offcanvasToggler.dataset.bsTarget);
        offcanvasToggler.addEventListener('click', function(e) {
            e.preventDefault();
            target.classList.toggle('show');
        });
    }

    // Fetch and load data from the backend
    loadDashboardData();
});

/**
 * Fetches data from the Node.js backend and populates the dashboard.
 */
async function loadDashboardData() {
    // --- IMPORTANT ---
    // Replace this URL with the actual URL of your Node.js backend API.
    // When running locally, your Node.js server might be on a different port.
        const API_URL = 'http://localhost:4000/api/trades/received'; 

    try {
        const response = await fetch(backendApiUrl);
        if (!response.ok) {
            // If the response is not OK (e.g., 404, 500), throw an error.
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        const transactions = await response.json();

        // Get the table body to populate it with data
        const tableBody = document.querySelector('.table-responsive tbody');
        
        // Clear existing placeholder rows
        tableBody.innerHTML = '';

        // Populate table with data from the backend
        transactions.forEach(tx => {
            const row = document.createElement('tr');
            
            // Make sure the property names (e.g., tx.id, tx.itemOut) match what your API sends
            row.innerHTML = `
                <td>${tx.id}</td>
                <td>${tx.itemOut}</td>
                <td>${tx.itemIn}</td>
                <td>${tx.user}</td>
                <td>${new Date(tx.date).toLocaleDateString()}</td>
                <td><span class="badge bg-success">${tx.status}</span></td>
            `;
            tableBody.appendChild(row);
        });

    } catch (error) {
        console.error('Error fetching data from backend:', error);
        const tableBody = document.querySelector('.table-responsive tbody');
        // Display a user-friendly error message in the table
        tableBody.innerHTML = '<tr><td colspan="6" class="text-center text-danger">Could not load data. Is the backend server running?</td></tr>';
    }
}