// Shared visual primitives: Score ring, Bar, Sparkline, Card, Badge, etc.

const ScoreRing = ({ score = 0, size = 140, stroke = 8, label, sublabel, animate = true }) => {
  const [value, setValue] = React.useState(animate ? 0 : score);
  React.useEffect(() => {
    if (!animate) return;
    let raf;
    const start = performance.now();
    const dur = 1200;
    const tick = (t) => {
      const p = Math.min(1, (t - start) / dur);
      const eased = 1 - Math.pow(1 - p, 3);
      setValue(Math.round(score * eased));
      if (p < 1) raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, [score, animate]);

  const r = (size - stroke) / 2;
  const c = 2 * Math.PI * r;
  const offset = c - (value / 100) * c;
  const tone = score >= 75 ? 'var(--green)' : score >= 55 ? 'var(--purple)' : score >= 40 ? 'var(--amber)' : 'var(--red)';

  return (
    <div style={{ position: 'relative', width: size, height: size, display: 'inline-block' }}>
      <svg width={size} height={size} style={{ transform: 'rotate(-90deg)' }}>
        <circle cx={size/2} cy={size/2} r={r} stroke="rgba(168,130,255,0.10)" strokeWidth={stroke} fill="none" />
        <circle
          cx={size/2} cy={size/2} r={r}
          stroke={tone} strokeWidth={stroke} fill="none"
          strokeDasharray={c} strokeDashoffset={offset}
          strokeLinecap="round"
          style={{ transition: animate ? 'none' : 'stroke-dashoffset 0.6s ease', filter: `drop-shadow(0 0 8px ${tone}66)` }}
        />
      </svg>
      <div style={{
        position: 'absolute', inset: 0, display: 'flex',
        flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
        gap: 2,
      }}>
        <div style={{ fontFamily: 'var(--mono)', fontSize: size * 0.32, fontWeight: 600, color: 'var(--ink)', lineHeight: 1 }}>
          {value}
        </div>
        {label && <div style={{ fontSize: 10, color: 'var(--ink-3)', textTransform: 'uppercase', letterSpacing: 1, fontWeight: 600 }}>{label}</div>}
        {sublabel && <div style={{ fontSize: 11, color: tone, fontWeight: 600 }}>{sublabel}</div>}
      </div>
    </div>
  );
};

const MeterBar = ({ value = 0, max = 100, tone = 'purple', height = 6, animate = true, label, right }) => {
  const [w, setW] = React.useState(animate ? 0 : (value / max) * 100);
  React.useEffect(() => {
    if (!animate) { setW((value / max) * 100); return; }
    const t = setTimeout(() => setW((value / max) * 100), 80);
    return () => clearTimeout(t);
  }, [value, max, animate]);
  const colors = {
    purple: 'linear-gradient(90deg, var(--purple-2), var(--purple-glow))',
    green: 'linear-gradient(90deg, #3fbf85, var(--green))',
    amber: 'linear-gradient(90deg, #d99220, var(--amber))',
    red: 'linear-gradient(90deg, #d83a55, var(--red))',
  };
  return (
    <div>
      {(label || right) && (
        <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 6, fontSize: 11, color: 'var(--ink-3)' }}>
          <span>{label}</span>
          <span style={{ fontFamily: 'var(--mono)', color: 'var(--ink-2)' }}>{right}</span>
        </div>
      )}
      <div style={{ height, background: 'rgba(168,130,255,0.08)', borderRadius: 99, overflow: 'hidden' }}>
        <div style={{
          height: '100%', width: w + '%', background: colors[tone],
          borderRadius: 99, transition: 'width 0.9s cubic-bezier(.2,.8,.2,1)',
        }} />
      </div>
    </div>
  );
};

const Badge = ({ tone = 'purple', children, size = 'md', dot = false }) => {
  const tones = {
    purple: { bg: 'rgba(124,77,255,0.12)', border: 'rgba(168,130,255,0.30)', fg: 'var(--purple-glow)' },
    green:  { bg: 'rgba(108,230,164,0.10)', border: 'rgba(108,230,164,0.30)', fg: 'var(--green)' },
    amber:  { bg: 'rgba(255,184,77,0.10)', border: 'rgba(255,184,77,0.30)', fg: 'var(--amber)' },
    red:    { bg: 'rgba(255,93,122,0.10)', border: 'rgba(255,93,122,0.30)', fg: 'var(--red)' },
    ghost:  { bg: 'rgba(255,255,255,0.04)', border: 'rgba(168,130,255,0.15)', fg: 'var(--ink-2)' },
  };
  const t = tones[tone] || tones.purple;
  const sz = size === 'sm' ? { padding: '2px 7px', fontSize: 10 } : { padding: '4px 10px', fontSize: 11 };
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 6,
      background: t.bg, border: `1px solid ${t.border}`, color: t.fg,
      borderRadius: 99, fontWeight: 600, letterSpacing: 0.3, ...sz,
    }}>
      {dot && <span style={{ width: 6, height: 6, borderRadius: 99, background: t.fg, animation: 'pulseDot 1.6s ease infinite' }} />}
      {children}
    </span>
  );
};

const Card = ({ children, padding = 20, glow = false, style = {}, ...rest }) => (
  <div style={{
    background: 'linear-gradient(180deg, rgba(28,21,48,0.5), rgba(15,10,24,0.6))',
    border: '1px solid var(--line)',
    borderRadius: 3,
    padding,
    backdropFilter: 'blur(8px)',
    WebkitBackdropFilter: 'blur(8px)',
    boxShadow: glow ? '0 0 0 1px rgba(168,130,255,0.10), 0 20px 60px -20px rgba(91,46,255,0.35)' : 'none',
    ...style,
  }} {...rest}>{children}</div>
);

const SectionLabel = ({ children, right, icon }) => (
  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 14 }}>
    <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontFamily: 'var(--mono)', fontSize: 11, color: 'var(--ink-3)', textTransform: 'uppercase', letterSpacing: 1.5, fontWeight: 600 }}>
      {icon && <span style={{ color: 'var(--purple)' }}><Icon name={icon} size={13} /></span>}
      {children}
    </div>
    {right}
  </div>
);

// Sparkline / area chart
const Sparkline = ({ data, width = 600, height = 180, tone = 'purple', showArea = true, showAxis = false }) => {
  if (!data || !data.length) return null;
  const min = Math.min(...data);
  const max = Math.max(...data);
  const pad = (max - min) * 0.1 || 1;
  const yMin = min - pad;
  const yMax = max + pad;
  const stepX = width / (data.length - 1);
  const points = data.map((v, i) => [i * stepX, height - ((v - yMin) / (yMax - yMin)) * height]);
  const path = points.map((p, i) => (i === 0 ? 'M' : 'L') + p[0].toFixed(1) + ',' + p[1].toFixed(1)).join(' ');
  const areaPath = path + ` L${width},${height} L0,${height} Z`;
  const color = tone === 'green' ? 'var(--green)' : tone === 'red' ? 'var(--red)' : 'var(--purple)';
  return (
    <svg width="100%" height={height} viewBox={`0 0 ${width} ${height}`} preserveAspectRatio="none" style={{ display: 'block' }}>
      <defs>
        <linearGradient id={`spark-${tone}`} x1="0" x2="0" y1="0" y2="1">
          <stop offset="0%" stopColor={color} stopOpacity="0.35" />
          <stop offset="100%" stopColor={color} stopOpacity="0" />
        </linearGradient>
      </defs>
      {showArea && <path d={areaPath} fill={`url(#spark-${tone})`} />}
      <path d={path} fill="none" stroke={color} strokeWidth="1.6" strokeLinejoin="round"
        style={{ filter: `drop-shadow(0 0 6px ${color}55)` }} />
    </svg>
  );
};

const VolumeBars = ({ data, width = 600, height = 50 }) => {
  if (!data || !data.length) return null;
  const max = Math.max(...data);
  const bw = width / data.length;
  return (
    <svg width="100%" height={height} viewBox={`0 0 ${width} ${height}`} preserveAspectRatio="none" style={{ display: 'block' }}>
      {data.map((v, i) => {
        const h = (v / max) * height;
        return <rect key={i} x={i * bw + 0.5} y={height - h} width={bw - 1} height={h}
          fill="var(--purple)" opacity={0.25 + (i / data.length) * 0.5} />;
      })}
    </svg>
  );
};

// Animated dot for "thinking"
const ThinkDots = () => (
  <span style={{ display: 'inline-flex', gap: 3, marginLeft: 4 }}>
    {[0, 1, 2].map(i => (
      <span key={i} style={{
        width: 4, height: 4, borderRadius: 99, background: 'var(--purple-glow)',
        animation: `pulseDot 1.2s ease infinite`, animationDelay: `${i * 0.18}s`,
      }} />
    ))}
  </span>
);

const Mono = ({ children, color = 'var(--ink)', size = 13, weight = 500 }) => (
  <span style={{ fontFamily: 'var(--mono)', color, fontSize: size, fontWeight: weight, letterSpacing: 0 }}>{children}</span>
);

const KV = ({ k, v, tone, mono = true }) => (
  <div style={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
    <span style={{ fontSize: 10, color: 'var(--ink-3)', textTransform: 'uppercase', letterSpacing: 1, fontWeight: 600 }}>{k}</span>
    <span style={{ fontFamily: mono ? 'var(--mono)' : 'var(--sans)', fontSize: 14, color: tone || 'var(--ink)', fontWeight: 600 }}>{v}</span>
  </div>
);

Object.assign(window, { ScoreRing, MeterBar, Badge, Card, SectionLabel, Sparkline, VolumeBars, ThinkDots, Mono, KV });