const SVG_NS = "http://www.w3.org/2000/svg";

function escapeText(value) {
  return String(value)
    .replaceAll("&", "&")
    .replaceAll("<", "&lt;")
    .replaceAll(">", "&gt;")
    .replaceAll('"', "&quot;")
    .replaceAll("'", "&#039;");
}

function percent(value, digits = 1) {
  return new Intl.NumberFormat("en-US", {
    style: "percent",
    minimumFractionDigits: digits,
    maximumFractionDigits: digits,
  }).format(value);
}

function compactNumber(value) {
  return new Intl.NumberFormat("en-US", {
    notation: value >= 10_000 ? "compact" : "standard",
    maximumFractionDigits: 1,
  }).format(value);
}

function emptyChart(container, message) {
  container.innerHTML = `<div class="chart-empty"><p>${escapeText(message)}</p></div>`;
  container.setAttribute("aria-label", message);
}

function aggregateOverview(rows) {
  const groups = new Map();
  for (const row of rows) {
    const key = `${row.year}-Q${row.quarter}`;
    const current = groups.get(key) ?? {
      label: `${row.year} Q${row.quarter}`,
      year: row.year,
      quarter: row.quarter,
      support: 0,
      weightedRisk: 0,
    };
    current.support += row.support_rounded;
    current.weightedRisk += row.support_rounded * row.nonpass_rate;
    groups.set(key, current);
  }
  return [...groups.values()]
    .map((group) => ({
      ...group,
      risk: group.support > 0 ? group.weightedRisk / group.support : 0,
    }))
    .sort((left, right) => left.year - right.year || left.quarter - right.quarter);
}

export function renderOutcomeTrend(container, rows) {
  const points = aggregateOverview(rows);
  if (points.length < 2) {
    emptyChart(container, "Not enough approved periods to draw a trend.");
    return;
  }
  const width = 920;
  const height = 330;
  const margin = { top: 24, right: 22, bottom: 54, left: 58 };
  const plotWidth = width - margin.left - margin.right;
  const plotHeight = height - margin.top - margin.bottom;
  const maxRisk = Math.max(0.05, ...points.map((point) => point.risk));
  const yMax = Math.min(1, Math.ceil(maxRisk * 20) / 20);
  const x = (index) => margin.left + (index / (points.length - 1)) * plotWidth;
  const y = (value) => margin.top + plotHeight - (value / yMax) * plotHeight;
  const path = points
    .map((point, index) => `${index === 0 ? "M" : "L"}${x(index).toFixed(1)},${y(point.risk).toFixed(1)}`)
    .join(" ");

  const yTicks = Array.from({ length: 5 }, (_, index) => (index / 4) * yMax);
  const tickEvery = Math.max(1, Math.ceil(points.length / 8));
  const labelled = points.filter(
    (_point, index) => index % tickEvery === 0 || index === points.length - 1,
  );
  const description = points
    .map((point) => `${point.label}: ${percent(point.risk)}`)
    .join("; ");

  container.innerHTML = `
    <svg viewBox="0 0 ${width} ${height}" aria-hidden="true" focusable="false">
      ${yTicks
        .map(
          (tick) => `
          <line class="grid-line" x1="${margin.left}" x2="${width - margin.right}" y1="${y(tick)}" y2="${y(tick)}"></line>
          <text class="axis-label" x="${margin.left - 10}" y="${y(tick) + 4}" text-anchor="end">${percent(tick, 0)}</text>`,
        )
        .join("")}
      <line class="axis-line" x1="${margin.left}" x2="${width - margin.right}" y1="${height - margin.bottom}" y2="${height - margin.bottom}"></line>
      <path class="chart-line" d="${path}"></path>
      ${points
        .map(
          (point, index) => `
          <circle class="chart-dot" cx="${x(index)}" cy="${y(point.risk)}" r="4">
            <title>${escapeText(point.label)}: ${percent(point.risk)} non-pass (${compactNumber(point.support)} rounded support)</title>
          </circle>`,
        )
        .join("")}
      ${labelled
        .map((point) => {
          const index = points.indexOf(point);
          return `<text class="axis-label" x="${x(index)}" y="${height - 24}" text-anchor="middle">${escapeText(point.label.replace(" ", "\u00a0"))}</text>`;
        })
        .join("")}
      <text class="axis-label" transform="translate(16 ${height / 2}) rotate(-90)" text-anchor="middle">Non-pass rate</text>
    </svg>`;
  container.setAttribute(
    "aria-label",
    `Quarterly aggregate non-pass trend. ${description}`,
  );
}

export function renderAgeRisk(container, rows) {
  if (!rows.length) {
    emptyChart(container, "No supported vehicle-age bands are available.");
    return;
  }
  const points = [...rows];
  const width = 600;
  const height = 300;
  const margin = { top: 24, right: 20, bottom: 58, left: 52 };
  const plotWidth = width - margin.left - margin.right;
  const plotHeight = height - margin.top - margin.bottom;
  const maxRisk = Math.max(0.05, ...points.map((point) => point.nonpass_rate));
  const yMax = Math.min(1, Math.ceil(maxRisk * 20) / 20);
  const denominator = Math.max(1, points.length - 1);
  const x = (index) => margin.left + (index / denominator) * plotWidth;
  const y = (value) => margin.top + plotHeight - (value / yMax) * plotHeight;
  const path = points
    .map((point, index) => `${index === 0 ? "M" : "L"}${x(index)},${y(point.nonpass_rate)}`)
    .join(" ");

  container.innerHTML = `
    <svg viewBox="0 0 ${width} ${height}" aria-hidden="true" focusable="false">
      ${[0, 0.25, 0.5, 0.75, 1]
        .map((ratio) => {
          const tick = ratio * yMax;
          return `<line class="grid-line" x1="${margin.left}" x2="${width - margin.right}" y1="${y(tick)}" y2="${y(tick)}"></line>
            <text class="axis-label" x="${margin.left - 8}" y="${y(tick) + 4}" text-anchor="end">${percent(tick, 0)}</text>`;
        })
        .join("")}
      <path class="chart-line" d="${path}"></path>
      ${points
        .map(
          (point, index) => `
            <circle class="chart-dot" cx="${x(index)}" cy="${y(point.nonpass_rate)}" r="5">
              <title>${escapeText(point.age_band)}: ${percent(point.nonpass_rate)} (${compactNumber(point.support_rounded)} rounded support)</title>
            </circle>
            <text class="axis-label" x="${x(index)}" y="${height - 25}" text-anchor="middle">${escapeText(point.age_band)}</text>`,
        )
        .join("")}
    </svg>`;
  container.setAttribute(
    "aria-label",
    `Non-pass risk by vehicle-age band. ${points
      .map((point) => `${point.age_band}: ${percent(point.nonpass_rate)}`)
      .join("; ")}`,
  );
}

export function renderCohortDotPlot(container, rows) {
  const points = rows.slice(0, 12);
  if (!points.length) {
    emptyChart(container, "No supported cohorts match the current filters.");
    return;
  }
  const width = 820;
  const rowHeight = 34;
  const margin = { top: 24, right: 60, bottom: 42, left: 220 };
  const height = margin.top + margin.bottom + points.length * rowHeight;
  const plotWidth = width - margin.left - margin.right;
  const maxRisk = Math.max(0.05, ...points.map((point) => point.nonpass_rate));
  const xMax = Math.min(1, Math.ceil(maxRisk * 20) / 20);
  const x = (value) => margin.left + (value / xMax) * plotWidth;

  container.innerHTML = `
    <svg viewBox="0 0 ${width} ${height}" aria-hidden="true" focusable="false">
      ${[0, 0.25, 0.5, 0.75, 1]
        .map((ratio) => {
          const value = ratio * xMax;
          return `<line class="grid-line" x1="${x(value)}" x2="${x(value)}" y1="${margin.top - 8}" y2="${height - margin.bottom + 5}"></line>
            <text class="axis-label" x="${x(value)}" y="${height - 15}" text-anchor="middle">${percent(value, 0)}</text>`;
        })
        .join("")}
      ${points
        .map((point, index) => {
          const y = margin.top + index * rowHeight + rowHeight / 2;
          const label = `${point.prior_make} ${point.prior_model}`;
          return `
            <text class="axis-label" x="${margin.left - 12}" y="${y + 4}" text-anchor="end">${escapeText(label)}</text>
            <line x1="${margin.left}" x2="${x(point.nonpass_rate)}" y1="${y}" y2="${y}" stroke="var(--red-100)" stroke-width="8" stroke-linecap="round"></line>
            <circle class="chart-dot" cx="${x(point.nonpass_rate)}" cy="${y}" r="5"><title>${escapeText(label)}: ${percent(point.nonpass_rate)}, ${compactNumber(point.support_rounded)} rounded support</title></circle>
            <text class="axis-label" x="${x(point.nonpass_rate) + 10}" y="${y + 4}">${percent(point.nonpass_rate)}</text>`;
        })
        .join("")}
    </svg>`;
  container.setAttribute(
    "aria-label",
    `Ranked supported cohort non-pass risk. ${points
      .map((point) => `${point.prior_make} ${point.prior_model}: ${percent(point.nonpass_rate)}`)
      .join("; ")}`,
  );
}

const COUNTY_POINTS = {
  cache: [154, 40],
  weber: [137, 86],
  davis: [126, 108],
  salt_lake: [133, 133],
  "salt lake": [133, 133],
  utah: [140, 170],
};

export function renderUtahCoverage(container, coveredCounties) {
  const normalized = new Set(coveredCounties.map((county) => county.toLowerCase()));
  const points = [...normalized]
    .map((county) => ({ county, coordinates: COUNTY_POINTS[county] }))
    .filter((item) => item.coordinates);
  container.innerHTML = `
    <svg viewBox="0 0 270 300" aria-hidden="true" focusable="false">
      <path d="M79 18h101v54l18 18v183H52V116l27-27V18Z" fill="var(--gray-100)" stroke="var(--gray-300)" stroke-width="3"></path>
      <path d="M80 20h98v53l17 18v179H55V117l25-27V20Z" fill="none" stroke="var(--sand-200)" stroke-width="1.5" stroke-dasharray="4 5"></path>
      ${points
        .map(
          ({ county, coordinates }) => `
            <circle cx="${coordinates[0]}" cy="${coordinates[1]}" r="8" fill="var(--teal-700)" stroke="var(--paper)" stroke-width="3"><title>${escapeText(county.replace("_", " "))} feed available</title></circle>`,
        )
        .join("")}
      <text x="135" y="288" text-anchor="middle" class="axis-label">Participating feeds highlighted</text>
    </svg>`;
  container.setAttribute(
    "aria-label",
    coveredCounties.length
      ? `Utah feed coverage includes ${coveredCounties.join(", ")}. Other counties are unavailable.`
      : "No county feed coverage is available.",
  );
}

export function renderCoverageHeatmap(container, rows) {
  if (!rows.length) {
    emptyChart(container, "No source-era coverage rows are available.");
    return;
  }
  const years = [...new Set(rows.map((row) => row.year))].sort((a, b) => a - b);
  const eras = [...new Set(rows.map((row) => row.source_era))].sort();
  const lookup = new Map(rows.map((row) => [`${row.source_era}-${row.year}`, row]));
  const maxSupport = Math.max(1, ...rows.map((row) => row.support_rounded));
  const columns = `90px repeat(${years.length}, minmax(34px, 1fr))`;
  container.innerHTML = `
    <div class="heatmap-grid" style="grid-template-columns:${columns}">
      <span></span>${years.map((year) => `<span class="heatmap-label">${year}</span>`).join("")}
      ${eras
        .map(
          (era) => `<span class="heatmap-label">${escapeText(era)}</span>${years
            .map((year) => {
              const row = lookup.get(`${era}-${year}`);
              if (!row) return `<span class="heatmap-cell" title="${escapeText(era)} ${year}: unavailable"></span>`;
              const alpha = 0.15 + 0.75 * Math.sqrt(row.support_rounded / maxSupport);
              return `<span class="heatmap-cell" style="background:rgb(25 116 119 / ${alpha.toFixed(2)})" title="${escapeText(era)} ${year}: ${compactNumber(row.support_rounded)} rounded support; ${percent(row.labeled_rate)} labeled"></span>`;
            })
            .join("")}`,
        )
        .join("")}
    </div>`;
  container.setAttribute(
    "aria-label",
    `Source-era coverage from ${years[0]} through ${years[years.length - 1]} for ${eras.join(", ")}.`,
  );
}

export function renderNoCalibration(container) {
  emptyChart(
    container,
    "Calibration-bin data is not published in this development bundle. No calibration curve is shown.",
  );
}

export { aggregateOverview, compactNumber, percent };