import { ArrowLeftIcon, HeartFillIcon, HeartIcon } from '@primer/octicons-react'
import { useEffect, useRef, useState } from 'react'
import { JellyImg } from '../components/JellyImg'
import { Progressbar } from '../components/Main'
import { Squircle } from '../components/Squircle'
import {
    DeletingIcon,
    DownloadedIcon,
    DownloadingIcon,
    LyricsIcon,
    MoreIcon,
    QueueIcon,
    TracksIcon,
} from '../components/SvgIcons'
import { useDropdownContext } from '../context/DropdownContext/DropdownContext'
import { useHistoryContext } from '../context/HistoryContext/HistoryContext'
import { useNavigate } from 'react-router-dom'
import { usePlaybackContext } from '../context/PlaybackContext/PlaybackContext'
import { usePageTitle } from '../context/PageTitleContext/PageTitleContext'
import { useJellyfinTrackInfo } from '../hooks/Jellyfin/useJellyfinTrackInfo'
import { useDuration } from '../hooks/useDuration'
import { useFavorites } from '../hooks/useFavorites'
import { Lyrics } from './Lyrics'
import './NowPlaying.css'
import './NowPlayingLyrics.css'
import '../styles/lyricsModal.css'

export const NowPlaying = () => {
    const { setPageTitle } = usePageTitle()
    const history = useHistoryContext()
    const navigate = useNavigate()
    const previousPage = history?.goBack ?? (() => window.history.back())
    
    // Add error boundary for this component
    try {
        const { playlistTitle, currentTrack, bitrate, currentPlaylist, currentTrackIndex } = usePlaybackContext()

        const playback = usePlaybackContext()
        const duration = useDuration()
        const { isOpen, selectedItem, onContextMenu } = useDropdownContext()
        const { addToFavorites, removeFromFavorites } = useFavorites()
        // const { setDisabled } = useScrollContext()
        // Marquee activation for long titles
        const [isMarqueeActive, setIsMarqueeActive] = useState(false)
        const marqueeViewportRef = useRef<HTMLDivElement | null>(null)
        const marqueeTextRef = useRef<HTMLSpanElement | null>(null)
        
        // Lyrics modal state
        const [showLyrics, setShowLyrics] = useState(false)
        
        // Queue modal state
        const [showQueue, setShowQueue] = useState(false)
    
    // Touch gesture handling for mobile swipe-to-close
    const [touchStart, setTouchStart] = useState<number | null>(null)
    const [touchEnd, setTouchEnd] = useState<number | null>(null)
    
    // Minimum swipe distance (in px)
    const minSwipeDistance = 50
    
    const onTouchStart = (e: React.TouchEvent) => {
        setTouchEnd(null)
        setTouchStart(e.targetTouches[0].clientX)
    }
    
    const onTouchMove = (e: React.TouchEvent) => {
        setTouchEnd(e.targetTouches[0].clientX)
    }
    
    const onTouchEnd = () => {
        if (!touchStart || !touchEnd) return
        const distance = touchStart - touchEnd
        const isRightSwipe = distance < -minSwipeDistance
        
        // Swipe right to close
        if (isRightSwipe) {
            if (showLyrics) setShowLyrics(false)
            if (showQueue) setShowQueue(false)
        }
    }

    useEffect(() => {
        setPageTitle('Now Playing');
    }, [setPageTitle]);

    // Measure if title overflows to toggle marquee
    useEffect(() => {
        const measure = () => {
            try {
                const viewport = marqueeViewportRef.current
                const text = marqueeTextRef.current
                if (!viewport || !text) return
                const shouldMarquee = text.scrollWidth > viewport.clientWidth + 2
                setIsMarqueeActive(shouldMarquee)
            } catch (error) {
                console.warn('Error measuring marquee text:', error)
                setIsMarqueeActive(false)
            }
        }

        // Delay to ensure DOM has rendered new title
        const t = setTimeout(measure, 0)
        const handleResize = () => {
            try {
                measure()
            } catch (error) {
                console.warn('Error in resize handler:', error)
            }
        }
        
        window.addEventListener('resize', handleResize)
        return () => {
            clearTimeout(t)
            window.removeEventListener('resize', handleResize)
        }
    }, [currentTrack?.Name])

    // const handleVolumeChange = (e: ChangeEvent<HTMLInputElement>) => {
    //     const newVolume = parseFloat(e.target.value)
    //     playback.setVolume(newVolume)
    // }

    // const handleVolumeScroll = (e: WheelEvent<HTMLInputElement>) => {
    //     e.stopPropagation()
    //     const step = e.deltaY > 0 ? -0.02 : 0.02
    //     const newVolume = Math.max(0, Math.min(1, playback.volume + step))
    //     playback.setVolume(newVolume)
    // }

    // Do not alter the app's main scroll when opening Now Playing; this breaks back-navigation restoration.
    // If needed, scope any scroll adjustments to a local container within Now Playing.

    const handleMoreClick = (e: React.MouseEvent<HTMLDivElement>) => {
        if (!currentTrack) {
            return
        }

        e.stopPropagation()
        onContextMenu(e, { item: currentTrack }, true, { add_to_favorite: true, remove_from_favorite: true })
    }

    // Prefer a single primary artist for display
    const fullArtistList =
        currentTrack?.Artists && currentTrack.Artists.length > 0
            ? currentTrack.Artists.join(', ')
            : 'No Artist'
    const primaryArtistName =
        (currentTrack as any)?.AlbumArtist ||
        (currentTrack?.Artists && currentTrack.Artists.length > 0 ? currentTrack.Artists[0] : 'No Artist')

    // Get IDs for navigation
    const albumId = currentTrack?.AlbumId
    const primaryArtistId = currentTrack?.ArtistItems?.[0]?.Id

    // Helper functions for navigation
    const handleSongTitleClick = (e?: React.MouseEvent | React.TouchEvent) => {
        try {
            if (e) {
                e.preventDefault();
                e.stopPropagation();
            }
            if (albumId) {
                navigate(`/album/${albumId}`)
            }
        } catch (error) {
            console.error('Error navigating to album:', error)
        }
    }

    const handleArtistClick = (e?: React.MouseEvent | React.TouchEvent) => {
        try {
            if (e) {
                e.preventDefault();
                e.stopPropagation();
            }
            if (primaryArtistId) {
                navigate(`/artist/${primaryArtistId}`)
            } else if (currentTrack?.ArtistItems?.[0]?.Id) {
                navigate(`/artist/${currentTrack.ArtistItems[0].Id}`)
            }
        } catch (error) {
            console.error('Error navigating to artist:', error)
        }
    }

    return (
        <>
            <div className="now-playing-dimmer noSelect" />
            <div
                className={
                    playback.isPlaying
                        ? `now-playing playing ${showLyrics ? 'with-lyrics' : ''} ${showQueue ? 'with-queue' : ''}`
                        : playback.currentTrack
                        ? `now-playing paused ${showLyrics ? 'with-lyrics' : ''} ${showQueue ? 'with-queue' : ''}`
                        : `now-playing ${showLyrics ? 'with-lyrics' : ''} ${showQueue ? 'with-queue' : ''}`
                }
            >
                <div className="ui">
                    <div className="playing-header">
                        <div className="primary">
                            <div onClick={previousPage} className="return_icon" title="Back">
                                <ArrowLeftIcon size={16}></ArrowLeftIcon>
                            </div>
                        </div>
                        <div className="secondary" onClick={() => {
                            if (currentTrack?.ParentId) {
                                navigate(`/album/${currentTrack.ParentId}`)
                            } else if (currentTrack?.AlbumId) {
                                navigate(`/album/${currentTrack.AlbumId}`)
                            }
                        }} style={{ cursor: 'pointer' }}>
                            <div className="title">Playing From</div>
                            <div className="desc" title={playlistTitle || 'No Playlist'}>
                                {playlistTitle || 'No Playlist'}
                            </div>
                        </div>
                        <div className="tertiary">
                            <div
                                className="favorite-state"
                                title={
                                    currentTrack?.UserData?.IsFavorite ? 'Remove from favorites' : 'Add to favorites'
                                }
                                onClick={async () => {
                                    if (currentTrack?.Id) {
                                        try {
                                            if (currentTrack?.UserData?.IsFavorite) {
                                                await removeFromFavorites(currentTrack)
                                            } else {
                                                await addToFavorites(currentTrack)
                                            }
                                        } catch (error) {
                                            console.error('Failed to update favorite status:', error)
                                        }
                                    }
                                }}
                            >
                                {currentTrack?.UserData?.IsFavorite ? (
                                    <HeartFillIcon size={16} />
                                ) : (
                                    <HeartIcon size={16} />
                                )}
                            </div>
                            <div
                                className={`more ${isOpen && selectedItem?.Id === currentTrack?.Id ? 'active' : ''}`}
                                onClick={handleMoreClick}
                                title="More"
                            >
                                <MoreIcon width={14} height={14} />
                            </div>
                        </div>
                    </div>
                    <div className="playing-content">
                        <div className="playing-artwork noSelect">
                            <Squircle
                                width={800}
                                height={800}
                                cornerRadius={14}
                                isResponsive={true}
                                className="thumbnail"
                            >
                                {currentTrack && (
                                    <JellyImg item={currentTrack} type={'Primary'} width={800} height={800} />
                                )}
                                {!currentTrack && (
                                    <div className="fallback-thumbnail">
                                        <TracksIcon width="50%" height="50%" />
                                    </div>
                                )}
                                <div className="shadow-border" />
                            </Squircle>
                        </div>
                        <div className="playing-info">
                            <div className={`song-name marquee ${isMarqueeActive ? 'active' : ''}`} title={currentTrack?.Name || 'No Track Played'}>
                                <div className="marquee-viewport" ref={marqueeViewportRef} aria-live="polite">
                                    <div className="marquee-track">
                                        <span 
                                            className={`marquee-text ${albumId ? 'clickable' : ''}`} 
                                            ref={marqueeTextRef}
                                            onClick={albumId ? handleSongTitleClick : undefined}
                                            onTouchEnd={albumId ? handleSongTitleClick : undefined}
                                            style={{ cursor: albumId ? 'pointer' : 'default' }}
                                        >
                                            {currentTrack?.Name || 'No Track Played'}
                                        </span>
                                    </div>
                                </div>
                            </div>
                            <div 
                                className={`artist ${primaryArtistId || currentTrack?.ArtistItems?.[0]?.Id ? 'clickable' : ''}`} 
                                title={fullArtistList}
                                onClick={(primaryArtistId || currentTrack?.ArtistItems?.[0]?.Id) ? handleArtistClick : undefined}
                                onTouchEnd={(primaryArtistId || currentTrack?.ArtistItems?.[0]?.Id) ? handleArtistClick : undefined}
                                style={{ cursor: (primaryArtistId || currentTrack?.ArtistItems?.[0]?.Id) ? 'pointer' : 'default' }}
                            >
                                {primaryArtistName}
                            </div>
                        </div>
                        <div className="playing-progress noSelect">
                            <div className="info">
                                <div className="duration">{playback.formatTime(duration.progress)}</div>
                                <div className="quality">
                                    <div className="text">
                                        {bitrate === 320000
                                            ? 'High'
                                            : bitrate === 256000
                                            ? 'Medium'
                                            : bitrate === 192000
                                            ? 'Low'
                                            : bitrate === 128000
                                            ? 'Minimal'
                                            : 'Source'}
                                    </div>
                                    <div className="divider" />
                                    <div className="bitrate">
                                        <span className="number">
                                            {bitrate === 320000 ? (
                                                '320'
                                            ) : bitrate === 256000 ? (
                                                '256'
                                            ) : bitrate === 192000 ? (
                                                '192'
                                            ) : bitrate === 128000 ? (
                                                '128'
                                            ) : (
                                                <TrackBitrate trackId={currentTrack?.Id || ''} />
                                            )}
                                        </span>{' '}
                                        kbps
                                    </div>
                                    {currentTrack?.offlineState && (
                                        <div className="download-state">
                                            {currentTrack?.offlineState === 'downloading' && (
                                                <div className="icon downloading" title="Syncing...">
                                                    <DownloadingIcon width={12} height={12} />
                                                </div>
                                            )}

                                            {currentTrack?.offlineState === 'downloaded' && (
                                                <div className="icon downloaded" title="Synced">
                                                    <DownloadedIcon width={12} height={12} />
                                                </div>
                                            )}

                                            {currentTrack?.offlineState === 'deleting' && (
                                                <div className="icon deleting" title="Unsyncing...">
                                                    <DeletingIcon width={12} height={12} />
                                                </div>
                                            )}

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

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

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

                                            {currentTrack?.offlineState === 'uploading' && (
                                                <div className="icon uploading" title="Uploading to Server">
                                                    <div className="status-upload uploading"></div>
                                                </div>
                                            )}
                                        </div>
                                    )}
                                </div>
                                <div className="duration">{playback.formatTime(duration.duration)}</div>
                            </div>
                            <Progressbar />
                        </div>
                        <div className="playing-controls">
                            <div
                                className={`shuffle ${playback.shuffle ? 'active' : ''}`}
                                onClick={playback.toggleShuffle}
                                title="Shuffle"
                            >
                                <div className="shuffle-icon"></div>
                            </div>
                            <div className="primary">
                                <div className="previous" onClick={playback.previousTrack} title="Previous">
                                    <div className="previous-icon"></div>
                                </div>
                                <div className="container">
                                    <div className="play" onClick={playback.togglePlayPause} title="Play">
                                        <div className="play-icon"></div>
                                    </div>
                                    <div className="pause" onClick={playback.togglePlayPause} title="Pause">
                                        <div className="pause-icon"></div>
                                    </div>
                                </div>
                                <div className="next" onClick={playback.nextTrack} title="Next">
                                    <div className="next-icon"></div>
                                </div>
                            </div>
                            <div
                                className={`repeat ${playback.repeat === 'off' ? '' : 'active'}`}
                                onClick={playback.toggleRepeat}
                                title="Repeat"
                            >
                                <div className={`repeat-icon${playback.repeat === 'one' ? '-one' : ''}`}></div>
                            </div>
                        </div>
                        <div className="playing-footer">
                            <div className="actions">
                                <div 
                                    className={`action ${showLyrics ? 'active' : ''}`} 
                                    title="Lyrics"
                                    onClick={() => {
                                        if (showLyrics) {
                                            setShowLyrics(false)
                                        } else {
                                            setShowQueue(false)
                                            setShowLyrics(true)
                                        }
                                    }}
                                >
                                    <LyricsIcon width={20} height={20} />
                                </div>
                                <div 
                                    className={`action ${showQueue ? 'active' : ''}`} 
                                    title="Queue"
                                    onClick={() => {
                                        if (showQueue) {
                                            setShowQueue(false)
                                        } else {
                                            setShowLyrics(false)
                                            setShowQueue(true)
                                        }
                                    }}
                                >
                                    <QueueIcon width={20} height={20} />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div className="background-artwork noSelect">
                    {currentTrack && <JellyImg item={currentTrack} type={'Primary'} width={360} height={360} />}
                </div>

                {/* Lyrics Panel */}
                <div 
                    className={`lyrics-panel ${showLyrics ? 'open' : ''}`}
                    onTouchStart={onTouchStart}
                    onTouchMove={onTouchMove}
                    onTouchEnd={onTouchEnd}
                >
                    <div className="lyrics-panel-header">
                        <h3>Lyrics</h3>
                        <button 
                            className="close-lyrics" 
                            onClick={() => setShowLyrics(false)}
                            aria-label="Close lyrics"
                        >
                            ×
                        </button>
                    </div>
                    <div className="lyrics-panel-content">
                        <Lyrics />
                    </div>
                </div>

                {/* Queue Panel */}
                <div 
                    className={`queue-panel ${showQueue ? 'open' : ''}`}
                    onTouchStart={onTouchStart}
                    onTouchMove={onTouchMove}
                    onTouchEnd={onTouchEnd}
                >
                    <div className="queue-panel-header">
                        <h3>Queue</h3>
                        <button 
                            className="close-queue" 
                            onClick={() => setShowQueue(false)}
                            aria-label="Close queue"
                        >
                            ×
                        </button>
                    </div>
                    <div className="queue-panel-content">
                        {currentTrack && (
                            <>
                                <div className="current-track-section">
                                    <h4>Now Playing</h4>
                                    <div className="current-track">
                                        <JellyImg item={currentTrack} type="Primary" width={50} height={50} />
                                        <div className="track-info">
                                            <div className="track-name">{currentTrack.Name}</div>
                                            <div className="track-artist">{primaryArtistName}</div>
                                        </div>
                                    </div>
                                </div>
                                
                                {currentPlaylist && currentTrackIndex !== undefined && currentPlaylist.slice(currentTrackIndex + 1).length > 0 && (
                                    <div className="next-tracks-section">
                                        <h4>Playing Next</h4>
                                        <div className="next-tracks">
                                            {currentPlaylist.slice(currentTrackIndex + 1).slice(0, 50).map((track: any, index: number) => {
                                                const queueIndex = currentTrackIndex + 1 + index;
                                                return (
                                                    <div 
                                                        key={track.Id} 
                                                        className="queue-track"
                                                        onDragOver={(e) => {
                                                            e.preventDefault();
                                                            e.currentTarget.classList.add('drag-over');
                                                        }}
                                                        onDragLeave={(e) => {
                                                            e.currentTarget.classList.remove('drag-over');
                                                        }}
                                                        onDrop={(e) => {
                                                            e.preventDefault();
                                                            e.currentTarget.classList.remove('drag-over');
                                                            const draggedIndex = parseInt(e.dataTransfer.getData('text/plain'));
                                                            const dropIndex = queueIndex;
                                                            if (draggedIndex !== dropIndex) {
                                                                playback.moveItemInPlaylist(draggedIndex, dropIndex);
                                                            }
                                                        }}
                                                        onContextMenu={(e) => {
                                                            e.preventDefault();
                                                            onContextMenu(e, { item: track }, true, { 
                                                                add_to_favorite: true, 
                                                                remove_from_favorite: true,
                                                                move_to_top: true
                                                            });
                                                        }}
                                                        onTouchStart={(e) => {
                                                            // Long press detection for mobile
                                                            const touchTimer = setTimeout(() => {
                                                                // Trigger context menu on long press
                                                                const contextEvent = new MouseEvent('contextmenu', {
                                                                    bubbles: true,
                                                                    cancelable: true,
                                                                    clientX: e.touches[0].clientX,
                                                                    clientY: e.touches[0].clientY
                                                                });
                                                                e.currentTarget.dispatchEvent(contextEvent);
                                                            }, 500); // 500ms long press
                                                            
                                                            const clearTimer = () => {
                                                                clearTimeout(touchTimer);
                                                                e.currentTarget.removeEventListener('touchend', clearTimer);
                                                                e.currentTarget.removeEventListener('touchmove', clearTimer);
                                                            };
                                                            
                                                            e.currentTarget.addEventListener('touchend', clearTimer);
                                                            e.currentTarget.addEventListener('touchmove', clearTimer);
                                                        }}
                                                        onClick={() => {
                                                            // Jump to this track in the queue
                                                            playback.playTrack(queueIndex);
                                                        }}
                                                    >
                                                        <span className="track-number">{index + 1}</span>
                                                        <JellyImg item={track} type="Primary" width={40} height={40} />
                                                        <div className="track-info">
                                                            <div className="track-name">{track.Name}</div>
                                                            <div className="track-artist">
                                                                {(track as any)?.AlbumArtist || 
                                                                 (track?.Artists && track.Artists.length > 0 ? track.Artists[0] : 'No Artist')}
                                                            </div>
                                                        </div>
                                                        <span 
                                                            className="drag-handle"
                                                            draggable
                                                            onDragStart={(e) => {
                                                                e.dataTransfer.setData('text/plain', queueIndex.toString());
                                                                e.currentTarget.closest('.queue-track')?.classList.add('dragging');
                                                                e.stopPropagation();
                                                            }}
                                                            onDragEnd={(e) => {
                                                                e.currentTarget.closest('.queue-track')?.classList.remove('dragging');
                                                            }}
                                                            onMouseDown={(e) => e.stopPropagation()}
                                                            onTouchStart={(e) => e.stopPropagation()}
                                                        >
                                                            ⋮⋮
                                                        </span>
                                                    </div>
                                                );
                                            })}
                                            {currentPlaylist.slice(currentTrackIndex + 1).length > 50 && (
                                                <div className="queue-more">
                                                    +{currentPlaylist.slice(currentTrackIndex + 1).length - 50} more tracks
                                                </div>
                                            )}
                                        </div>
                                    </div>
                                )}
                            </>
                        )}
                    </div>
                </div>
            </div>
        </>
    );
    
    } catch (error) {
        console.error('Error in NowPlaying component:', error);
        
        // Return a safe fallback UI
        return (
            <div className="now-playing">
                <div className="ui">
                    <div className="playing-header">
                        <div className="primary">
                            <div onClick={() => window.history.back()} className="return_icon" title="Back">
                                <ArrowLeftIcon size={16}></ArrowLeftIcon>
                            </div>
                        </div>
                    </div>
                    <div className="playing-content">
                        <div className="error-message">
                            <p>Something went wrong. Please try refreshing the page.</p>
                            <button onClick={() => window.location.reload()}>Refresh</button>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}

const TrackBitrate = ({ trackId }: { trackId: string }) => {
    const trackInfo = useJellyfinTrackInfo(trackId)
    const bitrate = Math.round((trackInfo.MediaSources?.[0].Bitrate || 0) / 1000)

    return <>{bitrate}</>
}