// content.js - Listens for clicks and sends element attributes to local server

const SERVER_URL = "http://localhost:3000/record";

document.addEventListener("click", async (event) => {
  let el = event.target;

  // Walk up the DOM until we find a button, link, or element with aria-label
  while (
    el &&
    el !== document.body &&
    el.tagName.toLowerCase() !== "button" &&
    el.tagName.toLowerCase() !== "a" &&
    !el.getAttribute("aria-label")
  ) {
    el = el.parentElement;
    console.log("[Cypress Recorder] Walking up from:", el.tagName, el.className);
  }

  // Fall back to original target if nothing useful found
  if (!el || el === document.body) el = event.target;

  // ... rest stays the same

  const payload = {
    classes: Array.from(el.classList),
    id: el.id || null,
    ariaLabel: el.getAttribute("aria-label") || null,
    tag: el.tagName.toLowerCase(),
    text: el.innerText?.trim().slice(0, 100) || null, // bonus: visible text
  };

  console.log("[Cypress Recorder] Click captured:", payload);

  try {
    const response = await fetch(SERVER_URL, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(payload),
    });

    if (!response.ok) {
      console.error("[Cypress Recorder] Server responded with:", response.status);
    }
  } catch (err) {
    console.error("[Cypress Recorder] Could not reach local server:", err.message);
  }
}, true); // useCapture: true so we catch clicks on all elements