Video Session Production Readiness

┌─────────────────────────────────────────────────────────────┐
│                      VideoSessionPage                        │
│                     (pages/VideoSessionPage.tsx)             │
└──────────────────────────┬──────────────────────────────────┘
                           │
        ┌──────────────────┼──────────────────┐
        ▼                  ▼                  ▼
┌───────────────┐  ┌─────────────────┐  ┌──────────────┐
│useVideoSession│  │  useVideoSession│  │ PreCallSetup │
│    State      │  │  (React Query)  │  │  Component   │
│  (SDK + State │  │  + mutations    │  │              │
│   Machine)    │  │                 │  │              │
└───────────────┘  └─────────────────┘  └──────────────┘
        │                  │
        ▼                  ▼
┌─────────────────────────────────────────────────────────────┐
│              Vonage SDK (window.OT)                          │
│    Loaded via CDN in apps/cms/index.html                    │
└─────────────────────────────────────────────────────────────┘
                           │
                           ▼
┌─────────────────────────────────────────────────────────────┐
│                    Backend API                              │
│          /clinical/encounters/:id/video_session             │
└─────────────────────────────────────────────────────────────┘

loading → no_session / pre_call_setup
pre_call_setup → joining
joining → waiting_for_participants / error
waiting_for_participants → call_active / reconnecting / call_ended
call_active → reconnecting / call_ended
reconnecting → call_active / error / call_ended
call_ended → (terminal)
error → (terminal)

interface VideoSessionStateOptions {
  maxReconnectAttempts?: number;  // Default: 3
  reconnectBaseDelayMs?: number;  // Default: 1000
  reconnectMaxDelayMs?: number;   // Default: 10000
  tokenRefreshIntervalMs?: number; // Default: 23 hours
}

const {
  state,
  canJoin,
  canStart,
  canEnd,
  error,
  initiateJoin,
  initiateStart,
  initiateEnd,
} = useVideoSessionState({
  maxReconnectAttempts: 3,
  onStateChange: (newState) => {
    console.log('State changed to:', newState);
  },
});

const {
  state,            // Current session state
  isConnected,      // Whether connected to Vonage
  hasRemoteParticipant, // Whether remote stream exists
  error,            // Error message if failed
  connect,          // (apiKey, sessionId, token) => Promise<Session>
  disconnect,       // () => void
  session,          // Current OT.Session reference
  reconnectAttempts,// Ref tracking reconnect count
} = useVideoSessionState({
  maxReconnectAttempts: 3,  // Default: 3
});

const tokenExpiryRef = useRef<number | null>(null);
const refreshTokenMutationRef = useRef<ReturnType<typeof useRefreshVideoSessionToken> | null>(null);
const encounterIdRef = useRef(encounterId);

const refreshInterval = setInterval(() => {
  const now = Date.now();
  const timeUntilExpiry = (tokenExpiryRef.current ?? 0) - now;
  if (timeUntilExpiry < 5 * 60 * 1000) {
    refreshTokenMutationRef.current?.mutate(encounterIdRef.current!, {
      onSuccess: (data: { token: string; token_expires_at: string }) => {
        tokenExpiryRef.current = new Date(data.token_expires_at).getTime();
      }
    });
  }
}, 60000);

const [videoDevices, setVideoDevices] = useState<MediaDevice[]>([]);
const [selectedVideoDevice, setSelectedVideoDevice] = useState<string>('');
const [selectedAudioDevice, setSelectedAudioDevice] = useState<string>('');

const switchCamera = async (deviceId: string) => {
  const newStream = await navigator.mediaDevices.getUserMedia({
    video: { deviceId: { exact: deviceId } }
  });
  // Replace track in existing stream...
};

const switchMicrophone = async (deviceId: string) => {
  // Similar implementation for audio
};

const statsInterval = setInterval(() => {
  session.getStats((stats) => {
    setConnectionStats({
      packetsLost: stats.packetsLost,
      rtt: stats.rtt,
      jitter: stats.jitter,
    });
  });
}, 10000);

def call
  existing = Clinical::VideoSession
    .for_encounter(@encounter.id)
    .where(status: %w[created active])
    .first

  if existing
    Rails.logger.info("[VideoSession] Returning existing session #{existing.id}")
    return success(existing)
  end

  # ... rest of create logic
end

ERROR_CODES = {
  SESSION_NOT_FOUND: 'VIDEO_SESSION_NOT_FOUND',
  SESSION_NOT_JOINABLE: 'VIDEO_SESSION_NOT_JOINABLE',
  SESSION_COMPLETED: 'VIDEO_SESSION_COMPLETED',
}.freeze

def render_error(code:, message:, status: :unprocessable_entity)
  render json: {
    error: {
      code: code,
      message: message
    }
  }, status: status
end

useEffect(() => {
  const handleBeforeUnload = (e: BeforeUnloadEvent) => {
    if (state === 'call_active' || state === 'reconnecting') {
      e.preventDefault();
      e.returnValue = 'You are in an active call. Are you sure you want to leave?';
    }
  };

  window.addEventListener('beforeunload', handleBeforeUnload);
  return () => window.removeEventListener('beforeunload', handleBeforeUnload);
}, [state]);

useEffect(() => {
  return () => {
    // Clean up publisher
    if (publisherRef.current) {
      publisherRef.current.destroy();
    }
    // Clean up subscriber
    if (subscriberRef.current) {
      subscriberRef.current.destroy();
    }
    // Clear intervals
    clearInterval(refreshInterval);
    clearInterval(statsInterval);
  };
}, []);