export function setupChat(root, socket) {
  root.innerHTML = `
    <div class="panel hidden">
      <div id="chat-log"></div>
      <div class="row">
        <input id="chat-input" placeholder="Say something..." />
        <button id="chat-send">Send</button>
      </div>
    </div>
  `;
  const panel = root.firstElementChild;
  const log = panel.querySelector('#chat-log');
  const input = panel.querySelector('#chat-input');

  function addLine(t) {
    const div = document.createElement('div');
    div.textContent = t;
    log.appendChild(div);
    log.scrollTop = log.scrollHeight;
  }

  panel.querySelector('#chat-send').onclick = () => {
    const t = input.value.trim();
    if (!t) return;
    socket.emit('chat:send', { t });
    input.value = '';
  };

  input.addEventListener('keydown', e => {
    if (e.key === 'Enter') panel.querySelector('#chat-send').click();
  });

  socket.on('chat:push', m => addLine(m));

  window.addChatLine = addLine;
}