async function loadUsers() {
  const r = await fetch("/admin/users");
  const users = await r.json();

  const container = document.getElementById("users");
  container.innerHTML = "";

  users.forEach(u => {
    const div = document.createElement("div");
    div.className = "user-card";
    div.innerHTML = `
      <strong>${u.name}</strong> (${u.email}) — ${u.role}
      <button onclick="selectUser('${u.email}')">Manage</button>
    `;
    container.appendChild(div);
  });
}

async function selectUser(email) {
  const r = await fetch(`/admin/conversations/${email}`);
  const convs = await r.json();

  const details = document.getElementById("user-details");
  details.innerHTML = `
    <h3>${email}</h3>
    <button onclick="promote('${email}')">Promote to Admin</button>
    <h4>Conversations</h4>
    <ul>${convs.map(c => `<li>${c.title}</li>`).join("")}</ul>
    <h4>ACL</h4>
    <div id="acl"></div>
  `;

  loadACL(email);
}

async function loadACL(email) {
  const r = await fetch("/admin/users");
  const users = await r.json();
  const u = users.find(x => x.email === email);

  const aclDiv = document.getElementById("acl");
  aclDiv.innerHTML = `
    ${Object.keys(u).map(key => {
      if (typeof u[key] === "boolean") {
        return `
          <label>
            <input type="checkbox" onchange="updateACL('${email}', '${key}', this.checked)" ${u[key] ? "checked" : ""}>
            ${key}
          </label><br>
        `;
      }
      return "";
    }).join("")}
  `;
}

async function updateACL(email, key, value) {
  await fetch(`/admin/update_acl/${email}`, {
    method: "POST",
    headers: {"Content-Type": "application/json"},
    body: JSON.stringify({[key]: value})
  });
}

async function promote(email) {
  await fetch(`/admin/promote/${email}`, {method: "POST"});
  loadUsers();
}

window.onload = loadUsers;