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)}`;

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

	let billingData = null;

	form.addEventListener("submit", async (e) => {
		e.preventDefault();

		if (!form.checkValidity()) return;

		const step = orderBtn.dataset.step;

		// STEP 1 — Unlock QR
		if (step === "unlock") {
			const formData = Object.fromEntries(new FormData(form));

			billingData = formData;

			qrWrapper.classList.remove("blurred");

			orderBtn.dataset.step = "confirm";
			orderBtn.querySelector(".btn-text").textContent =
				"I Have Completed Payment";

			return;
		}

		// STEP 2 — Place Order
		if (step === "confirm") {
			try {
				orderBtn.classList.add("loading");
				orderBtn.disabled = true;

				const orderPayload = {
					...billingData,
					order: Cart.getCart(),
				};

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

				showToast({
					title: "Order Placed, Redirecting to home in 3 seconds...",
					icon: "✓",
				});

				Cart.clear();
				orderBtn.dataset.step = "unlock";

				setTimeout(() => {
					window.location.href = "index.html";
				}, 3000);
			} catch (err) {
				console.error(err);
				alert("Unable to place order.");
			} finally {
				orderBtn.classList.remove("loading");
				orderBtn.disabled = false;
			}
		}
	});
});