contentScript.js

const OVERLAY_ID = "wt-overlay-root";

function removeOverlay() {
  const existing = document.getElementById(OVERLAY_ID);
  if (existing) {
    existing.remove();
  }
}

function buildOverlay(defaultDurationMinutes) {
  removeOverlay();

  const root = document.createElement("div");
  root.id = OVERLAY_ID;

  root.innerHTML = `
    <div id="wt-overlay-backdrop"></div>
    <section id="wt-modal" role="dialog" aria-modal="true" aria-labelledby="wt-title">
      <h2 id="wt-title">Set your allowed time</h2>
      <p>This website is locked until you set a timer. You must enter a duration to continue.</p>
      <form id="wt-duration-form">
        <input id="wt-duration-input" type="number" min="1" step="1" value="${defaultDurationMinutes}" required />
        <button id="wt-start-button" type="submit">Start Timer</button>
      </form>
      <div id="wt-error" aria-live="polite"></div>
    </section>
  `;

  document.documentElement.appendChild(root);

  const form = root.querySelector("#wt-duration-form");
  const input = root.querySelector("#wt-duration-input");
  const button = root.querySelector("#wt-start-button");
  const errorEl = root.querySelector("#wt-error");

  form.addEventListener("submit", async (event) => {
    event.preventDefault();

    const minutes = Number(input.value);
    if (!Number.isFinite(minutes) || minutes <= 0) {
      errorEl.textContent = "Please enter a valid duration in minutes.";
      return;
    }

    button.disabled = true;
    errorEl.textContent = "";

    try {
      const result = await browser.runtime.sendMessage({
        type: "START_TIMER",
        durationSeconds: Math.floor(minutes * 60),
        url: window.location.href
      });

      if (!result || !result.ok) {
        throw new Error(result?.error || "Could not start timer.");
      }

      removeOverlay();
    } catch (err) {
      errorEl.textContent = err.message || "Could not start timer.";
      button.disabled = false;
    }
  });

  input.focus();
}

async function init() {
  if (window.top !== window.self) {
    return;
  }

  try {
    const response = await browser.runtime.sendMessage({
      type: "PAGE_LOADED",
      url: window.location.href
    });

    if (!response?.enforced) {
      removeOverlay();
      return;
    }

    if (response.hasActiveSession) {
      removeOverlay();
      return;
    }

    buildOverlay(response.defaultDurationMinutes || 20);
  } catch (err) {
    // Fail open if extension runtime is temporarily unavailable.
  }
}

init();