content.js

// content.js — runs on https://suno.com/create*
// Finds the "Styles" textarea, the Instrumental toggle and the "Create song"
// button, fills the prompt in and clicks Create. Controlled by messages sent
// from background.js.

function sleep(ms) {
  return new Promise((resolve) => setTimeout(resolve, ms));
}

function setNativeValue(el, value) {
  const proto = Object.getPrototypeOf(el);
  const descriptor = Object.getOwnPropertyDescriptor(proto, "value");
  const setter = descriptor && descriptor.set;
  if (setter) {
    setter.call(el, value);
  } else {
    el.value = value;
  }
  el.dispatchEvent(new Event("input", { bubbles: true }));
  el.dispatchEvent(new Event("change", { bubbles: true }));
}

function findFieldByLabel(labelText) {
  // Find the leaf element that is exactly the section header ("Styles",
  // "Lyrics", ...), then walk up through its ancestors until one of them
  // contains a <textarea> — that's the section's own input box. This is
  // resilient to hashed/rotating CSS class names.
  const header = [...document.querySelectorAll("*")].find(
    (el) => el.children.length === 0 && el.textContent.trim() === labelText
  );
  if (!header) return null;
  let node = header;
  for (let i = 0; i < 10 && node; i += 1) {
    const ta = node.querySelector && node.querySelector("textarea");
    if (ta) return ta;
    node = node.parentElement;
  }
  return null;
}

function findStyleBox() {
  // Primary: walk up from the "Styles" section header — robust regardless of
  // the (rotating, sometimes bpm-less) example placeholder text.
  const byLabel = findFieldByLabel("Styles");
  if (byLabel) return byLabel;

  // Fallback: the example placeholder usually mentions "bpm".
  const textareas = [...document.querySelectorAll("textarea")];
  return textareas.find((t) => (t.placeholder || "").toLowerCase().includes("bpm")) || null;
}

function findInstrumentalRadio() {
  return [...document.querySelectorAll('[role="radio"]')].find(
    (r) => r.textContent.trim().toLowerCase() === "instrumental"
  );
}

function findCreateButton() {
  return (
    [...document.querySelectorAll("button")].find(
      (b) => (b.getAttribute("aria-label") || "").trim().toLowerCase() === "create song"
    ) || [...document.querySelectorAll("button")].find((b) => b.textContent.trim().toLowerCase() === "create")
  );
}

function getCreditsRemaining() {
  const btn = [...document.querySelectorAll("button")].find((b) =>
    (b.getAttribute("aria-label") || "").toLowerCase().startsWith("credits remaining")
  );
  if (!btn) return null;
  const match = (btn.getAttribute("aria-label") || "").match(/(\d+)/);
  return match ? parseInt(match[1], 10) : null;
}

async function handleGenerate(prompt, instrumental) {
  const styleBox = findStyleBox();
  if (!styleBox) {
    throw new Error('Не знайдено поле "Styles" на сторінці. Переконайтесь, що відкрита вкладка Advanced.');
  }

  setNativeValue(styleBox, prompt);
  await sleep(200);

  if (instrumental) {
    const radio = findInstrumentalRadio();
    if (radio && radio.getAttribute("aria-checked") !== "true") {
      radio.click();
      await sleep(300);
    }
  }

  await sleep(300); // give React time to enable the Create button

  const createBtn = findCreateButton();
  if (!createBtn) {
    throw new Error('Не знайдено кнопку "Create".');
  }
  if (createBtn.disabled) {
    throw new Error('Кнопка "Create" неактивна (можливо, забракло кредитів або поле Styles не прийнялось).');
  }

  createBtn.click();
  await sleep(200);

  return { credits: getCreditsRemaining() };
}

// background.js may inject this file again on every generation (to cover tabs
// that were already open before the extension was installed/reloaded, which
// never get the declarative content script). Guard against registering the
// message listener twice, which would otherwise double-click Create.
if (!window.__sunoAutoQueueLoaded) {
  window.__sunoAutoQueueLoaded = true;

  chrome.runtime.onMessage.addListener((message, _sender, sendResponse) => {
    if (message.action === "ping") {
      sendResponse({ ok: true });
      return undefined;
    }
    if (message.action !== "sunoGenerate") return undefined;

    handleGenerate(message.prompt, message.instrumental)
      .then((result) => sendResponse({ ok: true, credits: result.credits }))
      .catch((err) => sendResponse({ ok: false, error: err.message }));

    return true; // keep the message channel open for the async response
  });
}