async function loadSpec() {
  const response = await fetch("/openapi.json");
  const spec = await response.json();
  if (!response.ok) {
    throw new Error(spec.error || "Failed to load OpenAPI spec");
  }
  return spec;
}

function methodPayload(operation) {
  const body = operation.requestBody?.content?.["application/json"]?.schema;
  if (!body) return "";
  return JSON.stringify(body.example || body.properties || body, null, 2);
}

function renderSpec(spec) {
  const root = document.getElementById("api-docs");
  const sectionTemplate = document.getElementById("api-section-template");
  const methodTemplate = document.getElementById("api-method-template");
  root.innerHTML = "";

  Object.entries(spec.paths || {}).forEach(([path, methods]) => {
    const section = sectionTemplate.content.firstElementChild.cloneNode(true);
    section.querySelector(".api-path").textContent = path;
    const methodsRoot = section.querySelector(".api-methods");

    Object.entries(methods).forEach(([method, operation]) => {
      const node = methodTemplate.content.firstElementChild.cloneNode(true);
      node.querySelector(".api-verb").textContent = method.toUpperCase();
      node.querySelector(".api-summary").textContent = operation.summary || "";
      node.querySelector(".api-description").textContent = operation.description || "";

      const body = methodPayload(operation);
      const bodyNode = node.querySelector(".api-body");
      if (body) {
        bodyNode.textContent = body;
      } else {
        bodyNode.remove();
      }

      methodsRoot.appendChild(node);
    });

    root.appendChild(section);
  });
}

loadSpec()
  .then(renderSpec)
  .catch((error) => {
    console.error(error);
    document.getElementById("api-docs").innerHTML = `<section class="panel">${error.message}</section>`;
  });