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

let existing = false;
let data = { id: "", contactNumber: "", category: "CARD", otherDescription: "", passportFrontUrl: "", passportBackUrl: "meaningless" };
let images = [];
let lastImg = localStorage.getItem("lastImgUrl") || "";

bindHeader("kyc");
applyLang();
document.getElementById("contactNumber").placeholder = t("enter_contact_number");
document.getElementById("otherDescription").placeholder = t("enter_other_description");
document.getElementById("contactNumber").addEventListener("input", sync);
document.getElementById("otherDescription").addEventListener("input", sync);
document.getElementById("submitButton").addEventListener("click", () => {
  if (existing) {
    confirmSubmit();
  } else {
    submit();
  }
});
connectToApp().then(load);

async function load() {
  try {
    const response = await get("/wallet/withdraw-info/list");
    if ((response.body || []).length > 0) {
      existing = true;
      data = { ...response.body[0] };
      images = safeJsonArray(data.passportFrontUrl);
    }
    render();
  } catch (error) {
    toast(error.response?.errorMsg || error.message);
  }
}

function sync() {
  data.contactNumber = document.getElementById("contactNumber").value.trim();
  data.otherDescription = document.getElementById("otherDescription").value;
  document.getElementById("wordCount").textContent = `${data.otherDescription.length}/100`;
  document.getElementById("submitButton").disabled = !(data.contactNumber && images.length > 0 && data.contactNumber.length <= 50);
}

function render() {
  document.getElementById("contactNumber").value = data.contactNumber || "";
  document.getElementById("otherDescription").value = data.otherDescription || "";
  const status = document.getElementById("statusLine");
  status.innerHTML = existing ? `<span class="subtle">${t("current_status")}</span> <span class="badge ${data.status === "PASS" ? "pass" : data.status === "NOT_PASS" ? "fail" : "wait"}">${statusText(data.status)}</span>` : "";
  const list = document.getElementById("imageList");
  list.innerHTML = "";
  images.forEach((url, index) => {
    const wrap = document.createElement("div");
    wrap.style.position = "relative";
    wrap.innerHTML = `<img src="${url}" alt="" style="display:block;width:15vw;aspect-ratio:1/1;object-fit:cover;border-radius:5vw"><button type="button" class="danger-btn" style="position:absolute;right:-6px;top:-6px;min-height:20px;padding:0 6px">×</button>`;
    wrap.querySelector("button").addEventListener("click", () => {
      images.splice(index, 1);
      render();
    });
    list.appendChild(wrap);
  });
  if (images.length < 3) {
    const add = document.createElement("button");
    add.type = "button";
    add.className = "card";
    add.style.cssText = "width:15vw;aspect-ratio:1/1;border-radius:5vw;font-size:2em;color:#32a96b";
    add.textContent = "+";
    add.addEventListener("click", pickImage);
    list.appendChild(add);
  }
  sync();
}

function statusText(status) {
  return { PASS: t("review_passed"), NOT_PASS: t("review_failed"), PENDING: t("awaiting_review") }[status] || status || "";
}

function pickImage() {
  window.renderData = receiveImage;
  window.getIosAccessOriginParam = receiveImage;
  if (window.FlutterPageControl) {
    window.FlutterPageControl.postMessage("uploadImgFile");
  } else if (window.app && typeof window.app.getImagePath === "function") {
    receiveImage(window.app.getImagePath());
  } else {
    toast("uploadImgFile");
  }
}

function receiveImage(raw) {
  try {
    if (!raw || raw === "\"\"") return;
    const parsed = JSON.parse(raw);
    const path = parsed.path || parsed.url || parsed;
    if (!path || path === lastImg) return;
    lastImg = path;
    localStorage.setItem("lastImgUrl", path);
    images.push(path);
    render();
  } catch (error) {
    toast(error.message);
  }
}

async function submit() {
  sync();
  if (document.getElementById("submitButton").disabled) return;
  data.passportFrontUrl = JSON.stringify(images);
  try {
    await post(existing ? "/wallet/withdraw-info/update" : "/wallet/withdraw-info/add", data);
    toast(t("application_submitted"));
    window.setTimeout(returnBack, 300);
  } catch (error) {
    toast(error.response?.errorMsg || error.message);
  }
}

function confirmSubmit() {
  const sheet = document.createElement("section");
  sheet.className = "sheet";
  sheet.style.bottom = "auto";
  sheet.style.left = "5%";
  sheet.style.right = "5%";
  sheet.style.top = "30%";
  sheet.style.borderRadius = "12px";
  sheet.innerHTML = `
    <div class="sheet-title">${t("tips")}</div>
    <div class="subtle" style="font-size:1.1em;margin-bottom:12px">${t("confirm_modify_kyc")}</div>
    <div class="row">
      <button class="soft-btn" type="button" data-cancel>${t("cancel")}</button>
      <button class="primary-btn" type="button" data-confirm>${t("confirm")}</button>
    </div>
  `;
  const mask = createMask(sheet);
  sheet.querySelector("[data-cancel]").addEventListener("click", () => mask.remove());
  sheet.querySelector("[data-confirm]").addEventListener("click", () => {
    mask.remove();
    submit();
  });
}

function returnBack() {
  const query = new URLSearchParams(window.location.search);
  const from = query.get("from");
  if (from) {
    const activeAction = query.get("activeAction");
    const target = new URL(from, window.location.origin);
    if (activeAction) target.searchParams.set("activeAction", activeAction);
    navigateTo(`${target.pathname}${target.search}`);
    return;
  }
  window.history.back();
}