// Primitives shared across all RHDR UI kits. Depends on tokens.css and lucide.

function Icon({ name, size = 16, color = 'currentColor', strokeWidth = 2, style }) {
  const ref = React.useRef(null);
  React.useEffect(() => {
    if (ref.current && window.lucide) {
      ref.current.innerHTML = '';
      const svg = window.lucide.createElement(window.lucide.icons[toPascal(name)] || window.lucide.icons.Circle);
      svg.setAttribute('width', size);
      svg.setAttribute('height', size);
      svg.setAttribute('stroke', color);
      svg.setAttribute('stroke-width', strokeWidth);
      ref.current.appendChild(svg);
    }
  }, [name, size, color, strokeWidth]);
  return <span ref={ref} style={{ display: 'inline-flex', lineHeight: 0, ...style }} />;
}
function toPascal(n) { return n.split('-').map(p => p[0].toUpperCase() + p.slice(1)).join(''); }

function Button({ children, variant = 'primary', size = 'md', onClick, style }) {
  const sizes = {
    sm: { padding: '6px 12px', fontSize: 13, borderRadius: 6 },
    md: { padding: '9px 16px', fontSize: 14, borderRadius: 8 },
    lg: { padding: '12px 20px', fontSize: 15, borderRadius: 10 },
  };
  const variants = {
    primary:   { background: 'var(--primary)', color: '#fff', border: '1px solid var(--primary)' },
    secondary: { background: '#fff', color: 'var(--ink)', border: '1px solid var(--border-strong)' },
    ghost:     { background: 'transparent', color: 'var(--ink)', border: '1px solid transparent' },
  };
  return (
    <button onClick={onClick} style={{ ...sizes[size], ...variants[variant], fontWeight: 500, cursor: 'pointer', fontFamily: 'inherit', ...style }}>
      {children}
    </button>
  );
}

function Badge({ children, tone = 'neutral', dot = false }) {
  const tones = {
    neutral: { bg: '#f1f5f9', fg: '#334155', dot: '#94a3b8' },
    accent:  { bg: 'var(--accent-soft)', fg: 'var(--accent)', dot: 'var(--accent)' },
    success: { bg: 'var(--success-soft)', fg: 'var(--success)', dot: 'var(--success)' },
    warning: { bg: 'var(--warning-soft)', fg: 'var(--warning)', dot: 'var(--warning)' },
    danger:  { bg: 'var(--danger-soft)', fg: 'var(--danger)', dot: 'var(--danger)' },
    primary: { bg: 'var(--primary-soft)', fg: 'var(--primary-900)', dot: 'var(--primary)' },
  };
  const t = tones[tone] || tones.neutral;
  return (
    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, background: t.bg, color: t.fg, padding: '3px 9px', borderRadius: 999, fontSize: 12, fontWeight: 500 }}>
      {dot && <span style={{ width: 6, height: 6, borderRadius: '50%', background: t.dot }}/>}
      {children}
    </span>
  );
}

function Avatar({ initials, size = 32, tone }) {
  const palette = ['#0f766e', '#0f766e', '#7c3aed', '#0891b2', '#db2777', '#65a30d'];
  const idx = initials ? initials.charCodeAt(0) % palette.length : 0;
  const bg = tone || palette[idx];
  return (
    <div style={{ width: size, height: size, borderRadius: '50%', background: bg, color: '#fff', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', fontSize: size * 0.38, fontWeight: 600, flexShrink: 0 }}>
      {initials}
    </div>
  );
}

function Eyebrow({ children, style }) {
  return (
    <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, fontSize: 12, fontWeight: 600, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--ink-muted)', ...style }}>
      <span style={{ width: 20, height: 1, background: 'var(--ink-muted)' }}/> {children}
    </div>
  );
}

function Wordmark({ size = 20 }) {
  const dot = Math.max(4, Math.round(size * 0.22));
  return (
    <div style={{ display: 'inline-flex', alignItems: 'flex-start', position: 'relative', lineHeight: 1 }}>
      <span style={{ fontFamily: 'Fraunces, serif', fontWeight: 700, fontSize: size, letterSpacing: '-0.03em', color: 'var(--primary)' }}>RHDR</span>
      <span aria-hidden="true" style={{ width: dot, height: dot, borderRadius: '50%', background: '#ea7a3c', marginLeft: Math.round(size * 0.08), marginTop: Math.round(size * 0.08) }}/>
    </div>
  );
}

function Card({ children, padding = 20, style }) {
  return (
    <div style={{ background: 'var(--surface)', border: '1px solid var(--border)', borderRadius: 'var(--r-lg)', padding, boxShadow: 'var(--shadow-sm)', ...style }}>
      {children}
    </div>
  );
}

Object.assign(window, { Icon, Button, Badge, Avatar, Eyebrow, Wordmark, Card });