/**
 * Virtualized Discovery Grid
 * High-performance grid component for large discovery datasets
 */

import React, { useState, useEffect, useMemo, useCallback } from 'react'
import { FixedSizeGrid as Grid } from 'react-window'
import { MediaItem } from '../api/jellyfin'
import { MediaCard } from './MediaCard'

interface VirtualizedDiscoveryGridProps {
    items: MediaItem[]
    onDiscoverDownload: (item: MediaItem) => void
    type: 'song' | 'album'
    containerHeight?: number
    itemWidth?: number
    itemHeight?: number
}

interface GridCellProps {
    columnIndex: number
    rowIndex: number
    style: React.CSSProperties
    data: {
        items: MediaItem[]
        columnsPerRow: number
        onDiscoverDownload: (item: MediaItem) => void
        type: 'song' | 'album'
    }
}

const GridCell: React.FC<GridCellProps> = ({ columnIndex, rowIndex, style, data }) => {
    const { items, columnsPerRow, onDiscoverDownload, type } = data
    const itemIndex = rowIndex * columnsPerRow + columnIndex
    const item = items[itemIndex]

    if (!item) {
        return <div style={style} />
    }

    return (
        <div style={style}>
            <div style={{ padding: '8px' }}>
                <MediaCard
                    item={item}
                    type={type}
                    onDownload={onDiscoverDownload}
                    discoverMode={true}
                />
            </div>
        </div>
    )
}

export const VirtualizedDiscoveryGrid: React.FC<VirtualizedDiscoveryGridProps> = ({
    items,
    onDiscoverDownload,
    type,
    containerHeight = 600,
    itemWidth = 200,
    itemHeight = 280
}) => {
    const [containerWidth, setContainerWidth] = useState(0)
    const containerRef = useRef<HTMLDivElement>(null)

    // Calculate grid dimensions
    const columnsPerRow = useMemo(() => {
        if (containerWidth === 0) return 1
        return Math.floor(containerWidth / itemWidth)
    }, [containerWidth, itemWidth])

    const rowCount = useMemo(() => {
        return Math.ceil(items.length / columnsPerRow)
    }, [items.length, columnsPerRow])

    // Update container width on resize
    useEffect(() => {
        const updateWidth = () => {
            if (containerRef.current) {
                setContainerWidth(containerRef.current.offsetWidth)
            }
        }

        updateWidth()
        window.addEventListener('resize', updateWidth)
        return () => window.removeEventListener('resize', updateWidth)
    }, [])

    // Grid data for react-window
    const gridData = useMemo(() => ({
        items,
        columnsPerRow,
        onDiscoverDownload,
        type
    }), [items, columnsPerRow, onDiscoverDownload, type])

    if (items.length === 0) {
        return (
            <div className="virtualized-grid-empty">
                <p>No items to display</p>
            </div>
        )
    }

    return (
        <div ref={containerRef} className="virtualized-discovery-grid">
            {containerWidth > 0 && (
                <Grid
                    columnCount={columnsPerRow}
                    columnWidth={itemWidth}
                    height={Math.min(containerHeight, rowCount * itemHeight)}
                    rowCount={rowCount}
                    rowHeight={itemHeight}
                    width={containerWidth}
                    itemData={gridData}
                >
                    {GridCell}
                </Grid>
            )}
        </div>
    )
}