// index.js - landing page logic

import { createLobby } from "./api.js";
import { saveLobbyName } from "./storage.js";

// ── DOM refs
const formCreate      = document.getElementById("form-create");
const formJoin        = document.getElementById("form-join");
const createInput     = /** @type {HTMLInputElement|null} */ (document.getElementById("lobby-create"));
const joinInput       = /** @type {HTMLInputElement|null} */ (document.getElementById("lobby-join"));
const createBtn       = /** @type {HTMLButtonElement|null} */ (document.getElementById("reg-btn"));
const joinBtn         = /** @type {HTMLButtonElement|null} */ (document.getElementById("join-btn"));
const createError     = document.getElementById("lobby-error");
const joinError       = document.getElementById("join-error");
const toggleCreateBtn = /** @type {HTMLButtonElement|null} */ (document.getElementById("toggle-create-btn"));
const toggleJoinBtn   = /** @type {HTMLButtonElement|null} */ (document.getElementById("toggle-join-btn"));

// ── Toggle switch
function showCreate() {
	formCreate?.removeAttribute("hidden");
	formJoin?.setAttribute("hidden", "");
	toggleCreateBtn?.classList.add("lobby-toggle__btn--active");
	toggleJoinBtn?.classList.remove("lobby-toggle__btn--active");
	createInput?.focus();
}

function showJoin() {
	formJoin?.removeAttribute("hidden");
	formCreate?.setAttribute("hidden", "");
	toggleJoinBtn?.classList.add("lobby-toggle__btn--active");
	toggleCreateBtn?.classList.remove("lobby-toggle__btn--active");
	joinInput?.focus();
}

toggleCreateBtn?.addEventListener("click", showCreate);
toggleJoinBtn?.addEventListener("click", showJoin);

// ── Create lobby
createBtn?.addEventListener("click", async () => {
	if (!createInput || !createError) return;

	const lobbyName = createInput.value.trim();
	createError.textContent = "";

	if (!lobbyName) {
		createInput.focus();
		return;
	}

	try {
		createBtn.disabled = true;
		await createLobby(lobbyName);
		saveLobbyName(lobbyName);
		window.location.href = "lobby.html";
	} catch (error) {
		createError.textContent =
			error instanceof Error ? error.message : "Could not create lobby.";
		createBtn.disabled = false;
	}
});

// ── Join lobby — actual joinLobby() API call happens in lobby.js
joinBtn?.addEventListener("click", () => {
	if (!joinInput || !joinError) return;

	const lobbyName = joinInput.value.trim();
	joinError.textContent = "";

	if (!lobbyName) {
		joinInput.focus();
		return;
	}

	saveLobbyName(lobbyName);
	window.location.href = "lobby.html";
});

// Allow Enter key on both inputs
createInput?.addEventListener("keydown", (e) => { if (e.key === "Enter") createBtn?.click(); });
joinInput?.addEventListener("keydown",   (e) => { if (e.key === "Enter") joinBtn?.click(); });

// ── Scroll reveal
const observer = new IntersectionObserver(
	(entries) => {
		entries.forEach((entry) => {
			if (entry.isIntersecting) {
				entry.target.classList.add("visible");
				observer.unobserve(entry.target);
			}
		});
	},
	{ threshold: 0.12 },
);

document.querySelectorAll(".reveal").forEach((el) => observer.observe(el));