const num = (v) => (v == null ? null : Number(v));
const money = (v) => (num(v) == null ? "—" : `$${num(v).toFixed(2)}`);
const tokens = (n) => {
  if (n == null) return "—";
  if (n >= 1e9) return `${(n / 1e9).toFixed(1)}B`;
  if (n >= 1e6) return `${(n / 1e6).toFixed(1)}M`;
  if (n >= 1e3) return `${(n / 1e3).toFixed(1)}k`;
  return String(n);
};

function gauge(label, value) {
  const d = document.createElement("div");
  d.className = "gauge";
  const l = document.createElement("span");
  l.className = "glabel";
  l.textContent = label;
  const v = document.createElement("span");
  v.className = "gvalue num";
  v.textContent = value == null ? "—" : `${Math.round(value)}%`;
  const bar = document.createElement("div");
  bar.className = "gbar";
  const fill = document.createElement("i");
  fill.style.width = `${Math.max(0, Math.min(100, value || 0))}%`;
  bar.append(fill);
  d.append(l, v, bar);
  return d;
}

function big(label, value, sub) {
  const d = document.createElement("div");
  d.className = "lbig";
  const l = document.createElement("span");
  l.className = "mlabel";
  l.textContent = label;
  const v = document.createElement("span");
  v.className = "mvalue num";
  v.textContent = value;
  const s = document.createElement("span");
  s.className = "msub";
  s.textContent = sub || "";
  d.append(l, v, s);
  return d;
}

export default {
  title: "LLM usage",
  interval: 5,

  mount(el) {
    el.innerHTML = `<div class="llm"></div>`;
  },

  update(state, el) {
    const box = el.querySelector(".llm");
    box.textContent = "";
    if (state.offline) {
      box.textContent = "llm-cost-dashboard offline";
      return;
    }
    const c = state.claude ?? {};
    const o = state.opencode ?? {};
    const gauges = document.createElement("div");
    gauges.className = "gauges";
    gauges.append(
      gauge("Context", c.context_pct),
      gauge("5h", c.five_hour_pct),
      gauge("7d", c.seven_day_pct),
    );
    box.append(gauges);
    box.append(
      big("opencode spend", money(o.cost), `${tokens(o.tokens)} · ${o.calls ?? 0} calls`),
    );
  },
};