import React from 'react';
import { useDownloadContext } from '../context/DownloadContext/DownloadContext';
import { MediaItem } from '../api/jellyfin';
import { DownloadingIcon, DownloadedIcon, DeletingIcon } from './SvgIcons';
import './EnhancedDownloadIndicator.css';

interface EnhancedDownloadIndicatorProps {
    item: MediaItem;
    size?: 'small' | 'medium' | 'large';
    showProgress?: boolean;
    showPercentage?: boolean;
}

export const EnhancedDownloadIndicator: React.FC<EnhancedDownloadIndicatorProps> = ({
    item,
    size = 'medium',
    showProgress = true,
    showPercentage = false
}) => {
    const downloadContext = useDownloadContext();
    
    // For Spotify tracks, try both the item ID and the spotify_<id> format
    const possibleIds = [
        item.Id,
        item.SpotifyId ? `spotify_${item.SpotifyId}` : null,
        (item as any).searchResult?.id ? `spotify_${(item as any).searchResult.id}` : null
    ].filter(Boolean);
    
    // Find download info using any of the possible IDs
    let downloadInfo = null;
    let downloadId = item.Id;
    for (const id of possibleIds) {
        if (downloadContext?.downloads?.[id]) {
            downloadInfo = downloadContext.downloads[id];
            downloadId = id;
            break;
        }
    }
    
    // Debug logging
    if (item.SpotifyId || (item as any).searchResult?.id) {
        console.log('EnhancedDownloadIndicator debug:', {
            itemName: item.Name,
            itemId: item.Id,
            spotifyId: item.SpotifyId,
            searchResultId: (item as any).searchResult?.id,
            possibleIds,
            downloadInfo,
            offlineState: item.offlineState,
            allDownloads: Object.keys(downloadContext?.downloads || {})
        });
    }
    
    // Check if item is downloaded (either from context or offlineState)
    const isDownloaded = item.offlineState === 'downloaded' || 
                        (downloadInfo?.progress >= 100) ||
                        downloadContext?.isTrackDownloaded?.(downloadId);
    
    // Get current download progress
    const progress = downloadInfo?.progress || 0;
    const status = downloadInfo?.status || item.offlineState;
    
    // Don't show anything if no download state
    if (!status && !isDownloaded && !downloadInfo) {
        return null;
    }
    
    const getStatusInfo = () => {
        if (isDownloaded) {
            return {
                icon: <DownloadedIcon width={16} height={16} />,
                className: 'downloaded',
                title: 'Downloaded',
                color: '#10b981'
            };
        }
        
        switch (status) {
            case 'downloading':
            case 'processing':
            case 'converting':
                return {
                    icon: <DownloadingIcon width={16} height={16} />,
                    className: 'downloading',
                    title: `Downloading... ${Math.round(progress)}%`,
                    color: '#3b82f6'
                };
            case 'deleting':
                return {
                    icon: <DeletingIcon width={16} height={16} />,
                    className: 'deleting',
                    title: 'Removing...',
                    color: '#ef4444'
                };
            case 'queued':
            case 'waiting':
            case 'accepted':
                return {
                    icon: <DownloadingIcon width={16} height={16} />,
                    className: 'queued',
                    title: 'Queued for download',
                    color: '#f59e0b'
                };
            case 'error':
            case 'failed':
                return {
                    icon: <DownloadingIcon width={16} height={16} />,
                    className: 'error',
                    title: 'Download failed',
                    color: '#ef4444'
                };
            default:
                return null;
        }
    };
    
    const statusInfo = getStatusInfo();
    if (!statusInfo) return null;
    
    return (
        <div className={`enhanced-download-indicator ${size} ${statusInfo.className}`} title={statusInfo.title}>
            <div className="download-icon" style={{ color: statusInfo.color }}>
                {statusInfo.icon}
            </div>
            
            {showProgress && (status === 'downloading' || status === 'processing' || status === 'converting') && progress > 0 && (
                <div className="progress-container">
                    <div className="progress-track">
                        <div 
                            className="progress-fill" 
                            style={{ 
                                width: `${Math.min(progress, 100)}%`,
                                backgroundColor: statusInfo.color
                            }}
                        />
                    </div>
                    {showPercentage && (
                        <span className="progress-text">{Math.round(progress)}%</span>
                    )}
                </div>
            )}
            
            {/* Animated pulse for active downloads */}
            {(status === 'downloading' || status === 'processing') && (
                <div className="pulse-overlay" style={{ backgroundColor: statusInfo.color }} />
            )}
        </div>
    );
};