const form = document.getElementById("form");
const file = document.getElementById("file");
const nameI = document.getElementById("username");
const btn = document.getElementById("submit");
const toasts = document.getElementById("toasts");
const segSkin = document.getElementById("seg-skin");
const segCape = document.getElementById("seg-cape");

let kind = "skin";

segSkin.onclick = () => {
  kind = "skin";
  segSkin.classList.add("active");
  segCape.classList.remove("active");
  segSkin.setAttribute("aria-selected", "true");
  segCape.setAttribute("aria-selected", "false");
};

segCape.onclick = () => {
  kind = "cape";
  segCape.classList.add("active");
  segSkin.classList.remove("active");
  segCape.setAttribute("aria-selected", "true");
  segSkin.setAttribute("aria-selected", "false");
};

function toast(msg, type = "ok") {
  const t = document.createElement("div");
  t.className = "toast " + type;
  t.innerHTML =
    '<div class="dot"></div><div style="line-height:1.35">' +
    msg +
    '</div><div class="x" aria-label="Закрити">✕</div>';
  toasts.appendChild(t);
  const close = () => {
    t.style.transition = "opacity .15s ease, transform .15s ease";
    t.style.opacity = "0";
    t.style.transform = "translateY(-6px)";
    setTimeout(() => t.remove(), 180);
  };
  t.querySelector(".x").onclick = close;
  setTimeout(close, 4200);
}

function validName(v) {
  return /^[A-Za-z0-9_]{2,16}$/.test(v);
}

form.addEventListener("submit", async (e) => {
  e.preventDefault();
  const v = nameI.value.trim();
  if (!validName(v)) {
    toast("Неправильний нік.", "err");
    return;
  }
  if (!file.files?.length) {
    toast("Оберіть PNG.", "err");
    return;
  }

  const fd = new FormData();
  fd.append("username", v);
  fd.append("file", file.files[0]);

  const url = kind === "cape" ? "/upload-cape" : "/upload";

  btn.disabled = true;
  btn.textContent = "Завантаження…";
  try {
    const res = await fetch(url, { method: "POST", body: fd });
    const text = await res.text();
    let data;
    try {
      data = JSON.parse(text);
    } catch {}
    if (!res.ok || !data || data.status !== "ok") {
      toast(data && data.error ? data.error : "Помилка завантаження.", "err");
    } else {
      toast(
        kind === "cape" ? "Готово. Плащ збережено." : "Готово. Скін збережено.",
        "ok"
      );
      form.reset();
      kind = "skin";
      segSkin.click();
    }
  } catch {
    toast("Мережа недоступна.", "err");
  } finally {
    btn.disabled = false;
    btn.textContent = "Завантажити";
  }
});