import { MediaList } from '../components/MediaList';
import { useJellyfinTracksData } from '../hooks/Jellyfin/Infinite/useJellyfinTracksData';
import { usePullToRefresh } from '../hooks/usePullToRefresh';
import { InlineLoader } from '../components/InlineLoader';

export const Tracks = () => {
    const { items, infiniteData, isLoading, error, reviver, loadMore, refetch } = useJellyfinTracksData();
    
    // Enhanced refresh function that triggers both UI refresh and backend Jellyfin scan
    const enhancedRefresh = async () => {
        // Trigger Jellyfin library scan
        try {
            // Determine the correct backend URL based on environment
            let backendUrl;
            if (window.location.hostname === 'music.samcloud.ca') {
                // Use relative URL for live site (will use the same domain with reverse proxy)
                backendUrl = '';
            } else {
                // Use development backend URL for localhost
                backendUrl = import.meta.env.VITE_BACKEND_URL || 'http://localhost:5140';
            }
            
            const response = await fetch(`${backendUrl}/api/trigger-jellyfin-scan`, { method: 'POST' });
            if (!response.ok) {
                console.error('Failed to trigger Jellyfin scan:', response.status);
            }
        } catch (error) {
            console.error('Error triggering Jellyfin scan:', error);
        }
        
        // Refresh UI data
        await refetch();
    };
    
    const { containerRef, isRefreshing } = usePullToRefresh({ onRefresh: enhancedRefresh });

    return (
        <div className="tracks-page" ref={containerRef}>
            {isRefreshing && <InlineLoader />}
            {error && <div className="error">{error}</div>}
            <MediaList
                items={items}
                infiniteData={infiniteData}
                isLoading={isLoading}
                reviver={reviver}
                type="song"
                loadMore={loadMore}
                title={'Tracks'}
            />
        </div>
    )
}