function updateStats(pageviews, sessions) {
  document.getElementById('total-pageviews').textContent = pageviews.toLocaleString();
  document.getElementById('total-sessions').textContent = sessions.toLocaleString();
}

// Example: How to populate the table
function updateTable(data) {
  const tbody = document.getElementById('table-body');

  if (data.length === 0) {
    tbody.innerHTML = `
      <tr>
        <td colspan="5" class="empty-state">
          <span class="material-symbols-outlines">inbox</span>
          <div>No data available</div>
        </td>
      </tr>
    `;
    return;
  }
  tbody.innerHTML = data.map(row => `
    <tr>
    <td class="url-cell" title="${row.url}">${row.url}</td>
    <td class="number-cell">${row.pageviews.toLocaleString()}</td>
    <td class="number-cell">${row.uniquePageviews.toLocaleString()}</td>
    <td class="number-cell">${row.sessions.toLocaleString()}</td>
    <td class="number-cell">${row.sessionDuration}</td>
    </tr>
  `).join('');
}

// Example usage with sample data (you'll replace this with API calls)
setTimeout(() => {
  // Update stats
  updateStats(15234, 8456);

  // Update table
  updateTable([
    {
      url: '/home',
      pageviews: 5234,
      uniquePageviews: 4521,
      sessions: 3456,
      sessionDuration: '3m 24s'
    },
    {
      url: '/about',
      pageviews: 2345,
      uniquePageviews: 2100,
      sessions: 1876,
      sessionDuration: '2m 15s'
    },
    {
      url: '/products',
      pageviews: 1876,
      uniquePageviews: 1654,
      sessions: 1234,
      sessionDuration: '4m 02s'
    }
  ]);
}, 1500);