import type { ServerAddress, Welcome } from "./handshake.ts";

// asks before running a server's mods when the page came from somewhere else, see "Security" in MODS.md.
// resolves with whether the player wants to join
export function confirm_mods(address: ServerAddress, welcome: Welcome): Promise<boolean> {
	return new Promise((resolve) => {
		const overlay = document.createElement("div");
		overlay.style.cssText =
			"position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:16px;" +
			"background:rgba(0,0,0,0.85);color:white;font:16px system-ui,sans-serif;";

		const panel = document.createElement("div");
		panel.style.cssText = "max-width:480px;display:flex;flex-direction:column;gap:12px;";

		const title = document.createElement("div");
		title.style.cssText = "font-size:20px;";
		title.textContent = `Join ${address.base.host}?`;

		const warning = document.createElement("div");
		warning.style.cssText = "opacity:0.8;";
		warning.textContent = "This server runs these mods in your browser. They can do anything this page can, " +
			"including reading what it saved. Only join servers you trust.";

		const list = document.createElement("ul");
		list.style.cssText = "margin:0;padding-left:20px;";
		for (const mod of welcome.mods) {
			const item = document.createElement("li");
			item.textContent = `${mod.name} ${mod.version} (${mod.id})`;
			list.append(item);
		}

		const buttons = document.createElement("div");
		buttons.style.cssText = "display:flex;gap:8px;justify-content:flex-end;";
		const button = (label: string, answer: boolean) => {
			const element = document.createElement("button");
			element.textContent = label;
			element.style.cssText = "font:inherit;padding:6px 16px;cursor:pointer;";
			element.addEventListener("click", () => {
				overlay.remove();
				resolve(answer);
			});
			return element;
		};
		buttons.append(button("Cancel", false), button("Join", true));

		panel.append(title, warning, list, buttons);
		overlay.append(panel);
		document.body.append(overlay);
	});
}