// Primitive building blocks for the FactoryFix ATS UI kit
// Small inline components — consumed by the view components

const { color: C, radius: R, shadow: S, font: F, gradient: G } = window.FF;

/* ---------- Icon (loads from ../../assets/icons) ---------- */
function Icon({ name, size = 20, style = {}, alt = '' }) {
  return <img src={`assets/icons/${name}.svg`} alt={alt} width={size} height={size} style={{ display:'inline-block', verticalAlign:'middle', ...style }} />;
}

/* ---------- Button ---------- */
function Button({ variant = 'primary', size = 'md', children, onClick, style = {}, iconLeft, iconRight, disabled }) {
  const base = {
    display:'inline-flex', alignItems:'center', gap:6, justifyContent:'center',
    fontFamily: F.sans, fontWeight: 600, fontSize: size === 'sm' ? 13 : 14,
    border:0, borderRadius: R.md, cursor:'pointer', transition:'all 200ms',
    padding: size === 'sm' ? '6px 12px' : '9px 14px',
    height: size === 'sm' ? 32 : 40, boxSizing:'border-box',
  };
  const variants = {
    primary: { background: C.shade[880], color:'#fff' },
    secondary: { background:'#fff', color: C.shade[880], border:`2px solid ${C.shade[880]}`, padding: size==='sm'?'4px 10px':'7px 12px' },
    text: { background:'transparent', color: C.shade[880] },
    highlight: { background:'#fff', color: C.highlight[600], border:`2px solid ${C.highlight[600]}`, fontWeight:700, padding: size==='sm'?'4px 10px':'7px 12px' },
    highlightFlat: { background: C.highlight[500], color:'#fff', fontWeight:700 },
    copilot: { background: G.copilot, color:'#fff', fontWeight:600, padding: size==='sm'?'6px 12px':'9px 14px' },
    danger: { background:'#fff', color: C.critical[700], border:`2px solid ${C.critical[500]}`, padding: size==='sm'?'4px 10px':'7px 12px' },
  };
  const d = disabled ? { background: C.tint[80], color: C.tint[400], cursor:'not-allowed', border:0 } : {};
  return (
    <button onClick={disabled?undefined:onClick} style={{ ...base, ...(variants[variant]||variants.primary), ...d, ...style }}>
      {iconLeft} {children} {iconRight}
    </button>
  );
}

/* ---------- Card ---------- */
function Card({ children, style = {}, radius: rr = R['2xl'], padding = 24, onClick }) {
  return (
    <div onClick={onClick} style={{ background:'#fff', borderRadius: rr, padding, boxShadow: S.sm, cursor: onClick?'pointer':'default', ...style }}>
      {children}
    </div>
  );
}

/* ---------- Badge ---------- */
function Badge({ tone = 'neutral', children, dot, style = {} }) {
  const tones = {
    neutral: { bg: C.tint[40], fg: C.shade[820], dot: C.shade[500] },
    success: { bg: C.primary[50], fg: C.primary[600], dot: C.primary[500] },
    caution: { bg: C.caution[50], fg: C.caution[700], dot: C.caution[500] },
    critical:{ bg: C.critical[50], fg: C.critical[700], dot: C.critical[500] },
    inform:  { bg: C.inform[50], fg: C.inform[700], dot: C.inform[500] },
    highlight:{ bg: C.highlight[50], fg: C.highlight[700], dot: C.highlight[500] },
    copilot: { bg: G.copilot, fg:'#fff', dot:'#fff' },
    gold:    { bg:'#FDFCE9', fg: C.gold.brown, dot: C.gold.base, border:'1px solid #EDC82F' },
    dark:    { bg: C.shade[880], fg:'#fff', dot:'#fff' },
  };
  const t = tones[tone] || tones.neutral;
  return (
    <span style={{ display:'inline-flex', alignItems:'center', gap:6, fontSize:12, fontWeight:600, padding:'3px 10px', borderRadius:9999, background: t.bg, color: t.fg, border: t.border, ...style }}>
      {dot && <span style={{ width:6, height:6, borderRadius:'50%', background: t.dot }}/>}
      {children}
    </span>
  );
}

/* ---------- Input ---------- */
function Input({ label, value, onChange, placeholder, error, hint, icon, disabled, style = {} }) {
  const [focus, setFocus] = React.useState(false);
  return (
    <div style={{ ...style }}>
      {label && <label style={{ display:'block', fontSize:12, color: C.shade[820], fontWeight:600, marginBottom:6 }}>{label}</label>}
      <div style={{ position:'relative' }}>
        {icon && <span style={{ position:'absolute', left:10, top:'50%', transform:'translateY(-50%)', color: C.shade[600] }}>{icon}</span>}
        <input
          value={value} placeholder={placeholder} disabled={disabled}
          onChange={e => onChange?.(e.target.value)}
          onFocus={() => setFocus(true)} onBlur={() => setFocus(false)}
          style={{
            width:'100%', boxSizing:'border-box', padding: icon ? '10px 12px 10px 34px' : '10px 12px',
            border: `1px solid ${error ? C.critical[500] : focus ? C.highlight[500] : C.tint[100]}`,
            borderRadius: R.lg, fontFamily: F.sans, fontSize:14, color: C.shade[880],
            background: disabled ? C.tint[40] : '#fff',
            outline:'none',
            boxShadow: focus && !error ? '0 0 0 3px rgba(108,64,229,.15)' : 'none',
          }}
        />
      </div>
      {error && <div style={{ fontSize:12, color: C.critical[700], marginTop:4 }}>{error}</div>}
      {hint && !error && <div style={{ fontSize:12, color: C.shade[700], marginTop:4 }}>{hint}</div>}
    </div>
  );
}

/* ---------- Avatar ---------- */
function Avatar({ name, size = 32, src, bg = C.highlight[100], fg = C.highlight[700] }) {
  const initials = (name || '').split(' ').map(w => w[0]).slice(0,2).join('').toUpperCase() || '?';
  if (src) return <img src={src} width={size} height={size} style={{ borderRadius:'50%', objectFit:'cover' }}/>;
  return <div style={{ width:size, height:size, borderRadius:'50%', background:bg, color:fg, display:'inline-flex', alignItems:'center', justifyContent:'center', fontSize: size*0.4, fontWeight:700, flex:'none' }}>{initials}</div>;
}

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