let documents = [];
let currentDocument = null;

// Load document list
async function loadDocuments() {
  try {
    const response = await fetch('/api/documents');
    const data = await response.json();
    documents = data.documents || [];

    const listEl = document.getElementById('document-list');
    if (documents.length === 0) {
      listEl.innerHTML = '<div class="text-sm text-gray-500">No documents available</div>';
      return;
    }

    listEl.innerHTML = documents.map(doc => `
      <button onclick="loadDocument('${doc.slug}')"
              class="doc-link w-full text-left px-3 py-2 rounded text-sm hover:bg-blue-50 transition"
              data-slug="${doc.slug}">
        <div class="font-medium text-gray-900 truncate">${doc.title}</div>
        ${doc.quadrant ? `<div class="text-xs text-gray-500 mt-1">${doc.quadrant}</div>` : ''}
      </button>
    `).join('');

    // Auto-load first document
    if (documents.length > 0) {
      loadDocument(documents[0].slug);
    }
  } catch (error) {
    console.error('Error loading documents:', error);
    document.getElementById('document-list').innerHTML =
      '<div class="text-sm text-red-600">Error loading documents</div>';
  }
}

// Load specific document
async function loadDocument(slug) {
  try {
    const response = await fetch(`/api/documents/${slug}`);
    const data = await response.json();
    currentDocument = data.document;

    // Update active state
    document.querySelectorAll('.doc-link').forEach(el => {
      if (el.dataset.slug === slug) {
        el.classList.add('bg-blue-100', 'text-blue-900');
      } else {
        el.classList.remove('bg-blue-100', 'text-blue-900');
      }
    });

    // Render content
    const contentEl = document.getElementById('document-content');
    contentEl.innerHTML = `
      <div class="prose max-w-none">
        ${currentDocument.content_html}
      </div>
    `;

    // Render table of contents
    renderTOC(currentDocument.toc || []);

    // Scroll to top
    window.scrollTo(0, 0);

  } catch (error) {
    console.error('Error loading document:', error);
    document.getElementById('document-content').innerHTML = `
      <div class="text-center py-12">
        <div class="text-red-600">Error loading document</div>
      </div>
    `;
  }
}

// Render table of contents
function renderTOC(toc) {
  const tocEl = document.getElementById('toc');

  if (!toc || toc.length === 0) {
    tocEl.innerHTML = '<div class="text-gray-500">No table of contents</div>';
    return;
  }

  tocEl.innerHTML = toc
    .filter(item => item.level <= 3) // Only show H1, H2, H3
    .map(item => {
      const indent = (item.level - 1) * 12;
      return `
        <a href="#${item.slug}"
           class="block text-gray-600 hover:text-blue-600 transition"
           style="padding-left: ${indent}px">
          ${item.title}
        </a>
      `;
    }).join('');
}

// Initialize
loadDocuments();