// Resumerush — shared UI primitives & icons
const { useState, useEffect, useRef, useMemo, useCallback } = React;

// --- Icons (Lucide-style inline SVG, 1.75 stroke) ---
const I = ({ d, size = 18, fill = "none", style }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill={fill} stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" style={style}>
    {d}
  </svg>
);
const Icon = {
  arrowRight: (p) => <I {...p} d={<><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></>} />,
  arrowLeft:  (p) => <I {...p} d={<><path d="M19 12H5"/><path d="m12 19-7-7 7-7"/></>} />,
  check:      (p) => <I {...p} d={<path d="M20 6 9 17l-5-5"/>} />,
  x:          (p) => <I {...p} d={<><path d="M18 6 6 18"/><path d="m6 6 12 12"/></>} />,
  plus:       (p) => <I {...p} d={<><path d="M5 12h14"/><path d="M12 5v14"/></>} />,
  refresh:    (p) => <I {...p} d={<><path d="M21 12a9 9 0 1 1-3-6.7"/><path d="M21 3v6h-6"/></>} />,
  pencil:     (p) => <I {...p} d={<><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4Z"/></>} />,
  copy:       (p) => <I {...p} d={<><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></>} />,
  trash:      (p) => <I {...p} d={<><path d="M3 6h18"/><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/><path d="m19 6-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/></>} />,
  sparkles:   (p) => <I {...p} d={<><path d="m12 3-1.9 5.8L4 10.7l5.8 1.9L11.7 18l1.9-5.8L19.4 10l-5.8-1.9Z"/><path d="M19 3v4M21 5h-4M5 18v2M6 19H4"/></>} />,
  download:   (p) => <I {...p} d={<><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><path d="m7 10 5 5 5-5"/><path d="M12 15V3"/></>} />,
  upload:     (p) => <I {...p} d={<><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><path d="m17 8-5-5-5 5"/><path d="M12 3v12"/></>} />,
  user:       (p) => <I {...p} d={<><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></>} />,
  search:     (p) => <I {...p} d={<><circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/></>} />,
  more:       (p) => <I {...p} d={<><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></>} />,
  google:     (p) => <I {...p} d={<><path d="M12 11v3.5h5.5c-.2 1.4-1.6 4-5.5 4-3.3 0-6-2.7-6-6s2.7-6 6-6c1.9 0 3.1.8 3.8 1.5l2.6-2.5C16.7 4.3 14.5 3 12 3 7 3 3 7 3 12s4 9 9 9c5.2 0 8.6-3.6 8.6-8.8 0-.6-.1-1.1-.2-1.6H12Z"/></>} fill="currentColor" stroke="none" />,
  eye:        (p) => <I {...p} d={<><path d="M2 12s4-8 10-8 10 8 10 8-4 8-10 8S2 12 2 12Z"/><circle cx="12" cy="12" r="3"/></>} />,
  doc:        (p) => <I {...p} d={<><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/><path d="M16 13H8M16 17H8M10 9H8"/></>} />,
  chevDown:   (p) => <I {...p} d={<path d="m6 9 6 6 6-6"/>} />,
  link:       (p) => <I {...p} d={<><path d="M10 13a5 5 0 0 0 7.5.5l3-3a5 5 0 0 0-7-7l-1.7 1.7"/><path d="M14 11a5 5 0 0 0-7.5-.5l-3 3a5 5 0 0 0 7 7L12 19"/></>} />,
  mail:       (p) => <I {...p} d={<><rect x="2" y="4" width="20" height="16" rx="2"/><path d="m22 7-10 6L2 7"/></>} />,
  save:       (p) => <I {...p} d={<><path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2Z"/><path d="M17 21v-8H7v8M7 3v5h8"/></>} />,
  settings:   (p) => <I {...p} d={<><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1.1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1.1 1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8V9a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1Z"/></>} />,
  zap:        (p) => <I {...p} d={<path d="M13 2 3 14h9l-1 8 10-12h-9z"/>} />,
  briefcase:  (p) => <I {...p} d={<><rect x="2" y="7" width="20" height="14" rx="2"/><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/></>} />,
  grad:       (p) => <I {...p} d={<><path d="M22 10 12 5 2 10l10 5 10-5Z"/><path d="M6 12v5c3 3 9 3 12 0v-5"/></>} />,
  layers:     (p) => <I {...p} d={<><path d="m12 2 10 6-10 6L2 8z"/><path d="m2 16 10 6 10-6"/></>} />,
  palette:    (p) => <I {...p} d={<><circle cx="13.5" cy="6.5" r="0.5"/><circle cx="17.5" cy="10.5" r="0.5"/><circle cx="8.5" cy="7.5" r="0.5"/><circle cx="6.5" cy="12.5" r="0.5"/><path d="M12 22A10 10 0 1 1 22 12c0 1.7-1.3 3-3 3h-2a2 2 0 0 0-1 3.7 1.5 1.5 0 0 1-1 2.5z"/></>} />,
  type:       (p) => <I {...p} d={<><path d="M4 7V4h16v3M9 20h6M12 4v16"/></>} />,
  image:      (p) => <I {...p} d={<><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-5-5L5 21"/></>} />,
};

// --- Button ---
function Btn({ children, variant = "primary", size = "md", icon, iconRight, loading, disabled, onClick, type, className = "", style }) {
  const cls = `btn btn-${variant} ${size === 'sm' ? 'btn-sm' : size === 'lg' ? 'btn-lg' : ''} ${className}`;
  return (
    <button className={cls.trim()} disabled={disabled || loading} onClick={onClick} type={type} style={style}>
      {loading ? <span style={{width:14, height:14, border:'2px solid currentColor', borderTopColor:'transparent', borderRadius:'50%', animation:'spin 0.8s linear infinite', display:'inline-block'}}/> : icon}
      {children}
      {iconRight}
    </button>
  );
}

// --- Input ---
function Input({ label, hint, error, prefix, suffix, autoFocus, ...rest }) {
  const id = rest.id || `in-${Math.random().toString(36).slice(2,7)}`;
  return (
    <label htmlFor={id} style={{ display: 'block' }}>
      {label && <div style={{ fontSize: 13, fontWeight: 500, marginBottom: 6, color: 'var(--text-secondary)' }}>{label}</div>}
      <div style={{ position: 'relative', display: 'flex', alignItems: 'center' }}>
        {prefix && <span style={{ position:'absolute', left: 14, color:'var(--text-muted)', fontSize: 14, pointerEvents:'none' }}>{prefix}</span>}
        <input id={id} className={`input ${error ? 'error' : ''}`} autoFocus={autoFocus} style={{ paddingLeft: prefix ? `${14 + prefix.length * 8}px` : undefined }} {...rest} />
        {suffix && <span style={{ position:'absolute', right: 14, color:'var(--text-muted)' }}>{suffix}</span>}
      </div>
      {hint && !error && <div className="t-body-sm muted" style={{ marginTop: 6 }}>{hint}</div>}
      {error && <div className="t-body-sm" style={{ color: 'var(--error)', marginTop: 6 }}>{error}</div>}
    </label>
  );
}

// --- Chip ---
function Chip({ children, selected, onClick, removable, onRemove, className = "" }) {
  return (
    <button className={`chip ${selected ? 'selected' : ''} ${className}`} onClick={onClick} type="button">
      {children}
      {removable && <Icon.x size={12} onClick={(e)=>{e.stopPropagation(); onRemove?.();}}/>}
    </button>
  );
}

// --- Modal ---
function Modal({ open, onClose, children, maxWidth = 480 }) {
  useEffect(() => {
    if (!open) return;
    const fn = (e) => e.key === 'Escape' && onClose?.();
    window.addEventListener('keydown', fn);
    return () => window.removeEventListener('keydown', fn);
  }, [open, onClose]);
  if (!open) return null;
  return (
    <div className="modal-backdrop" onClick={onClose}>
      <div className="modal" style={{ maxWidth }} onClick={e=>e.stopPropagation()}>
        {children}
      </div>
    </div>
  );
}

// --- Brand wordmark ---
function Wordmark({ size = 'md', dark }) {
  const sz = size === 'sm' ? 18 : size === 'lg' ? 32 : 22;
  return (
    <span style={{ display:'inline-flex', alignItems:'center', gap: 8, fontFamily: 'var(--font-ui)', fontSize: sz, letterSpacing: '-0.025em', fontWeight: 600, color: dark ? '#fff' : 'var(--text-primary)' }}>
      <img src="assets/brand/icon.png" alt="" style={{
        width: sz * 1.12, height: sz * 1.12,
        borderRadius: sz * 0.3,
        display: 'inline-block', objectFit: 'cover',
      }}/>
      Resumerush
    </span>
  );
}

// --- Toast manager (very small) ---
function useToast() {
  const [toasts, setToasts] = useState([]);
  const show = (msg, kind = 'success') => {
    const id = Math.random();
    setToasts(t => [...t, { id, msg, kind }]);
    setTimeout(() => setToasts(t => t.filter(x => x.id !== id)), 3000);
  };
  const node = (
    <div style={{ position:'fixed', bottom: 80, right: 24, zIndex: 999, display:'flex', flexDirection:'column-reverse', gap: 8 }}>
      {toasts.map(t => (
        <div key={t.id} className={`toast toast-${t.kind}`} style={{ position:'static' }}>{t.msg}</div>
      ))}
    </div>
  );
  return { show, node };
}

// --- Tiny avatar ---
function Avatar({ name = 'You', size = 32 }) {
  const initials = name.split(' ').map(s=>s[0]).slice(0,2).join('').toUpperCase();
  return (
    <div style={{
      width: size, height: size, borderRadius: '50%',
      background: 'var(--bg-sunken)', color: 'var(--text-primary)',
      display: 'inline-flex', alignItems:'center', justifyContent:'center',
      fontSize: size * 0.4, fontWeight: 600, letterSpacing: '0.02em',
      border: '1px solid var(--border-default)',
    }}>{initials}</div>
  );
}

Object.assign(window, { Btn, Input, Chip, Modal, Icon, Wordmark, useToast, Avatar });