omnichannel-frontend/src/shared/hooks/useWhatsappSocket.js

import { useEffect, useState, useRef } from 'react';
import io from 'socket.io-client';
import { API_BASE_URL, WHATSAPP_SOCKET_URL } from '../services/apiConfig';

export function useWhatsappSocket() {
  const [socket, setSocket] = useState(null);
  const [qrCode, setQrCode] = useState(null);
  const [status, setStatus] = useState('DISCONNECTED');
  const [incomingMessage, setIncomingMessage] = useState(null);
  const socketRef = useRef(null);

  useEffect(() => {
    if (socketRef.current) return;

    // Conectar ao namespace /whatsapp
    const newSocket = io(WHATSAPP_SOCKET_URL, {
      reconnectionAttempts: 5,
    });
    
    socketRef.current = newSocket;
    setSocket(newSocket);

    newSocket.on('connect', () => {
      console.log('Conectado ao WebSocket do WhatsApp');
      // Fetch status atual
      fetch(`${API_BASE_URL}/whatsapp/status`)
        .then(res => res.json())
        .then(data => setStatus(data.status))
        .catch(console.error);
    });

    newSocket.on('qr', (qr) => {
      setQrCode(qr);
      setStatus('AWAITING_QR');
    });

    newSocket.on('status', (newStatus) => {
      setStatus(newStatus);
    });

    newSocket.on('message', (message) => {
      console.log('Nova mensagem recebida:', message);
      setIncomingMessage(message);
    });

    return () => {
      newSocket.disconnect();
      socketRef.current = null;
    };
  }, []);

  return {
    socket,
    qrCode,
    status,
    incomingMessage,
    clearIncomingMessage: () => setIncomingMessage(null),
  };
}