import { useEffect, useState } from "react";
import socket from "@/lib/socket.io";

export function useSocketRoom<T>(roomId: string) {
	const [data, setData] = useState<T[]>([]);
	const [info, setInfo] = useState(
		"No data yet — join the room to start receiving",
	);

	useEffect(() => {
		function handleConnect() {
			socket.emit("join-room", roomId);
		}

		function handleUpdate(payload: any) {
			setData((prev) => [...payload.payloads, ...prev]);
		}

		function handleError(err: any) {
			setInfo(err.message ?? "Room error");
		}

		if (!socket.connected) {
			socket.connect();
		}

		socket.on("connect", handleConnect);
		socket.on("room-update", handleUpdate);
		socket.on("room-error", handleError);

		// If already connected, join immediately
		if (socket.connected) {
			socket.emit("join-room", roomId);
		}

		return () => {
			socket.emit("leave-room", roomId);

			socket.off("connect", handleConnect);
			socket.off("room-update", handleUpdate);
			socket.off("room-error", handleError);
		};
	}, [roomId]);

	return { data, info };
}