function toggleTest(testId) {
  const content = document.getElementById(`${testId}-content`);
  const toggle = document.getElementById(`${testId}-toggle`);
  
  if (content.classList.contains('expanded')) {
    content.classList.remove('expanded');
    toggle.classList.remove('expanded');
  } else {
    content.classList.add('expanded');
    toggle.classList.add('expanded');
  }
}

function expandAllTests() {
  document.querySelectorAll('.test-content').forEach(content => {
    content.classList.add('expanded');
  });
  document.querySelectorAll('.toggle-icon').forEach(icon => {
    icon.classList.add('expanded');
  });
}

function collapseAllTests() {
  document.querySelectorAll('.test-content').forEach(content => {
    content.classList.remove('expanded');
  });
  document.querySelectorAll('.toggle-icon').forEach(icon => {
    icon.classList.remove('expanded');
  });
}

function clearResults() {
  renderTests();
  document.getElementById('summary').style.display = 'none';
  resetState();
}

function renderTests() {
  const container = document.getElementById('testResults');
  container.innerHTML = '';

  tests.forEach((category, catIdx) => {
    const categoryDiv = document.createElement('div');
    categoryDiv.className = 'test-category';

    const categoryHeader = document.createElement('h2');
    categoryHeader.textContent = category.category;
    categoryDiv.appendChild(categoryHeader);

    category.tests.forEach((test, testIdx) => {
      const testDiv = document.createElement('div');
      testDiv.className = 'test-case';
      testDiv.id = `test-${catIdx}-${testIdx}`;

      const endpoint = typeof test.endpoint === 'function' ? test.endpoint() : test.endpoint;

      testDiv.innerHTML = `
        <div class="test-header" onclick="toggleTest('${testDiv.id}')">
          <div class="test-name">
            <span class="toggle-icon" id="${testDiv.id}-toggle">▶</span>
            ${test.name}
          </div>
          <div class="test-status pending">PENDING</div>
        </div>
        <div class="test-content" id="${testDiv.id}-content">
          <div class="test-details">
            <strong>${test.method}</strong> ${endpoint}
            ${test.expectFail ? ' <span style="color: #dc3545; font-weight: 600;">(Expected to fail)</span>' : ''}
            ${test.auth ? ' <span style="color: #0066cc; font-weight: 600;">🔒 Requires Auth</span>' : ''}
          </div>
          <div class="test-result" style="display: none;"></div>
        </div>
      `;

      categoryDiv.appendChild(testDiv);
    });

    container.appendChild(categoryDiv);
  });
}

// Initialize on page load
document.addEventListener('DOMContentLoaded', function() {
  renderTests();
});