/**
 * Lazy Discovery Section Component
 * Implements lazy loading and virtualization for discovery sections
 */

import React, { useState, useEffect, useRef, useCallback } from 'react'
import { MediaList } from './MediaList'
import { MediaItem } from '../api/jellyfin'

interface LazyDiscoverySectionProps {
    title: string
    description?: string
    items: MediaItem[]
    type: 'song' | 'album'
    onDiscoverDownload: (item: MediaItem) => void
    seeMoreUrl?: string
    onSeeMore?: () => void | Promise<void>
    initialLoadCount?: number
    loadMoreCount?: number
}

export const LazyDiscoverySection: React.FC<LazyDiscoverySectionProps> = ({
    title,
    description,
    items,
    type,
    onDiscoverDownload,
    seeMoreUrl,
    onSeeMore,
    initialLoadCount = 12,
    loadMoreCount = 8
}) => {
    const [visibleItems, setVisibleItems] = useState<MediaItem[]>([])
    const [isVisible, setIsVisible] = useState(false)
    const [hasLoadedMore, setHasLoadedMore] = useState(false)
    const sectionRef = useRef<HTMLDivElement>(null)
    const observerRef = useRef<IntersectionObserver | null>(null)

    // Initialize intersection observer for lazy loading
    useEffect(() => {
        if (!sectionRef.current) return

        observerRef.current = new IntersectionObserver(
            (entries) => {
                entries.forEach((entry) => {
                    if (entry.isIntersecting && !isVisible) {
                        setIsVisible(true)
                        setVisibleItems(items.slice(0, initialLoadCount))
                    }
                })
            },
            {
                rootMargin: '100px', // Start loading 100px before section comes into view
                threshold: 0.1
            }
        )

        observerRef.current.observe(sectionRef.current)

        return () => {
            if (observerRef.current) {
                observerRef.current.disconnect()
            }
        }
    }, [items, initialLoadCount, isVisible])

    // Load more items when scrolling near the end
    const loadMoreItems = useCallback(() => {
        if (hasLoadedMore || visibleItems.length >= items.length) return

        const nextBatch = items.slice(0, visibleItems.length + loadMoreCount)
        setVisibleItems(nextBatch)
        setHasLoadedMore(true)
    }, [items, visibleItems.length, loadMoreCount, hasLoadedMore])

    // Intersection observer for load more functionality
    const loadMoreRef = useRef<HTMLDivElement>(null)
    useEffect(() => {
        if (!loadMoreRef.current || !isVisible || hasLoadedMore) return

        const loadMoreObserver = new IntersectionObserver(
            (entries) => {
                entries.forEach((entry) => {
                    if (entry.isIntersecting) {
                        loadMoreItems()
                    }
                })
            },
            { threshold: 0.1 }
        )

        loadMoreObserver.observe(loadMoreRef.current)

        return () => loadMoreObserver.disconnect()
    }, [isVisible, hasLoadedMore, loadMoreItems])

    // Don't render anything until section is visible
    if (!isVisible) {
        return (
            <div ref={sectionRef} className="section lazy-section" style={{ minHeight: '200px' }}>
                <div className="section-header">
                    <div className="container">
                        <div className="section_title">{title}</div>
                        {description && <div className="section_desc">{description}</div>}
                    </div>
                </div>
                <div className="lazy-placeholder">
                    <div className="skeleton-loader">Loading {title}...</div>
                </div>
            </div>
        )
    }

    return (
        <div ref={sectionRef} className="section">
            <div className="section-header">
                <div className="container">
                    <div className="section_title">{title}</div>
                    {description && <div className="section_desc">{description}</div>}
                </div>
                {(onSeeMore || seeMoreUrl) && (
                    <div className="see-more noSelect" onClick={onSeeMore}>
                        See more ({items.length})
                    </div>
                )}
            </div>
            
            <MediaList
                items={visibleItems}
                isLoading={false}
                type={type}
                title=""
                discoverMode={true}
                onDiscoverDownload={onDiscoverDownload}
                infiniteData={{ pages: [visibleItems], pageParams: [0] }}
            />
            
            {/* Load more trigger */}
            {visibleItems.length < items.length && !hasLoadedMore && (
                <div ref={loadMoreRef} className="load-more-trigger" style={{ height: '20px' }} />
            )}
            
            {/* Show load more button if there are more items */}
            {hasLoadedMore && visibleItems.length < items.length && (
                <div className="load-more-section">
                    <button 
                        className="load-more-btn"
                        onClick={() => setVisibleItems(items)}
                    >
                        Load All ({items.length - visibleItems.length} more)
                    </button>
                </div>
            )}
        </div>
    )
}