(() => {
  const DATA_URL = "https://insights.devana.pl/api/rooms/1CRdSJiZsq3azszNQJ7GX4/online-members";
  const scriptEl = document.currentScript;
  
  if (!scriptEl) {
      return;
  }

  const root = document.createElement("div");
  root.style.fontFamily = "system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif";
  root.style.fontSize = "14px";
  root.style.lineHeight = "1.35";
  root.style.display = "block";

  scriptEl.insertAdjacentElement("afterend", root);

  const escapeHtml = (s) => String(s).replace(/[&<>"']/g, (c) => ({
      "&": "&amp;",
      "<": "&lt;",
      ">": "&gt;",
      '"': "&quot;",
      "'": "&#39;",
    }[c]));

  const render = (data) => {
    const roomName = data?.roomName ?? "???";
    const onlineCount = Number(data?.onlineCount ?? 0);
    const members = Array.isArray(data?.members) ? data.members : [];

    // container
    const wrap = document.createElement("div");

    // header
    const header = document.createElement("div");
    header.style.marginBottom = "8px";

    if (onlineCount > 0) {
      header.innerHTML = `W pokoju <b>${escapeHtml(roomName)}</b> jest ${onlineCount} osób:`;
    } else {
      header.innerHTML = `W pokoju <b>${escapeHtml(roomName)}</b> nikogo nie ma.`;
    }

    wrap.appendChild(header);

    if (onlineCount > 0) {
      const list = document.createElement("div");
      list.style.display = "flex";
      list.style.flexDirection = "column";
      list.style.gap = "6px";

      for (const m of members) {
        const row = document.createElement("div");
        row.style.display = "flex";
        row.style.alignItems = "center";
        row.style.gap = "8px";

        const avatarSize = 22;

        let avatarEl;
        if (m?.avatar) {
          avatarEl = document.createElement("img");
          avatarEl.src = String(m.avatar);
          avatarEl.alt = "";
          avatarEl.loading = "lazy";
          avatarEl.referrerPolicy = "no-referrer";
          avatarEl.style.width = avatarSize + "px";
          avatarEl.style.height = avatarSize + "px";
          avatarEl.style.borderRadius = "999px";
          avatarEl.style.objectFit = "cover";
          avatarEl.style.flex = "0 0 auto";
        } else {
          avatarEl = document.createElement("div");
          avatarEl.style.width = avatarSize + "px";
          avatarEl.style.height = avatarSize + "px";
          avatarEl.style.borderRadius = "999px";
          avatarEl.style.background = "#d5d5d5";
          avatarEl.style.flex = "0 0 auto";
        }

        const nickEl = document.createElement("div");
        nickEl.style.whiteSpace = "nowrap";
        nickEl.style.overflow = "hidden";
        nickEl.style.textOverflow = "ellipsis";
        nickEl.style.maxWidth = "260px";

        const bot = m?.isBot ? " 🤖" : "";
        nickEl.innerHTML = `${escapeHtml(m?.nick ?? "???")}${bot}`;

        row.appendChild(avatarEl);
        row.appendChild(nickEl);
        list.appendChild(row);
      }

      wrap.appendChild(list);
    }

    root.innerHTML = "";
    root.appendChild(wrap);
  };

  const renderError = (msg) => {
    root.innerHTML = `
      <div style="
        font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
        font-size: 13px;
      ">
        ${escapeHtml(msg)}
      </div>
    `;
  };

  // placeholder
  root.textContent = "Ładowanie...";

  fetch(DATA_URL, {
    method: "GET",
    headers: { "Accept": "application/json" },
    credentials: "omit",
  })
    .then((r) => {
      if (!r.ok) throw new Error(`HTTP ${r.status}`);
      return r.json();
    })
    .then(render)
    .catch((e) => renderError(`Nie udało się pobrać danych (${String(e.message || e)}).`));
})();