/* WPSiteBeam — ScoreRing.jsx
   v1.0.0 — 2026-05-26
   SVG score ring component adopted from Claude Design concept review.
   Used in: tab-ada.jsx step 3 header, ADAReport.jsx, future dashboard.

   Usage:
     <window.ScoreRing value={87} label="Accessibility" size={72}/>
     <window.ScoreRing value={63} label="SEO" size={56} showLabel/>

   Props:
     value     : 0-100 number
     label     : string (shown below ring)
     size      : number px (default 72)
     stroke    : number px (default 7)
     color     : CSS color override (defaults to threshold-based)
     showLabel : boolean (show label text below, default true)
     animate   : boolean (animate dashoffset on mount, default true)
*/
(function() {
  'use strict';
  if (typeof window === 'undefined' || !window.React) return;
  const { useEffect, useRef } = React;

  function ScoreRing({ value = 0, label, size = 72, stroke = 7, color, showLabel = true, animate = true }) {
    const v   = Math.max(0, Math.min(100, Math.round(value)));
    const r   = (size - stroke) / 2;
    const c   = 2 * Math.PI * r;
    const off = c - (v / 100) * c;

    // Color threshold: green ≥80, amber 60-79, red <60
    const tone = color
      || (v >= 80 ? 'var(--green,#10b981)'
        : v >= 60 ? 'var(--warn,#f59e0b)'
        : 'var(--rose,#f43f5e)');

    const circleRef = useRef(null);
    useEffect(() => {
      if (!animate || !circleRef.current) return;
      // Start at 0 fill, animate to final value
      circleRef.current.style.strokeDashoffset = String(c);
      const raf = requestAnimationFrame(() => {
        if (circleRef.current) {
          circleRef.current.style.transition = 'stroke-dashoffset .8s cubic-bezier(.4,0,.2,1)';
          circleRef.current.style.strokeDashoffset = String(off);
        }
      });
      return () => cancelAnimationFrame(raf);
    }, [v]);

    return (
      <div style={{ display:'inline-flex', flexDirection:'column', alignItems:'center', gap:4 }}>
        <div style={{ position:'relative', width:size, height:size, flexShrink:0 }}>
          <svg width={size} height={size} style={{ display:'block' }}>
            {/* Track */}
            <circle
              cx={size/2} cy={size/2} r={r}
              stroke="var(--border,rgba(0,0,0,.12))" strokeWidth={stroke}
              fill="none"
            />
            {/* Fill */}
            <circle
              ref={circleRef}
              cx={size/2} cy={size/2} r={r}
              stroke={tone} strokeWidth={stroke}
              fill="none"
              strokeDasharray={c}
              strokeDashoffset={animate ? c : off}
              strokeLinecap="round"
              style={{ transform:'rotate(-90deg)', transformOrigin:'50% 50%', transition: animate ? undefined : 'none' }}
            />
          </svg>
          {/* Value */}
          <div style={{
            position:'absolute', inset:0,
            display:'flex', alignItems:'center', justifyContent:'center',
            flexDirection:'column',
          }}>
            <span style={{
              fontFamily:'var(--font-mono,monospace)',
              fontSize: size >= 72 ? '1.15rem' : size >= 56 ? '.95rem' : '.82rem',
              fontWeight:700,
              color: tone,
              lineHeight:1,
            }}>{v}</span>
          </div>
        </div>
        {showLabel && label && (
          <span style={{
            fontSize:'.66rem', color:'var(--dim)', textAlign:'center',
            lineHeight:1.3, maxWidth: size + 8,
            fontWeight:600, letterSpacing:'.03em', textTransform:'uppercase',
          }}>{label}</span>
        )}
      </div>
    );
  }

  window.ScoreRing = ScoreRing;
  console.log('[WPSB] ScoreRing v1.0.0 loaded');
})();