import AmitySDK

class NotificationQueryManager {
    private let repository = AmityNotificationTrayRepository()
    private var liveCollection: AmityCollection<AmityNotificationTrayItem>?
    
    func setupBasicQuery() {
        // Basic query for recent notifications
        let query = AmityNotificationTrayQuery()
            .limit(20)
            .sortBy(.lastOccurredAt, direction: .descending)
        
        liveCollection = repository.getNotificationTrayItems(query: query)
        observeNotifications()
    }
    
    func setupAdvancedQuery() {
        // Advanced query with filters
        let query = AmityNotificationTrayQuery()
            .limit(50)
            .seenStatus(.unseen)
            .categories([.post, .reaction, .comment])
            .timeRange(startDate: Date().addingTimeInterval(-86400)) // Last 24 hours
        
        liveCollection = repository.getNotificationTrayItems(query: query)
        observeNotifications()
    }
    
    private func observeNotifications() {
        liveCollection?.observe { [weak self] collection, _, error in
            DispatchQueue.main.async {
                if let error = error {
                    self?.handleError(error)
                    return
                }
                
                self?.updateUI(with: collection.object)
            }
        }
    }
}

import { useState, useEffect, useCallback } from 'react';
import { AmityNotificationTrayRepository, AmityNotificationTrayQuery } from '@amityco/ts-sdk';

interface UseNotificationQueryOptions {
    query: AmityNotificationTrayQuery;
    autoLoad?: boolean;
}

export const useNotificationQuery = ({ query, autoLoad = true }: UseNotificationQueryOptions) => {
    const [notifications, setNotifications] = useState<AmityNotificationTrayItem[]>([]);
    const [isLoading, setIsLoading] = useState(false);
    const [isLoadingMore, setIsLoadingMore] = useState(false);
    const [error, setError] = useState<Error | null>(null);
    const [hasNext, setHasNext] = useState(false);
    
    const [repository] = useState(() => new AmityNotificationTrayRepository());
    const [liveCollection, setLiveCollection] = useState<any>(null);
    
    useEffect(() => {
        if (autoLoad) {
            loadNotifications();
        }
    }, [query, autoLoad]);
    
    const loadNotifications = useCallback(async () => {
        setIsLoading(true);
        setError(null);
        
        try {
            const collection = repository.getNotificationTrayItems(query);
            setLiveCollection(collection);
            
            // Subscribe to collection updates
            collection.subscribe({
                next: (collectionData: any) => {
                    setNotifications(collectionData.data);
                    setHasNext(collectionData.hasNext);
                    setIsLoading(false);
                },
                error: (err: Error) => {
                    setError(err);
                    setIsLoading(false);
                }
            });
        } catch (err) {
            setError(err as Error);
            setIsLoading(false);
        }
    }, [query, repository]);
    
    const loadMore = useCallback(async () => {
        if (!liveCollection || !hasNext || isLoadingMore) {
            return;
        }
        
        setIsLoadingMore(true);
        try {
            await liveCollection.loadNext();
            // Collection will update automatically through subscription
        } catch (err) {
            setError(err as Error);
        } finally {
            setIsLoadingMore(false);
        }
    }, [liveCollection, hasNext, isLoadingMore]);
    
    const refresh = useCallback(() => {
        loadNotifications();
    }, [loadNotifications]);
    
    return {
        notifications,
        isLoading,
        isLoadingMore,
        error,
        hasNext,
        loadMore,
        refresh
    };
};

// Usage Example
function NotificationList() {
    const query: AmityNotificationTrayQuery = {
        limit: 20,
        seenStatus: 'all',
        sortBy: 'lastOccurredAt',
        sortDirection: 'desc'
    };
    
    const {
        notifications,
        isLoading,
        isLoadingMore,
        error,
        hasNext,
        loadMore,
        refresh
    } = useNotificationQuery({ query });
    
    if (isLoading) {
        return <div>Loading notifications...</div>;
    }
    
    if (error) {
        return <div>Error: {error.message}</div>;
    }
    
    return (
        <div>
            <button onClick={refresh}>Refresh</button>
            
            {notifications.map((notification, index) => (
                <NotificationItem 
                    key={notification.notificationId} 
                    notification={notification}
                    onVisible={() => {
                        // Load more when near the end
                        if (index >= notifications.length - 5) {
                            loadMore();
                        }
                    }}
                />
            ))}
            
            {isLoadingMore && <div>Loading more...</div>}
            {hasNext && !isLoadingMore && (
                <button onClick={loadMore}>Load More</button>
            )}
        </div>
    );
}