// SocketProvider.tsx (version sans refresh global)
'use client'
import React, { createContext, useContext, useEffect, useMemo } from 'react'
import { useSocket } from '@/components/SocketClient'
import { ToastContainer } from 'react-toastify'
import 'react-toastify/dist/ReactToastify.css'

type Ctx = { socket: ReturnType<typeof useSocket> }
const SocketCtx = createContext<Ctx>({ socket: null })
export const useAppSocket = () => useContext(SocketCtx)

export default function SocketProvider({ userId, children }: { userId?: string|null, children: React.ReactNode }) {
  const socket = useSocket()

  useEffect(() => {
    if (!socket || !userId) return
    const register = () => socket.emit('register user', { userId })
    register()
    socket.on('connect', register)
    return () => socket.off('connect', register)
  }, [socket, userId])

  const value = useMemo(() => ({ socket }), [socket])

  return (
    <SocketCtx.Provider value={value}>
      {children}
      <ToastContainer />
    </SocketCtx.Provider>
  )
}