import { applyLang, avatarError, bindHeader, connectToApp, createMask, get, historyMoreUrl, isCompletedStatus, money, statusClass, statusText, t, toast } from "../bd-static/shared.js";

bindHeader("bd_list_link");
applyLang();
document.getElementById("historyButton").addEventListener("click", showHistory);
init();

async function init() {
  try {
    await connectToApp();
    const response = await get("/team/bd/member-bill/list?type=BDLEADER");
    renderList(response.body || {});
  } catch (error) {
    toast(error.response?.errorMsg || error.message);
  }
}

function renderList(data) {
  document.getElementById("billTitle").textContent = data.billTitle || "";
  document.getElementById("summaryLine").textContent = `${t("number_of_bd")}: ${data.memberCount || 0}    ${t("team_salary")}: $${data.totalSalary || 0}`;
  const list = document.getElementById("memberList");
  list.innerHTML = "";
  (data.memberBillList || []).forEach((item) => {
    const card = document.createElement("article");
    card.className = "member-card";
    card.innerHTML = `
      <img class="avatar" src="${item.agentAvatar || ""}" alt="">
      <div class="member-main">
        <div class="member-name">${item.agentName || "-"}</div>
        <div class="member-meta">${t("user_id_prefix")}${item.agentAccount || "-"}</div>
      </div>
      <div class="member-side">
        <div>${t("team_salary")}: $${item.teamSalaryAmount || 0}</div>
        <div>${t("agencies")}: ${item.teamMemberCount || 0}</div>
      </div>
    `;
    avatarError(card.querySelector("img"));
    list.appendChild(card);
  });
}

async function showHistory() {
  try {
    const historyResponse = await get("/team/bd/leader/history");
    const listResponse = await get("/team/bd/member-bill/list?type=BDLEADER");
    const history = historyResponse.body || {};
    const bill = listResponse.body || {};
    if (bill.bdHistoryCO) {
      history.incomeDetails = history.incomeDetails || [];
      history.incomeDetails.unshift(bill.bdHistoryCO);
    }
    const sheet = document.createElement("section");
    sheet.className = "sheet";
    sheet.innerHTML = `
      <div class="sheet-title">${t("bd_leader_history")}</div>
      <div class="card card-pad">
        <div>${t("total_income")} $${money(history.totalIncome || 0)}</div>
        <div>${t("previous_period_income")}: $${money(history.previousPeriodIncome || 0)}</div>
      </div>
      <div class="section-title">${t("income_details_label")}</div>
      <div id="historyItems"></div>
    `;
    createMask(sheet);
    const holder = sheet.querySelector("#historyItems");
    (history.incomeDetails || []).forEach((item) => holder.appendChild(historyItem(item)));
  } catch (error) {
    toast(error.response?.errorMsg || error.message);
  }
}

function historyItem(item) {
  const card = document.createElement("article");
  card.className = `salary-item ${statusClass(item.statusText)}`;
  card.innerHTML = `
    <div class="status-tag">${statusText(item.statusText)}</div>
    <div>${item.billTitle || ""}</div>
    <div class="row">
      <span>${t("bd_number")}: ${item.bdNumber || 0}</span>
      <span>${t("team_salary")}: $${item.teamSalaryAmount || 0}</span>
    </div>
  `;
  if (isCompletedStatus(item.statusText)) {
    const more = document.createElement("button");
    more.className = "more-btn";
    more.type = "button";
    more.textContent = t("more");
    more.addEventListener("click", () => showMore(item.billBelong));
    card.appendChild(more);
  }
  return card;
}

async function showMore(billBelong) {
  try {
    const endpoint = historyMoreUrl("/team/bd/leader/history/more", billBelong);
    if (!endpoint) return;
    const response = await get(endpoint);
    const data = response.body || {};
    const sheet = document.createElement("section");
    sheet.className = "sheet";
    sheet.innerHTML = `
      <div class="sheet-title">${data.period || ""}</div>
      <div class="row card card-pad">
        <span>${t("team_salary")}: $${data.teamSalary || 0}</span>
        <span>${t("bd_number")}: ${data.bdNumber || 0}</span>
      </div>
      <div id="moreMembers"></div>
    `;
    createMask(sheet);
    const list = sheet.querySelector("#moreMembers");
    (data.memberDetails || []).forEach((item) => {
      const card = document.createElement("article");
      card.className = "member-card";
      card.innerHTML = `
        <img class="avatar" src="${item.bdUserAvatar || ""}" alt="">
        <div class="member-main">
          <div class="member-name">${item.bdUserName || "-"}</div>
          <div class="member-meta">${t("user_id_prefix")}${item.account || "-"}</div>
        </div>
        <div class="member-side">
          <div>${t("salary")}: $${item.salary || 0}</div>
          <div>${t("agencies")}: ${item.agencyCount || 0}</div>
        </div>
      `;
      avatarError(card.querySelector("img"));
      list.appendChild(card);
    });
  } catch (error) {
    toast(error.response?.errorMsg || error.message);
  }
}