/* global React, lucide */
// Shared atoms for the Psyllify storefront kit.
const { useState, useEffect, useRef } = React;

function Icon({ name, size = 20, color, strokeWidth = 1.8, style }) {
  const ref = useRef(null);
  useEffect(() => {
    if (ref.current && window.lucide) {
      ref.current.innerHTML = '';
      const el = document.createElement('i');
      el.setAttribute('data-lucide', name);
      ref.current.appendChild(el);
      window.lucide.createIcons({
        attrs: { width: size, height: size, 'stroke-width': strokeWidth, stroke: color || 'currentColor' },
        nameAttr: 'data-lucide'
      });
    }
  }, [name, size, color, strokeWidth]);
  return <span ref={ref} style={{ display: 'inline-flex', ...style }} />;
}

function Button({ variant = 'primary', children, onClick, style, full, type }) {
  const base = {
    fontFamily: 'var(--font-sans)', fontWeight: 700, fontSize: 16, cursor: 'pointer',
    borderRadius: 999, padding: '15px 30px', border: 0, transition: 'all .12s ease',
    width: full ? '100%' : 'auto', display: 'inline-flex', alignItems: 'center',
    justifyContent: 'center', gap: 10, lineHeight: 1.1, ...style
  };
  const variants = {
    primary: { background: 'var(--green-600)', color: '#fff' },
    secondary: { background: 'var(--yellow-400)', color: 'var(--green-950)',
      border: '1.5px solid var(--green-950)', boxShadow: '3px 3px 0 0 var(--green-950)' },
    ghost: { background: 'transparent', color: 'var(--green-700)', textDecoration: 'underline', padding: '15px 8px', fontWeight: 600 },
    outline: { background: '#fff', color: 'var(--green-900)', border: '1.5px solid var(--green-900)' }
  };
  const [press, setPress] = useState(false);
  const ps = press && variant === 'secondary'
    ? { transform: 'translate(3px,3px)', boxShadow: '0 0 0 0 var(--green-950)' }
    : press ? { transform: 'scale(.98)' } : {};
  return (
    <button type={type || 'button'} onClick={onClick}
      onMouseDown={() => setPress(true)} onMouseUp={() => setPress(false)} onMouseLeave={() => setPress(false)}
      style={{ ...base, ...variants[variant], ...ps }}
      onMouseOver={e => { if (variant === 'primary') e.currentTarget.style.background = 'var(--green-700)'; }}
      onMouseOut={e => { if (variant === 'primary') e.currentTarget.style.background = 'var(--green-600)'; }}>
      {children}
    </button>
  );
}

function Badge({ children, tone = 'green', style }) {
  const tones = {
    green: { background: 'var(--green-100)', color: 'var(--green-900)' },
    solid: { background: 'var(--green-600)', color: '#fff' },
    outline: { background: '#fff', border: '1.5px solid var(--green-950)', color: 'var(--green-900)' },
    flag: { background: 'var(--yellow-400)', color: 'var(--green-950)', fontWeight: 700 },
    seafoam: { background: 'var(--green-500)', color: '#fff' }
  };
  return (
    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 7, fontSize: 13,
      fontWeight: 600, padding: '8px 14px', borderRadius: 999, lineHeight: 1, ...tones[tone], ...style }}>
      {children}
    </span>
  );
}

function Stars({ n = 5, size = 16 }) {
  return (
    <span style={{ display: 'inline-flex', gap: 2, color: '#F5A623' }}>
      {Array.from({ length: n }).map((_, i) => (
        <svg key={i} width={size} height={size} viewBox="0 0 24 24" fill="#F5A623">
          <path d="M12 2l2.9 6.3 6.9.7-5.2 4.6 1.5 6.8L12 17.5 5.9 20.4l1.5-6.8L2.2 9l6.9-.7L12 2z"/>
        </svg>
      ))}
    </span>
  );
}

Object.assign(window, { Icon, Button, Badge, Stars });