// --- Utility functions ---
function formatItemId(id) {
  if (!id && id !== 0) return "(unknown)";
  id = String(id);

  // Remove any NBT/variant suffixes that might follow a space or bracket e.g. "minecraft:stone{...}"
  // Keep it simple: strip anything starting with '{' or '[' or ' ' after id body.
  id = id.split("{")[0].split("[")[0].trim();

  // If there is a namespace, take the part after colon
  const parts = id.split(":");
  let name = parts.length > 1 ? parts[1] : parts[0];

  // Normalize common separators
  name = name.replace(/[-.]/g, "_");

  // Replace multiple underscores with single space
  name = name.replace(/_+/g, " ").trim();

  // If name contains uppercase letters (already pretty), keep spacing but fix underscores
  if (/[A-Z]/.test(name)) {
    // Replace underscores and keep casing; ensure single spaces
    name = name.replace(/_+/g, " ").trim();
    return name;
  }

  // Lowercase everything then title-case just the first word for a natural look:
  // "sugar cane" -> "Sugar cane", "redstone_dust" -> "Redstone dust"
  name = name.toLowerCase().split(" ").filter(Boolean);

  if (name.length === 0) return id;

  // Title-case only first word, leave rest lowercase (matches examples like "Sugar cane")
  const first = name[0];
  const rest = name.slice(1);
  const firstCap = first.charAt(0).toUpperCase() + first.slice(1);
  const result = [firstCap].concat(rest).join(" ");

  return result;
}

// /api/users output is {{"ok":true,"users":[{"username":"ZareMate","password":"74b669f042afd3fccff6d3915f436b5bf3ad98836650ecfacf5062c7229115cb","balance":12858,"adresses":["PKP Centralny: Poczta - ZareMate","Factory 1: Manual"]},{"username":"qawe","password":"cd9ecb80ec16c7d73f7713f5e25a5d96b68bfe4debcfefc214f5351ee325e09f","balance":7027.52,"adresses":["Jajomyje 17: qawe"]},{"username":"skybloczek1","password":"937824fc6a52074b0a173319ec94c5e6c5a82cf8e63d9f401b15219c7e33248a","balance":22,"adresses":["Duchnice: skypa"]}]}}
async function getAllAddresses() {
  try {
    const response = await fetch("/api/users");
    const data = await response.json();

    const addresses = data.users.map((user) => user.adresses).flat();
    console.log(addresses);

    return addresses;
  } catch (error) {
    console.error("Error fetching addresses:", error);
    throw error;
  }
}

// get id from name
function getId(name) {
  // Implement id retrieval logic here
  // name: Sugar cane -> minecraft:sugar_cane
  // name: Redstone dust -> minecraft:redstone_dust
  const parts = name.split(" ");
  const first = parts[0].toLowerCase();
  const rest = parts.slice(1).map((word) => word.toLowerCase());
  const id = [first].concat(rest).join("_");
  return `minecraft:${id}`;
}

function getImage(id) {
  // Implement image retrieval logic here
  // id: mod:item_id
  // /static/textures/mod/item_id.png
  const parts = id.split(":");
  const mod = parts[0];
  const item = parts[1];
  return `/static/textures/${mod}/${item}.png`;
}

function sha256(str) {
  // Returns a promise that resolves to the hex digest
  const encoder = new TextEncoder();
  const data = encoder.encode(str);
  return crypto.subtle.digest("SHA-256", data).then((buf) =>
    Array.from(new Uint8Array(buf))
      .map((b) => b.toString(16).padStart(2, "0"))
      .join(""),
  );
}

function openTransferModal() {
  const LocalUser = getLoggedInUser();
  if (!LocalUser) {
    document.getElementById("transferMsg").textContent =
      "Please log in to transfer balance.";
    document.getElementById("transferModal").style.display = "flex";
    return;
  }
  const transferToList = document.getElementById("transferToList");
  transferToList.innerHTML = "";
  Promise.all([fetch("/api/users").then((res) => res.json())]).then(
    ([users]) => {
      users.users.forEach((user) => {
        if (user.username !== LocalUser.username) {
          const input = document.createElement("input");
          input.type = "radio";
          input.name = "transferTo";
          input.id = user.username;
          const label = document.createElement("label");
          label.htmlFor = user.username;
          label.textContent = user.username;
          transferToList.appendChild(input);
          transferToList.appendChild(label);
          transferToList.appendChild(document.createElement("br"));
        }
      });
    },
  );
  document.getElementById("transferMsg").textContent = "";
  document.getElementById("transferModal").style.display = "flex";
}

function closeTransferModal() {
  document.getElementById("transferModal").style.display = "none";
}

// on onclick transferForm make POST request to /api/users/transfer
function submitTransferForm() {
  const from = getLoggedInUser().username;
  const to = document.querySelector("input[name='transferTo']:checked").id;
  const amount = document.getElementById("transferAmount").value;
  fetch("/api/users/transfer", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({ from, to, amount }),
  })
    .then((res) => res.json())
    .then((data) => {
      if (data.ok) {
        updateBalance();
        closeTransferModal();
      } else {
        document.getElementById("transferMsg").textContent = data.error;
      }
    });
}

function updateBalance() {
  const user = getLoggedInUser();
  if (!user) {
    document.getElementById("balanceAmount").textContent = 0;
    document.getElementById("balanceBtn").style.display = "none";
    return;
  }
  fetch("/api/users/" + encodeURIComponent(user.username))
    .then((res) => res.json())
    .then((data) => {
      if (data.ok) {
        document.getElementById("balanceAmount").textContent =
          data.user.balance + " $";
        document.getElementById("balanceBtn").style.display = "block";
      } else {
        document.getElementById("balanceAmount").textContent = 0;
        document.getElementById("balanceBtn").style.display = "none";
      }
    });
}

document.getElementById("balanceBtn").addEventListener("click", () => {
  openTransferModal();
});
document.getElementById("transferBtn").addEventListener("click", () => {
  submitTransferForm();
});

// Helper to fetch user info (fresh)
async function fetchUserInfo(username) {
  const res = await fetch("/api/users/" + encodeURIComponent(username));
  const data = await res.json();
  return data.ok ? data.user : null;
}

function showMsg(msg, error = false) {
  const msgEl = document.getElementById("msg");
  msgEl.textContent = msg;
  msgEl.className = error ? "error" : "";
  // after 2 seconds clear message
  setTimeout(() => {
    msgEl.textContent = "";
    msgEl.className = "";
  }, 2000);
}

// --- Login logic ---
function openLoginModal() {
  document.getElementById("loginModal").style.display = "flex";
  document.getElementById("loginMsg").textContent = "";
}
function closeLoginModal() {
  document.getElementById("loginModal").style.display = "none";
}
function updateLoginUI() {
  const user = getLoggedInUser();
  document.getElementById("loginBtn").style.display = user ? "none" : "";
  document.getElementById("logoutBtn").style.display = user ? "" : "none";
  document.getElementById("accountBtn").style.display = user ? "" : "none";
  updateBalance();
}

function cartPosition() {
  const user = getLoggedInUser();
  if (user) {
    document.querySelector(".cart-btn").style.right = "315px";
  } else {
    document.querySelector(".cart-btn").style.right = "120px";
  }
}

function getLoggedInUser() {
  try {
    return JSON.parse(localStorage.getItem("user"));
  } catch {
    return null;
  }
}
function setLoggedInUser(user) {
  localStorage.setItem("user", JSON.stringify(user));
  updateLoginUI();
  cartPosition();
  updateBalance();
}
function logout() {
  localStorage.removeItem("user");
  updateLoginUI();
  cartPosition();
  updateBalance();
  showMsg("Logged out.");
}

// --- Account Modal logic ---
document.getElementById("accountBtn").onclick = openAccountModal;
function openAccountModal() {
  showAccountTab("Password");
  loadAddressesTab();
  loadComputersTab();
  document.getElementById("accountModal").style.display = "flex";
}
function closeAccountModal() {
  document.getElementById("accountModal").style.display = "none";
}
function showAccountTab(tab) {
  ["Password", "Addresses", "Computers"].forEach((t) => {
    document.getElementById("accountTab" + t).style.display =
      t === tab ? "" : "none";
    document.getElementById("tab" + t).style.background =
      t === tab ? "#23272a" : "";
  });
}
document.getElementById("tabPassword").onclick = () =>
  showAccountTab("Password");
document.getElementById("tabAddresses").onclick = () => {
  showAccountTab("Addresses");
  loadAddressesTab();
};
document.getElementById("tabComputers").onclick = () => {
  showAccountTab("Computers");
  loadComputersTab();
};

// --- Change Password ---
document.getElementById("changePasswordForm").onsubmit = async function (e) {
  e.preventDefault();
  const user = getLoggedInUser();
  const msgEl = document.getElementById("changePasswordMsg");
  msgEl.textContent = "";
  if (!user) {
    msgEl.textContent = "Not logged in.";
    return;
  }
  const current = document.getElementById("currentPassword").value;
  const newpw = document.getElementById("newPassword").value;
  const confirm = document.getElementById("confirmNewPassword").value;
  if (!current || !newpw || !confirm) {
    msgEl.textContent = "Fill all fields.";
    return;
  }
  if (newpw !== confirm) {
    msgEl.textContent = "Passwords do not match.";
    return;
  }
  const userInfo = await fetchUserInfo(user.username);
  if (!userInfo) {
    msgEl.textContent = "User not found.";
    return;
  }
  const currentHash = await sha256(current);
  if (userInfo.password !== currentHash) {
    msgEl.textContent = "Current password incorrect.";
    return;
  }
  const newHash = await sha256(newpw);
  const res = await fetch("/api/users/" + encodeURIComponent(user.username), {
    method: "PUT",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ password: newHash }),
  });
  const data = await res.json();
  if (data.ok) {
    msgEl.style.color = "#23a559";
    msgEl.textContent = "Password changed!";
  } else {
    msgEl.style.color = "#ff5555";
    msgEl.textContent = "Error: " + (data.error || "Unknown error");
  }
};

// --- Addresses Tab ---
async function loadAddressesTab() {
  const user = getLoggedInUser();
  const listEl = document.getElementById("addressesList");
  const msgEl = document.getElementById("addressesMsg");
  listEl.innerHTML = "";
  msgEl.textContent = "";
  if (!user) {
    listEl.innerHTML = "Not logged in.";
    return;
  }
  const userInfo = await fetchUserInfo(user.username);
  if (!userInfo || !Array.isArray(userInfo.adresses)) {
    listEl.innerHTML = "No addresses found.";
    return;
  }
  if (!userInfo.adresses.length) {
    listEl.innerHTML = "<div>No addresses.</div>";
  } else {
    userInfo.adresses.forEach((addr, idx) => {
      const div = document.createElement("div");
      div.style.display = "flex";
      div.style.alignItems = "center";
      div.style.marginBottom = "6px";
      div.innerHTML = `<span style="flex:1;">${addr}</span>
                <button style="background:#ff5555;padding:2px 8px;border-radius:4px;border:none;color:#fff;cursor:pointer;" onclick="removeAddress(${idx})">Remove</button>`;
      listEl.appendChild(div);
    });
  }
}
window.removeAddress = async function (idx) {
  const user = getLoggedInUser();
  const msgEl = document.getElementById("addressesMsg");
  msgEl.textContent = "";
  if (!user) return;
  const userInfo = await fetchUserInfo(user.username);
  if (!userInfo || !Array.isArray(userInfo.adresses)) return;
  userInfo.adresses.splice(idx, 1);
  const res = await fetch("/api/users/" + encodeURIComponent(user.username), {
    method: "PUT",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ adresses: userInfo.adresses }),
  });
  const data = await res.json();
  if (data.ok) {
    msgEl.style.color = "#23a559";
    msgEl.textContent = "Address removed.";
    loadAddressesTab();
  } else {
    msgEl.style.color = "#ff5555";
    msgEl.textContent = "Error: " + (data.error || "Unknown error");
  }
};
document.getElementById("addAddressForm").onsubmit = async function (e) {
  e.preventDefault();
  const user = getLoggedInUser();
  const msgEl = document.getElementById("addressesMsg");
  msgEl.textContent = "";
  const newAddr = document.getElementById("newAddress").value.trim();
  if (!user || !newAddr) return;
  const userInfo = await fetchUserInfo(user.username);
  if (!userInfo || !Array.isArray(userInfo.adresses)) return;
  userInfo.adresses.push(newAddr);
  const res = await fetch("/api/users/" + encodeURIComponent(user.username), {
    method: "PUT",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({
      adresses: userInfo.adresses,
    }),
  });
  // update local storage
  localStorage.setItem("user", JSON.stringify(userInfo));

  const data = await res.json();
  if (data.ok) {
    msgEl.style.color = "#23a559";
    msgEl.textContent = "Address added.";
    document.getElementById("newAddress").value = "";
    loadAddressesTab();
  } else {
    msgEl.style.color = "#ff5555";
    msgEl.textContent = "Error: " + (data.error || "Unknown error");
  }
};

// --- Linked Computers Tab ---
async function loadComputersTab() {
  const user = getLoggedInUser();
  const listEl = document.getElementById("computersList");
  const msgEl = document.getElementById("computersMsg");
  listEl.innerHTML = "";
  msgEl.textContent = "";
  if (!user) {
    listEl.innerHTML = "Not logged in.";
    return;
  }
  const res = await fetch(
    "/api/users/" + encodeURIComponent(user.username) + "/computers",
  );
  const data = await res.json();
  if (!data.ok || !Array.isArray(data.computers)) {
    listEl.innerHTML = "No linked computers found.";
    return;
  }
  if (!data.computers.length) {
    listEl.innerHTML = "<div>No linked computers.</div>";
  } else {
    data.computers.forEach((comp) => {
      const div = document.createElement("div");
      div.style.display = "flex";
      div.style.alignItems = "center";
      div.style.marginBottom = "6px";
      div.innerHTML = `<span style="flex:1;">Computer #${comp.id}</span>
                <button style="background:#ff5555;padding:2px 8px;border-radius:4px;border:none;color:#fff;cursor:pointer;" onclick="removeComputer(${comp.id})">Remove</button>`;
      listEl.appendChild(div);
    });
  }
}
window.removeComputer = async function (id) {
  const user = getLoggedInUser();
  const msgEl = document.getElementById("computersMsg");
  msgEl.textContent = "";
  if (!user) return;
  const res = await fetch("/api/computers/" + id, {
    method: "PUT",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ linked_user: null }),
  });
  const data = await res.json();
  if (data.ok) {
    msgEl.style.color = "#23a559";
    msgEl.textContent = "Computer unlinked.";
    loadComputersTab();
  } else {
    msgEl.style.color = "#ff5555";
    msgEl.textContent = "Error: " + (data.error || "Unknown error");
  }
};

document.getElementById("loginBtn").onclick = openLoginModal;
document.getElementById("logoutBtn").onclick = logout;

document.getElementById("loginForm").onsubmit = async function (e) {
  e.preventDefault();
  const username = document.getElementById("loginUsername").value.trim();
  const password = document.getElementById("loginPassword").value;
  if (!username || !password) return;
  const hash = await sha256(password);
  // Fetch user info to verify login
  let res = await fetch("/api/users/" + encodeURIComponent(username));
  let data = await res.json();
  if (!data.ok || !data.user) {
    document.getElementById("loginMsg").textContent = "User not found";
    return;
  }
  if (data.user.password !== hash) {
    document.getElementById("loginMsg").textContent = "Incorrect password";
    return;
  }
  setLoggedInUser({
    username: data.user.username,
    adresses: data.user.adresses,
  });
  closeLoginModal();
  updateBalance();
  cartPosition();
};

// --- Cart logic ---
function getCart() {
  try {
    return JSON.parse(localStorage.getItem("cart")) || [];
  } catch {
    return [];
  }
}
function setCart(cart) {
  localStorage.setItem("cart", JSON.stringify(cart));
  updateCartUI();
}
function addToCart(item, qty = 1) {
  let cart = getCart();
  const idx = cart.findIndex((i) => i.id === item.id);
  if (idx >= 0) {
    cart[idx].qty += qty * item.quantity || 1;
  } else {
    cart.push({ ...item, qty: qty * item.quantity || 1 });
  }
  setCart(cart);
}
function removeFromCart(id) {
  let cart = getCart().filter((i) => i.id !== id);
  setCart(cart);
}
function updateCartUI() {
  const cart = getCart();
  const count = cart.reduce((a, i) => a + i.qty, 0);
  document.getElementById("cartCount").textContent = count;
  document.getElementById("cartCount").style.display = count ? "" : "none";
}
function openCart() {
  renderCart();
  document.getElementById("cartWindow").style.display = "flex";
}
function closeCart() {
  document.getElementById("cartWindow").style.display = "none";
}

document.getElementById("cartBtn").addEventListener("click", () => {
  openCart();
});

async function getItemSellQuantity(id) {
  const res = await fetch("/api/shop/items");
  const data = await res.json();
  if (!data.ok) throw new Error(data.error || "Failed to load");
  const item = data.items.find((i) => i.id === id);
  return item ? item.quantity : 1;
}

function renderCart() {
  const cart = getCart();
  const cartItems = document.getElementById("cartItems");
  const cartTotal = document.getElementById("cartTotal");
  if (!cart.length) {
    cartItems.innerHTML = "<div>Your cart is empty.</div>";
    cartTotal.textContent = "";
    document.getElementById("checkoutBtn").disabled = true;
    return;
  }
  cartItems.innerHTML = "";
  let total = 0;
  Promise.all(
    cart.map(async (item) => {
      const sellQuantity = await getItemSellQuantity(item.id);
      const orderAmount = item.qty / sellQuantity;
      const price = item.price * orderAmount;

      const div = document.createElement("div");
      div.style.display = "flex";
      div.style.justifyContent = "space-between";
      div.style.alignItems = "center";
      div.style.marginBottom = "8px";

      div.innerHTML = `
          <img src="${getImage(item.name)}" alt="${item.name}"
               style="width:50px;height:50px;margin-right:8px;image-rendering: pixelated;">
          <span class="item-name">${formatItemId(item.name)} × ${item.qty}</span>
          <span class="item-price">${price.toFixed(2)} $</span>
          <button style="background:#ff5555;padding:2px 8px;border-radius:4px;border:none;color:#fff;cursor:pointer;"
            onclick="removeFromCart(${item.id});renderCart();updateCartUI();">
            Remove
          </button>
        `;

      cartItems.appendChild(div);
      return price;
    }),
  ).then((prices) => {
    total = prices.reduce((sum, p) => sum + p, 0);
    cartTotal.textContent = "Total: " + total.toFixed(2) + " $";
    document.getElementById("checkoutBtn").disabled = false;
  });
}

// --- Address selection and checkout ---
function openAddressModal() {
  const user = getLoggedInUser();
  if (!user || !Array.isArray(user.adresses) || !user.adresses.length) {
    document.getElementById("addressMsg").textContent =
      "No addresses found for your account.";
    document.getElementById("addressList").innerHTML = "";
    document.getElementById("addressModal").style.display = "flex";
    return;
  }
  document.getElementById("addressMsg").textContent = "";
  const list = document.getElementById("addressList");
  list.innerHTML = "";
  user.adresses.forEach((addr, idx) => {
    const id = "addr_" + idx;
    const label = document.createElement("label");
    label.innerHTML = `<input type="radio" name="address" value="${addr}" id="${id}" ${idx === 0 ? "checked" : ""}/> ${addr}`;
    list.appendChild(label);
  });
  // add separator for other user addresses
  const separator = document.createElement("hr");
  separator.style.margin = "10px 0";
  list.appendChild(separator);

  getAllAddresses().then((addresses) => {
    const otherAddr = addresses.filter((addr) => !user.adresses.includes(addr));
    otherAddr.forEach((addr, idx) => {
      const id = "addr_" + idx;
      const label = document.createElement("label");
      label.innerHTML = `<input type="radio" name="address" value="${addr}" id="${id}"/> ${addr}`;
      list.appendChild(label);
    });
  });
  document.getElementById("addressModal").style.display = "flex";
}
function closeAddressModal() {
  document.getElementById("addressModal").style.display = "none";
}
document.getElementById("checkoutBtn").onclick = function () {
  const user = getLoggedInUser();
  if (!user) {
    closeCart();
    openLoginModal();
    return;
  }
  openAddressModal();
};
document.getElementById("addressForm").onsubmit = function (e) {
  e.preventDefault();
  const addr = document.querySelector('input[name="address"]:checked');
  if (!addr) {
    document.getElementById("addressMsg").textContent =
      "Please select an address.";
    return;
  }

  // from client send post to API
  const user = getLoggedInUser();
  const cart = getCart();
  const items = cart.map((item) => ({
    id: item.name,
    quantity: item.qty,
    sellQuantity: getItemSellQuantity(item.name),
  }));
  const request = {
    userId: user.username,
    addressId: addr.value,
    items: items,
  };
  console.log(request);
  fetch("/api/shop/items/buy", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify(request),
  })
    .then((response) => response.json())
    .then((data) => {
      // Conditional check
      if (data.ok === true) {
        console.log("Purchase successful!");
        showMsg("Order placed for address: " + addr.value);
        updateBalance();
      } else {
        console.log("Purchase failed or message did not match:", data);
        showMsg("Order failed");
      }
    })
    .catch((error) => {
      console.error("Error during fetch:", error);
    });

  closeAddressModal();
  closeCart();
  setCart([]);
  updateCartUI();
};

//get Item stock
async function getItemStock(itemId) {
  try {
    const res = await fetch(`/api/item/${itemId}`);
    const data = await res.json();
    if (!data.ok) throw new Error(data.error || "Failed to load");
    return data.item.count;
  } catch (error) {
    console.error("Error during fetch:", error);
    return null;
  }
}
function getCartItemCount(itemId) {
  const cart = getCart();
  const item = cart.find((item) => item.id === itemId);
  return item ? item.count : 0;
}

//check if item can be added to cart (if item_stock > cart_item_count)
async function canAddToCart(itemId) {
  const item_stock = (await getItemStock(itemId)) || 0;
  const cart_item_count = getCartItemCount(itemId);
  return item_stock > cart_item_count;
}

function convertStockToStackPlusRest(stock, quantity) {
  const stackSize = 64;
  const stacks = Math.floor(stock / stackSize);
  const rest = stock % stackSize;
  return { stacks, rest };
}

// --- Shop items logic ---
async function fetchItems() {
  const tableBody = document.querySelector("#items-list tbody");
  if (!tableBody) return;

  // Clear table and show loader
  tableBody.innerHTML = "<tr><td colspan='6'>Loading items...</td></tr>";

  try {
    const res = await fetch("/api/shop/items");
    const data = await res.json();
    if (!data.ok) throw new Error(data.error || "Failed to load");

    if (!data.items.length) {
      tableBody.innerHTML =
        "<tr><td colspan='6'>No items available to buy.</td></tr>";
      return;
    }

    tableBody.innerHTML = ""; // Clear loader
    // sort items alphabetically
    const sortedItems = [...data.items].sort((a, b) =>
      a.name.localeCompare(b.name),
    );

    const rows = await Promise.all(
      sortedItems.map(async (item) => {
        const item_stock = (await getItemStock(item.name)) || 0;
        const row = document.createElement("tr");
        row.innerHTML = `
          <td><img src="${getImage(item.name)}" alt="${item.name}" style="width:50px;height:50px;image-rendering: pixelated;"></td>
          <td class="item-name">${formatItemId(item.name)}</td>
          <td class="item-quantity">${item.quantity}</td>
          <td class="item-price">${item.price.toFixed(2)} $</td>
          <td class="item-stock">${convertStockToStackPlusRest(item_stock, item.quantity).stacks ? `${convertStockToStackPlusRest(item_stock, item.quantity).stacks} stacks </br> ` : ""}${convertStockToStackPlusRest(item_stock, item.quantity).rest ? `${convertStockToStackPlusRest(item_stock, item.quantity).rest} in stock` : ""} ${!convertStockToStackPlusRest(item_stock, item.quantity).stacks && !convertStockToStackPlusRest(item_stock, item.quantity).rest ? "Out of stock" : ""}
          <td><input type="number" min="1" max="${Math.floor(item_stock / item.quantity)}" id="quantity-input-${item.id}" style="width:40px;" value="1"></td>
          <td><button class="buy-btn" data-id="${item.id}" data-name="${item.name}" data-price="${item.price}" data-quantity="${item.quantity}">Get</button></td>
        `;
        return row;
      }),
    );

    tableBody.innerHTML = "";
    rows.forEach((row) => tableBody.appendChild(row));

    function getItemSellQuantity(item) {
      const quantity = parseInt(
        document.getElementById(`quantity-input-${item.id}`).value,
        10,
      );
      return quantity;
    }

    // Add event listeners for buy buttons
    Array.from(tableBody.getElementsByClassName("buy-btn")).forEach((btn) => {
      btn.onclick = function () {
        const item = {
          id: parseInt(this.dataset.id, 10),
          name: this.dataset.name,
          price: parseFloat(this.dataset.price),
          quantity: parseInt(this.dataset.quantity, 10),
        };
        addToCart(item, getItemSellQuantity(item));
        updateCartUI();
      };
    });
  } catch (err) {
    tableBody.innerHTML =
      "<tr><td colspan='6' style='color:#ff5555;'>Error loading items.</td></tr>";
  }
}

// --- Initialization ---
updateLoginUI();
updateCartUI();
fetchItems();
updateBalance();
cartPosition();

// Close modals on outside click
window.onclick = function (event) {
  ["loginModal", "cartWindow", "addressModal"].forEach((id) => {
    const el = document.getElementById(id);
    if (event.target === el) el.style.display = "none";
  });
};