/* global React */

// --- Icon set (inline SVG, stroke-based, 1.5 stroke) -----------------------
function Icon({ name, size = 16, className, style }) {
  const s = { width: size, height: size };
  const common = { fill: 'none', stroke: 'currentColor', strokeWidth: 1.6, strokeLinecap: 'round', strokeLinejoin: 'round', viewBox: '0 0 24 24', style: { ...s, ...style }, className };
  switch (name) {
    case 'home':    return <svg {...common}><path d="M3 11l9-8 9 8v9a2 2 0 0 1-2 2h-4v-7h-6v7H5a2 2 0 0 1-2-2v-9Z"/></svg>;
    case 'games':   return <svg {...common}><path d="M6 8h12a4 4 0 0 1 4 4v3a3 3 0 0 1-6 1.4l-.4-.9A2 2 0 0 0 13.8 14h-3.6a2 2 0 0 0-1.8 1.5l-.4 1A3 3 0 0 1 2 15v-3a4 4 0 0 1 4-4Z"/><path d="M8 11v2M7 12h2M15 11h.01M17 13h.01"/></svg>;
    case 'news':    return <svg {...common}><path d="M4 4h13v16H6a2 2 0 0 1-2-2V4Z"/><path d="M17 8h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2"/><path d="M8 9h6M8 13h6M8 17h4"/></svg>;
    case 'roadmap': return <svg {...common}><circle cx="6" cy="6" r="2.5"/><circle cx="18" cy="18" r="2.5"/><path d="M8.5 6H15a3 3 0 0 1 0 6H9a3 3 0 0 0 0 6h6.5"/></svg>;
    case 'user':    return <svg {...common}><circle cx="12" cy="8" r="4"/><path d="M4 21c1.5-4 4.7-6 8-6s6.5 2 8 6"/></svg>;
    case 'gift':    return <svg {...common}><rect x="3" y="8" width="18" height="5" rx="1"/><path d="M12 8v13M5 13v7a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-7"/><path d="M7.5 8a2.5 2.5 0 0 1 0-5C10 3 12 8 12 8M16.5 8a2.5 2.5 0 0 0 0-5C14 3 12 8 12 8"/></svg>;
    case 'trophy':  return <svg {...common}><path d="M8 4h8v5a4 4 0 0 1-8 0V4Z"/><path d="M8 6H5a2 2 0 0 0 2 3M16 6h3a2 2 0 0 1-2 3"/><path d="M10 14h4v3h2v3H8v-3h2v-3Z"/></svg>;
    case 'support': return <svg {...common}><path d="M12 21s-8-4.5-8-11a5 5 0 0 1 9-3 5 5 0 0 1 9 3c0 6.5-8 11-8 11Z"/></svg>;
    case 'discord': return <svg {...common}><path d="M18.5 5.5c-1.3-.6-2.8-1-4.4-1.2l-.2.4c1.5.4 2.8 1 4 1.7-1.5-.8-3.2-1.3-5-1.3s-3.5.5-5 1.3c1.2-.7 2.5-1.3 4-1.7l-.2-.4c-1.6.2-3.1.6-4.4 1.2-2 3-2.5 5.9-2.2 8.8 1.6 1.2 3.2 1.9 4.8 2.4l.8-1.2c-.8-.3-1.5-.6-2.2-1 .2 0 .4.1.5.2 2.2 1 4.6 1 6.8 0l.5-.2c-.7.4-1.4.7-2.2 1l.8 1.2c1.6-.5 3.2-1.2 4.8-2.4.4-3.5-.4-6.4-2.2-8.8Z"/><circle cx="9.5" cy="12" r=".8" fill="currentColor"/><circle cx="14.5" cy="12" r=".8" fill="currentColor"/></svg>;
    case 'book':    return <svg {...common}><path d="M4 4h11a3 3 0 0 1 3 3v13H7a3 3 0 0 1-3-3V4Z"/><path d="M4 17a3 3 0 0 1 3-3h11"/></svg>;
    case 'check':   return <svg {...common}><path d="m5 12 5 5 9-11"/></svg>;
    case 'lock':    return <svg {...common}><rect x="5" y="11" width="14" height="10" rx="2"/><path d="M8 11V8a4 4 0 0 1 8 0v3"/></svg>;
    case 'play':    return <svg {...common} fill="currentColor" stroke="none"><path d="M8 5v14l11-7L8 5Z"/></svg>;
    case 'copy':    return <svg {...common}><rect x="8" y="8" width="12" height="12" rx="2"/><path d="M16 8V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h2"/></svg>;
    case 'bolt':    return <svg {...common}><path d="M13 3 5 14h6l-1 7 8-11h-6l1-7Z" fill="currentColor" stroke="none"/></svg>;
    case 'arrow':   return <svg {...common}><path d="M5 12h14M13 6l6 6-6 6"/></svg>;
    case 'heart':   return <svg {...common} fill="currentColor" stroke="none"><path d="M12 21s-8-4.5-8-11a5 5 0 0 1 9-3 5 5 0 0 1 9 3c0 6.5-8 11-8 11Z"/></svg>;
    case 'plus':    return <svg {...common}><path d="M12 5v14M5 12h14"/></svg>;
    case 'settings':return <svg {...common}><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1.1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1A2 2 0 1 1 4.3 17l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1.1 1.7 1.7 0 0 0-.3-1.8l-.1-.1A2 2 0 1 1 7 4.3l.1.1a1.7 1.7 0 0 0 1.8.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1A2 2 0 1 1 19.7 7l-.1.1a1.7 1.7 0 0 0-.3 1.8V9a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1Z"/></svg>;
    default: return null;
  }
}

function CoinIcon({ size = 16 }) {
  return <span className="coin-ic" style={{ width: size, height: size }} aria-label="ShasteCoin" />;
}

function XPBar({ value, max, color = 'var(--xp)' }) {
  const pct = Math.max(0, Math.min(100, (value / max) * 100));
  return (
    <div className="profile-head__bar"><span style={{ width: `${pct}%`, background: `linear-gradient(90deg, ${color}, oklch(0.88 0.15 60))` }} /></div>
  );
}

function Progress({ value, max = 1, color = 'var(--pink)' }) {
  const pct = Math.max(0, Math.min(100, (value / max) * 100));
  return (
    <div className="quest__progress">
      <div className="quest__fill" style={{ width: `${pct}%`, background: `linear-gradient(90deg, ${color}, var(--pink-hot))` }} />
    </div>
  );
}

function Ring({ value = 4, max = 10, size = 200, stroke = 14, label = 'invited', sub = 'of 10' }) {
  const r = (size - stroke) / 2;
  const c = 2 * Math.PI * r;
  const off = c - (Math.min(value, max) / max) * c;
  return (
    <div className="ref-ring" style={{ width: size, height: size }}>
      <svg viewBox={`0 0 ${size} ${size}`}>
        <circle cx={size/2} cy={size/2} r={r} stroke="rgba(255,255,255,0.06)" strokeWidth={stroke} fill="none" />
        <circle cx={size/2} cy={size/2} r={r} stroke="url(#ringGrad)" strokeWidth={stroke} fill="none"
                strokeDasharray={c} strokeDashoffset={off} strokeLinecap="round" />
        <defs>
          <linearGradient id="ringGrad" x1="0" y1="0" x2="1" y2="1">
            <stop offset="0%" stopColor="oklch(0.84 0.14 75)" />
            <stop offset="100%" stopColor="#ff5ca9" />
          </linearGradient>
        </defs>
      </svg>
      <div className="ref-ring__center">
        <div className="ref-ring__num">{value}</div>
        <div className="ref-ring__lbl">{label}</div>
        <div className="ref-ring__lbl" style={{ marginTop: 4, opacity: .6 }}>{sub}</div>
      </div>
    </div>
  );
}

function Countup({ to, duration = 900, className }) {
  const [v, setV] = React.useState(0);
  const ref = React.useRef(null);
  React.useEffect(() => {
    let raf, start;
    const step = (t) => {
      if (!start) start = t;
      const p = Math.min(1, (t - start) / duration);
      setV(Math.round(to * (1 - Math.pow(1 - p, 3))));
      if (p < 1) raf = requestAnimationFrame(step);
    };
    raf = requestAnimationFrame(step);
    return () => cancelAnimationFrame(raf);
  }, [to]);
  return <span ref={ref} className={className}>{v.toLocaleString()}</span>;
}

Object.assign(window, { Icon, CoinIcon, XPBar, Progress, Ring, Countup });