import { useDownloadContext } from '../context/DownloadContext/DownloadContext'
import { usePageTitle } from '../context/PageTitleContext/PageTitleContext';
import { useEffect } from 'react';
import { formatFileSize } from '../utils/formatFileSize';
import './Downloads.css';

export const Downloads = () => {
    const { setPageTitle } = usePageTitle();
    const { downloads, queueCount, storageStats, clearQueue, refreshStorageStats } = useDownloadContext();
    
    useEffect(() => {
        setPageTitle('Downloads');
        refreshStorageStats();
    }, [setPageTitle, refreshStorageStats]);

    // Get active downloads
    const activeDownloads = Object.entries(downloads || {}).filter(([_, status]) => 
        status.progress < 100 || status.status === 'downloading'
    );

    return (
        <div className="downloads-page">
            <div className="downloads-header">
                <h2>Download Manager</h2>
                <p>Manage your offline music downloads</p>
            </div>

            {/* Storage Stats */}
            <div className="storage-stats">
                <h3>Storage Usage</h3>
                <div className="stats-grid">
                    <div className="stat-item">
                        <span className="stat-label">Downloaded Tracks</span>
                        <span className="stat-value">{storageStats.trackCount}</span>
                    </div>
                    <div className="stat-item">
                        <span className="stat-label">Storage Used</span>
                        <span className="stat-value">{formatFileSize(storageStats.indexedDB)}</span>
                    </div>
                    <div className="stat-item">
                        <span className="stat-label">Total Browser Storage</span>
                        <span className="stat-value">{formatFileSize(storageStats.usage)}</span>
                    </div>
                </div>
            </div>

            {/* Queue Status */}
            <div className="queue-section">
                <div className="queue-header">
                    <h3>Download Queue</h3>
                    {queueCount > 0 && (
                        <button 
                            className="clear-queue-btn"
                            onClick={clearQueue}
                        >
                            Clear Queue
                        </button>
                    )}
                </div>
                
                {queueCount > 0 ? (
                    <div className="queue-status">
                        <p>{queueCount} track{queueCount === 1 ? '' : 's'} in download queue</p>
                    </div>
                ) : (
                    <div className="queue-empty">
                        <p>No tracks in download queue</p>
                    </div>
                )}
            </div>

            {/* Active Downloads */}
            {activeDownloads.length > 0 && (
                <div className="active-downloads">
                    <h3>Active Downloads</h3>
                    <div className="downloads-list">
                        {activeDownloads.map(([downloadId, status]) => (
                            <div key={downloadId} className="download-item">
                                <div className="download-info">
                                    <span className="download-id">{downloadId}</span>
                                    <span className="download-status">{status.status || 'Downloading...'}</span>
                                </div>
                                <div className="download-progress">
                                    <div className="progress-bar">
                                        <div 
                                            className="progress-fill"
                                            style={{ width: `${status.progress}%` }}
                                        />
                                    </div>
                                    <span className="progress-text">{Math.round(status.progress)}%</span>
                                </div>
                            </div>
                        ))}
                    </div>
                </div>
            )}

            {/* Instructions */}
            <div className="download-instructions">
                <h3>How to Download Music</h3>
                <ol>
                    <li>Browse to any track, album, or playlist</li>
                    <li>Look for the download icon (⬇️) next to items</li>
                    <li>Click to add items to your download queue</li>
                    <li>Downloads will process automatically in the background</li>
                    <li>Downloaded music is available offline!</li>
                </ol>
            </div>
        </div>
    )
}