import { applyLang, avatarError, bindHeader, connectToApp, get, post, t, toast } from "../bd-static/shared.js?v=auth-bridge-1";

const state = {
  query: "",
  invited: [],
  searched: [],
  selected: null,
  showSearch: false,
  locked: false
};

const input = document.getElementById("searchInput");
const clearButton = document.getElementById("clearButton");
const inviteButton = document.getElementById("inviteButton");
const list = document.getElementById("list");
const empty = document.getElementById("empty");

bindHeader("invite_become_agent");
applyLang();
input.placeholder = t("enter_user_id");

input.addEventListener("input", () => {
  state.query = input.value;
  clearButton.hidden = !state.query;
  state.showSearch = false;
  state.selected = null;
  inviteButton.disabled = true;
  if (!state.query.trim()) render();
});

input.addEventListener("keyup", (event) => {
  if (event.key === "Enter") search();
});

clearButton.addEventListener("click", () => {
  state.query = "";
  state.searched = [];
  state.selected = null;
  state.showSearch = false;
  input.value = "";
  clearButton.hidden = true;
  inviteButton.disabled = true;
  render();
});

inviteButton.addEventListener("click", inviteSelected);

async function init() {
  try {
    await connectToApp();
    await loadInvited();
  } catch (error) {
    toast(error.response?.errorMsg || error.message);
  }
}

async function loadInvited() {
  const response = await get("/team/bd/invite-message-own");
  state.invited = response.status && Array.isArray(response.body) ? response.body : [];
  render();
}

async function search() {
  if (state.locked) return;
  const value = state.query.trim();
  state.selected = null;
  inviteButton.disabled = true;
  if (!value) {
    state.showSearch = false;
    state.searched = [];
    render();
    return;
  }
  state.locked = true;
  state.showSearch = true;
  state.searched = [];
  render();
  try {
    const response = await get(`/user/user-profile/open-search?account=${encodeURIComponent(value)}`);
    state.searched = response.status && response.body ? [{ userProfile: response.body }] : [];
  } catch (error) {
    toast(error.response?.errorMsg || error.message);
  } finally {
    state.locked = false;
    render();
  }
}

function selectItem(item) {
  const profile = item.userProfile || {};
  if (state.selected?.id === profile.id) {
    state.selected = null;
    inviteButton.disabled = true;
    render();
    return;
  }
  state.selected = profile;
  inviteButton.disabled = item.status === 0 || item.status === 1;
  render();
}

async function inviteSelected() {
  if (!state.selected?.id) return;
  try {
    const response = await post("/team/bd/invite-agent", { inviteUserId: state.selected.id });
    if (response.status) toast(t("invitation_submitted"));
  } catch (error) {
    toast(error.response?.errorMsg || t("something_went_wrong"));
  }
  state.query = "";
  state.searched = [];
  state.selected = null;
  state.showSearch = false;
  input.value = "";
  clearButton.hidden = true;
  inviteButton.disabled = true;
  await loadInvited();
}

async function cancelInvitation(id) {
  try {
    const response = await post(`/team/bd/invite-agent-cancel/${id}`);
    if (response.status) {
      toast(t("application_cancelled"));
      await loadInvited();
    }
  } catch (error) {
    const message = error.response?.errorMsg?.replace(/^.*\]\s*/, "") || t("cancellation_failed_try_again");
    toast(message);
  }
}

function render() {
  const rows = state.showSearch ? state.searched : state.invited;
  list.innerHTML = "";
  rows.forEach((item) => list.appendChild(card(item)));
  empty.hidden = rows.length > 0;
}

function card(item) {
  const profile = item.userProfile || {};
  const node = document.createElement("article");
  node.className = "card card-pad";
  node.style.cssText = "position:relative;margin-top:12px";
  if (state.selected?.id === profile.id) node.style.outline = "2px solid #32a96b";
  node.innerHTML = `
    ${item.status === 0 ? `<span class="badge pending" style="position:absolute;right:0;top:0;border-radius:0 12px">${t("pending")}</span>` : ""}
    ${item.status === 1 ? `<span class="badge success" style="position:absolute;right:0;top:0;border-radius:0 12px">${t("success")}</span>` : ""}
    <div style="font-weight:700;margin-bottom:8px">${t("information")}:</div>
    <div class="row">
      <div style="display:flex;align-items:center;gap:10px;min-width:0">
        <img class="avatar" src="${profile.userAvatar || ""}" alt="">
        <div class="member-main">
          <div class="member-name">${profile.userNickname || "-"}</div>
          <div class="member-meta">${t("user_id_prefix")}${profile.account || "-"}</div>
        </div>
      </div>
      ${item.status === 0 ? `<button class="danger-btn" type="button" data-cancel>${t("cancel")}</button>` : ""}
    </div>
  `;
  avatarError(node.querySelector("img"));
  node.addEventListener("click", () => selectItem(item));
  const cancel = node.querySelector("[data-cancel]");
  if (cancel) {
    cancel.addEventListener("click", (event) => {
      event.stopPropagation();
      cancelInvitation(item.id);
    });
  }
  return node;
}

init();