import { MediaList } from '../components/MediaList';
import { useJellyfinAlbumsData } from '../hooks/Jellyfin/Infinite/useJellyfinAlbumsData';
import { usePullToRefresh } from '../hooks/usePullToRefresh';
import { InlineLoader } from '../components/InlineLoader';
import { usePageTitle } from '../context/PageTitleContext/PageTitleContext';
import { useEffect } from 'react';

export const Albums = () => {
    const { setPageTitle } = usePageTitle();
    const { items, infiniteData, isLoading, error, reviver, loadMore, refetch } = useJellyfinAlbumsData();
    
    useEffect(() => {
        setPageTitle('Albums');
    }, [setPageTitle]);
    
    // 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="albums-page" ref={containerRef}>
            {isRefreshing && <InlineLoader />}
            <MediaList
                items={items}
                infiniteData={infiniteData}
                isLoading={isLoading}
                type="album"
                title={'Albums'}
                reviver={reviver}
                loadMore={loadMore}
                hidden={{ view_album: true }}
            />
            {error && <div className="error">{error}</div>}
        </div>
    )
}