import { MediaList } from '../components/MediaList';
import { useJellyfinTracksData } from '../hooks/Jellyfin/Infinite/useJellyfinTracksData';
import { usePullToRefresh } from '../hooks/usePullToRefresh';
import { PullToRefreshIndicator } from '../components/PullToRefreshIndicator';
import { usePageTitle } from '../context/PageTitleContext/PageTitleContext';
import { useEffect, type MutableRefObject } from 'react';
import { useScrollRestore } from '../hooks/useScrollRestore';

export const Tracks = () => {
    const { setPageTitle } = usePageTitle();
    const { items, infiniteData, isLoading, error, reviver, loadMore, refetch } = useJellyfinTracksData();
    
    useEffect(() => {
        setPageTitle('Tracks');
    }, [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, pullDistance, refreshThreshold } = usePullToRefresh({ onRefresh: enhancedRefresh });
    // Restore scroll position when navigating back to Tracks
    useScrollRestore(containerRef as unknown as MutableRefObject<HTMLElement | null>, 'tracks')

    return (
        <div
            className="tracks-page"
            ref={containerRef}
            style={{
                transform: pullDistance ? `translateY(${Math.min(pullDistance, 120)}px)` : undefined,
                transition: isRefreshing || pullDistance === 0 ? 'transform 200ms ease' : 'none',
                willChange: 'transform'
            }}
        >
            {(pullDistance > 0 || isRefreshing) && (
                <div style={{ position: 'sticky', top: 0, display: 'flex', justifyContent: 'center', alignItems: 'center', height: 60, marginTop: -60, opacity: 0.98, color: 'var(--text-primary, #fff)' }}>
                    <div
                        onClick={!isRefreshing ? enhancedRefresh : undefined}
                        title={!isRefreshing ? 'Refresh' : undefined}
                        aria-label={!isRefreshing ? 'Refresh' : undefined}
                        style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8, pointerEvents: 'auto', cursor: !isRefreshing ? 'pointer' : 'default' }}
                    >
                        <PullToRefreshIndicator pullDistance={pullDistance} threshold={refreshThreshold} refreshing={isRefreshing} />
                    </div>
                </div>
            )}
            {error && <div className="error">{error}</div>}
            <MediaList
                items={items}
                infiniteData={infiniteData}
                isLoading={isLoading}
                reviver={reviver}
                type="song"
                loadMore={loadMore}
                title={'Tracks'}
            />
        </div>
    )
}