async function getJwt() {
  return new Promise((resolve) => {
    chrome.runtime.sendMessage({ type: "GET_JWT" }, (response) => {
      resolve(response?.jwt || "");
    });
  });
}

async function callProtectedApi(path, payload) {
  return new Promise((resolve, reject) => {
    chrome.runtime.sendMessage({ type: "CALL_API", path, payload }, (response) => {
      if (response?.ok) {
        resolve(response.data);
      } else {
        reject(new Error(response?.error || "API call failed"));
      }
    });
  });
}

async function main() {
  const root = document.getElementById("root");
  const jwt = await getJwt();

  root.innerHTML = `
    <div style="font-family: Arial; padding: 12px; width: 260px;">
      <div style="font-weight: 800;">Extension</div>
      <div style="margin-top: 8px;">Authed: ${jwt ? "true" : "false"}</div>
      <button id="btn" style="margin-top: 10px; padding: 8px 12px; cursor: pointer; border: 1px solid #ccc; border-radius: 4px; background: #f0f0f0;">Test action</button>
      <div id="out" style="margin-top: 10px; font-size: 12px; word-break: break-all;"></div>
    </div>
  `;

  document.getElementById("btn").onclick = async () => {
    const out = document.getElementById("out");
    try {
      const data = await callProtectedApi("/api/action", { ping: true });
      out.textContent = JSON.stringify(data);
    } catch (e) {
      out.textContent = String(e.message || e);
    }
  };
}
main();