/**
 * earth-now.co
 * Author:  Simon-Pierre Boucher
 * Contact: contact@spboucher.ai
 * File:    apps/api/src/badge.ts
 * Purpose: Server-side SVG badge rendering using the SAME counterValue/formatValue as every client runtime
 */

import { type CounterModel, counterValue, formatValue } from "@earth-now/counter";
import type { MetricEntry } from "@earth-now/registry";

const FONT = "Verdana,Geneva,DejaVu Sans,sans-serif";
const ATTRIBUTION = "earth-now.co";
const HEIGHT = 28;
const PAD = 12;
const GAP = 12;

const XML_ESCAPES: Record<string, string> = {
  "&": "&amp;",
  "<": "&lt;",
  ">": "&gt;",
  '"': "&quot;",
  "'": "&apos;",
};

function escapeXml(text: string): string {
  return text.replace(/[&<>"']/g, (c) => XML_ESCAPES[c] ?? c);
}

/**
 * Dark pill badge. The value is evaluated with the shared runtime at render
 * time; badges are static contexts so the sigFigs honesty cap applies strictly.
 * A metric without a deployable model renders "data pending" (never NaN).
 */
export function renderBadgeSvg(
  entry: MetricEntry,
  model: CounterModel | undefined,
  nowMs: number,
): string {
  const name = entry.name.en;
  const valueText = model
    ? `${formatValue(counterValue(model, nowMs), model.displayHints, { applySigFigs: true })} ${model.displayHints.unit}`.trim()
    : "data pending";

  // Approximate text advance widths (no font metrics server-side by design).
  const nameW = Math.ceil(name.length * 6.4);
  const valueW = Math.ceil(valueText.length * 7.4);
  const attrW = Math.ceil(ATTRIBUTION.length * 4.8);
  const width = PAD + nameW + GAP + valueW + GAP + attrW + PAD;
  const label = `${name}: ${valueText}`;

  return [
    `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${HEIGHT}" role="img" aria-label="${escapeXml(label)}">`,
    `<title>${escapeXml(label)} — ${ATTRIBUTION}</title>`,
    `<rect width="${width}" height="${HEIGHT}" rx="${HEIGHT / 2}" fill="#0f172a"/>`,
    `<text x="${PAD}" y="18" font-family="${FONT}" font-size="11" fill="#94a3b8">${escapeXml(name)}</text>`,
    `<text x="${PAD + nameW + GAP}" y="18" font-family="${FONT}" font-size="12" font-weight="bold" fill="${model ? "#f1f5f9" : "#fbbf24"}">${escapeXml(valueText)}</text>`,
    `<text x="${width - PAD}" y="18" text-anchor="end" font-family="${FONT}" font-size="8" fill="#64748b">${ATTRIBUTION}</text>`,
    `</svg>`,
  ].join("");
}