// Circular Progress Indicator (determinate) — Vendoo Design System  (CircularProgressIndicator)
// ─────────────────────────────────────────────────────────────────────────────
// The REAL component body, lifted VERBATIM from the design-system source
//   progress/circular/CircularProgressIndicator.jsx
// The published _ds_bundle.js predates this component and does not export it, so
// — exactly like ProgressBar.jsx / LinearProgress.jsx / Steps.jsx — this file
// registers it on window.VendooDesignSystem_a81b7b instead of using a top-level
// ESM `export` (the in-browser Babel transform rejects `export`). The playground
// renders this straight from the namespace; nothing is reimplemented.
// Requires tokens.css. React is global. role="progressbar" with aria-valuenow
// (determinate). A 48px ring (Figma container) that fills clockwise from the top.
// ─────────────────────────────────────────────────────────────────────────────
(function () {
  const React = window.React;
  const ns = (window.VendooDesignSystem_a81b7b = window.VendooDesignSystem_a81b7b || {});

  const VDS_CPI = {
    SIZE: 48,      // Figma container — no dedicated progress-size token in the system
    STROKE: 4.8,   // Figma stroke width — no dedicated token; kept as the source literal
    GAP: 4,        // gap between active indicator and track (px along the ring)
  };

  function CircularProgressIndicator({
    value = 0,
    size = VDS_CPI.SIZE,
    label,
    className,
    style,
  }) {
    const v = Math.max(0, Math.min(100, value));
    const stroke = VDS_CPI.STROKE * (size / VDS_CPI.SIZE);
    const r = (size - stroke) / 2;
    const cx = size / 2;
    const C = 2 * Math.PI * r;
    const gap = VDS_CPI.GAP * (size / VDS_CPI.SIZE);

    const active = (v / 100) * C;                    // active arc length
    const track = Math.max(0, C - active - gap * 2); // remaining track minus a gap each side

    const common = {
      cx, cy: cx, r, fill: "none",
      strokeWidth: stroke,
      strokeLinecap: "round",
      transform: `rotate(-90 ${cx} ${cx})`,
    };

    return (
      <span
        className={"vds-cpi" + (className ? " " + className : "")}
        role="progressbar"
        aria-label={label || "Progress"}
        aria-valuenow={Math.round(v)}
        aria-valuemin={0}
        aria-valuemax={100}
        style={Object.assign(
          { display: "inline-flex", width: size, height: size, lineHeight: 0 },
          style
        )}
      >
        <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>
          {/* Track — full ring at 0%, otherwise the complementary arc with a gap each side */}
          {v < 100 && (
            v <= 0 ? (
              <circle {...common} stroke="var(--sys-secondary-container)" />
            ) : (
              <circle
                {...common}
                stroke="var(--sys-secondary-container)"
                strokeDasharray={`${track} ${C}`}
                strokeDashoffset={-(active + gap)}
              />
            )
          )}
          {/* Active indicator — fills clockwise from 12 o'clock */}
          {v > 0 && (
            <circle
              {...common}
              stroke="var(--sys-primary)"
              strokeDasharray={`${active} ${C}`}
              strokeDashoffset={0}
            />
          )}
        </svg>
      </span>
    );
  }

  ns.CircularProgressIndicator = CircularProgressIndicator;
})();