try.js

// @ts-check
/**
 * Instant scoring form (infra/instant-score; growth-plans 03-A4). POSTs a
 * GTFS Schedule URL to the try endpoint, polls the job until it lands, and
 * renders the grade, category scores, and top fixes inline — no GitHub
 * account, no wait for an issue comment. Degrades to pointing at the GitHub
 * Issue Form below when the endpoint is not configured on this deployment.
 */
import { CATEGORY_LABELS, CATEGORY_ORDER } from "./generated/constants.js";

const TRY_URL = /** @type {any} */ (window).SCORECARD_TRY_URL || null;
const POLL_INTERVAL_MS = 3000;
const POLL_TIMEOUT_MS = 3 * 60 * 1000;

const form = /** @type {HTMLFormElement} */ (document.getElementById("try-form"));
const hosted = /** @type {HTMLElement} */ (document.getElementById("hosted-scorer"));
const status = /** @type {HTMLElement} */ (document.getElementById("try-status"));
const result = /** @type {HTMLElement} */ (document.getElementById("try-result"));

/** @param {string} message @param {"ok"|"err"|"info"} kind */
function setStatus(message, kind) {
  status.textContent = message;
  status.className = `form-status form-status-${kind}`;
}

/** Safe text escaping via the DOM (same technique as app.js's esc()). @param {unknown} text */
function esc(text) {
  const div = document.createElement("div");
  div.textContent = String(text);
  return div.innerHTML;
}

/** Encode untrusted text for a quoted HTML attribute. `esc` deliberately
 *  leaves quote characters alone (safe in text content); a value that reaches
 *  an attribute must also neutralize `"`/`'` or it can close the attribute
 *  early and add its own (job data is user-submitted). @param {unknown} text */
function escAttr(text) {
  return esc(text).replaceAll('"', """).replaceAll("'", "'");
}

/** Return the URL only if it is http(s); otherwise "#". Blocks javascript:/data:
 *  URLs in the job response from becoming clickable XSS sinks.
 *  @param {string} url @returns {string} */
function safeUrl(url) {
  try {
    const u = new URL(url, location.href);
    return u.protocol === "http:" || u.protocol === "https:" ? u.href : "#";
  } catch {
    return "#";
  }
}

/** @param {string} [grade] */
function gradeClass(grade) {
  const normalized = String(grade || "F").toUpperCase();
  const safe = ["A", "B", "C", "D", "F"].includes(normalized) ? normalized : "F";
  return `grade-${safe.toLowerCase()}`;
}

if (!TRY_URL) {
  // The available GitHub request is already first in the document. Keep an
  // unavailable control out of the task flow instead of presenting a disabled
  // primary button.
  hosted.hidden = true;
} else {
  hosted.hidden = false;
  form.addEventListener("submit", async (event) => {
    event.preventDefault();
    const data = Object.fromEntries(new FormData(form).entries());
    const url = String(data.url || "").trim();
    const name = String(data.name || "").trim();
    const country = String(data.country || "").trim().toUpperCase();
    const urlField = /** @type {HTMLInputElement} */ (form.querySelector("#try-url"));
    const countryField = /** @type {HTMLInputElement} */ (
      form.querySelector("#try-country")
    );
    urlField.removeAttribute("aria-invalid");
    countryField.removeAttribute("aria-invalid");
    if (!urlField.validity.valid || !/^https?:\/\/.+/i.test(url)) {
      setStatus("The GTFS Schedule URL should start with http:// or https://.", "err");
      urlField.setAttribute("aria-invalid", "true");
      urlField.focus();
      return;
    }
    if (!countryField.validity.valid || !/^[A-Z]{2}$/.test(country)) {
      setStatus("Enter a two-letter ISO country or territory code, like CA or NZ.", "err");
      countryField.setAttribute("aria-invalid", "true");
      countryField.focus();
      return;
    }

    result.hidden = true;
    result.innerHTML = "";
    const button = /** @type {HTMLButtonElement} */ (form.querySelector(".submit-button"));
    button.disabled = true;
    setStatus("Starting the scorer…", "info");

    try {
      const resp = await fetch(TRY_URL, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ url, name, country }),
      });
      const body = await resp.json().catch(() => ({}));
      if (resp.status === 429) {
        setStatus(body.error || "Too many requests. Try again in a bit.", "err");
        return;
      }
      if (!resp.ok || !body.job_id) {
        setStatus(body.error || "Something went wrong. Please try again.", "err");
        return;
      }
      setStatus(
        "Downloading your feed and running the validator. This takes about a minute…",
        "info"
      );
      await poll(body.job_id, url, name, country);
    } catch {
      setStatus("Could not reach the scoring service. Please try again later.", "err");
    } finally {
      button.disabled = false;
    }
  });
}

/**
 * @param {string} jobId
 * @param {string} url
 * @param {string} name
 * @param {string} country
 */
async function poll(jobId, url, name, country) {
  const deadline = Date.now() + POLL_TIMEOUT_MS;
  const base = TRY_URL.replace(/\/$/, "");
  while (Date.now() < deadline) {
    await new Promise((r) => setTimeout(r, POLL_INTERVAL_MS));
    /** @type {any} */
    let job;
    try {
      const resp = await fetch(`${base}/score/${encodeURIComponent(jobId)}`);
      job = await resp.json();
    } catch {
      continue; // a transient network blip; keep polling until the deadline
    }
    if (job.status === "done") {
      setStatus("Done.", "ok");
      await showResult(job, url, name, country);
      return;
    }
    if (job.status === "error") {
      setStatus(job.message || "We could not score that feed.", "err");
      return;
    }
  }
  setStatus(
    "This is taking longer than expected. Check back in a minute, or try the GitHub form below.",
    "err"
  );
}

/**
 * @param {any} job
 * @param {string} url
 * @param {string} name
 * @param {string} country
 */
async function showResult(job, url, name, country) {
  /** @type {any} */
  let artifact = null;
  if (job.result_url) {
    try {
      const resp = await fetch(job.result_url);
      if (resp.ok) artifact = await resp.json();
    } catch {
      /* fall back to the grade-only summary below */
    }
  }
  const trackUrl =
    `submit.html?url=${encodeURIComponent(url)}` +
    `${name ? `&name=${encodeURIComponent(name)}` : ""}` +
    `&country=${encodeURIComponent(country)}`;

  if (!artifact) {
    result.innerHTML = `
      <h2 class="section-title" id="try-result-h" tabindex="-1">Overall grade: ${esc(job.grade || "—")}</h2>
      <p><a href="${escAttr(safeUrl(job.result_url || "#"))}">View the full result</a></p>
      <p class="field"><a class="submit-button" href="${escAttr(trackUrl)}">Track this feed daily</a></p>`;
  } else {
    const cats = CATEGORY_ORDER.map((key) => {
      const cat = artifact.categories?.[key];
      const label = esc(CATEGORY_LABELS[key] || key);
      if (!cat || cat.status !== "measured") return `<dt>${label}</dt><dd>not yet measured</dd>`;
      return `<dt>${label}</dt><dd>${esc(Math.round(cat.score))}/100</dd>`;
    }).join("");
    const fixes = (artifact.top_fixes || [])
      .slice(0, 3)
      .map((f) => `<li>${esc(f.fix)} <span class="hint">(${esc(f.effort)})</span></li>`)
      .join("");
    result.innerHTML = `
      <h2 class="section-title" id="try-result-h" tabindex="-1">Overall grade:
        <span class="grade-chip ${gradeClass(artifact.overall?.grade)}">${esc(artifact.overall?.grade || "—")}<span class="visually-hidden"> grade</span></span>
        (${esc(String(artifact.overall?.score ?? "—"))}/100)</h2>
      <dl>${cats}</dl>
      ${fixes ? `<h3>Top things to fix</h3><ol>${fixes}</ol>` : "<p>Nothing urgent turned up. This feed passed every check we translate into fixes.</p>"}
      <p><a href="${escAttr(safeUrl(job.result_url || "#"))}">View the full JSON result</a></p>
      <p class="field"><a class="submit-button" href="${escAttr(trackUrl)}">Track this feed daily</a></p>`;
  }
  result.hidden = false;
  /** @type {HTMLElement | null} */ (result.querySelector("#try-result-h"))?.focus();
}