import React from 'react';
import { useDownloadContext } from '../context/DownloadContext/DownloadContext';
import { MediaItem } from '../api/jellyfin';
import { DownloadIcon, CheckIcon, SpinnerIcon } from './SvgIcons';
import './UnifiedDownloadIndicator.css';

interface UnifiedDownloadIndicatorProps {
    item: MediaItem;
    onDownload?: (item: MediaItem) => void;
    discoverMode?: boolean;
    size?: 'small' | 'medium' | 'large';
}

export const UnifiedDownloadIndicator: React.FC<UnifiedDownloadIndicatorProps> = ({
    item,
    onDownload,
    discoverMode = false,
    size = 'medium'
}) => {
    const downloadContext = useDownloadContext();
    
    // Get download state from multiple sources
    const downloadInfo = downloadContext?.downloads?.[item.Id];
    const isDownloaded = item.offlineState === 'downloaded' || 
                        downloadContext?.isTrackDownloaded?.(item.Id) ||
                        (downloadInfo?.progress >= 100);
    const isDownloading = downloadContext?.isDownloading?.(item.Id) || 
                         item.offlineState === 'downloading' ||
                         item.offlineState === 'processing' ||
                         item.offlineState === 'accepted';
    
    // Get progress
    const progress = downloadInfo?.progress || 0;
    
    // Check if already exists (for discover mode)
    const alreadyExists = (item as any).existingTrackInfo?.exists;
    
    const handleClick = (e: React.MouseEvent) => {
        e.stopPropagation();
        
        if (isDownloading) return; // Don't allow clicks while downloading
        
        if (alreadyExists && discoverMode) {
            const versionText = (item as any).existingTrackInfo.total_versions > 1 ? 
                `${(item as any).existingTrackInfo.total_versions} versions` : '1 version';
            const message = `"${item.Name}" already exists (${versionText}).\n\nDownload anyway?`;
            
            if (!confirm(message)) {
                return;
            }
        }
        
        if (onDownload) {
            onDownload(item);
        }
    };
    
    // Determine what to show
    // Only show the green completed check in discover mode to avoid checks on local lists
    if (isDownloaded) {
        if (discoverMode) {
            return (
                <div className={`unified-download-indicator ${size} completed`} title="Downloaded">
                    <CheckIcon width={16} height={16} />
                </div>
            );
        }
        // In non-discover contexts, suppress the completed check entirely
        return null;
    }
    
    if (isDownloading) {
        return (
            <div className={`unified-download-indicator ${size} downloading`} title={`Downloading... ${Math.round(progress)}%`}>
                <div className="download-progress">
                    <SpinnerIcon width={16} height={16} className="spinner" />
                    {progress > 0 && (
                        <div className="progress-ring">
                            <svg width="20" height="20" className="progress-circle">
                                <circle
                                    cx="10"
                                    cy="10"
                                    r="8"
                                    fill="none"
                                    stroke="currentColor"
                                    strokeWidth="2"
                                    strokeOpacity="0.3"
                                />
                                <circle
                                    cx="10"
                                    cy="10"
                                    r="8"
                                    fill="none"
                                    stroke="currentColor"
                                    strokeWidth="2"
                                    strokeDasharray={`${2 * Math.PI * 8}`}
                                    strokeDashoffset={`${2 * Math.PI * 8 * (1 - progress / 100)}`}
                                    transform="rotate(-90 10 10)"
                                    className="progress-stroke"
                                />
                            </svg>
                        </div>
                    )}
                </div>
            </div>
        );
    }
    
    // Show download button (only in discover mode or when explicitly needed)
    if (discoverMode || onDownload) {
        return (
            <button
                className={`unified-download-indicator ${size} downloadable ${alreadyExists ? 'exists' : ''}`}
                onClick={handleClick}
                title={
                    alreadyExists ? 
                        `Download anyway (${(item as any).existingTrackInfo.total_versions} version${(item as any).existingTrackInfo.total_versions > 1 ? 's' : ''} exist)` :
                        `Download ${item.Name || 'track'}`
                }
            >
                {alreadyExists ? (
                    <div className="download-with-plus">
                        <DownloadIcon width={12} height={12} />
                        <span className="plus">+</span>
                    </div>
                ) : (
                    <DownloadIcon width={16} height={16} />
                )}
            </button>
        );
    }
    
    // Don't show anything if no download state and not in discover mode
    return null;
};