// Primitive, reusable components for the Stoda dashboard.
const { useState, useMemo, useEffect, useRef } = React;
const { Icons, DATA } = window;

// ---------- Pills ----------
function Pill({ kind = "neutral", children, mono = false }) {
  return (
    <span className={"pill " + kind} style={mono ? { fontFamily: "var(--mono)" } : null}>
      {kind !== "dark" && <span className="dot" />}
      {children}
    </span>
  );
}

function DetBadge({ det }) {
  return det
    ? <span className="pill det"><Icons.Check s={11}/> DET</span>
    : <span className="pill nondet"><Icons.Warn s={11}/> NON-DET</span>;
}

// ---------- Owner chip ----------
function OwnerChip({ id, size = 20, showName = false }) {
  const o = DATA.OPERATORS[id];
  if (!o) return null;
  return (
    <span className="owner" style={{ gap: 8 }}>
      <span className="owner-chip"
        style={{ width: size, height: size, background: o.color, fontSize: Math.round(size*0.42) }}>
        {o.initials}
      </span>
      {showName && <span>{o.name}</span>}
    </span>
  );
}

// ---------- Sparkbars ----------
function Sparkbars({ values, highlightLast = true }) {
  return (
    <div className="sparkbars">
      {values.map((v, i) => (
        <span
          key={i}
          className={highlightLast && i === values.length - 1 ? "hi" : ""}
          style={{ height: `${Math.round(v*100)}%` }}
        />
      ))}
    </div>
  );
}

// ---------- Ring ----------
function Ring({ value, label = "Score", color }) {
  const r = 48, c = 2 * Math.PI * r;
  const off = c * (1 - value/100);
  const stroke = color || (
    value >= 85 ? "var(--green)" :
    value >= 70 ? "var(--amber)" : "var(--red)"
  );
  return (
    <div className="ring-wrap">
      <svg width="112" height="112" viewBox="0 0 112 112">
        <circle cx="56" cy="56" r={r} fill="none" stroke="var(--tan-2)" strokeWidth="8"/>
        <circle cx="56" cy="56" r={r} fill="none"
          stroke={stroke} strokeWidth="8"
          strokeDasharray={c} strokeDashoffset={off}
          strokeLinecap="round"
          style={{ transform: "rotate(-90deg)", transformOrigin: "56px 56px", transition: "stroke-dashoffset 0.5s ease" }}/>
      </svg>
      <div className="label">{value}<small>{label}</small></div>
    </div>
  );
}

// ---------- KPI ----------
function Kpi({ label, value, unit, delta, deltaDir = "pos", spark }) {
  return (
    <div className="card kpi">
      <div className="label">{label}</div>
      <div className="value">
        {value}{unit && <span className="unit">{unit}</span>}
      </div>
      {spark && <div style={{ marginTop: 12 }}><Sparkbars values={spark}/></div>}
      {delta && (
        <div className={"delta " + (deltaDir === "pos" ? "pos" : deltaDir === "neg" ? "neg" : "")}>
          {deltaDir === "pos" ? "▲" : deltaDir === "neg" ? "▼" : "-"} {delta}
        </div>
      )}
    </div>
  );
}

// ---------- Tabs ----------
function Tabs({ items, value, onChange }) {
  return (
    <div className="tabs">
      {items.map(it => (
        <button key={it.value} className={value === it.value ? "on" : ""} onClick={() => onChange(it.value)}>
          {it.label}
        </button>
      ))}
    </div>
  );
}

// ---------- App glyph ----------
function AppGlyph({ name, bg }) {
  const letter = name.trim().charAt(0);
  const color = bg || "var(--tan-3)";
  return (
    <div className="glyph" style={{ background: color }}>{letter}</div>
  );
}

// ---------- Util ----------
const currency = n => "$" + n.toLocaleString("en-US");
const relpct = (a, b) => Math.round((a / b) * 100);

// Export
Object.assign(window, { Pill, DetBadge, OwnerChip, Sparkbars, Ring, Kpi, Tabs, AppGlyph, currency, relpct });