// ACS Card — broadcast-grade Athletic Credibility Score card
// Number 87 / ELITE tier / NBA, circular arc-ring gauge red→gold→green, dense stat rows

const ACSCard = ({ accent }) => {
  const TARGET = 87;
  const [val, setVal] = React.useState(0);
  const [tilt, setTilt] = React.useState(true);

  React.useEffect(() => {
    let raf;
    const start = performance.now();
    const dur = 1700;
    const tick = (t) => {
      const p = Math.min(1, (t - start) / dur);
      const e = 1 - Math.pow(1 - p, 3);
      setVal(TARGET * e);
      if (p < 1) raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, []);

  // Gauge geometry — 300° arc, gap at bottom
  const cx = 140, cy = 140, r = 110;
  const startAngle = 210;
  const sweep = 300;

  const polar = (angle, radius) => {
    const rad = (angle - 90) * Math.PI / 180;
    return [cx + radius * Math.cos(rad), cy + radius * Math.sin(rad)];
  };
  const arcPath = (a1, a2, radius) => {
    const [x1, y1] = polar(a1, radius);
    const [x2, y2] = polar(a2, radius);
    const large = (a2 - a1) > 180 ? 1 : 0;
    return `M ${x1} ${y1} A ${radius} ${radius} 0 ${large} 1 ${x2} ${y2}`;
  };

  // red → gold → green gradient
  const stops = [
    { s: 0.0,  c: '#E5403E' },
    { s: 0.45, c: '#C9A24B' },
    { s: 0.72, c: '#9FC94F' },
    { s: 1.0,  c: '#19D17A' }
  ];
  const h2r = (h) => [parseInt(h.slice(1,3),16), parseInt(h.slice(3,5),16), parseInt(h.slice(5,7),16)];
  const lerp = (c1, c2, t) => {
    const [r1,g1,b1] = h2r(c1), [r2,g2,b2] = h2r(c2);
    return `rgb(${Math.round(r1+(r2-r1)*t)},${Math.round(g1+(g2-g1)*t)},${Math.round(b1+(b2-b1)*t)})`;
  };
  const colorAt = (p) => {
    for (let i = 0; i < stops.length - 1; i++) {
      if (p <= stops[i+1].s) {
        const a = stops[i], b = stops[i+1];
        return lerp(a.c, b.c, (p - a.s) / (b.s - a.s));
      }
    }
    return stops[stops.length-1].c;
  };

  // Filled segments up to current value
  const filled = Math.floor(val);
  const segs = [];
  for (let u = 0; u < filled; u++) {
    const a1 = startAngle + (u / 100) * sweep;
    const a2 = startAngle + ((u + 1) / 100) * sweep + 0.6;
    const color = colorAt(u / 100);
    segs.push(
      <path key={u} d={arcPath(a1, a2, r)} fill="none" stroke={color} strokeWidth="16"
        strokeLinecap="butt" style={{ filter: `drop-shadow(0 0 ${3 + (u/100)*7}px ${color})` }} />
    );
  }
  // marker dot at the head of the fill
  const headAngle = startAngle + (val / 100) * sweep;
  const [hx, hy] = polar(headAngle, r);
  const headColor = colorAt(val / 100);

  const num = Math.round(val);

  const statRows = [
    { label: 'Accuracy', value: '94%' },
    { label: 'Rank', value: 'Top 3% NBA' },
    { label: 'Streak', value: '12 W' }
  ];

  return (
    <div
      className="sc-acs-card"
      onMouseEnter={() => setTilt(false)}
      onMouseLeave={() => setTilt(true)}
      style={{
        width: '100%',
        maxWidth: 380,
        background: 'linear-gradient(180deg, #141414 0%, #0A0A0A 100%)',
        border: '1px solid rgba(255,255,255,0.1)',
        position: 'relative',
        overflow: 'hidden',
        transform: tilt ? 'rotate(2.4deg)' : 'rotate(0deg)',
        transition: 'transform 400ms cubic-bezier(0.2,0.8,0.2,1), box-shadow 400ms',
        boxShadow: `0 30px 70px -20px rgba(0,0,0,0.9), 0 0 60px -18px ${accent}40`
      }}>
      <CredGradient height={3} style={{ position: 'absolute', top: 0, left: 0, right: 0 }} />

      {/* header */}
      <div style={{
        padding: '20px 24px 0',
        display: 'flex',
        justifyContent: 'space-between',
        alignItems: 'center'
      }}>
        <div style={{
          fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.22em',
          color: 'var(--muted)', textTransform: 'uppercase'
        }}>ACS Card</div>
        <div style={{
          fontFamily: 'var(--display)', fontSize: 16, letterSpacing: '0.08em',
          color: accent, textTransform: 'uppercase',
          border: `1px solid ${accent}`, padding: '3px 10px', lineHeight: 1.2
        }}>NBA</div>
      </div>

      {/* gauge */}
      <div style={{ padding: '14px 24px 0', display: 'flex', justifyContent: 'center', position: 'relative' }}>
        <svg width="280" height="248" viewBox="0 0 280 270" style={{ overflow: 'visible' }}>
          {/* track */}
          <path d={arcPath(startAngle, startAngle + sweep, r)} fill="none"
            stroke="rgba(255,255,255,0.06)" strokeWidth="16" strokeLinecap="butt" />
          {segs}
          {filled > 0 && <circle cx={hx} cy={hy} r="6" fill="#fff" style={{ filter: `drop-shadow(0 0 6px ${headColor})` }} />}
        </svg>

        {/* center readout overlay */}
        <div style={{
          position: 'absolute', inset: 0, display: 'flex',
          flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
          paddingBottom: 22, pointerEvents: 'none'
        }}>
          <div style={{
            fontFamily: 'var(--display)', fontSize: 96, color: '#fff',
            lineHeight: 0.9, letterSpacing: '0.01em',
            textShadow: `0 0 24px ${headColor}50`
          }}>{num}</div>
          <div style={{
            fontFamily: 'var(--mono)', fontSize: 9, letterSpacing: '0.22em',
            color: '#555', textTransform: 'uppercase', marginTop: 2
          }}>ACS · / 100</div>
        </div>
      </div>

      {/* score meaning + tier */}
      <div style={{ padding: '4px 24px 0', textAlign: 'center' }}>
        <div style={{
          fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.2em',
          color: 'var(--muted)', textTransform: 'uppercase', marginBottom: 12
        }}>Athletic Credibility Score</div>
        <div style={{
          display: 'inline-block',
          fontFamily: 'var(--display)', fontSize: 22, letterSpacing: '0.14em',
          color: '#0A0A0A', background: accent, padding: '6px 20px',
          textTransform: 'uppercase',
          boxShadow: `0 0 18px ${accent}70`
        }}>Elite</div>
      </div>

      {/* stat rows */}
      <div style={{ padding: '24px 24px 8px' }}>
        {statRows.map((s, i) => (
          <div key={i} style={{
            display: 'flex', justifyContent: 'space-between', alignItems: 'center',
            padding: '12px 0',
            borderTop: '1px solid rgba(255,255,255,0.06)'
          }}>
            <span style={{
              fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.18em',
              color: 'var(--muted)', textTransform: 'uppercase'
            }}>{s.label}</span>
            <span style={{
              fontFamily: 'var(--display)', fontSize: 20, letterSpacing: '0.04em',
              color: '#fff', textTransform: 'uppercase'
            }}>{s.value}</span>
          </div>
        ))}
      </div>

      {/* footer */}
      <div style={{
        padding: '14px 24px 18px',
        borderTop: '1px solid rgba(255,255,255,0.06)',
        display: 'flex', justifyContent: 'space-between',
        fontFamily: 'var(--mono)', fontSize: 9, letterSpacing: '0.2em',
        color: '#444', textTransform: 'uppercase'
      }}>
        <span style={{ color: '#19D17A' }}>● Verified</span>
        <span>Season 25–26</span>
      </div>
    </div>
  );
};

Object.assign(window, { ACSCard });