brackt/app/hooks/useDraftSocket.ts

import { useEffect, useRef, useState } from "react";
import { io, Socket } from "socket.io-client";

interface UseDraftSocketReturn {
  socket: Socket | null;
  isConnected: boolean;
  connectionError: string | null;
  isReconnecting: boolean;
  on: (event: string, callback: (...args: any[]) => void) => void;
  off: (event: string, callback?: (...args: any[]) => void) => void;
}

export function useDraftSocket(seasonId: string, teamId?: string): UseDraftSocketReturn {
  const socketRef = useRef<Socket | null>(null);
  const [isConnected, setIsConnected] = useState(false);
  const [connectionError, setConnectionError] = useState<string | null>(null);
  const [isReconnecting, setIsReconnecting] = useState(false);

  useEffect(() => {
    // Connect to Socket.IO server
    const socket = io({
      path: "/socket.io",
      transports: ["websocket", "polling"],
    });

    socketRef.current = socket;

    socket.on("connect", () => {
      console.log("Connected to Socket.IO:", socket.id);
      setIsConnected(true);
      setConnectionError(null);
      setIsReconnecting(false);
      // Join the draft room with optional teamId
      socket.emit("join-draft", seasonId, teamId);
    });

    socket.on("disconnect", (reason) => {
      console.log("Disconnected from Socket.IO:", reason);
      setIsConnected(false);
      if (reason === "io server disconnect") {
        // Server disconnected the socket, need to manually reconnect
        setConnectionError("Server disconnected. Please refresh the page.");
      } else {
        // Client disconnected or network issue, will auto-reconnect
        setIsReconnecting(true);
      }
    });

    socket.on("connect_error", (error) => {
      console.error("Socket.IO connection error:", error);
      setConnectionError(error.message || "Failed to connect to draft server");
      setIsReconnecting(false);
    });

    socket.io.on("reconnect_attempt", () => {
      console.log("Attempting to reconnect...");
      setIsReconnecting(true);
      setConnectionError(null);
    });

    socket.io.on("reconnect_failed", () => {
      console.error("Reconnection failed");
      setConnectionError("Failed to reconnect. Please refresh the page.");
      setIsReconnecting(false);
    });

    // Cleanup on unmount
    return () => {
      if (socket) {
        console.log("Leaving draft room:", seasonId);
        socket.emit("leave-draft", seasonId);
        socket.disconnect();
      }
    };
  }, [seasonId, teamId]);

  // Helper to subscribe to events
  const on = (event: string, callback: (...args: any[]) => void) => {
    socketRef.current?.on(event, callback);
  };

  // Helper to unsubscribe from events
  const off = (event: string, callback?: (...args: any[]) => void) => {
    socketRef.current?.off(event, callback);
  };

  return {
    socket: socketRef.current,
    isConnected,
    connectionError,
    isReconnecting,
    on,
    off
  };
}