apps/web/src/hooks/useSocket.ts

'use client';
import { useEffect, useRef, useCallback } from 'react';
import { Socket } from 'socket.io-client';
import { getSocket, disconnectSocket } from '../lib/socket';
import { useAuthStore } from '../stores/authStore';
import { useRoomStore } from '../stores/roomStore';

export function useSocket() {
  const socketRef = useRef<Socket | null>(null);
  const { tokens } = useAuthStore();
  const { setConnected } = useRoomStore();

  useEffect(() => {
    if (!tokens?.accessToken) return;
    const socket = getSocket(tokens.accessToken);
    socketRef.current = socket;
    if (!socket.connected) socket.connect();

    socket.on('connect', () => setConnected(true));
    socket.on('disconnect', () => setConnected(false));
    socket.on('connect_error', () => setConnected(false));

    return () => { socket.off('connect'); socket.off('disconnect'); socket.off('connect_error'); };
  }, [tokens?.accessToken, setConnected]);

  const emit = useCallback((event: string, data?: any) => { socketRef.current?.emit(event, data); }, []);
  const on = useCallback((event: string, handler: (...args: any[]) => void) => {
    socketRef.current?.on(event, handler);
    return () => { socketRef.current?.off(event, handler); };
  }, []);

  return { socket: socketRef.current, emit, on, isConnected: socketRef.current?.connected ?? false, disconnect: disconnectSocket };
}