// AuraScore — multiple visualizations
// variant: 'orb' | 'ring' | 'gauge' | 'blob'

function AuraScore({ score = 82, variant = 'orb', size = 240, animated = true }) {
  if (variant === 'orb')   return <AuraOrb score={score} size={size} animated={animated}/>;
  if (variant === 'ring')  return <AuraRing score={score} size={size} animated={animated}/>;
  if (variant === 'gauge') return <AuraGauge score={score} size={size} animated={animated}/>;
  if (variant === 'blob')  return <AuraBlob score={score} size={size} animated={animated}/>;
  return null;
}

function AuraOrb({ score, size, animated }) {
  const id = React.useId();
  return (
    <div style={{ width: size, height: size, position: 'relative' }} className={animated ? 'pop-in' : ''}>
      {/* outer halo rotating */}
      <div style={{
        position: 'absolute', inset: 0, borderRadius: '50%',
        animation: animated ? 'spin-slow 18s linear infinite' : 'none',
      }}>
        <div style={{
          position: 'absolute', inset: 0, borderRadius: '50%',
          background: 'conic-gradient(from 0deg, #ff4db8, #8a5cf6, #4dd6ff, #fae14b, #ff4db8)',
          filter: 'blur(14px)', opacity: 0.9,
        }}/>
      </div>
      {/* inner disc */}
      <div style={{
        position: 'absolute', inset: '12%', borderRadius: '50%',
        background: 'radial-gradient(circle at 35% 30%, #fff, #f6edff 40%, #e8d5ff 100%)',
        boxShadow: 'inset 0 4px 20px rgba(138,92,246,0.3), 0 10px 40px rgba(138,92,246,0.4)',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        flexDirection: 'column',
      }}>
        <div style={{
          fontFamily: 'Instrument Serif, serif', fontSize: size * 0.42, lineHeight: 1,
          color: '#1a0d2e', fontWeight: 400, letterSpacing: '-0.03em',
        }}>{score}</div>
        <div style={{
          fontFamily: 'JetBrains Mono, monospace', fontSize: size * 0.055,
          textTransform: 'uppercase', letterSpacing: '0.2em',
          color: '#6b5e88', marginTop: 4,
        }}>aura score</div>
      </div>
      {/* orbiting sparkles */}
      <svg width={size} height={size} viewBox="0 0 100 100" style={{ position: 'absolute', inset: 0, animation: animated ? 'spin-slow 12s linear infinite reverse' : 'none' }}>
        <path d="M50 4 l1 3 l3 1 l-3 1 l-1 3 l-1-3 l-3-1 l3-1 z" fill="#fae14b"/>
        <path d="M92 60 l0.8 2.4 l2.4 0.8 l-2.4 0.8 l-0.8 2.4 l-0.8-2.4 l-2.4-0.8 l2.4-0.8 z" fill="#fff"/>
      </svg>
    </div>
  );
}

function AuraRing({ score, size, animated }) {
  const id = React.useId();
  const r = size * 0.42;
  const c = 2 * Math.PI * r;
  const pct = score / 100;
  return (
    <div style={{ width: size, height: size, position: 'relative' }} className={animated ? 'pop-in' : ''}>
      <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`} style={{ transform: 'rotate(-90deg)' }}>
        <defs>
          <linearGradient id={`ring-${id}`} x1="0" y1="0" x2="1" y2="1">
            <stop offset="0%" stopColor="#ff4db8"/>
            <stop offset="50%" stopColor="#8a5cf6"/>
            <stop offset="100%" stopColor="#4dd6ff"/>
          </linearGradient>
        </defs>
        <circle cx={size/2} cy={size/2} r={r} stroke="#f0ebe0" strokeWidth={size * 0.08} fill="none"/>
        <circle cx={size/2} cy={size/2} r={r} stroke={`url(#ring-${id})`} strokeWidth={size * 0.08} fill="none"
          strokeLinecap="round"
          strokeDasharray={c}
          strokeDashoffset={c * (1 - pct)}
          style={{ transition: 'stroke-dashoffset 1.2s cubic-bezier(.34,1.56,.64,1)' }}/>
      </svg>
      <div style={{
        position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', flexDirection: 'column',
      }}>
        <div style={{ fontFamily: 'Instrument Serif, serif', fontSize: size * 0.38, lineHeight: 1, color: '#1a0d2e' }}>{score}</div>
        <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: size * 0.055, textTransform: 'uppercase', letterSpacing: '0.15em', color: '#6b5e88', marginTop: 4 }}>/ 100</div>
      </div>
    </div>
  );
}

function AuraGauge({ score, size, animated }) {
  const id = React.useId();
  const h = size * 0.65;
  const pct = score / 100;
  // arc from -135 to 135
  const startA = -135, endA = 135;
  const a = startA + (endA - startA) * pct;
  const toRad = d => (d - 90) * Math.PI / 180;
  const cx = size/2, cy = size/2;
  const r = size * 0.4;
  const needleX = cx + Math.cos(toRad(a + 90)) * r * 0.85;
  const needleY = cy + Math.sin(toRad(a + 90)) * r * 0.85;
  const labels = ['cooked', 'meh', 'ok', 'strong', 'legend'];
  return (
    <div style={{ width: size, height: h, position: 'relative' }} className={animated ? 'pop-in' : ''}>
      <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>
        <defs>
          <linearGradient id={`gauge-${id}`} x1="0" y1="0" x2="1" y2="0">
            <stop offset="0%" stopColor="#ff8a7a"/>
            <stop offset="30%" stopColor="#fae14b"/>
            <stop offset="70%" stopColor="#b7f0cd"/>
            <stop offset="100%" stopColor="#8a5cf6"/>
          </linearGradient>
        </defs>
        {/* arc */}
        <path d={describeArc(cx, cy, r, -135, 135)} stroke={`url(#gauge-${id})`} strokeWidth={size * 0.11} fill="none" strokeLinecap="round"/>
        {/* ticks */}
        {[0,25,50,75,100].map((t,i) => {
          const ta = -135 + (270 * t/100);
          const x1 = cx + Math.cos(toRad(ta+90)) * (r - size*0.09);
          const y1 = cy + Math.sin(toRad(ta+90)) * (r - size*0.09);
          const x2 = cx + Math.cos(toRad(ta+90)) * (r - size*0.17);
          const y2 = cy + Math.sin(toRad(ta+90)) * (r - size*0.17);
          return <line key={i} x1={x1} y1={y1} x2={x2} y2={y2} stroke="#1a0d2e" strokeWidth="1.5"/>;
        })}
        {/* needle */}
        <line x1={cx} y1={cy} x2={needleX} y2={needleY} stroke="#1a0d2e" strokeWidth="3" strokeLinecap="round"
          style={{ transition: 'all 1.2s cubic-bezier(.34,1.56,.64,1)' }}/>
        <circle cx={cx} cy={cy} r={size*0.04} fill="#1a0d2e"/>
      </svg>
      <div style={{
        position: 'absolute', bottom: 0, left: 0, right: 0, textAlign: 'center',
      }}>
        <div style={{ fontFamily: 'Instrument Serif, serif', fontSize: size * 0.22, lineHeight: 1, color: '#1a0d2e' }}>{score}</div>
        <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: size * 0.05, textTransform: 'uppercase', letterSpacing: '0.15em', color: '#6b5e88' }}>{labels[Math.min(4, Math.floor(score/20))]}</div>
      </div>
    </div>
  );
}

function describeArc(cx, cy, r, startAngle, endAngle) {
  const toRad = d => (d - 90) * Math.PI / 180;
  const s = { x: cx + Math.cos(toRad(startAngle+90)) * r, y: cy + Math.sin(toRad(startAngle+90)) * r };
  const e = { x: cx + Math.cos(toRad(endAngle+90)) * r,   y: cy + Math.sin(toRad(endAngle+90)) * r };
  const large = endAngle - startAngle > 180 ? 1 : 0;
  return `M ${s.x} ${s.y} A ${r} ${r} 0 ${large} 1 ${e.x} ${e.y}`;
}

function AuraBlob({ score, size, animated }) {
  // score drives blob complexity/color
  const id = React.useId();
  return (
    <div style={{ width: size, height: size, position: 'relative' }} className={animated ? 'pop-in' : ''}>
      <svg width={size} height={size} viewBox="0 0 200 200">
        <defs>
          <radialGradient id={`blob-${id}`} cx="40%" cy="30%" r="80%">
            <stop offset="0%" stopColor="#ff9fe0"/>
            <stop offset="30%" stopColor="#ff4db8"/>
            <stop offset="60%" stopColor="#8a5cf6"/>
            <stop offset="100%" stopColor="#4dd6ff"/>
          </radialGradient>
          <filter id={`blur-${id}`}><feGaussianBlur stdDeviation="2"/></filter>
        </defs>
        <path fill={`url(#blob-${id})`} filter={`url(#blur-${id})`}
          d="M100,20 C140,20 170,50 175,90 C180,130 155,170 115,180 C75,190 35,165 25,125 C15,85 40,40 80,25 C87,22 93,20 100,20 Z">
          {animated && <animate attributeName="d" dur="8s" repeatCount="indefinite"
            values="
              M100,20 C140,20 170,50 175,90 C180,130 155,170 115,180 C75,190 35,165 25,125 C15,85 40,40 80,25 C87,22 93,20 100,20 Z;
              M100,25 C145,15 175,60 170,100 C175,140 140,175 100,175 C60,180 25,150 30,105 C25,60 55,30 100,25 Z;
              M100,20 C140,20 170,50 175,90 C180,130 155,170 115,180 C75,190 35,165 25,125 C15,85 40,40 80,25 C87,22 93,20 100,20 Z"/>}
        </path>
      </svg>
      <div style={{
        position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', flexDirection: 'column',
      }}>
        <div style={{ fontFamily: 'Instrument Serif, serif', fontSize: size * 0.38, lineHeight: 1, color: '#fff', textShadow: '0 2px 8px rgba(26,13,46,0.25)' }}>{score}</div>
        <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: size * 0.05, textTransform: 'uppercase', letterSpacing: '0.2em', color: '#fff', marginTop: 2, textShadow: '0 2px 4px rgba(26,13,46,0.25)' }}>aura</div>
      </div>
    </div>
  );
}

window.AuraScore = AuraScore;