frontend/src/hooks/useWebSocket.js

import { useState, useEffect, useRef } from 'react'
import { createWebSocket } from '../utils/api.js'

/**
 * Custom hook for WebSocket connection
 * @param {string} jobId - The job ID to connect to
 * @returns {{jobData: object|null, isConnected: boolean, error: string|null}}
 */
export function useWebSocket(jobId) {
  const [jobData, setJobData] = useState(null)
  const [isConnected, setIsConnected] = useState(false)
  const [error, setError] = useState(null)
  const wsRef = useRef(null)

  useEffect(() => {
    if (!jobId) return

    setError(null)
    setIsConnected(false)

    wsRef.current = createWebSocket(
      jobId,
      (data) => {
        setJobData(data)
        setIsConnected(true)
        setError(null)
      },
      () => {
        setIsConnected(false)
        // Don't set error on normal close
      }
    )

    return () => {
      if (wsRef.current) {
        wsRef.current.close()
      }
    }
  }, [jobId])

  return {
    jobData,
    isConnected,
    error,
  }
}