let img;
let update;
let playerID;
let lastPowerID = 0;

async function useInv(id, type) {
  try {
    const resp = await $.ajax({
      url: `${window.api}player/inv/${type}/${id}`,
      type: "GET",
      xhrFields: { withCredentials: true },
    });
    msg(resp.Status, resp.Message);
  } catch (err) {
    msg(
      err.responseJSON?.Status || "Erro",
      err.responseJSON?.Message || "Algo deu errado.",
    );
  }
}

function invpower() {
  $.ajax({
    url: `${window.api}player/inv/ph`,
    type: "GET",
    xhrFields: { withCredentials: true },
    success(resp) {
      const $invpower = $("#powers ul");

      let latestId = lastPowerID;

      resp.InvPws.forEach((item) => {
        if (item.id > lastPowerID) {
          const $li = $("<li>");
          $li.append($("<a>").text(item.name));

          const $del = $("<a>")
            .attr("id", "DelBTN")
            .append(
              $("<span>").addClass("material-symbols-outlined").text("close"),
            );

          $li.on("click", () => alert(item.desc));
          $del.on("click", (e) => {
            e.stopPropagation();
            useInv(item.id, "ph/del");
            $del.closest("li").remove();
          });

          $li.append($del);
          $invpower.append($li);

          if (item.id > latestId) latestId = item.id;
        }
      });

      lastPowerID = latestId;
    },
  });
}

function invPlayer() {
  $.ajax({
    url: `${window.api}player/inv`,
    type: "GET",
    xhrFields: { withCredentials: true },
    success(resp) {
      const $invList = $("#inv ul").empty();

      resp.InvItems.forEach((item) => {
        const $li = $("<li>");
        $li.append($("<label>").text(item.itemname));
        $li.append($("<label>").text(`tem: ${item.itemquantidade}`));
        $li.append($("<label>").text(`peso: ${item.itempeso}`));

        const $delBtn = $("<a>")
          .attr("id", "DelBTN")
          .append(
            $("<span>").addClass("material-symbols-outlined").text("close"),
          );

        $li.on("click", () => useInv(item.id, "use"));
        $delBtn.on("click", (e) => {
          e.stopPropagation();
          useInv(item.id, "del");
        });

        $li.append($delBtn);
        $invList.append($li);
      });

      $("#invPA").text(resp.invPeso);
    },
    error() {
      $("#inv ul").empty();
      $("#invPA").text(0);
    },
  });
}

function invPowerAdd() {
  const habilidade = $("input[name='habilidade']").val();
  const desc = $("textarea[name='desc']").val();

  $.ajax({
    url: `${window.api}player/inv/ph`,
    type: "POST",
    data: { nameph: habilidade, descph: desc },
    xhrFields: { withCredentials: true },
    success(resp) {
      msg(resp.Status, resp.Message);
      $("input[name='habilidade'], textarea[name='desc']").val("");
    },
    error(resp) {
      msg(
        resp.responseJSON?.Status || "Erro",
        resp.responseJSON?.Message || "Algo deu errado.",
      );
    },
  });
}

function invAdd() {
  const nome = $("input[name='item_name']").val();
  const durabilidade = $("select[name='durabilite']").val();
  const peso = $("input[name='peso']").val();
  const quantidade = $("input[name='quantidade']").val();

  $.ajax({
    url: `${window.api}player/inv`,
    type: "POST",
    data: { item_name: nome, durabilite: durabilidade, peso, quantidade },
    xhrFields: { withCredentials: true },
    success(resp) {
      msg(resp.Status, resp.Message);
      $(
        "input[name='peso'], input[name='quantidade'], input[name='item_name'], select",
      ).val("");
      $("select[name='durabilite']").val("duravel?");
    },
    error(resp) {
      msg(
        resp.responseJSON?.Status || "Erro",
        resp.responseJSON?.Message || "Algo deu errado.",
      );
    },
  });
}

function loadFicha() {
  $.ajax({
    url: `${window.api}player`,
    type: "GET",
    xhrFields: { withCredentials: true },
    success(resp) {
      if (!img) {
        img = resp.Foto;
        $("#hero").attr("src", `data:image/*;base64,${resp.Foto}`);
      }

      if (!playerID) playerID = resp.PlayerID;
      $("#vdp").text(resp.Vida);
      $("#nmp").text(resp.PlayerName);
      $("#lvp").text(resp.Level);
      $("#idp").text(resp.Idade);
      $("#alp").text(resp.Altura);
      $("#conhecimento").text(resp.Conhecimento);
      $("#força").text(resp.Força);
      $("#destresa").text(resp.Destresa);
      $("#constitution").text(resp.Constituição);
      $("#inteligencia").text(resp.Inteligencia);
      $("#cárisma").text(resp.Cárisma);
      $("#mip").text(resp.Inventario);
      $("#lore").text(resp.Descrição);

      if ($("#lore_edit").attr("placeholder") !== resp.Descrição) {
        $("#lore_edit").attr("placeholder", resp.Descrição);
        $("#lore_edit").val(resp.Descrição);
      }

      const statusMap = [
        { limit: 0, text: "Status: morto(a)" },
        { limit: 5, text: "Status: morrendo" },
        { limit: 50, text: "Status: muito ferido(a)" },
        { limit: 70, text: "Status: ferido(a)" },
        { limit: 100, text: "Status: normal" },
      ];

      const status = statusMap.find((s) => resp.VidaPorcentagem <= s.limit);
      $("#statusPlayer").text(status?.text || "Status: desconhecido");
    },
    error() {
      window.location.href = "login.html";
    },
  });
}

function rollLoad() {
  $.ajax({
    url: `${window.api}roll`,
    type: "GET",
    xhrFields: { withCredentials: true },
    success(resp) {
      let latestId = update || 0;

      resp.Logs.forEach((item) => {
        if (item.id > (update || 0)) {
          const $li = $("<li>");
          $li.append($("<label>").text(item.log));
          $("#log").append($li);

          if (item.id > latestId) latestId = item.id;
        }
      });

      update = latestId;
      $("#log").scrollTop($("#log")[0].scrollHeight);
    },
  });
}

function roll(dado) {
  $.ajax({
    url: `${window.api}roll`,
    type: "POST",
    data: { roll: dado },
    xhrFields: { withCredentials: true },
    success(resp) {
      msg(resp.Status, resp.Message);
    },
    error(resp) {
      msg(
        resp.responseJSON?.Status || "Erro",
        resp.responseJSON?.Message || "Falha ao rolar dados.",
      );
    },
  });
}

function share(textToCopy) {
  if (navigator.clipboard) {
    return navigator.clipboard
      .writeText(textToCopy)
      .then(() => msg("success", "Link copiado com sucesso!"))
      .catch(() => msg("error", "Erro ao copiar link"));
  }
  const $tempInput = $("<input>");
  $("body").append($tempInput);
  $tempInput.val(textToCopy).select();
  try {
    document.execCommand("copy");
    msg("success", "Link copiado com sucesso!");
  } catch (err) {
    msg("error", "Erro ao copiar link");
  }
  $tempInput.remove();
}

$(document).ready(function () {
  $(".updown").click(function () {
    const atb = $(this).data("atb");
    const dir = $(this).data("updown");

    $.ajax({
      url: `${window.api}player/${atb}/${dir}`,
      type: "PATCH",
      xhrFields: { withCredentials: true },
      error(resp) {
        msg(
          resp.responseJSON?.Status || "Erro",
          resp.responseJSON?.Message || "Algo deu errado.",
        );
      },
    });
  });

  $(".inv_add").on("click", function () {
    invAdd();
  });

  $(".powerAdd").on("click", function () {
    invPowerAdd();
  });

  $(".share").on("click", function () {
    const textToCopy = `${window.location.origin}/profile.html?id=${playerID}`;
    share(textToCopy);
  });

  $(".obs").on("click", function () {
    const textToCopy = `${window.location.origin}/obs.html?id=${playerID}`;
    share(textToCopy);
  });

  setInterval(() => {
    loadFicha();
    rollLoad();
    invPlayer();
    invpower();
  }, 1000);

  loadFicha();
});