document.addEventListener("DOMContentLoaded", () => {
	const cartItemsContainer = document.getElementById("checkout-items");
	const subtotalEl = document.getElementById("checkout-subtotal");
	const totalEl = document.getElementById("checkout-total");

	const qrWrapper = document.getElementById("qr-wrapper");
	const form = document.getElementById("checkout-form");

	const cart = Cart.getCart();

	if (cart.length === 0) {
		cartItemsContainer.innerHTML = "<p>Your cart is empty.</p>";
		return;
	}

	let subtotal = 0;

	cart.forEach((item) => {
		subtotal += item.price * item.quantity;

		const row = document.createElement("div");
		row.className = "summary-row";
		row.innerHTML = `
			<span>${item.name} × ${item.quantity}</span>
			<span>₹${(item.price * item.quantity).toFixed(2)}</span>
		`;
		cartItemsContainer.appendChild(row);
	});

	const total = subtotal;

	subtotalEl.textContent = `₹${subtotal.toFixed(2)}`;
	totalEl.textContent = `₹${total.toFixed(2)}`;

	// Unlock QR on valid form submit
	form.addEventListener("submit", async (e) => {
		e.preventDefault();

		if (!form.checkValidity()) return;

		const orderBtn = document.getElementById("btn-order");

		orderBtn.classList.add("loading");
		orderBtn.disabled = true;

		const formData = new FormData(form);

		const orderPayload = {
			first_name: formData.get("first_name"),
			last_name: formData.get("last_name"),
			email: formData.get("email"),
			phone: formData.get("phone"),
			address: formData.get("address"),
			city: formData.get("city"),
			state: formData.get("state"),
			post_code: formData.get("post_code"),
			order: Cart.getCart(),
		};

		try {
			const res = await fetch(`${CONFIG.API_BASE_URL}/order`, {
				method: "POST",
				headers: {
					"Content-Type": "application/json",
				},
				body: JSON.stringify(orderPayload),
			});

			console.log(res);

			// if (!res.ok) throw new Error("Order failed");

			// unlock payment QR
			qrWrapper.classList.remove("blurred");

			console.log("Order created");
		} catch (err) {
			console.error(err);
			alert("Unable to place order. Please try again.");
		} finally {
			orderBtn.classList.remove("loading");
			orderBtn.disabled = false;
		}
	});
});