import { Option } from 'effect'
import { type ReactNode, useEffect, useRef, useSyncExternalStore } from 'react'
import {
  type ClientBinding,
  connect,
  type InvokeMessage,
  type RemoteTransport,
  type ServerMessage,
} from './transport'
import type { RemoteContract, RemoteViewSet } from './client'

export const useRemoteUI = <C extends RemoteContract>(
  transport: RemoteTransport<InvokeMessage, ServerMessage>,
  views: RemoteViewSet<C>,
): ReactNode => {
  // A ref, not `useState`: StrictMode double-invokes a state initializer, and the
  // binding React discards would keep its transport subscription for good.
  const held = useRef<Option.Option<ClientBinding>>(Option.none())
  const binding = Option.getOrElse(held.current, () => connect({ transport, views }))
  held.current = Option.some(binding)
  useEffect(() => () => binding.dispose(), [binding])
  useSyncExternalStore(binding.subscribe, binding.snapshot, binding.snapshot)
  return binding.node()
}

export interface RemoteUIProps<C extends RemoteContract> {
  readonly transport: RemoteTransport<InvokeMessage, ServerMessage>
  readonly views: RemoteViewSet<C>
}

export const RemoteUI = <C extends RemoteContract>({
  transport,
  views,
}: RemoteUIProps<C>): ReactNode => useRemoteUI(transport, views)

export interface StatusReporter<S> {
  readonly status: () => S
  readonly onStatusChange: (listener: () => void) => () => void
}

export const useConnectionStatus = <S>(reporter: StatusReporter<S>): S =>
  useSyncExternalStore(reporter.onStatusChange, reporter.status, reporter.status)