/* global React */
// Taxai — shared UI primitives (AdFlex theme). Exports to window.
const { useEffect, useRef, useState } = React;

function Icon({ name, size = 20, color, strokeWidth = 2, 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 } });
    }
  }, [name, size, strokeWidth]);
  return <span ref={ref} style={{ display: 'inline-flex', color, lineHeight: 0, ...style }} />;
}

function Btn({ children, variant = 'primary', size = 'md', icon, iconRight, onClick, disabled, glow, style }) {
  const [h, setH] = useState(false);
  const base = {
    fontFamily: 'var(--font-body)', fontWeight: 700, cursor: disabled ? 'not-allowed' : 'pointer',
    border: '1px solid transparent', borderRadius: 'var(--r-sm)',
    display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 8,
    transition: 'all var(--dur) var(--ease-out)', whiteSpace: 'nowrap',
    fontSize: size === 'sm' ? 13 : size === 'lg' ? 16 : 14,
    padding: size === 'sm' ? '8px 13px' : size === 'lg' ? '14px 24px' : '11px 18px',
  };
  const variants = {
    primary: { background: disabled ? 'var(--ink-100)' : (h ? 'var(--brand-hover)' : 'var(--brand)'), color: disabled ? 'var(--ink-400)' : '#fff', boxShadow: glow && !disabled ? 'var(--shadow-brand)' : 'none' },
    secondary: { background: h ? 'var(--bg-3)' : 'var(--surface)', color: 'var(--fg-1)', borderColor: 'var(--border-2)' },
    ghost: { background: h ? 'var(--bg-3)' : 'transparent', color: h ? 'var(--fg-1)' : 'var(--fg-2)' },
  };
  return (
    <button onClick={disabled ? undefined : onClick} onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
      style={{ ...base, ...variants[variant], ...(base.transform || {}), transform: h && !disabled && variant === 'primary' ? 'none' : undefined, ...style }}>
      {icon && <Icon name={icon} size={size === 'sm' ? 15 : 16} />}{children}{iconRight && <Icon name={iconRight} size={size === 'sm' ? 15 : 16} />}
    </button>
  );
}

function Avatar({ name, size = 38, bg = 'var(--brand)', src }) {
  const initials = name.split(' ').filter(Boolean).map((w) => w[0]).slice(-2).join('');
  if (src) return <img src={src} alt={name} style={{ width: size, height: size, borderRadius: '50%', objectFit: 'cover' }} />;
  return <div style={{ width: size, height: size, borderRadius: '50%', background: bg, color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 700, fontSize: size * 0.38, fontFamily: 'var(--font-display)', flexShrink: 0 }}>{initials}</div>;
}

// Taxai wordmark — Chakra Petch, "ai" in brand red
function Logo({ size = 22, light = false }) {
  return (
    <span style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: size, letterSpacing: '-.02em', lineHeight: 1, color: light ? '#fff' : 'var(--fg-1)', display: 'inline-flex', alignItems: 'center' }}>
      Tax<span style={{ color: 'var(--brand)' }}>ai</span>
    </span>
  );
}

// Deterministic faux VietQR block (canvas — light DOM, capture-friendly)
function FauxQR({ size = 188, seed = 7 }) {
  const ref = useRef(null);
  useEffect(() => {
    const cv = ref.current; if (!cv) return;
    const n = 25, cell = Math.floor(size / n), px = cell * n;
    cv.width = px; cv.height = px;
    const ctx = cv.getContext('2d');
    ctx.fillStyle = '#fff'; ctx.fillRect(0, 0, px, px);
    ctx.fillStyle = '#0A0A0C';
    let s = seed;
    const rnd = () => { s = (s * 1103515245 + 12345) & 0x7fffffff; return s / 0x7fffffff; };
    for (let y = 0; y < n; y++) for (let x = 0; x < n; x++) {
      const finder = (cx, cy) => x >= cx && x < cx + 7 && y >= cy && y < cy + 7;
      const inFinder = finder(0, 0) || finder(n - 7, 0) || finder(0, n - 7);
      let on;
      if (inFinder) {
        const cx = x < n / 2 ? 0 : n - 7, cy = y < n / 2 ? 0 : n - 7;
        const dx = x - cx, dy = y - cy;
        on = (dx === 0 || dx === 6 || dy === 0 || dy === 6) || (dx >= 2 && dx <= 4 && dy >= 2 && dy <= 4);
      } else { on = rnd() > 0.52; }
      if (on) ctx.fillRect(x * cell, y * cell, cell, cell);
    }
  }, [size, seed]);
  return <canvas ref={ref} style={{ display: 'block', width: size, height: size, borderRadius: 8 }} />;
}

function Stars({ value = 5, size = 13 }) {
  const path = 'M12 2l2.9 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77 5.82 21l1.18-6.88-5-4.87 7.1-1.01L12 2z';
  return (
    <span style={{ display: 'inline-flex', gap: 1 }}>
      {[1, 2, 3, 4, 5].map((i) => (
        <svg key={i} viewBox="0 0 24 24" width={size} height={size}>
          <path d={path} fill={i <= Math.round(value) ? 'var(--warning)' : 'var(--ink-200)'} />
        </svg>
      ))}
    </span>
  );
}

Object.assign(window, { Icon, Btn, Avatar, Logo, FauxQR, Stars });