import { useDownloadContext } from '../context/DownloadContext/DownloadContext';
import { usePageTitle } from '../context/PageTitleContext/PageTitleContext';
import { useEffect, useState } from 'react';
import { formatFileSize } from '../utils/formatFileSize';
import { useAudioStorageContext } from '../context/AudioStorageContext/AudioStorageContext';
import { BaseItemKind } from '@jellyfin/sdk/lib/generated-client/models';
import { MediaItem } from '../api/jellyfin';
// import { UnifiedDownloadIndicator } from '../components/UnifiedDownloadIndicator';
import './Downloads.css';

export const Downloads = () => {
    const { setPageTitle } = usePageTitle();
    const { 
        queueCount, 
        storageStats, 
        clearQueue, 
        refreshStorageStats,
        getActiveDownloads,
        getCompletedDownloads,
        getFailedDownloads,
        totalDownloads,
        activeCount,
        completedCount,
        failedCount
    } = useDownloadContext();
    
    const audioStorage = useAudioStorageContext();
    const [downloadedTracks, setDownloadedTracks] = useState<MediaItem[]>([]);
    const [isLoadingTracks, setIsLoadingTracks] = useState(true);
    
    // Load downloaded tracks directly from audioStorage
    useEffect(() => {
        const loadDownloadedTracks = async () => {
            try {
                setIsLoadingTracks(true);
                if (audioStorage && audioStorage.getPageFromIndexedDb) {
                    console.log('Loading downloaded tracks directly...');
                    
                    // Try different approaches to get tracks
                    console.log('Method 1: BaseItemKind.Audio');
                    const audioTracks = await audioStorage.getPageFromIndexedDb(0, BaseItemKind.Audio, 200);
                    console.log('Direct audioStorage check:', audioTracks.length, 'tracks found');
                    console.log('Sample tracks:', audioTracks.slice(0, 3));
                    if (audioTracks.length > 0) {
                        console.log('Full first track data:', audioTracks[0]);
                    }
                    
                    // Try getting ALL tracks regardless of type
                    console.log('Method 2: Trying to get all tracks...');
                    try {
                        // Let's try with different BaseItemKind values
                        const allTypes = [BaseItemKind.MusicAlbum, BaseItemKind.Playlist];
                        for (const type of allTypes) {
                            const tracks = await audioStorage.getPageFromIndexedDb(0, type, 50);
                            console.log(`${type} tracks:`, tracks.length);
                        }
                    } catch (e) {
                        console.log('Error trying different types:', e);
                    }
                    
                    setDownloadedTracks(audioTracks);
                } else {
                    console.log('audioStorage not available or missing getPageFromIndexedDb method');
                    console.log('audioStorage object:', audioStorage);
                }
            } catch (error) {
                console.error('Error loading downloaded tracks:', error);
            } finally {
                setIsLoadingTracks(false);
            }
        };
        
        loadDownloadedTracks();
    }, [audioStorage]);
    
    useEffect(() => {
        setPageTitle('Downloads');
        refreshStorageStats();
    }, [setPageTitle, refreshStorageStats]);

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

            {/* Storage Usage */}
            <div className="storage-section">
                <h2>Storage Usage</h2>
                <div className="storage-stats">
                    <div className="stat-item">
                        <span className="stat-label">Downloaded Tracks</span>
                        <span className="stat-value">
                            {isLoadingTracks ? 'Loading...' : downloadedTracks.length}
                        </span>
                    </div>
                    <div className="stat-item">
                        <span className="stat-label">Storage Used</span>
                        <span className="stat-value">{formatFileSize(storageStats?.usage || 0)}</span>
                    </div>
                    <div className="stat-item">
                        <span className="stat-label">IndexedDB Storage</span>
                        <span className="stat-value">{formatFileSize(storageStats?.indexedDB || 0)}</span>
                    </div>
                </div>
            </div>

            {/* Download Statistics */}
            <div className="download-stats-section">
                <h2>Download Statistics</h2>
                <div className="download-stats">
                    <div className="stat-item">
                        <span className="stat-label">Total Downloads</span>
                        <span className="stat-value">{totalDownloads}</span>
                    </div>
                    <div className="stat-item">
                        <span className="stat-label">Active Downloads</span>
                        <span className="stat-value">{activeCount}</span>
                    </div>
                    <div className="stat-item">
                        <span className="stat-label">Completed</span>
                        <span className="stat-value">{completedCount}</span>
                    </div>
                    <div className="stat-item">
                        <span className="stat-label">Failed</span>
                        <span className="stat-value">{failedCount}</span>
                    </div>
                </div>
            </div>

            {/* Active Downloads */}
            {activeCount > 0 && (
                <div className="active-downloads-section">
                    <h2>Active Downloads ({activeCount})</h2>
                    <div className="downloads-list">
                        {getActiveDownloads().map((download) => (
                            <div key={download.id} className="download-item active">
                                <div className="download-info">
                                    <div className="download-title">{download.trackName || 'Unknown Track'}</div>
                                    <div className="download-artist">{download.artistName || 'Unknown Artist'}</div>
                                    <div className="download-album">{download.albumName || 'Unknown Album'}</div>
                                </div>
                                <div className="download-progress">
                                    <div className="progress-bar">
                                        <div 
                                            className="progress-fill" 
                                            style={{ width: `${download.progress}%` }}
                                        />
                                    </div>
                                    <span className="progress-text">{Math.round(download.progress)}%</span>
                                </div>
                                <div className="download-status">{download.status}</div>
                            </div>
                        ))}
                    </div>
                </div>
            )}

            {/* Download Queue */}
            <div className="queue-section">
                <h2>Download Queue</h2>
                {queueCount > 0 ? (
                    <div className="queue-info">
                        <p>{queueCount} tracks in download queue</p>
                        <button onClick={clearQueue} className="clear-queue-button">
                            Clear Queue
                        </button>
                    </div>
                ) : (
                    <p className="no-queue">No tracks in download queue</p>
                )}
            </div>

            {/* Completed Downloads */}
            {completedCount > 0 && (
                <div className="completed-downloads-section">
                    <h2>Recently Completed ({completedCount})</h2>
                    <div className="downloads-list">
                        {getCompletedDownloads().slice(0, 50).map((download) => (
                            <div key={download.id} className="download-item completed">
                                <div className="download-info">
                                    <div className="download-title">{download.trackName || 'Unknown Track'}</div>
                                    <div className="download-artist">{download.artistName || 'Unknown Artist'}</div>
                                    <div className="download-album">{download.albumName || 'Unknown Album'}</div>
                                </div>
                                <div className="download-timestamp">
                                    {new Date(download.timestamp).toLocaleString()}
                                </div>
                                <div className="download-status completed">✅ Downloaded</div>
                            </div>
                        ))}
                    </div>
                </div>
            )}

            {/* Failed Downloads */}
            {failedCount > 0 && (
                <div className="failed-downloads-section">
                    <h2>Failed Downloads ({failedCount})</h2>
                    <div className="downloads-list">
                        {getFailedDownloads().slice(0, 20).map((download) => (
                            <div key={download.id} className="download-item failed">
                                <div className="download-info">
                                    <div className="download-title">{download.trackName || 'Unknown Track'}</div>
                                    <div className="download-artist">{download.artistName || 'Unknown Artist'}</div>
                                    <div className="download-album">{download.albumName || 'Unknown Album'}</div>
                                </div>
                                <div className="download-error">
                                    {download.error || 'Download failed'}
                                </div>
                                <div className="download-status failed">❌ Failed</div>
                            </div>
                        ))}
                    </div>
                </div>
            )}

            {/* Downloaded Tracks (Real from IndexedDB) */}
            <div className="downloaded-tracks-section">
                <h2>Downloaded Tracks ({downloadedTracks.length})</h2>
                
                {isLoadingTracks ? (
                    <div className="loading-tracks">
                        <p>Loading downloaded tracks...</p>
                    </div>
                ) : downloadedTracks.length > 0 ? (
                    <div className="downloaded-tracks-list">
                        {downloadedTracks.slice(0, 100).map((track, index) => (
                            <div key={track.Id || index} className="downloaded-track-item">
                                <img 
                                    src={`/default-thumbnail.png`} 
                                    alt={track.Name || 'Track'}
                                    className="track-thumbnail"
                                    onError={(e) => {
                                        e.currentTarget.src = '/default-thumbnail.png';
                                    }}
                                />
                                <div className="track-info">
                                    <div className="track-title">{track.Name || 'Unknown Title'}</div>
                                    <div className="track-artist">{
                                        Array.isArray(track.Artists) 
                                            ? track.Artists.join(', ')
                                            : track.Artists || 'Unknown Artist'
                                    }</div>
                                </div>
                                <div className="download-status-indicator">
                                    <span className="downloaded-checkmark">✅</span>
                                </div>
                            </div>
                        ))}
                        
                        {downloadedTracks.length > 100 && (
                            <div className="load-more-section">
                                <p>Showing first 100 of {downloadedTracks.length} downloaded tracks</p>
                            </div>
                        )}
                    </div>
                ) : (
                    <div className="no-downloads">
                        <p>No tracks downloaded yet. Download tracks from other pages and they'll appear here with green checkmarks.</p>
                        <p><strong>Debug Info:</strong></p>
                        <ul>
                            <li>audioStorage available: {audioStorage ? 'Yes' : 'No'}</li>
                            <li>downloadedTracks.length: {downloadedTracks.length}</li>
                            <li>isLoadingTracks: {isLoadingTracks ? 'Yes' : 'No'}</li>
                        </ul>
                    </div>
                )}
            </div>

            {/* How to Download Music */}
            <div className="help-section">
                <h2>How to Download Music</h2>
                <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>
    );
};