async function post(action, body = {}) {
  try {
    await fetch(`/api/windows/${action}`, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(body),
    });
  } catch {
    // the next poll shows the real state
  }
}

function tile(label, onclick) {
  const b = document.createElement("button");
  b.className = "wtile";
  b.textContent = label;
  b.onclick = onclick;
  return b;
}

export default {
  title: "Windows",
  tab: "Windows",
  interval: 1,

  mount(el) {
    el.innerHTML = `<div class="windows">
      <section class="deck-block"><h3>Workspaces</h3><div class="ws"></div></section>
      <section class="deck-block"><h3>Launches</h3><div class="launches"></div></section>
      <section class="deck-block"><h3>Windows</h3><div class="winlist"></div></section>
    </div>`;
  },

  update(st, el) {
    const ws = el.querySelector(".ws");
    ws.textContent = "";
    for (const id of st.workspaces ?? []) {
      const b = tile(String(id), () => post("workspace", { n: id }));
      b.classList.toggle("on", (st.windows ?? []).some((w) => w.workspace === id));
      ws.append(b);
    }

    const list = el.querySelector(".winlist");
    list.textContent = "";
    for (const w of (st.windows ?? []).slice(0, 8)) {
      const row = document.createElement("div");
      row.className = "wrow";
      row.classList.toggle("on", Boolean(w.active));
      const title = document.createElement("span");
      title.className = "wt";
      title.textContent = w.title || w.class;
      title.onclick = () => post("focus", { address: w.address });
      const close = document.createElement("button");
      close.className = "wclose";
      close.textContent = "×";
      close.setAttribute("aria-label", "Close window");
      close.onclick = () => post("close", { address: w.address });
      row.append(title, close);
      list.append(row);
    }

    const launches = el.querySelector(".launches");
    launches.textContent = "";
    for (const item of st.launches ?? []) {
      const b = document.createElement("button");
      b.className = "wtile launch";
      b.setAttribute("aria-label", item.label || item.key);
      b.title = item.label || item.key;
      if (item.icon) {
        const icon = document.createElement("img");
        icon.className = "laticon";
        icon.src = `/icons/${item.icon}.svg`;
        icon.alt = "";
        b.append(icon);
      } else {
        b.textContent = item.label || item.key;
      }
      b.onclick = () => post("launch", { key: item.key });
      launches.append(b);
    }
  },
};