document.getElementById("refresh").addEventListener("click", loadContextStack);

function loadContextStack() {
  const container = document.getElementById("contextContainer");
  container.innerHTML = "";

  browser.runtime.sendMessage({ type: "GET_CONTEXT_STACK" }).then(
    (response) => {
      if (!response || !response.contextStack) {
        container.innerHTML = "<p>No context stack found.</p>";
        return;
      }

      const contextStack = response.contextStack;
      for (const key in contextStack) {
        const row = document.createElement("div");
        row.classList.add("context-row");

        const keyDiv = document.createElement("div");
        keyDiv.classList.add("context-key");
        keyDiv.textContent = key;

        const valueDiv = document.createElement("div");
        valueDiv.classList.add("context-value");

        const input = document.createElement("input");
        input.value = contextStack[key];
        input.addEventListener("change", () => {
          browser.runtime.sendMessage({
            type: "UPDATE_CONTEXT_VALUE",
            key,
            value: input.value,
          }).then((updateResponse) => {
            if (updateResponse && updateResponse.success) {
              console.log(`Updated ${key} to ${input.value}`);
            } else {
              console.error(`Failed to update ${key}:`, updateResponse.error);
            }
          });
        });

        valueDiv.appendChild(input);
        row.appendChild(keyDiv);
        row.appendChild(valueDiv);
        container.appendChild(row);
      }
    },
  );
}

// Initial load when the panel opens.
loadContextStack();