/* @jsx React.createElement */

// ============= Macro Ring =============
function MacroRing({ value, color, percent, label, size = 86, suffix }) {
  const stroke = 5;
  const r = (size - stroke) / 2;
  const c = 2 * Math.PI * r;
  const offset = c - (percent / 100) * c;
  return (
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8 }}>
      <div style={{ position: 'relative', width: size, height: size }}>
        <svg width={size} height={size} style={{ transform: 'rotate(-90deg)' }}>
          <circle cx={size/2} cy={size/2} r={r} fill="none" stroke="#1F1F1F" strokeWidth={stroke} />
          <circle
            cx={size/2} cy={size/2} r={r} fill="none"
            stroke={color} strokeWidth={stroke} strokeLinecap="round"
            strokeDasharray={c} strokeDashoffset={offset}
            style={{ transition: 'stroke-dashoffset 600ms cubic-bezier(0.2,0.7,0.2,1)' }}
          />
        </svg>
        <div style={{
          position: 'absolute', inset: 0,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          fontFamily: "'Bricolage Grotesque', Inter, sans-serif",
          fontWeight: 700, color: '#F5F5F5',
          fontSize: size > 100 ? 26 : 18,
        }}>
          {value}{suffix && <span style={{ fontSize: 10, color: '#7A7A7A', marginLeft: 1 }}>{suffix}</span>}
        </div>
      </div>
      {label && <div style={{
        fontSize: 10, letterSpacing: '0.12em', textTransform: 'uppercase',
        color: '#7A7A7A', fontWeight: 600, fontFamily: 'Inter',
      }}>{label}</div>}
    </div>
  );
}

// ============= Sparkline =============
function Sparkline({ data, color = '#C6FF3D', width = 500, height = 110 }) {
  const max = Math.max(...data);
  const min = Math.min(...data);
  const range = max - min || 1;
  const stepX = width / (data.length - 1);
  const pts = data.map((v, i) => [i * stepX, height - ((v - min) / range) * height * 0.85 - 6]);
  const linePath = pts.map((p, i) => `${i ? 'L' : 'M'}${p[0].toFixed(1)} ${p[1].toFixed(1)}`).join(' ');
  const fillPath = `${linePath} L${width} ${height} L0 ${height} Z`;
  return (
    <svg width="100%" viewBox={`0 0 ${width} ${height}`} preserveAspectRatio="none">
      <defs>
        <linearGradient id="spark" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor={color} stopOpacity="0.45" />
          <stop offset="100%" stopColor={color} stopOpacity="0" />
        </linearGradient>
      </defs>
      <path d={fillPath} fill="url(#spark)" />
      <path d={linePath} fill="none" stroke={color} strokeWidth="2.5" strokeLinejoin="round" strokeLinecap="round" />
    </svg>
  );
}

// ============= Stat (icon + label + value) =============
function Stat({ icon, label, value }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
        <span style={{ color: '#C6FF3D', display: 'inline-flex' }}>{icon}</span>
        <span style={{
          fontSize: 11, letterSpacing: '0.1em', textTransform: 'uppercase',
          color: '#7A7A7A', fontWeight: 600, fontFamily: 'Inter',
        }}>{label}</span>
      </div>
      <div style={{
        fontFamily: "'Bricolage Grotesque', Inter, sans-serif",
        fontWeight: 800, fontSize: 22, color: '#F5F5F5',
        letterSpacing: '-0.01em',
      }}>{value}</div>
    </div>
  );
}

// ============= Inline icons (Lucide-style monoline) =============
const Icon = {
  Dumbbell: () => (
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M6 4v16M3 8v8M21 8v8M18 4v16M6 12h12" />
    </svg>
  ),
  Run: () => (
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
      <circle cx="13" cy="4" r="2"/><path d="m4 22 5-7-3-2 7-7 3 5 4 1"/><path d="M9 15l-1 4"/>
    </svg>
  ),
  Flame: () => (
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.4-.7-2-1.5-3-1-1.4-1.5-2.5-1.5-3.5 0-1 .5-2 1.5-3 0 4 4 4 4 8 0 1.7-.6 3-1.5 4-1 1.2-2 2-3 2-1.4 0-2.5-1-2.5-2.5"/>
      <path d="M12 22a7 7 0 0 0 7-7c0-2-1-3.9-3-5.5C15 8 14 6 14 4c-3 1-6 5-6 9 0 1.4.4 2.7 1 4"/>
    </svg>
  ),
  ChevDown: () => (
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
      <path d="m6 8 6 6 6-6M6 14l6 6 6-6"/>
    </svg>
  ),
  ChevUp: () => (
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
      <path d="m6 16 6-6 6 6M6 10l6-6 6 6"/>
    </svg>
  ),
  Plus: () => (
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round">
      <path d="M12 5v14M5 12h14"/>
    </svg>
  ),
  Home: () => (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
      <path d="M9 22V12h6v10"/>
    </svg>
  ),
  Activity: () => (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M22 12h-4l-3 9L9 3l-3 9H2"/>
    </svg>
  ),
  Apple: () => (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M12 6c2-3 5-3 7-1 3 3 1 8-2 11-2 2-4 3-5 3s-3-1-5-3c-3-3-5-8-2-11 2-2 5-2 7 1z"/>
      <path d="M12 6V3"/>
    </svg>
  ),
  User: () => (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <circle cx="12" cy="8" r="4"/><path d="M4 21a8 8 0 0 1 16 0"/>
    </svg>
  ),
  Check: () => (
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
      <path d="M5 12l5 5L20 7"/>
    </svg>
  ),
};

window.MacroRing = MacroRing;
window.Sparkline = Sparkline;
window.Stat = Stat;
window.Icon = Icon;