// Common UI atoms — Career Intelligence Suite ATS
const { useState, useEffect, useRef } = React;

// Lucide icon wrapper — uses window.lucide (loaded from CDN)
function Icon({ name, size = 16, stroke = 1.75, className = '', style = {} }) {
  const ref = useRef(null);
  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-width', stroke);
      ref.current.appendChild(svg);
    }
  }, [name, size, stroke]);
  return <span ref={ref} className={className} style={{ display: 'inline-flex', ...style }} />;
}
function toPascal(kebab) {
  return kebab.split('-').map(s => s[0].toUpperCase() + s.slice(1)).join('');
}

function Button({ variant = 'primary', size = 'md', icon, iconRight, children, onClick, style = {} }) {
  const btnCommon = {
    fontFamily: 'var(--font-sans)',
    fontWeight: 600,
    borderRadius: 8,
    border: '1px solid transparent',
    cursor: 'pointer',
    display: 'inline-flex',
    alignItems: 'center',
    gap: 6,
    lineHeight: 1.2,
    transition: 'all 120ms var(--ease-out)',
    whiteSpace: 'nowrap',
  };
  const sizes = {
    sm: { fontSize: 12, padding: '6px 10px' },
    md: { fontSize: 13, padding: '8px 14px' },
    lg: { fontSize: 14, padding: '11px 18px' },
  };
  const variants = {
    primary: { background: 'var(--brand-500)', color: '#fff' },
    secondary: { background: 'var(--neutral-0)', color: 'var(--fg-1)', borderColor: 'var(--border-strong)' },
    ghost: { background: 'transparent', color: 'var(--fg-1)' },
    danger: { background: 'var(--danger-500)', color: '#fff' },
    ai: { background: 'var(--violet-600)', color: '#fff' },
  };
  return (
    <button style={{ ...btnCommon, ...sizes[size], ...variants[variant], ...style }} onClick={onClick}
      onMouseEnter={e => { if (variant === 'primary') e.currentTarget.style.background = 'var(--brand-600)'; else if (variant === 'ai') e.currentTarget.style.background = 'var(--violet-700)'; else if (variant === 'secondary' || variant === 'ghost') e.currentTarget.style.background = 'var(--neutral-50)'; }}
      onMouseLeave={e => { e.currentTarget.style.background = variants[variant].background; }}>
      {icon && <Icon name={icon} size={14} />}
      {children}
      {iconRight && <Icon name={iconRight} size={14} />}
    </button>
  );
}

function Badge({ tone = 'neutral', children, dot = false }) {
  const tones = {
    neutral: { bg: '#EEF0F4', fg: '#333A47', dot: '#6B7383' },
    info: { bg: '#E6F4FB', fg: '#0B6BA0', dot: '#0E86C8' },
    violet: { bg: '#F3EFFF', fg: '#4E27B5', dot: '#7C55F2' },
    warn: { bg: '#FEF5E3', fg: '#8F5807', dot: '#E39514' },
    success: { bg: '#E7F7EE', fg: '#0A6D30', dot: '#17A34A' },
    danger: { bg: '#FDECEC', fg: '#8F1515', dot: '#DC2E2E' },
    brand: { bg: 'var(--brand-50)', fg: 'var(--brand-700)', dot: 'var(--brand-500)' },
  };
  const t = tones[tone];
  return (
    <span style={{
      background: t.bg, color: t.fg,
      fontSize: 11.5, fontWeight: 600, padding: '3px 8px',
      borderRadius: 999, display: 'inline-flex', alignItems: 'center', gap: 5, lineHeight: 1.4,
      whiteSpace: 'nowrap',
    }}>
      {dot && <span style={{ width: 6, height: 6, borderRadius: 999, background: t.dot }} />}
      {children}
    </span>
  );
}

function Avatar({ name = '', size = 32, tone = 0, status }) {
  const tones = [
    { bg: '#DBE5FF', fg: '#17357F' },
    { bg: '#E4DAFF', fg: '#4E27B5' },
    { bg: '#C9EDD9', fg: '#0A6D30' },
    { bg: '#FCE7B8', fg: '#8F5807' },
    { bg: '#FBD1D1', fg: '#8F1515' },
    { bg: '#C4E4F4', fg: '#0B6BA0' },
  ];
  const t = tones[tone % tones.length];
  const initials = (name || '?').replace(/\s/g, '').slice(0, 2);
  return (
    <span style={{ position: 'relative', display: 'inline-flex' }}>
      <span style={{
        width: size, height: size, borderRadius: 999,
        background: t.bg, color: t.fg, fontWeight: 600,
        fontSize: Math.round(size * 0.38),
        display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
        fontFamily: 'var(--font-sans)', flexShrink: 0,
      }}>{initials}</span>
      {status && <span style={{
        position: 'absolute', right: 0, bottom: 0,
        width: size * 0.28, height: size * 0.28, borderRadius: 999,
        background: status === 'online' ? 'var(--success-500)' : 'var(--neutral-400)',
        border: '2px solid #fff',
      }} />}
    </span>
  );
}

function AISparkle({ size = 14 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M12 3l1.9 5.8L20 10l-6.1 1.2L12 17l-1.9-5.8L4 10l6.1-1.2z"/>
      <path d="M20 3v4M22 5h-4"/>
    </svg>
  );
}

function Card({ children, style = {}, ai = false, hoverable = false }) {
  const base = ai ? {
    background: 'linear-gradient(180deg,#F8F5FF 0%,#FFFFFF 60%)',
    border: '1px solid #E4DAFF',
  } : {
    background: 'var(--neutral-0)',
    border: '1px solid var(--border-default)',
  };
  return (
    <div style={{
      ...base,
      borderRadius: 12,
      padding: 16,
      boxShadow: 'var(--shadow-sm)',
      ...style,
    }}
    onMouseEnter={e => { if (hoverable) e.currentTarget.style.boxShadow = 'var(--shadow-md)'; }}
    onMouseLeave={e => { if (hoverable) e.currentTarget.style.boxShadow = 'var(--shadow-sm)'; }}
    >{children}</div>
  );
}

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