/**
 * counters.dev widgets — zero-dependency web components.
 *
 *   <script type="module" src="/counters-widgets.js"></script>
 *   <counters-ticker src="/api/counters/rocks_mined/value" label="Rocks mined"></counters-ticker>
 *   <counters-stat   src="/api/counters/signups/value" label="Signups" format="compact"></counters-stat>
 *   <counters-goal   src="/api/counters/donations/value" label="Charity drive" target="1000000"></counters-goal>
 *   <counters-bars   series-src="/api/counters/api.requests/series?..." label="Requests"></counters-bars>
 *   <counters-sparkline series-src="..."></counters-sparkline>
 *   <counters-board  label="Top skills" items='[{"label":"Mining","src":"/api/counters/rocks/value"}]'></counters-board>
 *
 * `src` URLs must point at YOUR server proxy (see example-proxy.js) — your
 * counters.dev API key is a secret and must never appear in a browser.
 *
 * Attributes: src | series-src, label, interval (seconds, default 60),
 * format ("compact" | "exact"), target (goal), items (board, JSON).
 * Theme with CSS custom properties on the host page: --primary, --card,
 * --border, --foreground, --muted-foreground, --chart-1, --radius, --font-sans, --font-mono.
 *
 * Values are decimal strings that may exceed 2^53 — all math here is BigInt.
 */

const fmtExact = (v) => {
  try {
    return BigInt(v).toLocaleString("en-US");
  } catch {
    return String(v);
  }
};
const fmtCompact = (v) => {
  const n = Number(v);
  if (!Number.isFinite(n)) return fmtExact(v);
  return new Intl.NumberFormat("en-US", { notation: "compact", maximumFractionDigits: 1 }).format(n);
};
const pctOf = (v, t) => {
  try {
    const bv = BigInt(v);
    const bt = BigInt(t);
    if (bt <= 0n || bv <= 0n) return 0;
    if (bv >= bt) return 100;
    return Number((bv * 10000n) / bt) / 100;
  } catch {
    return 0;
  }
};

const BASE_CSS = `
  :host { display: inline-block; font-family: var(--font-sans, ui-sans-serif, system-ui, sans-serif);
          color: var(--foreground, #0b0b0b); }
  .card { padding: 1rem 1.25rem; border-radius: var(--radius, 10px);
          border: 1px solid var(--border, #e1e0d9); background: var(--card, #fcfcfb); }
  .label { font-size: .8125rem; color: var(--muted-foreground, #52514e); }
  .mono { font-family: var(--font-mono, ui-monospace, monospace); font-variant-numeric: tabular-nums; }
  :host([data-stale]) .value { opacity: .7; }
  .plot { position: relative; touch-action: none; }
  .tip { position: absolute; transform: translateX(-50%); pointer-events: none; display: none;
         background: var(--popover, #fcfcfb); border: 1px solid var(--border, #e1e0d9);
         border-radius: 8px; padding: .3rem .55rem; box-shadow: 0 2px 8px rgba(0,0,0,.08);
         white-space: nowrap; z-index: 2; }
  .tip b { font-family: var(--font-mono, ui-monospace, monospace); font-variant-numeric: tabular-nums;
           font-size: .8125rem; display: block; }
  .tip span { font-size: .6875rem; color: var(--muted-foreground, #52514e); }
`;

/**
 * Shared polling base: ±10% jitter, pause while hidden, immediate refresh on
 * return, ×2 backoff (cap 10 min) on failures, one request in flight.
 */
class CountersBase extends HTMLElement {
  #timer = null;
  #inFlight = false;
  #failures = 0;
  #onVisible = () => {
    if (document.visibilityState === "visible") {
      clearTimeout(this.#timer);
      this.#loop();
    }
  };

  connectedCallback() {
    this.attachShadow({ mode: "open" });
    this.renderShell();
    this.#loop();
    document.addEventListener("visibilitychange", this.#onVisible);
  }

  disconnectedCallback() {
    clearTimeout(this.#timer);
    document.removeEventListener("visibilitychange", this.#onVisible);
  }

  get intervalMs() {
    return Math.max(5, Number(this.getAttribute("interval") || 60)) * 1000;
  }

  async #loop() {
    if (document.visibilityState !== "hidden" && !this.#inFlight) {
      this.#inFlight = true;
      try {
        await this.refresh();
        this.#failures = 0;
        this.removeAttribute("data-stale");
      } catch {
        this.#failures += 1;
        this.setAttribute("data-stale", "");
      } finally {
        this.#inFlight = false;
      }
    }
    const backoff = Math.min(this.intervalMs * 2 ** this.#failures, 600000);
    this.#timer = setTimeout(() => this.#loop(), backoff * (0.9 + Math.random() * 0.2));
  }

  async fetchJson(url) {
    const res = await fetch(url, { headers: { Accept: "application/json" } });
    if (!res.ok) throw new Error(`status ${res.status}`);
    return res.json();
  }

  /* subclasses implement renderShell() + refresh() */
}

class CountersStat extends CountersBase {
  renderShell() {
    this.shadowRoot.innerHTML = `<style>${BASE_CSS}
      .value { margin-top: .25rem; font-size: 1.5rem; font-weight: 600; letter-spacing: -0.01em; }
    </style>
    <div class="card"><div class="label"></div><div class="value">—</div></div>`;
    this.shadowRoot.querySelector(".label").textContent = this.getAttribute("label") || "";
  }
  async refresh() {
    const data = await this.fetchJson(this.getAttribute("src"));
    const el = this.shadowRoot.querySelector(".value");
    const exact = fmtExact(data.value);
    el.textContent = this.getAttribute("format") === "exact" ? exact : fmtCompact(data.value);
    el.title = exact;
  }
}

class CountersTicker extends CountersBase {
  renderShell() {
    this.shadowRoot.innerHTML = `<style>${BASE_CSS}
      .value { font-size: var(--counters-ticker-size, 2.5rem); font-weight: 600; line-height: 1;
               color: var(--primary, #256abf); letter-spacing: .02em; }
      .col { display: inline-block; height: 1em; overflow: hidden; vertical-align: top; }
      .strip { display: inline-flex; flex-direction: column;
               transition: transform .5s cubic-bezier(.22, 1, .36, 1); }
      .strip span { height: 1em; line-height: 1; }
      @media (prefers-reduced-motion: reduce) { .strip { transition: none; } }
    </style>
    <div><div class="label"></div><div class="value mono" role="text">—</div></div>`;
    this.shadowRoot.querySelector(".label").textContent = this.getAttribute("label") || "";
  }
  async refresh() {
    const data = await this.fetchJson(this.getAttribute("src"));
    const text = fmtExact(data.value);
    const holder = this.shadowRoot.querySelector(".value");
    holder.setAttribute("aria-label", `${this.getAttribute("label") || "counter"}: ${text}`);
    // Rebuild columns when length/shape changes; otherwise just move strips.
    if (holder.dataset.shape !== String(text.length)) {
      holder.dataset.shape = String(text.length);
      holder.innerHTML = "";
      for (const ch of text) {
        if (/[0-9]/.test(ch)) {
          const col = document.createElement("span");
          col.className = "col";
          const strip = document.createElement("span");
          strip.className = "strip";
          for (let d = 0; d <= 9; d++) {
            const s = document.createElement("span");
            s.textContent = String(d);
            strip.appendChild(s);
          }
          col.appendChild(strip);
          holder.appendChild(col);
        } else {
          const sep = document.createElement("span");
          sep.textContent = ch;
          holder.appendChild(sep);
        }
      }
    }
    let i = 0;
    for (const ch of text) {
      const node = holder.children[i++];
      const strip = node?.querySelector?.(".strip");
      if (strip && /[0-9]/.test(ch)) strip.style.transform = `translateY(${-Number(ch)}em)`;
      else if (node && !strip) node.textContent = ch;
    }
  }
}

class CountersGoal extends CountersBase {
  renderShell() {
    this.shadowRoot.innerHTML = `<style>${BASE_CSS}
      :host { display: block; }
      .head { display: flex; justify-content: space-between; align-items: baseline; }
      .pct { font-size: .8125rem; font-weight: 600; color: var(--primary, #256abf); }
      .track { margin-top: .5rem; height: 8px; border-radius: 999px; overflow: hidden;
               background: color-mix(in oklab, var(--primary, #256abf) 15%, transparent); }
      .fill { height: 100%; border-radius: 999px; background: var(--primary, #256abf);
              width: 0%; transition: width .6s ease; }
      .numbers { margin-top: .5rem; font-size: .875rem; }
      .of { color: var(--muted-foreground, #52514e); }
    </style>
    <div class="card">
      <div class="head"><span class="label"></span><span class="pct">0%</span></div>
      <div class="track" role="progressbar" aria-valuemin="0" aria-valuemax="100"><div class="fill"></div></div>
      <div class="numbers"><b class="value">—</b><span class="of"></span></div>
    </div>`;
    this.shadowRoot.querySelector(".label").textContent = this.getAttribute("label") || "";
  }
  async refresh() {
    const data = await this.fetchJson(this.getAttribute("src"));
    const target = this.getAttribute("target") || "0";
    const pct = pctOf(data.value, target);
    this.shadowRoot.querySelector(".pct").textContent = `${pct.toFixed(pct >= 100 ? 0 : 1)}%`;
    this.shadowRoot.querySelector(".fill").style.width = `${pct}%`;
    this.shadowRoot.querySelector(".track").setAttribute("aria-valuenow", String(Math.round(pct)));
    this.shadowRoot.querySelector(".value").textContent = fmtCompact(data.value);
    this.shadowRoot.querySelector(".of").textContent = ` of ${fmtCompact(target)}`;
    this.shadowRoot.querySelector(".numbers").title = `${fmtExact(data.value)} of ${fmtExact(target)}`;
  }
}

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

class CountersSparkline extends CountersBase {
  renderShell() {
    this.shadowRoot.innerHTML = `<style>${BASE_CSS}</style>
    <div><div class="label"></div>
      <div class="plot"><svg width="160" height="40" viewBox="0 0 160 40" role="img"></svg><div class="tip"></div></div>
    </div>`;
    this.shadowRoot.querySelector(".label").textContent = this.getAttribute("label") || "";
    this._points = [];
    this._coords = [];
    const plot = this.shadowRoot.querySelector(".plot");
    plot.addEventListener("pointermove", (e) => this.onHover(e));
    plot.addEventListener("pointerleave", () => this.onHover(null));
  }
  onHover(e) {
    const tip = this.shadowRoot.querySelector(".tip");
    const dot = this.shadowRoot.querySelector("circle");
    const n = this._points.length;
    if (!e || n === 0) {
      tip.style.display = "none";
      if (dot && this._coords.length) {
        const [cx, cy] = this._coords[this._coords.length - 1];
        dot.setAttribute("cx", cx.toFixed(1));
        dot.setAttribute("cy", cy.toFixed(1));
      }
      return;
    }
    const rect = e.currentTarget.getBoundingClientRect();
    const i = Math.min(n - 1, Math.max(0, Math.round(((e.clientX - rect.left) / rect.width) * (n - 1))));
    const p = this._points[i];
    const [cx, cy] = this._coords[i];
    if (dot) {
      dot.setAttribute("cx", cx.toFixed(1));
      dot.setAttribute("cy", cy.toFixed(1));
    }
    tip.innerHTML = "<b></b><span></span>";
    tip.querySelector("b").textContent = fmtExact(p.v);
    tip.querySelector("span").textContent = new Date(p.t).toLocaleString();
    tip.style.left = `${Math.min(rect.width - 40, Math.max(40, (cx / 160) * rect.width))}px`;
    tip.style.top = "-6px";
    tip.style.transform = "translate(-50%, -100%)";
    tip.style.display = "block";
  }
  async refresh() {
    const data = await this.fetchJson(this.getAttribute("series-src"));
    const svg = this.shadowRoot.querySelector("svg");
    svg.innerHTML = "";
    const pts = data.points || [];
    this._points = pts;
    if (pts.length < 2) return;
    const w = 160, h = 40, pad = 3;
    const values = pts.map((p) => Number(p.v));
    const max = Math.max(1, ...values);
    const coords = values.map((v, i) => [
      pad + (i / (pts.length - 1)) * (w - pad * 2),
      h - pad - (v / max) * (h - pad * 2),
    ]);
    this._coords = coords;
    const line = document.createElementNS(SVG_NS, "polyline");
    line.setAttribute("points", coords.map((c) => c.map((n) => n.toFixed(1)).join(",")).join(" "));
    line.setAttribute("fill", "none");
    line.setAttribute("stroke", "var(--chart-1, #2a78d6)");
    line.setAttribute("stroke-width", "2");
    line.setAttribute("stroke-linejoin", "round");
    line.setAttribute("stroke-linecap", "round");
    svg.appendChild(line);
    const [cx, cy] = coords[coords.length - 1];
    const dot = document.createElementNS(SVG_NS, "circle");
    dot.setAttribute("cx", cx.toFixed(1));
    dot.setAttribute("cy", cy.toFixed(1));
    dot.setAttribute("r", "3.5");
    dot.setAttribute("fill", "var(--chart-1, #2a78d6)");
    dot.setAttribute("stroke", "var(--card, #fcfcfb)");
    dot.setAttribute("stroke-width", "2");
    svg.appendChild(dot);
  }
}

class CountersBars extends CountersBase {
  renderShell() {
    this.shadowRoot.innerHTML = `<style>${BASE_CSS} :host { display: block; }</style>
    <div><div class="label"></div>
      <div class="plot"><svg width="100%" viewBox="0 0 480 160" role="img"></svg><div class="tip"></div></div>
    </div>`;
    this.shadowRoot.querySelector(".label").textContent = this.getAttribute("label") || "";
    this._points = [];
    const plot = this.shadowRoot.querySelector(".plot");
    plot.addEventListener("pointermove", (e) => this.onHover(e));
    plot.addEventListener("pointerleave", () => this.onHover(null));
  }
  onHover(e) {
    const tip = this.shadowRoot.querySelector(".tip");
    const bars = this.shadowRoot.querySelectorAll("path");
    const n = this._points.length;
    if (!e || n === 0) {
      tip.style.display = "none";
      bars.forEach((b) => (b.style.opacity = "1"));
      return;
    }
    const rect = e.currentTarget.getBoundingClientRect();
    const i = Math.min(n - 1, Math.max(0, Math.floor(((e.clientX - rect.left) / rect.width) * n)));
    const p = this._points[i];
    // The hovered bar lifts; the rest recede.
    bars.forEach((b, bi) => (b.style.opacity = bi === i ? "1" : "0.45"));
    tip.innerHTML = "<b></b><span></span>";
    tip.querySelector("b").textContent = fmtExact(p.v);
    tip.querySelector("span").textContent = new Date(p.t).toLocaleString();
    tip.style.left = `${Math.min(rect.width - 48, Math.max(48, (i + 0.5) * (rect.width / n)))}px`;
    tip.style.top = "4px";
    tip.style.display = "block";
  }
  async refresh() {
    const data = await this.fetchJson(this.getAttribute("series-src"));
    const svg = this.shadowRoot.querySelector("svg");
    svg.innerHTML = "";
    const pts = data.points || [];
    this._points = pts;
    const w = 480, h = 160, padTop = 6, padBottom = 4;
    const plotH = h - padTop - padBottom;
    for (const f of [0.25, 0.5, 0.75, 1]) {
      const line = document.createElementNS(SVG_NS, "line");
      line.setAttribute("x1", "0");
      line.setAttribute("x2", String(w));
      line.setAttribute("y1", String(padTop + plotH * f));
      line.setAttribute("y2", String(padTop + plotH * f));
      line.setAttribute("stroke", "var(--border, #e1e0d9)");
      line.setAttribute("stroke-width", "1");
      svg.appendChild(line);
    }
    if (pts.length === 0) return;
    const slot = w / pts.length;
    const barW = Math.min(24, Math.max(1, slot - 2));
    const values = pts.map((p) => Number(p.v));
    const max = Math.max(1, ...values);
    pts.forEach((p, i) => {
      const v = values[i];
      const bh = Math.max(v > 0 ? 2 : 0, (v / max) * plotH);
      const x = i * slot + (slot - barW) / 2;
      const y = padTop + plotH - bh;
      const r = Math.min(4, barW / 2, bh);
      const path = document.createElementNS(SVG_NS, "path");
      path.setAttribute(
        "d",
        `M ${x} ${y + bh} L ${x} ${y + r} Q ${x} ${y} ${x + r} ${y} L ${x + barW - r} ${y} Q ${x + barW} ${y} ${x + barW} ${y + r} L ${x + barW} ${y + bh} Z`,
      );
      path.setAttribute("fill", "var(--chart-1, #2a78d6)");
      svg.appendChild(path);
    });
  }
}

class CountersBoard extends CountersBase {
  renderShell() {
    this.shadowRoot.innerHTML = `<style>${BASE_CSS}
      :host { display: block; }
      ol { list-style: none; margin: .5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .625rem; }
      li { display: flex; gap: .625rem; align-items: center; font-size: .875rem; }
      .rank { width: 1.25rem; text-align: right; font-size: .75rem; font-weight: 600;
              color: var(--muted-foreground, #52514e); flex-shrink: 0; }
      .body { flex: 1; min-width: 0; }
      .head { display: flex; justify-content: space-between; gap: .5rem; }
      .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
      .track { display: block; margin-top: .25rem; height: 4px; border-radius: 999px; overflow: hidden;
               background: color-mix(in oklab, var(--chart-1, #2a78d6) 12%, transparent); }
      .fill { display: block; height: 100%; background: var(--chart-1, #2a78d6);
              border-radius: 999px; transition: width .6s ease; }
    </style>
    <div class="card"><div class="label"></div><ol></ol></div>`;
    this.shadowRoot.querySelector(".label").textContent = this.getAttribute("label") || "";
  }
  async refresh() {
    const items = JSON.parse(this.getAttribute("items") || "[]");
    const results = await Promise.allSettled(items.map((i) => this.fetchJson(i.src)));
    const rows = results
      .map((r, i) => ({ label: items[i].label, value: r.status === "fulfilled" ? r.value.value : null }))
      .filter((r) => r.value !== null)
      .sort((a, b) => {
        try {
          const d = BigInt(b.value) - BigInt(a.value);
          return d > 0n ? 1 : d < 0n ? -1 : 0;
        } catch {
          return 0;
        }
      })
      .slice(0, Number(this.getAttribute("limit") || 10));
    const top = rows[0] ? BigInt(rows[0].value) : 0n;
    const ol = this.shadowRoot.querySelector("ol");
    ol.innerHTML = "";
    rows.forEach((row, i) => {
      const li = document.createElement("li");
      const pct = top > 0n ? Number((BigInt(row.value) * 1000n) / top) / 10 : 0;
      li.innerHTML = `<span class="rank"></span>
        <span class="body">
          <span class="head"><span class="name"></span><b class="mono"></b></span>
          <span class="track"><span class="fill"></span></span>
        </span>`;
      li.querySelector(".rank").textContent = String(i + 1);
      li.querySelector(".name").textContent = row.label; // textContent — labels are untrusted
      const val = li.querySelector("b");
      val.textContent = fmtCompact(row.value);
      val.title = fmtExact(row.value);
      li.querySelector(".fill").style.width = `${pct}%`;
      ol.appendChild(li);
    });
  }
}

customElements.define("counters-stat", CountersStat);
customElements.define("counters-ticker", CountersTicker);
customElements.define("counters-goal", CountersGoal);
customElements.define("counters-sparkline", CountersSparkline);
customElements.define("counters-bars", CountersBars);
customElements.define("counters-board", CountersBoard);
I’m a…
