Scrum4Me/lib/realtime/use-backlog-realtime.ts

'use client'

// ST-1115: Client hook for the backlog 3-pane SSE stream.
// Mounts in BacklogHydrationWrapper so it survives Server Action refreshes.
// Dispatches pbi/story/task change events into useBacklogStore.applyChange.
//
// PBI-74 / T-845: dual-dispatch — events worden ook naar de nieuwe
// product-workspace-store gestuurd. De oude store blijft leidend totdat
// Story 3 de UI-consumers heeft omgezet en Story 8 de oude store opruimt.

import { useEffect, useRef } from 'react'
import { useBacklogStore } from '@/stores/backlog-store'
import { useProductWorkspaceStore } from '@/stores/product-workspace/store'
import type { ProductRealtimeEvent } from '@/stores/product-workspace/types'
import { logWorkspaceFingerprint } from '@/lib/realtime/dev-workspace-fingerprint'

const BACKOFF_START_MS = 1_000
const BACKOFF_MAX_MS = 30_000

type EntityPayload = {
  op: 'I' | 'U' | 'D'
  entity: 'pbi' | 'story' | 'task'
  [key: string]: unknown
}

export function useBacklogRealtime(productId: string | null) {
  const sourceRef = useRef<EventSource | null>(null)
  const backoffRef = useRef<number>(BACKOFF_START_MS)
  const reconnectTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)

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

    const close = () => {
      if (sourceRef.current) {
        sourceRef.current.close()
        sourceRef.current = null
      }
      if (reconnectTimerRef.current) {
        clearTimeout(reconnectTimerRef.current)
        reconnectTimerRef.current = null
      }
    }

    const connect = () => {
      close()
      const source = new EventSource(
        `/api/realtime/backlog?product_id=${encodeURIComponent(productId)}`,
      )
      sourceRef.current = source

      source.addEventListener('ready', () => {
        backoffRef.current = BACKOFF_START_MS
      })

      source.onmessage = (e) => {
        if (!e.data) return
        try {
          const payload = JSON.parse(e.data) as EntityPayload
          // Oude store (leidend voor UI tot Story 3).
          useBacklogStore
            .getState()
            .applyChange(payload.entity, payload.op, payload as Record<string, unknown>)
          // Nieuwe workspace-store (schaduw — wordt leidend in Story 3).
          useProductWorkspaceStore
            .getState()
            .applyRealtimeEvent(payload as unknown as ProductRealtimeEvent)
          logWorkspaceFingerprint(`event:${payload.entity}:${payload.op}`)
        } catch (err) {
          if (process.env.NODE_ENV !== 'production') {
            console.error('[realtime/backlog] failed to parse event', err, e.data)
          }
        }
      }

      source.onerror = () => {
        if (sourceRef.current !== source) return
        close()
        if (document.visibilityState === 'hidden') return
        const delay = backoffRef.current
        backoffRef.current = Math.min(backoffRef.current * 2, BACKOFF_MAX_MS)
        reconnectTimerRef.current = setTimeout(connect, delay)
      }
    }

    const onVisibility = () => {
      if (document.visibilityState === 'hidden') {
        close()
      } else if (sourceRef.current === null) {
        backoffRef.current = BACKOFF_START_MS
        connect()
      }
    }

    if (document.visibilityState === 'visible') {
      connect()
    }
    document.addEventListener('visibilitychange', onVisibility)

    return () => {
      document.removeEventListener('visibilitychange', onVisibility)
      close()
    }
  }, [productId])
}