/* Briefing Hub Nexus — shared atoms → window.UI */
(function () {
  const { useState, useEffect, useRef } = React;

  // Animated circular progress ring
  function Ring({ size = 124, stroke = 8, value = 0, track = "var(--gray-800)", color = "var(--brand)", glow = true, children }) {
    const r = (size - stroke) / 2;
    const c = 2 * Math.PI * r;
    const off = c * (1 - Math.max(0, Math.min(100, value)) / 100);
    return (
      <div style={{ position: "relative", width: size, height: size }}>
        <svg width={size} height={size} style={{ transform: "rotate(-90deg)" }}>
          <circle cx={size / 2} cy={size / 2} r={r} fill="none" stroke={track} strokeWidth={stroke} />
          <circle cx={size / 2} cy={size / 2} r={r} fill="none" stroke={color} strokeWidth={stroke}
            strokeLinecap="round" strokeDasharray={c} strokeDashoffset={off}
            style={{ transition: "stroke-dashoffset .9s cubic-bezier(0.2,0,0,1)",
                     filter: glow ? "drop-shadow(0 0 8px var(--brand-glow))" : "none" }} />
        </svg>
        <div style={{ position: "absolute", inset: 0, display: "grid", placeItems: "center" }}>{children}</div>
      </div>
    );
  }

  // count-up number hook
  function useCountUp(target, ms = 900, run = true) {
    const [n, setN] = useState(0);
    const raf = useRef(0);
    useEffect(() => {
      if (!run) { setN(target); return; }
      const t0 = performance.now();
      const tick = (now) => {
        const p = Math.min(1, (now - t0) / ms);
        const e = 1 - Math.pow(1 - p, 3);
        setN(Math.round(target * e));
        if (p < 1) raf.current = requestAnimationFrame(tick);
      };
      raf.current = requestAnimationFrame(tick);
      const fb = setTimeout(() => setN(target), ms + 80); // fallback if rAF throttled
      return () => { cancelAnimationFrame(raf.current); clearTimeout(fb); };
    }, [target, run]);
    return n;
  }

  window.UI = { Ring, useCountUp };
})();