import {
    closestCenter,
    DndContext,
    DragEndEvent,
    DragOverlay,
    DragStartEvent,
    PointerSensor,
    TouchSensor,
    useSensor,
    useSensors,
} from '@dnd-kit/core'
import { SyntheticListenerMap } from '@dnd-kit/core/dist/hooks/utilities'
import { restrictToVerticalAxis } from '@dnd-kit/modifiers'
import { arrayMove, SortableContext, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable'
import { CSS } from '@dnd-kit/utilities'
import { HeartFillIcon } from '@primer/octicons-react'
import { InfiniteData } from '@tanstack/react-query'
import { ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react'
import { toast } from 'sonner'
import { useNavigate } from 'react-router-dom'
import { Virtuoso, VirtuosoHandle } from 'react-virtuoso'
import { MediaItem } from '../api/jellyfin'
import { useDropdownContext } from '../context/DropdownContext/DropdownContext'
import { IMenuItems } from '../context/DropdownContext/DropdownContextProvider'
import { usePlaybackContext } from '../context/PlaybackContext/PlaybackContext'
import { useDownloadContext } from '../context/DownloadContext/DownloadContext'
import { IReviver } from './PlaybackManager'
import { useDisplayItems } from '../hooks/useDisplayItems'
import { JellyImg } from './JellyImg'
import { Loader } from './Loader'
import './MediaList.css'
import { Skeleton } from './Skeleton'
import { MediaDetailModal } from './MediaDetailModal'
import { ErrorBoundary } from './ErrorBoundary'
import { Squircle } from './Squircle'
import { DeletingIcon, DownloadedIcon, DownloadingIcon, PlaystateAnimationMedalist, DownloadIcon, CheckIcon, SpinnerIcon } from './SvgIcons'

export const MediaList = ({
    items = [],
    infiniteData,
    isLoading,
    reviver,
    loadMore,
    hidden: _hidden = {},
    disableActions = false,
    albumDisplayMode = 'artist',
    type,
    title,
    isDraggable,
    onSort,
    discoverMode = false,
    onDiscoverDownload,
}: {
    items: MediaItem[]
    infiniteData?: InfiniteData<MediaItem[], unknown>
    isLoading: boolean
    reviver?: IReviver | 'persistAll'
    type: 'song' | 'album' | 'artist' | 'playlist'
    loadMore?: (startIndex: number) => void
    title: string
    isDraggable?: boolean
    onSort?: (items: MediaItem[]) => void
    disableActions?: boolean
    albumDisplayMode?: 'artist' | 'year' | 'both'
    hidden?: IMenuItems
    discoverMode?: boolean
    onDiscoverDownload?: (item: MediaItem) => void
}) => {
    const [selectedDetailItem, setSelectedDetailItem] = useState<MediaItem | null>(null)
    const [isDetailModalOpen, setIsDetailModalOpen] = useState(false)
    const playback = usePlaybackContext()
    const navigate = useNavigate()
    const dropdown = useDropdownContext()
    const virtuosoRef = useRef<VirtuosoHandle>(null)
    const [scrollParent, setScrollParent] = useState<HTMLElement | undefined>(undefined)

    const handleItemClick = (item: MediaItem, index: number) => {
        if (discoverMode) {
            // In discover mode, open the detail modal
            setSelectedDetailItem(item)
            setIsDetailModalOpen(true)
        } else {
            // Normal behavior for regular MediaList
            if (type === 'song') {
                const isCurrentTrack = playback.currentTrack?.Id === item.Id
                if (item.SpotifyId) {
                    alert('Spotify tracks need to be downloaded before playback. Please use the download button first.')
                    return
                }
                
                if (isCurrentTrack) {
                    playback.togglePlayPause()
                } else {
                    if (infiniteData) {
                        playback.setCurrentPlaylist({ pages: infiniteData, title, reviver })
                    }
                    playback.playTrack(index)
                }
            } else if (type === 'album') {
                navigate(`/album/${item.Id}`)
            } else if (type === 'artist') {
                navigate(`/artist/${item.Id}`)
            } else if (type === 'playlist') {
                navigate(`/playlist/${item.Id}`)
            }
        }
    }

    const closeDetailModal = () => {
        setIsDetailModalOpen(false)
        setSelectedDetailItem(null)
    }

    useEffect(() => {
        // Try multiple selectors to find the correct scroll parent
        const selectors = ['.main_content', '.main > .main_content', 'main > .main_content']
        let foundParent = null
        
        for (const selector of selectors) {
            const element = document.querySelector(selector) as HTMLElement
            if (element) {
                foundParent = element
                break
            }
        }
        
        // Fallback to window if no specific scroll parent is found
        if (!foundParent) {
            console.warn('Could not find scroll parent, falling back to window')
        }
        
        setScrollParent(foundParent || undefined)
    }, [items.length])

    const { displayItems, setRowRefs } = useDisplayItems(items, isLoading)

    const hidden: IMenuItems = disableActions
        ? {
              ..._hidden,
              next: true,
              add_to_queue: true,
              download_song: true,
              add_to_playlist: true
          }
        : _hidden

    const [activeId, setActiveId] = useState<string | null>(null)

    const handleDragStart = useCallback((event: DragStartEvent) => {
        setActiveId(event.active.id as string)
    }, [])

    const handleDragEnd = useCallback(
        (event: DragEndEvent) => {
            const { active, over } = event
            if (over && active.id !== over.id) {
                const oldIndex = items.findIndex(i => (i.queueId || i.Id) === active.id)
                const newIndex = items.findIndex(i => (i.queueId || i.Id) === over.id)
                const newItems = arrayMove(items, oldIndex, newIndex)
                onSort?.(newItems)
            }
            setActiveId(null)
        },
        [items, onSort]
    )

    const renderItem = (
        index: number,
        item: MediaItem | { isPlaceholder: true },
        listeners?: SyntheticListenerMap | undefined
    ) => {
        if ('isPlaceholder' in item) {
            if (type === 'album') {
                return (
                    <div className="media-item album-item" ref={el => setRowRefs(index, el)}>
                        <Skeleton type="album" />
                    </div>
                )
            } else if (type === 'artist') {
                return (
                    <div className="media-item artist-item" ref={el => setRowRefs(index, el)}>
                        <Skeleton type="artist" />
                    </div>
                )
            } else if (type === 'playlist') {
                return (
                    <div className="media-item album-item" ref={el => setRowRefs(index, el)}>
                        <Skeleton type="album" />
                    </div>
                )
            } else {
                return (
                    <div className="media-item song-item" ref={el => setRowRefs(index, el)}>
                        <Skeleton type="song" />
                    </div>
                )
            }
        }

        if (type === 'album') {
            const isActive = dropdown.selectedItem?.Id === item.Id && dropdown.isOpen

            const itemClass = [isActive ? 'active' : ''].filter(Boolean).join(' ')

            return (
                <div
                    className={`media-item album-item ${itemClass}`}
                    onClick={() => handleItemClick(item, index)}
                    onContextMenu={e => dropdown.onContextMenu(e, { item }, false, hidden)}
                    onTouchStart={e => dropdown.onTouchStart(e, { item }, false, hidden)}
                    onTouchMove={dropdown.onTouchClear}
                    onTouchEnd={dropdown.onTouchClear}
                >
                    <Squircle width={46} height={46} cornerRadius={6} className="media-state">
                        <JellyImg item={item} type={'Primary'} width={46} height={46} />
                    </Squircle>
                    <div className="media-details">
                        <span className="song-name">{item.Name}</span>
                        <div className="container">
                            {type === 'album' ? (
                                <div className="album-artist">
                                    {albumDisplayMode === 'year' && item.ProductionYear ? (
                                        <>{item.ProductionYear}</>
                                    ) : albumDisplayMode === 'both' && item.ProductionYear ? (
                                        <>
                                            {item.AlbumArtist}
                                            <span className="divider" />
                                            {item.ProductionYear}
                                        </>
                                    ) : (
                                        <>{item.AlbumArtist}</>
                                    )}
                                    {discoverMode && item.ChildCount && (
                                        <span className="track-count">{item.ChildCount} tracks</span>
                                    )}
                                </div>
                            ) : (
                                <>
                                    {albumDisplayMode === 'year' && <div className="year">{item.ProductionYear}</div>}
                                    {albumDisplayMode === 'artist' && (
                                        <div className="artist">{item.AlbumArtist || 'Unknown Artist'}</div>
                                    )}
                                    {albumDisplayMode === 'both' && (
                                        <>
                                            <div className="year">{item.ProductionYear}</div>
                                            <div className="divider"></div>
                                            <div className="artist">{item.AlbumArtist || 'Unknown Artist'}</div>
                                        </>
                                    )}
                                </>
                            )}
                        </div>
                    </div>

                    <MediaIndicators
                        item={item}
                        disableActions={disableActions}
                        listeners={listeners}
                        isDraggable={isDraggable}
                        discoverMode={discoverMode}
                        onDiscoverDownload={onDiscoverDownload}
                    />
                </div>
            )
        } else if (type === 'artist') {
            const isActive = dropdown.selectedItem?.Id === item.Id && dropdown.isOpen

            const itemClass = [isActive ? 'active' : ''].filter(Boolean).join(' ')

            return (
                <div
                    className={`media-item artist-item ${itemClass}`}
                    onClick={() => handleItemClick(item, index)}
                    onContextMenu={e => dropdown.onContextMenu(e, { item }, false, hidden)}
                    onTouchStart={e => dropdown.onTouchStart(e, { item }, false, hidden)}
                    onTouchMove={dropdown.onTouchClear}
                    onTouchEnd={dropdown.onTouchClear}
                >
                    <Squircle width={46} height={46} cornerRadius={100} className="media-state">
                        <JellyImg item={item} type={'Primary'} width={46} height={46} />
                    </Squircle>
                    <div className="media-details">
                        <span className="song-name">{item.Name}</span>
                    </div>

                    <MediaIndicators
                        item={item}
                        disableActions={disableActions}
                        listeners={listeners}
                        isDraggable={isDraggable}
                        discoverMode={discoverMode}
                        onDiscoverDownload={onDiscoverDownload}
                    />
                </div>
            )
        } else if (type === 'playlist') {
            const isActive = dropdown.selectedItem?.Id === item.Id && dropdown.isOpen

            const itemClass = [isActive ? 'active' : ''].filter(Boolean).join(' ')

            return (
                <div
                    className={`media-item playlist-item ${itemClass}`}
                    onClick={() => handleItemClick(item, index)}
                    onContextMenu={e => dropdown.onContextMenu(e, { item }, false, hidden)}
                    onTouchStart={e => dropdown.onTouchStart(e, { item }, false, hidden)}
                    onTouchMove={dropdown.onTouchClear}
                    onTouchEnd={dropdown.onTouchClear}
                >
                    <Squircle width={46} height={46} cornerRadius={6} className="media-state">
                        <JellyImg item={item} type={'Primary'} width={46} height={46} />
                    </Squircle>
                    <div className="media-details">
                        <span className="song-name">{item.Name}</span>
                        <div className="container">
                            <div className="track-amount">
                                <span className="number">{item.ChildCount || 0}</span>{' '}
                                <span>{(item.ChildCount || 0) === 1 ? 'Track' : 'Tracks'}</span>
                            </div>
                        </div>
                    </div>

                    <MediaIndicators
                        item={item}
                        disableActions={disableActions}
                        listeners={listeners}
                        isDraggable={isDraggable}
                        discoverMode={discoverMode}
                        onDiscoverDownload={onDiscoverDownload}
                    />
                </div>
            )
        } else {
            const isCurrentTrack = playback.currentTrack?.Id === item.Id
            const isActive = dropdown.selectedItem?.Id === item.Id && dropdown.isOpen

            const itemClass = [
                isCurrentTrack ? (playback.isPlaying ? 'playing' : 'paused') : '',
                isActive ? 'active' : '',
            ]
                .filter(Boolean)
                .join(' ')

            // Right-edge swipe gesture state (per item render)
            let startX = 0
            let startY = 0
            let swiped = false
            const swipeThreshold = 48 // px left swipe

            const onSwipeTouchStart: React.TouchEventHandler<HTMLDivElement> = e => {
                e.stopPropagation()
                const t = e.touches[0]
                startX = t.clientX
                startY = t.clientY
                swiped = false
            }

            const onSwipeTouchMove: React.TouchEventHandler<HTMLDivElement> = e => {
                e.stopPropagation()
                const t = e.touches[0]
                const dx = t.clientX - startX
                const dy = t.clientY - startY
                // ignore if vertical motion dominates
                if (Math.abs(dy) > Math.abs(dx)) return
                if (!swiped && dx < -swipeThreshold) {
                    swiped = true
                    // Execute Up Next insertion
                    try {
                        if (playback.currentTrackIndex >= 0) {
                            // Insert after current
                            playback.updateCurrentPlaylist(async pages => {
                                const flat = pages.flat()
                                const insertAt = Math.min(playback.currentTrackIndex + 1, flat.length)
                                // Insert a shallow copy of the item
                                flat.splice(insertAt, 0, { ...(item as MediaItem) })

                                // Re-split to original page lengths
                                const newPages: typeof pages = []
                                let offset = 0
                                for (const page of pages) {
                                    const len = page.length
                                    newPages.push(flat.slice(offset, offset + len))
                                    offset += len
                                }
                                // If added to end created extra beyond last page length, append remainder as new page
                                if (offset < flat.length) newPages.push(flat.slice(offset))
                                return Promise.resolve(newPages)
                            })
                            toast.success('Added up next')
                        } else {
                            // Option 2: start new playlist with current list; make swiped item first
                            if (infiniteData) {
                                playback.setCurrentPlaylist({ pages: infiniteData, title, reviver })
                                // Move swiped to first then play
                                playback.updateCurrentPlaylist(async pages => {
                                    const flat = pages.flat()
                                    const originalIndex = flat.findIndex(x => x.Id === (item as MediaItem).Id)
                                    if (originalIndex > 0) {
                                        const [moved] = flat.splice(originalIndex, 1)
                                        flat.unshift(moved)
                                    } else if (originalIndex === -1) {
                                        flat.unshift({ ...(item as MediaItem) })
                                    }
                                    const newPages: typeof pages = []
                                    let offset = 0
                                    for (const page of pages) {
                                        const len = page.length
                                        newPages.push(flat.slice(offset, offset + len))
                                        offset += len
                                    }
                                    if (offset < flat.length) newPages.push(flat.slice(offset))
                                    return Promise.resolve(newPages)
                                })
                                playback.playTrack(0)
                            } else {
                                toast.info('Cannot start playback here. Open the list and try again.')
                            }
                            toast.success('Started playing with track first')
                        }
                    } catch (err) {
                        console.error('Swipe Up Next failed:', err)
                        toast.error('Could not add up next')
                    }
                }
            }

            const onSwipeTouchEnd: React.TouchEventHandler<HTMLDivElement> = e => {
                e.stopPropagation()
            }

            return (
                <div
                    className={`media-item song-item ${itemClass}`}
                    onClick={() => handleItemClick(item, index)}
                    ref={el => setRowRefs(index, el)}
                    onContextMenu={e => dropdown.onContextMenu(e, { item }, false, hidden)}
                    onTouchStart={e => dropdown.onTouchStart(e, { item }, false, hidden)}
                    onTouchMove={dropdown.onTouchClear}
                    onTouchEnd={dropdown.onTouchClear}
                >
                    {/* Right-edge swipe area to add Up Next */}
                    <div
                        className="swipe-area-right"
                        onTouchStart={onSwipeTouchStart}
                        onTouchMove={onSwipeTouchMove}
                        onTouchEnd={onSwipeTouchEnd}
                    />
                    <Squircle width={46} height={46} cornerRadius={6} className="media-state">
                        <JellyImg item={item} type={'Primary'} width={46} height={46} />

                        <div className="overlay">
                            <div className="container">
                                <div className="play">
                                    <div className="play-icon"></div>
                                </div>
                                <div className="pause">
                                    <div className="pause-icon"></div>
                                </div>
                            </div>
                            <div className="play-state-animation">
                                <PlaystateAnimationMedalist width={28} height={20} className="sound-bars" />
                            </div>
                        </div>
                    </Squircle>
                    <div className="media-details">
                        <div className="song-title-row">
                            <span className="song-name">{item.Name}</span>
                            
                            {/* Inline indicators right next to song name */}
                            {/* Show existing track indicators */}
                            {discoverMode && (item as any).existingTrackInfo?.exists && (
                                <div className="existing-indicators-inline">
                                    {(item as any).existingTrackInfo.total_versions > 1 ? (
                                        <span 
                                            className="versions-badge"
                                            title={`${(item as any).existingTrackInfo.total_versions} versions downloaded`}
                                        >
                                            {(item as any).existingTrackInfo.total_versions}✓
                                        </span>
                                    ) : (
                                        <span className="downloaded-badge" title="Already downloaded">✓</span>
                                    )}
                                    
                                    {(item as any).existingTrackInfo.has_explicit && (
                                        <span className="version-badge explicit" title="Explicit version exists">E</span>
                                    )}
                                    {(item as any).existingTrackInfo.has_clean && (
                                        <span className="version-badge clean" title="Clean version exists">C</span>
                                    )}
                                </div>
                            )}
                            
                            {/* Show explicit marker */}
                            {(() => {
                                const trackName = item.Name?.toLowerCase() || '';
                                const isExplicit = (
                                    (item as any).isExplicit || 
                                    (item as any).Explicit || 
                                    trackName.includes('explicit') || 
                                    trackName.includes('uncensored') ||
                                    trackName.includes('(explicit)') ||
                                    trackName.includes('[explicit]') ||
                                    trackName.includes('dirty') ||
                                    trackName.includes('(dirty)') ||
                                    trackName.includes('[dirty]') ||
                                    (item.Path && (
                                        item.Path.toLowerCase().includes('explicit') || 
                                        item.Path.toLowerCase().includes('uncensored') ||
                                        item.Path.toLowerCase().includes('dirty')
                                    ))
                                );
                                return isExplicit;
                            })() && (
                                <span className="explicit-badge-inline" title="Explicit Content">E</span>
                            )}
                            
                            {/* Show indicators for existing tracks - removed discoverMode check */}
                            {(item as any).existingTrackInfo?.exists && (
                                <div className="existing-indicators-inline">
                                    {(item as any).existingTrackInfo.total_versions > 1 ? (
                                        <span 
                                            className="versions-badge"
                                            title={`${(item as any).existingTrackInfo.total_versions} versions downloaded`}
                                        >
                                            {(item as any).existingTrackInfo.total_versions}✓
                                        </span>
                                    ) : (
                                        <span className="downloaded-badge" title="Already downloaded">✓</span>
                                    )}
                                    
                                    {(item as any).existingTrackInfo.has_explicit && (
                                        <span className="version-badge explicit" title="Explicit version exists">E</span>
                                    )}
                                    {(item as any).existingTrackInfo.has_clean && (
                                        <span className="version-badge clean" title="Clean version exists">C</span>
                                    )}
                                </div>
                            )}
                        </div>
                        
                        <div className="container">
                            <div className="artist">
                                {item.Artists && item.Artists.length > 0 ? item.Artists.join(', ') : 'Unknown Artist'}
                            </div>
                            <div className="divider"></div>
                            <div className="album">{item.Album || 'Unknown Album'}</div>
                        </div>
                    </div>

                    <MediaIndicators
                        item={item}
                        disableActions={disableActions}
                        listeners={listeners}
                        isDraggable={isDraggable}
                        discoverMode={discoverMode}
                        onDiscoverDownload={onDiscoverDownload}
                    />
                </div>
            )
        }
    }

    if (isLoading && items.length === 0) {
        return <Loader />
    }

    if (items.length === 0 && !isLoading) {
        return (
            <div className="empty">
                {type === 'song'
                    ? 'No tracks were found'
                    : type === 'album'
                    ? 'No albums were found'
                    : type === 'artist'
                    ? 'No artists were found'
                    : 'No playlists were found'}
            </div>
        )
    }

    return (
        <ul className="media-list noSelect">
            {isDraggable && (
                <DraggableVirtuoso
                    handleDragStart={handleDragStart}
                    handleDragEnd={handleDragEnd}
                    items={items}
                    renderItem={renderItem}
                    activeId={activeId}
                >
                    <Virtuoso
                        ref={virtuosoRef}
                        data={displayItems}
                        customScrollParent={scrollParent}
                        itemContent={(index, item) => {
                            if ('isPlaceholder' in item) {
                                return renderItem(index, item)
                            }

                            return (
                                <SortableItem
                                    key={item.queueId || item.Id}
                                    id={item.queueId || item.Id}
                                    cb={({ listeners }) => renderItem(index, item, listeners)}
                                />
                            )
                        }}
                        endReached={loadMore ? (startIndex) => loadMore(startIndex) : undefined}
                        overscan={800}
                    />
                </DraggableVirtuoso>
            )}

            {!isDraggable && (
                <Virtuoso
                    ref={virtuosoRef}
                    data={displayItems}
                    customScrollParent={scrollParent}
                    itemContent={renderItem}
                    endReached={loadMore ? (startIndex) => loadMore(startIndex) : undefined}
                    overscan={800}
                />
            )}

            {/* Media Detail Modal */}
            <ErrorBoundary
                fallback={
                    <div className="modal-error-fallback">
                        <p>Unable to load media details. Please try again.</p>
                        <button onClick={closeDetailModal}>Close</button>
                    </div>
                }
            >
                <MediaDetailModal
                    item={selectedDetailItem}
                    isOpen={isDetailModalOpen}
                    onClose={closeDetailModal}
                    onDownload={onDiscoverDownload}
                />
            </ErrorBoundary>
        </ul>
    )
}

const DraggableVirtuoso = ({
    handleDragStart,
    handleDragEnd,
    items,
    renderItem,
    activeId,
    children,
}: {
    handleDragStart: (event: DragStartEvent) => void
    handleDragEnd: (event: DragEndEvent) => void
    items: MediaItem[]
    renderItem: (index: number, item: MediaItem | { isPlaceholder: true }) => React.ReactNode
    activeId: string | null
    children: React.ReactNode
}) => {
    const sensors = useSensors(useSensor(PointerSensor), useSensor(TouchSensor))

    return (
        <DndContext
            sensors={sensors}
            collisionDetection={closestCenter}
            onDragStart={handleDragStart}
            onDragEnd={handleDragEnd}
            modifiers={[restrictToVerticalAxis]}
        >
            <SortableContext items={items.map(i => i.queueId || i.Id)} strategy={verticalListSortingStrategy}>
                {children}
            </SortableContext>
            <DragOverlay className="drag-overlay">
                {activeId
                    ? renderItem(
                          items.findIndex(i => (i.queueId || i.Id) === activeId),
                          items.find(i => (i.queueId || i.Id) === activeId) || { isPlaceholder: true }
                      )
                    : null}
            </DragOverlay>
        </DndContext>
    )
}

const SortableItem = ({
    id,
    cb,
}: {
    id: string
    cb: (props: { listeners: SyntheticListenerMap | undefined }) => ReactNode
}) => {
    const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id })

    const style = {
        transform: CSS.Transform.toString(transform),
        transition: isDragging ? 'none' : transition,
        zIndex: isDragging ? 999 : undefined,
        opacity: isDragging ? 0 : 1,
    }

    const memoCb = useMemo(() => cb({ listeners }), [listeners, cb])

    return (
        <li ref={setNodeRef} className={isDragging ? 'active' : ''} style={style} {...attributes}>
            {memoCb}
        </li>
    )
}

const MediaIndicators = ({
    item,
    disableActions,
    listeners,
    isDraggable,
    discoverMode = false,
    onDiscoverDownload,
}: {
    item: MediaItem
    disableActions: boolean
    listeners?: SyntheticListenerMap | undefined
    isDraggable?: boolean
    discoverMode?: boolean
    onDiscoverDownload?: (item: MediaItem) => void
}) => {
    // Import the DownloadContext
    const downloadContext = useDownloadContext()
    
    // Function to handle download for Discover page
    const handleDiscoverDownload = (e: React.MouseEvent) => {
        e.stopPropagation()
        console.log('Download button clicked!', { discoverMode, disableActions, item: item.Name })
        
        // Check if track already exists and show confirmation
        const existingInfo = (item as any).existingTrackInfo;
        if (existingInfo?.exists) {
            const versionText = existingInfo.total_versions > 1 ? 
                `${existingInfo.total_versions} versions` : '1 version';
            const versionDetails = [];
            if (existingInfo.has_explicit) versionDetails.push('explicit');
            if (existingInfo.has_clean) versionDetails.push('clean');
            if (existingInfo.has_regular) versionDetails.push('regular');
            
            const message = `"${item.Name}" already exists (${versionText}${versionDetails.length > 0 ? ': ' + versionDetails.join(', ') : ''}).\n\nDownload anyway?`;
            
            if (!confirm(message)) {
                return;
            }
        }
        
        if (onDiscoverDownload && item) {
            // Use custom download handler if provided
            onDiscoverDownload(item)
        } else if (downloadContext && item) {
            // Use the existing download functionality
            downloadContext.addToDownloads([item], undefined)
        }
    }

    // Removed debug logging to clean up console

    return (
        <div className="media-indicators">
            {item.offlineState && (
                <div className="download-state">
                    {item.offlineState === 'downloading' && (
    <div className="download-progress-ui" title="Downloading...">
        {downloadContext?.downloads?.[item.Id]?.progress !== undefined ? (
            <>
                <div className="progress-bar-container">
                    <div
                        className="progress-bar"
                        style={{
                            width: `${downloadContext.downloads[item.Id].progress}%`,
                            transition: 'width 0.3s ease',
                        }}
                    ></div>
                </div>
                <span className="progress-percent">{Math.round(downloadContext.downloads[item.Id].progress)}%</span>
            </>
        ) : (
            <div className="icon downloading"><DownloadingIcon width={16} height={16} /></div>
        )}
    </div>
)}

                    {item.offlineState === 'downloaded' && (
                        <div className="icon downloaded" title="Downloaded">
                            <DownloadedIcon width={16} height={16} />
                        </div>
                    )}

                    {item.offlineState === 'deleting' && (
                        <div className="icon deleting" title="Deleting...">
                            <DeletingIcon width={16} height={16} />
                        </div>
                    )}

                    {item.offlineState === 'accepted' && (
                        <div className="icon accepted" title="Download Accepted">
                            <div className="status-dot accepted"></div>
                        </div>
                    )}

                    {item.offlineState === 'processing' && (
                        <div className="icon processing" title="Processing Download">
                            <div className="status-spinner processing"></div>
                        </div>
                    )}

                    {item.offlineState === 'finished' && (
                        <div className="icon finished" title="Download Finished">
                            <div className="status-check finished"></div>
                        </div>
                    )}

                    {item.offlineState === 'uploading' && (
                        <div className="icon uploading" title="Uploading to Server">
                            <div className="status-upload uploading"></div>
                        </div>
                    )}
                </div>
            )}


            


            {/* Professional download button for discover mode */}
            {discoverMode && !disableActions && (
                <button
                    className={`discover-download-button discover-download-btn ${
                        (item as any).existingTrackInfo?.exists ? 'already-exists' : ''
                    } ${item.offlineState ? 'downloading' : ''}`}
                    data-testid="download-button"
                    onClick={handleDiscoverDownload}
                    title={
                        item.offlineState ? 'Downloading...' :
                        (item as any).existingTrackInfo?.exists ? 
                            `Download anyway (${(item as any).existingTrackInfo.total_versions} version${(item as any).existingTrackInfo.total_versions > 1 ? 's' : ''} exist)` :
                            `Download ${item.Name || 'track'}`
                    }
                    disabled={!!item.offlineState}
                >
                    {item.offlineState ? (
                        <SpinnerIcon width={16} height={16} style={{ animation: 'spin 1s linear infinite' }} />
                    ) : (item as any).existingTrackInfo?.exists ? (
                        <div className="download-anyway-icon">
                            <DownloadIcon width={14} height={14} />
                            <span className="plus-icon">+</span>
                        </div>
                    ) : (
                        <DownloadIcon width={16} height={16} />
                    )}
                </button>
            )}
            
            {/* Show download status for discover mode */}
            {discoverMode && item.offlineState === 'downloading' && (
                <div 
                    className="discover-downloading-indicator"
                    title="Downloading..."
                >
                    <SpinnerIcon width={16} height={16} style={{ animation: 'spin 1s linear infinite' }} />
                </div>
            )}
            
            {/* Show downloaded status for discover mode */}
            {discoverMode && (item.offlineState === 'downloaded' || item.offlineState === 'finished') && (
                <div 
                    className="discover-downloaded-indicator"
                    title="Downloaded"
                >
                    <CheckIcon width={16} height={16} />
                </div>
            )}
            


            {!disableActions && item.UserData?.IsFavorite && location.pathname !== '/favorites' && (
                <div className="favorited" title="Favorited">
                    <HeartFillIcon size={16} />
                </div>
            )}

            {isDraggable && (
                <div className="draggable" title="Drag" {...listeners}>
                    <div className="grid">
                        <div className="dot"></div>
                        <div className="dot"></div>
                        <div className="dot"></div>
                        <div className="dot"></div>
                        <div className="dot"></div>
                        <div className="dot"></div>
                        <div className="dot"></div>
                        <div className="dot"></div>
                        <div className="dot"></div>
                    </div>
                </div>
            )}
        </div>
    )
}