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

const state = {
  tabs: [],
  active: 0,
  goods: [],
  selected: null,
  locked: true
};

const tabs = document.getElementById("tabs");
const goods = document.getElementById("goods");
const typeMap = { frames: "AVATAR_FRAME", vehicles: "RIDE", vip: "NOBLE_VIP" };

bindHeader("item_distribution");
applyLang();

async function init() {
  try {
    await connectToApp();
    await loadPermissions();
    renderTabs();
    if (state.tabs.length) await loadGoods();
  } catch (error) {
    toast(error.response?.errorMsg || error.message);
  }
}

async function loadPermissions() {
  const response = await get("/sys/bd/list-permission");
  const body = response.status && Array.isArray(response.body) ? response.body : [];
  const next = [];
  if (body.includes("AVATAR_FRAME")) next.push({ id: 1, name: "frames" });
  if (body.includes("RIDE")) next.push({ id: 2, name: "vehicles" });
  if (body.some((item) => item.startsWith("NOBLE_VIP"))) next.push({ id: 3, name: "vip" });
  state.tabs = next;
  state.active = 0;
}

async function loadGoods() {
  const tab = state.tabs[state.active];
  if (!tab) {
    state.goods = [];
    renderGoods();
    return;
  }
  const response = await get(`/sys/bd/props?propsType=${typeMap[tab.name]}&currencyType=GOLD`);
  state.goods = response.status && Array.isArray(response.body) ? response.body : [];
  renderGoods();
}

function renderTabs() {
  tabs.innerHTML = "";
  state.tabs.forEach((tab, index) => {
    const button = document.createElement("button");
    button.type = "button";
    button.className = `tab${state.active === index ? " active" : ""}`;
    button.textContent = t(tab.name);
    button.addEventListener("click", async () => {
      if (state.active === index) return;
      state.active = index;
      renderTabs();
      await loadGoods();
    });
    tabs.appendChild(button);
  });
  if (state.tabs.length) {
    const line = document.createElement("div");
    line.className = "tab-line";
    line.style.left = `calc(${(state.active + 0.5) * (100 / state.tabs.length)}% - 7.5px)`;
    tabs.appendChild(line);
  }
}

function renderGoods() {
  goods.innerHTML = "";
  state.goods.forEach((item) => {
    const card = document.createElement("button");
    card.type = "button";
    card.className = "goods-card";
    card.innerHTML = `
      <img src="${item.cover || ""}" alt="">
      <span class="primary-btn" style="min-height:0;margin-top:10px;padding:5px 14px">${t("send")}</span>
    `;
    card.addEventListener("click", () => openSend(item));
    goods.appendChild(card);
  });
}

function openSend(item) {
  state.selected = item;
  state.locked = true;
  const panel = document.createElement("section");
  panel.className = "card card-pad";
  panel.style.cssText = "width:90%;margin:20vh auto 0;display:flex;flex-direction:column;align-items:center;gap:12px";
  panel.innerHTML = `
    <img src="${item.cover || ""}" alt="" style="width:60%;aspect-ratio:1/1;object-fit:contain">
    <div><span class="subtle">${t("validity")}:</span> <b>3${t("day")}</b></div>
    <div class="row" style="width:100%">
      <input class="field input-box" id="giftUserId" type="text" placeholder="${t("enter_user_id_placeholder")}">
      <button class="primary-btn" id="confirmGift" type="button">${t("confirm")}</button>
    </div>
  `;
  const mask = createMask(panel);
  const input = panel.querySelector("#giftUserId");
  panel.querySelector("#confirmGift").addEventListener("click", () => sendGift(input.value.trim(), mask));
}

async function sendGift(account, mask) {
  if (!state.locked) return;
  state.locked = false;
  try {
    const user = await get(`/user/user-profile/open-search?account=${encodeURIComponent(account)}`);
    if (user.status && user.body) {
      const response = await post("/sys/bd/send", { propsId: state.selected.id, acceptUserId: user.body.id });
      if (response.errorCode === 0 && response.status) {
        mask.remove();
        toast(t("gift_delivery_successful"));
        state.selected = null;
      } else {
        state.locked = true;
      }
    } else {
      state.locked = true;
    }
  } catch (error) {
    toast(error.response?.errorMsg || error.message);
    state.locked = true;
  }
}

init();