/**
 * The React edge of the voice session.
 *
 * `voiceSession` owns the single tab-wide Room (see session.ts), so the
 * vendored components are fed that same instance through `RoomContext` instead
 * of the official `LiveKitRoom`, which would tie the connection to a route.
 * `VoiceHost` mounts the parts that must keep working while the user navigates
 * away from the channel: remote audio playback and the connection toast.
 */

import { ConnectionStateToast, RoomAudioRenderer, RoomContext } from '@app/vendor/livekit'
import type { ReactNode } from 'react'
import { useVoiceSession } from './react'
import { voiceSession } from './session'

/** Injects the live Room for any subtree that renders official components. */
export function VoiceProvider({ children }: { children: ReactNode }) {
  const session = useVoiceSession()
  const room = session.roomId ? voiceSession.getRoom() : null
  if (!room) return null
  return <RoomContext.Provider value={room}>{children}</RoomContext.Provider>
}

/**
 * Route-independent audio + connection feedback. Mount once, at the root: the
 * toast carries lk- classes, so this wrapper owns the theme attribute that
 * scopes the vendored stylesheet.
 */
export function VoiceHost() {
  return (
    <VoiceProvider>
      <div className="voice-host" data-lk-theme="default">
        <RoomAudioRenderer />
        <ConnectionStateToast />
      </div>
    </VoiceProvider>
  )
}