import React, { useState, useEffect, useCallback } from 'react';
import { useNavigate } from 'react-router-dom';
import { MediaList } from '../components/MediaList';
import { LazyDiscoverySection } from '../components/LazyDiscoverySection';
import { Loader } from '../components/Loader';
import { PullToRefreshWrapper } from '../components/PullToRefreshWrapper';
import { useSocket } from '../hooks/useSocket';
import { useOptimizedDiscovery } from '../hooks/useOptimizedDiscovery';
import { useDownloadContext } from '../context/DownloadContext/DownloadContext';
import { MediaItem } from '../api/jellyfin';
import { toast } from 'sonner';
import { Music, Heart, Star, TrendingUp, Radio, Disc3, RotateCcw } from 'lucide-react';
import './Discover.css';
import '../styles/discoveryOptimization.css';

interface GenreSection {
    genre: string;
    title: string;
    tracks: MediaItem[];
}

type TabType = 'all' | 'made-for-you' | 'new-releases' | 'trending' | 'genres' | 'albums';

interface Tab {
    id: TabType;
    label: string;
    icon: React.ComponentType<{ size?: number; className?: string }>;
}

const TABS: Tab[] = [
    { id: 'all', label: 'All', icon: Music },
    { id: 'made-for-you', label: 'Made for You', icon: Heart },
    { id: 'new-releases', label: 'New Releases', icon: Star },
    { id: 'trending', label: 'Trending', icon: TrendingUp },
    { id: 'genres', label: 'Genres', icon: Radio },
    { id: 'albums', label: 'Albums', icon: Disc3 }
];

export const DiscoverOptimized: React.FC = () => {
    const { discoveryData, loading, error, refresh, hasContent } = useOptimizedDiscovery();
    const [activeTab, setActiveTab] = useState<TabType>('all');
    const [downloadStatus, setDownloadStatus] = useState<{ [key: string]: any }>({});
    const navigate = useNavigate();
    const { socket } = useSocket();
    const { downloads, updateDownloadStatus } = useDownloadContext();

    // Universal download handler for Discover page items
    const handleDiscoverDownload = useCallback((item: MediaItem) => {
        if (!socket) {
            toast.error('Not connected to the server.');
            return;
        }

        const spotifyId = (item as any).SpotifyId;
        
        if (!spotifyId) {
            toast.error('Invalid item - missing Spotify ID.');
            return;
        }

        console.log('🔽 Starting optimized download for:', item.Name, 'Spotify ID:', spotifyId);

        // Handle album downloads
        if (item.Type === 'MusicAlbum' || (item as any).MediaType === 'Album') {
            socket.emit('download_spotify_album', {
                albumId: spotifyId,
                albumName: item.Name
            });
            toast.info(`Started downloading album "${item.Name}"`);
            return;
        }

        // Handle track downloads
        toast.info(`Downloading ${item.Name}...`);

        socket.emit('download_spotify', {
            spotifyId: spotifyId,
            trackName: item.Name,
            artistName: item.AlbumArtist || item.Artists?.[0] || 'Unknown Artist'
        });

        // Update local download status for immediate UI feedback
        const backendKey = `spotify_${spotifyId}`;
        
        const downloadInfo = {
            status: 'Queued...',
            progress: 0,
            id: backendKey,
            name: item.Name
        };
        
        setDownloadStatus((prevStatus: any) => ({
            ...prevStatus,
            [spotifyId]: downloadInfo,
            [backendKey]: downloadInfo
        }));

        // Also update the DownloadContext immediately for UI feedback
        if (updateDownloadStatus) {
            updateDownloadStatus(backendKey, 'accepted', 0);
        }
    }, [socket, updateDownloadStatus]);

    // Transform discovery items to include download status and Spotify metadata
    const transformDiscoverItems = useCallback((items: MediaItem[]) => {
        return items.map(item => {
            const spotifyId = (item as any).SpotifyId || (item as any).spotify_id;
            
            // Get download status from either local state or context
            const localStatus = downloadStatus[spotifyId];
            const contextStatus = downloads[spotifyId];
            
            // Determine offline state based on download status
            let offlineState = 'none';
            let downloadProgress = 0;
            
            if (localStatus || contextStatus) {
                const activeStatus = localStatus || contextStatus;
                if (activeStatus.status === 'completed' || activeStatus.status === 'finished') {
                    offlineState = 'downloaded';
                } else if (activeStatus.status === 'downloading' || activeStatus.status === 'accepted' || activeStatus.status === 'Queued...') {
                    offlineState = 'downloading';
                    downloadProgress = activeStatus.progress || 0;
                }
            }

            return {
                ...item,
                SpotifyId: spotifyId,
                SpotifyUrl: (item as any).SpotifyUrl || (item as any).spotify_url,
                SpotifyImage: (item as any).SpotifyImage || (item as any).spotify_image,
                offlineState,
                downloadProgress
            } as MediaItem;
        });
    }, [downloadStatus, downloads]);

    // Socket event handlers for download progress
    useEffect(() => {
        if (!socket) return;

        const handleDownloadUpdate = (data: any) => {
            console.log('🔄 Optimized download update received:', data);

            if (data.history && Array.isArray(data.history)) {
                const newStatus: { [key: string]: any } = {};
                
                data.history.forEach((download: any) => {
                    const key = download.id || download.spotify_id;
                    if (key) {
                        newStatus[key] = {
                            status: download.status,
                            progress: download.progress || 0,
                            id: key,
                            name: download.name || download.track_name
                        };
                    }
                });
                
                setDownloadStatus((prevStatus: any) => ({ ...prevStatus, ...newStatus }));
            }
        };

        socket.on('update_status', handleDownloadUpdate);
        return () => {
            socket.off('update_status', handleDownloadUpdate);
        };
    }, [socket]);

    if (loading) {
        return (
            <PullToRefreshWrapper onRefresh={async () => refresh()}>
                <div className="home-page">
                    <Loader />
                </div>
            </PullToRefreshWrapper>
        );
    }

    if (error) {
        return (
            <PullToRefreshWrapper onRefresh={async () => refresh()}>
                <div className="home-page">
                    <div className="error-section">
                        <h2>Failed to load discovery content</h2>
                        <p>{error}</p>
                        <button onClick={refresh}>Try Again</button>
                    </div>
                </div>
            </PullToRefreshWrapper>
        );
    }

    if (!hasContent) {
        return (
            <PullToRefreshWrapper onRefresh={async () => refresh()}>
                <div className="home-page">
                    <div className="empty-state">
                        <h3>No recommendations available</h3>
                        <p>Start listening to music to get personalized recommendations!</p>
                    </div>
                </div>
            </PullToRefreshWrapper>
        );
    }

    // Render tab content based on active tab
    const renderTabContent = () => {
        switch (activeTab) {
            case 'all':
                return renderAllContent();
            case 'made-for-you':
                return renderMadeForYouContent();
            case 'new-releases':
                return renderNewReleasesContent();
            case 'trending':
                return renderTrendingContent();
            case 'genres':
                return renderGenresContent();
            case 'albums':
                return renderAlbumsContent();
            default:
                return renderAllContent();
        }
    };

    const renderAllContent = () => {
        return (
            <div className="tab-content">
                {/* Made for You Section - Lazy Loaded */}
                {discoveryData.for_you && discoveryData.for_you.tracks && discoveryData.for_you.tracks.length > 0 && (
                    <LazyDiscoverySection
                        title={discoveryData.for_you.title}
                        description={discoveryData.for_you.description}
                        items={transformDiscoverItems(discoveryData.for_you.tracks)}
                        type="song"
                        onDiscoverDownload={handleDiscoverDownload}
                        onSeeMore={async () => navigate('/section/for-you?limit=100')}
                        initialLoadCount={12}
                    />
                )}

                {/* New Releases Section - Lazy Loaded */}
                {discoveryData.new_releases && discoveryData.new_releases.tracks.length > 0 && (
                    <LazyDiscoverySection
                        title={discoveryData.new_releases.title}
                        description={discoveryData.new_releases.description}
                        items={transformDiscoverItems(discoveryData.new_releases.tracks)}
                        type="song"
                        onDiscoverDownload={handleDiscoverDownload}
                        onSeeMore={async () => navigate('/section/new-releases?limit=100')}
                        initialLoadCount={12}
                    />
                )}

                {/* Trending Section - Lazy Loaded */}
                {discoveryData.trending && discoveryData.trending.tracks.length > 0 && (
                    <LazyDiscoverySection
                        title={discoveryData.trending.title}
                        description={discoveryData.trending.description}
                        items={transformDiscoverItems(discoveryData.trending.tracks)}
                        type="song"
                        onDiscoverDownload={handleDiscoverDownload}
                        onSeeMore={async () => navigate('/section/trending?limit=100')}
                        initialLoadCount={12}
                    />
                )}

                {/* Trending Albums Section - Lazy Loaded */}
                {discoveryData.trending_albums && discoveryData.trending_albums.albums.length > 0 && (
                    <LazyDiscoverySection
                        title={discoveryData.trending_albums.title}
                        description={discoveryData.trending_albums.description}
                        items={transformDiscoverItems(discoveryData.trending_albums.albums)}
                        type="album"
                        onDiscoverDownload={handleDiscoverDownload}
                        onSeeMore={() => navigate('/section/trending-albums?limit=100')}
                        initialLoadCount={8}
                    />
                )}

                {/* New Albums Section - Lazy Loaded */}
                {discoveryData.new_albums && discoveryData.new_albums.albums.length > 0 && (
                    <LazyDiscoverySection
                        title="New Albums Release"
                        description="Fresh albums just for you"
                        items={transformDiscoverItems(discoveryData.new_albums.albums)}
                        type="album"
                        onDiscoverDownload={handleDiscoverDownload}
                        onSeeMore={() => navigate('/section/new-albums?limit=100')}
                        initialLoadCount={8}
                    />
                )}

                {/* Genre Sections - Optimized with limit */}
                {discoveryData.genres && discoveryData.genres.length > 0 && (
                    <>
                        <div className="section">
                            <div className="section-header">
                                <div className="container">
                                    <div className="section_title">Explore by Genre</div>
                                    <div className="section_desc">Discover new music across different genres</div>
                                </div>
                                <div className="see-more noSelect" onClick={() => navigate('/section/trending-albums?limit=100')}>
                                    See more (100)
                                </div>
                            </div>
                        </div>
                        {discoveryData.genres.slice(0, 3).map((genreSection: GenreSection, index: number) => (
                            <LazyDiscoverySection
                                key={index}
                                title={genreSection.title}
                                description={`Explore ${genreSection.genre} music`}
                                items={transformDiscoverItems(genreSection.tracks)}
                                type="song"
                                onDiscoverDownload={handleDiscoverDownload}
                                onSeeMore={() => navigate(`/section/genre-${encodeURIComponent(genreSection.genre)}?limit=100`)}
                                initialLoadCount={8}
                            />
                        ))}
                    </>
                )}
            </div>
        );
    };

    const renderMadeForYouContent = () => {
        if (!discoveryData.for_you || !discoveryData.for_you.tracks || discoveryData.for_you.tracks.length === 0) {
            return (
                <div className="tab-empty">
                    <h3>No personalized recommendations yet</h3>
                    <p>Start listening to music to get recommendations based on your taste and current song!</p>
                </div>
            );
        }
        return (
            <div className="tab-content">
                <div className="tab-header">
                    <h2>{discoveryData.for_you.title}</h2>
                    <p>{discoveryData.for_you.description}</p>
                    <div className="see-more noSelect" onClick={() => navigate('/section/for-you?limit=100')}>
                        See all 100 recommendations
                    </div>
                </div>
                <MediaList
                    items={transformDiscoverItems(discoveryData.for_you.tracks)}
                    isLoading={false}
                    type="song"
                    title=""
                    discoverMode={true}
                    onDiscoverDownload={handleDiscoverDownload}
                    infiniteData={{ pages: [transformDiscoverItems(discoveryData.for_you.tracks)], pageParams: [0] }}
                />
            </div>
        );
    };

    const renderNewReleasesContent = () => {
        if (!discoveryData.new_releases || !discoveryData.new_releases.tracks || discoveryData.new_releases.tracks.length === 0) {
            return (
                <div className="tab-empty">
                    <h3>No new releases available</h3>
                    <p>Check back later for the latest music releases!</p>
                </div>
            );
        }
        return (
            <div className="tab-content">
                <div className="tab-header">
                    <h2>{discoveryData.new_releases.title}</h2>
                    <p>{discoveryData.new_releases.description}</p>
                    <div className="see-more noSelect" onClick={() => navigate('/section/new-releases?limit=100')}>
                        See all 100 new releases
                    </div>
                </div>
                <MediaList
                    items={transformDiscoverItems(discoveryData.new_releases.tracks)}
                    isLoading={false}
                    type="song"
                    title=""
                    discoverMode={true}
                    onDiscoverDownload={handleDiscoverDownload}
                    infiniteData={{ pages: [transformDiscoverItems(discoveryData.new_releases.tracks)], pageParams: [0] }}
                />
            </div>
        );
    };

    const renderTrendingContent = () => {
        if (!discoveryData.trending || discoveryData.trending.tracks.length === 0) {
            return (
                <div className="tab-empty">
                    <h3>No trending tracks available</h3>
                    <p>Check back later for trending music!</p>
                </div>
            );
        }
        return (
            <div className="tab-content">
                <div className="tab-header">
                    <h2>{discoveryData.trending.title}</h2>
                    <p>{discoveryData.trending.description}</p>
                    <div className="see-more noSelect" onClick={() => navigate('/section/trending?limit=100')}>
                        See all 100 trending tracks
                    </div>
                </div>
                <MediaList
                    items={transformDiscoverItems(discoveryData.trending.tracks)}
                    isLoading={false}
                    type="song"
                    title=""
                    discoverMode={true}
                    onDiscoverDownload={handleDiscoverDownload}
                    infiniteData={{ pages: [transformDiscoverItems(discoveryData.trending.tracks)], pageParams: [0] }}
                />
            </div>
        );
    };

    const renderGenresContent = () => {
        if (!discoveryData.genres || discoveryData.genres.length === 0) {
            return (
                <div className="tab-empty">
                    <h3>No genre recommendations available</h3>
                    <p>Check back later for genre-based recommendations!</p>
                </div>
            );
        }
        return (
            <div className="tab-content">
                <div className="tab-header">
                    <h2>Explore by Genre</h2>
                    <p>Discover new music across different genres</p>
                </div>
                {discoveryData.genres.map((genreSection: GenreSection, index: number) => (
                    <LazyDiscoverySection
                        key={`genre-${genreSection.genre}-${index}`}
                        title={genreSection.title}
                        description={`Explore ${genreSection.genre} music`}
                        items={transformDiscoverItems(genreSection.tracks)}
                        type="song"
                        onDiscoverDownload={handleDiscoverDownload}
                        onSeeMore={async () => {
                            console.log(`Navigating to genre section: ${genreSection.genre}`);
                            navigate(`/section/genre-${encodeURIComponent(genreSection.genre)}?limit=50`);
                        }}
                        initialLoadCount={8}
                    />
                ))}
            </div>
        );
    };

    const renderAlbumsContent = () => {
        const hasAlbums = (discoveryData.trending_albums?.albums.length || 0) > 0 || 
                         (discoveryData.new_albums?.albums.length || 0) > 0;
        
        if (!hasAlbums) {
            return (
                <div className="tab-empty">
                    <h3>No album recommendations available</h3>
                    <p>Check back later for album recommendations!</p>
                </div>
            );
        }
        
        return (
            <div className="tab-content">
                <div className="tab-header">
                    <h2>Album Discoveries</h2>
                    <p>Explore trending and new album releases</p>
                </div>
                
                {/* Trending Albums - Lazy Loaded */}
                {discoveryData.trending_albums && discoveryData.trending_albums.albums.length > 0 && (
                    <LazyDiscoverySection
                        title={discoveryData.trending_albums.title}
                        description={discoveryData.trending_albums.description}
                        items={transformDiscoverItems(discoveryData.trending_albums.albums)}
                        type="album"
                        onDiscoverDownload={handleDiscoverDownload}
                        onSeeMore={() => navigate('/section/trending-albums?limit=100')}
                        initialLoadCount={8}
                    />
                )}

                {/* New Albums - Lazy Loaded */}
                {discoveryData.new_albums && discoveryData.new_albums.albums.length > 0 && (
                    <LazyDiscoverySection
                        title="New Albums Release"
                        description="Fresh albums just for you"
                        items={transformDiscoverItems(discoveryData.new_albums.albums)}
                        type="album"
                        onDiscoverDownload={handleDiscoverDownload}
                        onSeeMore={() => navigate('/section/new-albums?limit=100')}
                        initialLoadCount={8}
                    />
                )}
            </div>
        );
    };

    return (
        <PullToRefreshWrapper onRefresh={async () => refresh()}>
            <div className="home-page discover-optimized">
                {/* Tab Navigation */}
                <div className="tab-navigation">
                    <div className="tab-scroll">
                        {TABS.map((tab) => {
                            const Icon = tab.icon;
                            return (
                                <button
                                    key={tab.id}
                                    className={`tab-button ${activeTab === tab.id ? 'active' : ''}`}
                                    onClick={() => setActiveTab(tab.id)}
                                >
                                    <Icon size={16} />
                                    <span>{tab.label}</span>
                                </button>
                            );
                        })}
                    </div>
                    <button className="refresh-button" onClick={refresh} title="Refresh Discovery">
                        <RotateCcw size={16} />
                    </button>
                </div>

                {/* Tab Content */}
                <div className="tab-container">
                    {renderTabContent()}
                </div>
            </div>
        </PullToRefreshWrapper>
    );
};