/* ===================================================================
   KabelFlux — live collaboration presence badge (views-collab.jsx)
   Exposes window.PresenceBadge. Feature V (minimal): shows who else is in
   the project, live over the project websocket. ES2015-safe.
   =================================================================== */
const PresenceBadge = ({ pid }) => {
  const { useState, useEffect } = React;
  const [users, setUsers] = useState([]);

  useEffect(function () {
    if (!pid || !window.kfxProjectSocket) return undefined;
    let ws = null;
    try {
      ws = window.kfxProjectSocket(pid, function (msg) {
        if (msg && msg.type === 'presence' && Array.isArray(msg.users)) setUsers(msg.users);
      });
    } catch (e) { return undefined; }
    return function () { try { ws && ws.close(); } catch (e) {} };
  }, [pid]);

  if (users.length < 2) return null;
  return (
    <span title={users.join(', ')} style={{ marginLeft: 8, padding: '3px 8px',
      borderRadius: 'var(--r-pill)', background: 'rgba(76,175,80,.15)',
      color: 'var(--success)', fontSize: 11, fontWeight: 700 }}>
      {'👥 ' + users.length + ' editing'}
    </span>
  );
};

window.PresenceBadge = PresenceBadge;