import React, { useState } from 'react';
import { useDownloadContext } from '../context/DownloadContext/DownloadContext';
import { DownloadingIcon, DownloadedIcon } from './SvgIcons';
import './DownloadTracker.css';

export const DownloadTracker: React.FC = () => {
    const {
        queueCount,
        getDownloadedTracks,
        getActiveDownloadsWithInfo
    } = useDownloadContext();
    
    const [isExpanded, setIsExpanded] = useState(false);
    
    // Use the new function to get active downloads with track info
    const activeDownloadsWithInfo = getActiveDownloadsWithInfo ? getActiveDownloadsWithInfo() : [];
    const activeCount = activeDownloadsWithInfo.length;
    const completedCount = getDownloadedTracks ? getDownloadedTracks().length : 0;
    
    // Debug logging
    React.useEffect(() => {
        if (activeCount > 0 || queueCount > 0) {
            console.log('🔄 DownloadTracker:', { 
                activeCount, 
                queueCount, 
                completedCount,
                activeDownloads: activeDownloadsWithInfo 
            });
        }
    }, [activeCount, queueCount, completedCount, activeDownloadsWithInfo]);
    
    // Only show when there are active downloads or queue items
    if (activeCount === 0 && queueCount === 0) {
        return null;
    }
    
    const totalProgress = activeDownloadsWithInfo.length > 0 
        ? activeDownloadsWithInfo.reduce((sum, download) => sum + download.progress, 0) / activeDownloadsWithInfo.length
        : 0;
    
    return (
        <div className="download-tracker">
            <button 
                className="download-tracker-button"
                onClick={() => setIsExpanded(!isExpanded)}
                title={`${activeCount} active downloads, ${queueCount} queued`}
            >
                <div className="download-icon-container">
                    {activeCount > 0 ? (
                        <DownloadingIcon width={16} height={16} />
                    ) : (
                        <DownloadedIcon width={16} height={16} />
                    )}
                    {(activeCount > 0 || queueCount > 0) && (
                        <span className="download-count">{activeCount + queueCount}</span>
                    )}
                </div>
                
                {activeCount > 0 && (
                    <div className="mini-progress-bar">
                        <div 
                            className="mini-progress-fill"
                            style={{ width: `${totalProgress}%` }}
                        />
                    </div>
                )}
            </button>
            
            {isExpanded && (
                <div className="download-tracker-dropdown">
                    <div className="download-tracker-header">
                        <h3>Downloads</h3>
                        <div className="download-stats">
                            <span className="stat active">{activeCount} active</span>
                            <span className="stat queued">{queueCount} queued</span>
                            <span className="stat completed">{completedCount} completed</span>
                        </div>
                    </div>
                    
                    {activeDownloadsWithInfo.length > 0 && (
                        <div className="active-downloads">
                            <h4>Active Downloads</h4>
                            {activeDownloadsWithInfo.slice(0, 5).map((download) => (
                                <div key={download.id} className="download-item">
                                    <div className="download-info">
                                        <div className="track-name">
                                            {download.trackName}
                                        </div>
                                        <div className="track-artist">
                                            {download.artistName}
                                        </div>
                                    </div>
                                    <div className="download-progress">
                                        <div className="progress-bar">
                                            <div 
                                                className="progress-fill"
                                                style={{ width: `${download.progress}%` }}
                                            />
                                        </div>
                                        <span className="progress-percent">
                                            {Math.round(download.progress)}%
                                        </span>
                                    </div>
                                </div>
                            ))}
                            {activeDownloadsWithInfo.length > 5 && (
                                <div className="more-downloads">
                                    +{activeDownloadsWithInfo.length - 5} more downloads
                                </div>
                            )}
                        </div>
                    )}
                    
                    <div className="download-tracker-footer">
                        <a href="/downloads" className="view-all-link">
                            View All Downloads
                        </a>
                    </div>
                </div>
            )}
        </div>
    );
};