import { applyLang, bindHeader, connectToApp, createMask, get, getUserId, post, t, toast } from "../bd-static/shared.js";

let ways = [];
let cards = [];
let form = { userId: getUserId(), cardType: "", cardName: "", cardNo: "", payee: "" };

bindHeader("bank_card");
applyLang();
document.getElementById("addButton").addEventListener("click", openAddSheet);
connectToApp().then(loadData);

async function loadData() {
  try {
    const [wayResponse, cardResponse] = await Promise.all([get("/wallet/bank/withdrawal_ways"), get("/wallet/bank-card/list")]);
    ways = wayResponse.body || [];
    cards = cardResponse.body || [];
    render();
  } catch (error) {
    toast(error.response?.errorMsg || error.message);
  }
}

function render() {
  const current = cards.find((item) => item.use);
  document.getElementById("currentCard").innerHTML = current
    ? `<div>${t("payee")}: ${current.payee || "-"}</div><div class="subtle">${t("card_number")}: ${current.cardNo || "-"}</div>`
    : `<div class="subtle">${t("no_bank_cards_in_use")}</div>`;
  const list = document.getElementById("cardList");
  list.innerHTML = "";
  if (!cards.length) {
    list.innerHTML = `<article class="card card-pad"><div class="subtle">${t("no_bank_cards_added")}</div></article>`;
    return;
  }
  cards.forEach((item) => {
    const card = document.createElement("article");
    card.className = "card card-pad";
    card.style.marginBottom = "10px";
    card.innerHTML = `
      <div>${t("payee")}: ${item.payee || "-"}</div>
      <div class="subtle">${t("card_number")}: ${item.cardNo || "-"}</div>
      <div class="row" style="margin-top:10px">
        <button class="danger-btn" type="button" data-delete>${t("delete")}</button>
        ${item.use ? `<button class="soft-btn" type="button" disabled>${t("using")}</button>` : `<button class="primary-btn" type="button" data-use>${t("use")}</button>`}
      </div>
    `;
    card.querySelector("[data-delete]").addEventListener("click", () => deleteCard(item.id));
    const use = card.querySelector("[data-use]");
    if (use) use.addEventListener("click", () => useCard(item.id));
    list.appendChild(card);
  });
}

function openAddSheet() {
  form = { userId: getUserId(), cardType: "", cardName: "", cardNo: "", payee: "" };
  const sheet = document.createElement("section");
  sheet.className = "sheet";
  sheet.innerHTML = `
    <div class="sheet-title">${t("add_new_payment_method")}</div>
    <div class="subtle">${t("withdrawal_method")}:</div>
    <div class="input-box"><select class="field" id="cardType"><option value="">${t("choose_withdrawal_method")}</option>${ways.map((way) => `<option value="${way}">${way}</option>`).join("")}</select></div>
    <div id="cardNameWrap" hidden><div class="subtle">${t("card_name")}:</div><div class="input-box"><input class="field" id="cardName" placeholder="${t("enter_card_name")}"></div></div>
    <div class="subtle">${t("card_number")}:</div><div class="input-box"><input class="field" id="cardNo" placeholder="${t("enter_card_number")}"></div>
    <div class="subtle">${t("payee")}:</div><div class="input-box"><input class="field" id="payee" placeholder="${t("enter_payee")}"></div>
    <div style="display:flex;justify-content:center;margin-top:10px"><button class="primary-btn" id="confirmAdd" type="button">${t("confirm")}</button></div>
  `;
  createMask(sheet);
  const type = sheet.querySelector("#cardType");
  type.addEventListener("change", () => {
    form.cardType = type.value;
    form.cardName = type.value === "USDT" ? "USDT" : "";
    sheet.querySelector("#cardNameWrap").hidden = type.value !== "BANK";
  });
  sheet.querySelector("#confirmAdd").addEventListener("click", async () => {
    form.cardName = type.value === "BANK" ? sheet.querySelector("#cardName").value.trim() : form.cardName;
    form.cardNo = sheet.querySelector("#cardNo").value.trim();
    form.payee = sheet.querySelector("#payee").value.trim();
    if (!form.cardType || !form.cardName || !form.cardNo || !form.payee) return;
    try {
      await post("/wallet/bank-card/add", form);
      document.getElementById("modalMask").remove();
      await loadData();
    } catch (error) {
      toast(error.response?.errorMsg || error.message);
    }
  });
}

async function deleteCard(id) {
  try {
    await post("/wallet/bank-card/delete", { id });
    await loadData();
  } catch (error) {
    toast(error.response?.errorMsg || error.message);
  }
}

async function useCard(id) {
  try {
    await post("/wallet/bank-card/use", { id });
    await loadData();
  } catch (error) {
    toast(error.response?.errorMsg || error.message);
  }
}