bedolaga-cabinet/src/hooks/useWebSocket.ts

import { useEffect, useRef, useCallback, useState } from 'react'
import { useAuthStore } from '../store/auth'

export interface WSMessage {
  type: string
  ticket_id?: number
  message?: string
  title?: string
  user_id?: number
  is_admin?: boolean
}

interface UseWebSocketOptions {
  onMessage?: (message: WSMessage) => void
  onConnect?: () => void
  onDisconnect?: () => void
}

export function useWebSocket(options: UseWebSocketOptions = {}) {
  const { accessToken, isAuthenticated } = useAuthStore()
  const wsRef = useRef<WebSocket | null>(null)
  const reconnectTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)
  const pingIntervalRef = useRef<ReturnType<typeof setInterval> | null>(null)
  const [isConnected, setIsConnected] = useState(false)
  const reconnectAttemptsRef = useRef(0)
  const maxReconnectAttempts = 5
  const optionsRef = useRef(options)

  // Update options ref when they change
  useEffect(() => {
    optionsRef.current = options
  }, [options])

  const cleanup = useCallback(() => {
    if (reconnectTimeoutRef.current) {
      clearTimeout(reconnectTimeoutRef.current)
      reconnectTimeoutRef.current = null
    }
    if (pingIntervalRef.current) {
      clearInterval(pingIntervalRef.current)
      pingIntervalRef.current = null
    }
    if (wsRef.current) {
      wsRef.current.close()
      wsRef.current = null
    }
  }, [])

  const connect = useCallback(() => {
    if (!accessToken || !isAuthenticated) {
      return
    }

    // Don't reconnect if already connected
    if (wsRef.current?.readyState === WebSocket.OPEN) {
      return
    }

    cleanup()

    // Build WebSocket URL
    const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:'
    let host = window.location.host

    // Handle VITE_API_URL - can be absolute URL or relative path
    const apiUrl = import.meta.env.VITE_API_URL
    if (apiUrl && (apiUrl.startsWith('http://') || apiUrl.startsWith('https://'))) {
      try {
        host = new URL(apiUrl).host
      } catch {
        // If URL parsing fails, use window.location.host
      }
    }
    // If apiUrl is relative (like /api), use window.location.host

    const wsUrl = `${protocol}//${host}/cabinet/ws?token=${accessToken}`

    try {
      const ws = new WebSocket(wsUrl)
      wsRef.current = ws

      ws.onopen = () => {
        console.log('[WS] Connected')
        setIsConnected(true)
        reconnectAttemptsRef.current = 0
        optionsRef.current.onConnect?.()

        // Setup ping interval (every 25 seconds)
        pingIntervalRef.current = setInterval(() => {
          if (ws.readyState === WebSocket.OPEN) {
            ws.send(JSON.stringify({ type: 'ping' }))
          }
        }, 25000)
      }

      ws.onmessage = (event) => {
        try {
          const message = JSON.parse(event.data) as WSMessage

          // Ignore pong messages
          if (message.type === 'pong' || message.type === 'connected') {
            return
          }

          optionsRef.current.onMessage?.(message)
        } catch (e) {
          console.error('[WS] Failed to parse message:', e)
        }
      }

      ws.onclose = (event) => {
        console.log('[WS] Disconnected:', event.code, event.reason)
        setIsConnected(false)
        optionsRef.current.onDisconnect?.()

        if (pingIntervalRef.current) {
          clearInterval(pingIntervalRef.current)
          pingIntervalRef.current = null
        }

        // Attempt to reconnect if not closed intentionally
        if (event.code !== 1000 && reconnectAttemptsRef.current < maxReconnectAttempts) {
          const delay = Math.min(1000 * Math.pow(2, reconnectAttemptsRef.current), 30000)
          console.log(`[WS] Reconnecting in ${delay}ms (attempt ${reconnectAttemptsRef.current + 1})`)

          reconnectTimeoutRef.current = setTimeout(() => {
            reconnectAttemptsRef.current++
            connect()
          }, delay)
        }
      }

      ws.onerror = (error) => {
        console.error('[WS] Error:', error)
      }
    } catch (e) {
      console.error('[WS] Failed to connect:', e)
    }
  }, [accessToken, isAuthenticated, cleanup])

  // Connect when authenticated
  useEffect(() => {
    if (isAuthenticated && accessToken) {
      connect()
    } else {
      cleanup()
      setIsConnected(false)
    }

    return cleanup
  }, [isAuthenticated, accessToken, connect, cleanup])

  return { isConnected }
}