const csrf = () =>
	document.cookie
		.split("; ")
		.find((value) => value.startsWith("rp_csrf="))
		?.split("=")[1] || "";
const users = document.querySelector("#users");
const plans = document.querySelector("#plans");

async function load() {
	const usersResponse = await fetch("/api/admin/users");
	if (!usersResponse.ok) return;
	const body = await usersResponse.json();
	document.querySelector("#signup").checked = body.signupEnabled;
	users.replaceChildren(
		...body.users.map((user) =>
			Object.assign(document.createElement("li"), {
				textContent: `${user.email} (${user.role}) — ${user.plan_count} plans`,
			}),
		),
	);
	const plansResponse = await fetch("/api/admin/plans");
	if (!plansResponse.ok) return;
	const plansBody = await plansResponse.json();
	plans.replaceChildren(
		...plansBody.plans.map((plan) =>
			Object.assign(document.createElement("li"), {
				textContent: `${plan.email}: ${plan.plan?.fields?.["0.1"] || "Untitled plan"}`,
			}),
		),
	);
}

document.querySelector("#save").addEventListener("click", async () => {
	await fetch("/api/admin/signup-enabled", {
		method: "PUT",
		headers: {
			"content-type": "application/json",
			"x-csrf-token": csrf(),
		},
		body: JSON.stringify({ enabled: document.querySelector("#signup").checked }),
	});
	await load();
});

load();