/* ── PremiumProgress — OM Group ERP 2026 Premium Progress Bar ─────────────────
   SINGLE SOURCE OF TRUTH for every horizontal progress bar in the ERP.
   Exported to window.PremiumProgress so all Babel modules can use it.

   Props:
     pct     — 0–100 (clamped internally)
     color   — fill color, any CSS value (default: var(--or))
     height  — track height in px (default: 6)
     width   — track width, CSS string (default: '100%')
     style   — extra styles merged onto the track (can override width)
     onClick — click handler; enables cursor:pointer + keyboard support
     label   — optional accessible name / native tooltip

   Design:
     Track  — soft warm recessed capsule, hairline inner rim, no hard border
     Fill   — capsule, minimal vertical gradient, GPU translateX slide-in
     Hover  — fill brightens + soft glow tinted with the bar's OWN color
     Motion — one-time entrance, respects prefers-reduced-motion, never loops
     A11y   — role=progressbar (or button when clickable) + aria values
────────────────────────────────────────────────────────────────────────────── */

(function injectStyles() {
  if (typeof document === 'undefined') return;
  if (document.getElementById('om-pp-styles')) return;
  const el = document.createElement('style');
  el.id = 'om-pp-styles';
  el.textContent = `
    @keyframes omPPSweep {
      0%   { transform: translateX(-110%); }
      100% { transform: translateX(210%); }
    }
    @media (prefers-reduced-motion: no-preference) {
      .om-pp-sweep { animation: omPPSweep 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.62s both; }
    }
    .om-pp:focus-visible { outline:2px solid var(--or); outline-offset:2px }
  `;
  document.head.appendChild(el);
}());

const { useState: _ppSt, useEffect: _ppFx } = React;

function PremiumProgress({ pct = 0, color = 'var(--or)', height = 6, width = '100%', style, onClick, label }) {
  const p = Math.min(100, Math.max(0, +pct || 0));
  const [ready, setReady] = _ppSt(false);
  const [hov, setHov] = _ppSt(false);
  const rm = typeof matchMedia !== 'undefined'
    && matchMedia('(prefers-reduced-motion: reduce)').matches;

  _ppFx(() => {
    if (rm) { setReady(true); return; }
    // Two rAF ensures the initial style (translateX -100%) is painted
    // before we flip to the target, so the CSS transition fires. Runs once.
    let id = requestAnimationFrame(() => {
      id = requestAnimationFrame(() => setReady(true));
    });
    return () => cancelAnimationFrame(id);
  }, []);

  // Fill is always width:100% and slid in from the left — preserves a perfect
  // capsule at any pct, GPU-composited (no layout cost, no reflow per frame).
  const fillX = ready ? -(100 - p) : -100;

  // Hover glow is tinted with the bar's own module color — never a black shadow.
  const rim = 'inset 0 1px 1.5px rgba(28,20,10,.07), inset 0 0 0 0.5px rgba(28,20,10,.05)';
  const glow = `0 1px 3px color-mix(in srgb, ${color} 18%, transparent), 0 4px 14px color-mix(in srgb, ${color} 22%, transparent)`;

  return (
    <div
      className="om-pp"
      onClick={onClick}
      onMouseEnter={() => setHov(true)}
      onMouseLeave={() => setHov(false)}
      role={onClick ? 'button' : 'progressbar'}
      aria-label={label || undefined}
      aria-valuenow={onClick ? undefined : Math.round(p)}
      aria-valuemin={onClick ? undefined : 0}
      aria-valuemax={onClick ? undefined : 100}
      tabIndex={onClick ? 0 : undefined}
      onKeyDown={onClick ? e => (e.key === 'Enter' || e.key === ' ') && onClick(e) : undefined}
      title={label || undefined}
      style={{
        width,
        height,
        borderRadius: 999,
        background: '#EDEBE7',
        boxShadow: hov ? rim + ', ' + glow : rim,
        overflow: 'hidden',
        position: 'relative',
        cursor: onClick ? 'pointer' : 'default',
        flexShrink: 0,
        transition: 'box-shadow 0.24s cubic-bezier(.4,0,.2,1)',
        ...style,
      }}
    >
      <div style={{
        position: 'absolute',
        left: 0, top: 0, bottom: 0,
        width: '100%',
        borderRadius: 999,
        backgroundColor: color,
        backgroundImage: 'linear-gradient(180deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 48%, rgba(0,0,0,.05) 100%)',
        transform: `translateX(${fillX}%)`,
        transition: rm
          ? 'none'
          : 'transform 0.65s cubic-bezier(0.34, 1.1, 0.64, 1), filter 0.2s ease',
        filter: hov ? 'brightness(1.08) saturate(1.04)' : 'none',
        willChange: 'transform',
      }}>
        {/* One-time shimmer sweep on load — never loops */}
        {ready && !rm && p > 0 && (
          <div className="om-pp-sweep" style={{
            position: 'absolute',
            top: 0, bottom: 0, left: 0,
            width: '45%',
            background: 'linear-gradient(90deg, transparent, rgba(255,255,255,0.40), transparent)',
            pointerEvents: 'none',
            borderRadius: 'inherit',
          }} />
        )}
      </div>
    </div>
  );
}

window.PremiumProgress = PremiumProgress;