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

const state = { card: null, kyc: null };
const bankCard = document.getElementById("bankCard");
const moreCards = document.getElementById("moreCards");
const kycCard = document.getElementById("kycCard");
const kycStatus = document.getElementById("kycStatus");
const kycMore = document.getElementById("kycMore");
const kycColon = document.getElementById("kycColon");
const query = new URLSearchParams(window.location.search);

bindHeader("bank_cards_link");
applyLang();
moreCards.addEventListener("click", () => navigateTo("/bank-card"));
kycMore.addEventListener("click", () => navigateTo("/KYC"));

async function init() {
  try {
    await connectToApp();
    const [cardsResult, kycResult] = await Promise.allSettled([loadCards(), loadKyc()]);
    [cardsResult, kycResult].forEach((result) => {
      if (result.status === "rejected") toast(result.reason?.response?.errorMsg || result.reason?.message);
    });
  } catch (error) {
    toast(error.response?.errorMsg || error.message);
  } finally {
    render();
  }
}

async function loadCards() {
  const response = await get("/wallet/bank-card/list");
  const body = response.status && Array.isArray(response.body) ? response.body : [];
  state.card = body.find((item) => item.use) || null;
}

async function loadKyc() {
  const response = await get("/wallet/withdraw-info/list");
  const body = response.status && Array.isArray(response.body) ? response.body : [];
  state.kyc = body.length > 0 ? { ...body[0], previewUrls: safeJsonArray(body[0].passportFrontUrl) } : null;
}

function render() {
  moreCards.hidden = !state.card;
  bankCard.innerHTML = state.card
    ? `
      <div style="display:flex;flex-direction:column;gap:8px">
        <div><b>${t("category")}</b></div>
        <div class="subtle">${state.card.cardType || ""}</div>
        <div><b>${t("card_number_label")}</b></div>
        <div class="subtle">${state.card.cardNo || ""}</div>
        <div><b>${t("payee")}:</b></div>
        <div class="subtle">${state.card.payee || ""}</div>
      </div>
    `
    : `
      <button class="menu-link" type="button" id="addCard">
        <span>${t("add_payment_method")}</span>
        <img class="arrow" src="../bd-static/icons/arrow.svg" alt="">
      </button>
    `;
  const addCard = document.getElementById("addCard");
  if (addCard) addCard.addEventListener("click", () => navigateTo("/bank-card"));

  kycColon.hidden = !state.kyc;
  kycMore.hidden = !state.kyc;
  kycStatus.innerHTML = statusHtml(state.kyc?.status);
  kycCard.innerHTML = state.kyc ? kycDetails(state.kyc) : `
    <button class="menu-link" type="button" id="completeKyc">
      <span>${t("complete_information")}</span>
      <img class="arrow" src="../bd-static/icons/arrow.svg" alt="">
    </button>
  `;
  const completeKyc = document.getElementById("completeKyc");
  if (completeKyc) completeKyc.addEventListener("click", () => navigateTo("/KYC"));

  const from = query.get("from");
  const activeAction = query.get("activeAction");
  if (from || activeAction) {
    sessionStorage.setItem("bankCardsBackQuery", JSON.stringify({ from, activeAction }));
  }
}

function statusHtml(status) {
  if (status === "PASS") return `<span class="badge pass">${t("review_passed")}</span>`;
  if (status === "NOT_PASS") return `<span class="badge fail">${t("review_failed")}</span>`;
  if (status === "PENDING") return `<span class="badge wait">${t("awaiting_review")}</span>`;
  return "";
}

function kycDetails(item) {
  const images = (item.previewUrls || []).map((src) => `<img src="${src}" alt="" style="width:15vw;aspect-ratio:1/1;object-fit:cover;border-radius:10px">`).join("");
  return `
    <div style="display:flex;flex-direction:column;gap:8px">
      <div><b>${t("passport_id_card_title")}:</b></div>
      <div style="display:flex;gap:8px;flex-wrap:wrap">${images}</div>
      <div><b>${t("contact_number")}:</b></div>
      <div class="subtle">${item.contactNumber || ""}</div>
      <div><b>${t("other_description")}:</b></div>
      <div class="subtle">${item.otherDescription || ""}</div>
    </div>
  `;
}

init();