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 {
        downloads,
        queueCount,
        getDownloadedTracks
    } = useDownloadContext();
    
    const [isExpanded, setIsExpanded] = useState(false);
    
    // Calculate active downloads from downloads object
    const activeDownloads = Object.entries(downloads).filter(([_, download]) => download.progress < 100);
    const activeCount = activeDownloads.length;
    const completedCount = getDownloadedTracks ? getDownloadedTracks().length : 0;
    
    // Only show when there are active downloads or queue items
    if (activeCount === 0 && queueCount === 0) {
        return null;
    }
    
    const totalProgress = activeDownloads.length > 0 
        ? activeDownloads.reduce((sum, [_, download]) => sum + download.progress, 0) / activeDownloads.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>
                    
                    {activeDownloads.length > 0 && (
                        <div className="active-downloads">
                            <h4>Active Downloads</h4>
                            {activeDownloads.slice(0, 5).map(([downloadId, download]) => (
                                <div key={downloadId} className="download-item">
                                    <div className="download-info">
                                        <div className="track-name">
                                            {downloadId || 'Unknown Track'}
                                        </div>
                                        <div className="track-status">
                                            {download.status || 'Downloading...'}
                                        </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>
                            ))}
                            {activeDownloads.length > 5 && (
                                <div className="more-downloads">
                                    +{activeDownloads.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>
    );
};