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

const config = {
  title: "agency_list_link",
  billType: "BD",
  historyTitle: "revenue_details",
  listSummary: (data) => `${t("team_recharge")}: ${data.totalRecharge || 0}    ${t("team_salary")}: $${data.totalSalary || 0}`,
  itemSide: (item) => [`${t("salary")}: $${item.teamSalaryAmount || 0}`, `${t("recharge")}: $${item.teamRechargeAmount || 0}`, `${t("host")}: ${item.teamMemberCount || 0}`],
  historyEndpoint: "/team/bd/history",
  moreEndpoint: (billBelong) => historyMoreUrl("/team/bd/history/more", billBelong),
  countLabel: "agency_number"
};

init(config);

async function init(settings) {
  bindHeader(settings.title);
  applyLang();
  document.getElementById("historyButton").addEventListener("click", () => showHistory(settings));
  try {
    await connectToApp();
    const response = await get(`/team/bd/member-bill/list?type=${settings.billType}`);
    renderList(response.body || {}, settings);
  } catch (error) {
    toast(error.response?.errorMsg || error.message);
  }
}

function renderList(data, settings) {
  document.getElementById("billTitle").textContent = data.billTitle || "";
  document.getElementById("summaryLine").textContent = settings.listSummary(data);
  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">${settings.itemSide(item).map((line) => `<div>${line}</div>`).join("")}</div>
    `;
    avatarError(card.querySelector("img"));
    list.appendChild(card);
  });
}

async function showHistory(settings) {
  try {
    const historyResponse = await get(settings.historyEndpoint);
    const listResponse = await get(`/team/bd/member-bill/list?type=${settings.billType}`);
    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(settings.historyTitle)}</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, settings)));
  } catch (error) {
    toast(error.response?.errorMsg || error.message);
  }
}

function historyItem(item, settings) {
  const card = document.createElement("article");
  card.className = `salary-item ${statusClass(item.statusText)}`;
  const details = item.statusText === "In Progress"
    ? [
        `<div>${item.billTitle || ""}</div>`,
        `<div class="row"><span>${t("team_salary")}: $${item.teamSalaryAmount || 0}</span><span>${t("bd_income_salary")}: $${item.bdIncomeSalary || 0} (${item.bdRatioSalary || 0}%)</span></div>`,
        `<div class="row"><span>${t("team_top_up")}: $${item.teamRechargeAmount || 0}</span><span>${t("bd_income_top_up")}: $${item.bdIncomeRecharge || 0} (${item.bdRatioRecharge || 0}%)</span></div>`,
        `<div>${t(settings.countLabel)}: ${item.agencyNumber || item.bdNumber || 0}</div>`
      ]
    : [
        `<div>${item.billTitle || ""}</div>`,
        item.hitPolicyType === "TEAM_SALARY" ? `<div>${t("team_salary")}: $${item.teamSalaryAmount || 0}</div><div>${t("bd_income_salary")}: $${item.settlementSalary || 0} (${item.commissionRate || 0}%)</div>` : "",
        item.hitPolicyType === "TEAM_RECHARGE" ? `<div>${t("team_top_up")}: $${item.teamRechargeAmount || 0}</div><div>${t("bd_income_top_up")}: $${item.settlementSalary || 0} (${item.commissionRate || 0}%)</div>` : "",
        `<div>${t("num_teams") || t(settings.countLabel)} ${item.agencyNumber || item.bdNumber || 0}</div>`
      ];
  card.innerHTML = `<div class="status-tag">${statusText(item.statusText)}</div>${details.join("")}`;
  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, settings));
    card.appendChild(more);
  }
  return card;
}

async function showMore(billBelong, settings) {
  try {
    const endpoint = settings.moreEndpoint(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_top_up")}: $${data.teamTotalRecharge || data.teamRecharge || 0}</span>
        <span>${t("total_team_salary")}: $${data.teamTotalSalary || data.teamSalary || 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.userAvatar || item.bdUserAvatar || ""}" alt="">
        <div class="member-main">
          <div class="member-name">${item.userName || 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("recharge")}: $${item.recharge || 0}</div>
          <div>${t("host")}: ${item.hostCount || item.agencyCount || 0}</div>
        </div>
      `;
      avatarError(card.querySelector("img"));
      list.appendChild(card);
    });
  } catch (error) {
    toast(error.response?.errorMsg || error.message);
  }
}