import React, { useState, useEffect } from 'react';
import { Download, Loader, CheckCircle, AlertCircle } from 'lucide-react';
import { useSocket } from '../hooks/useSocket';
import DownloadProgressModal from './DownloadProgressModal';
import './DownloadProgressButton.css';

interface DownloadStats {
    active: number;
    queued: number;
    completed: number;
    failed: number;
}

const DownloadProgressButton: React.FC = () => {
    const [isModalOpen, setIsModalOpen] = useState(false);
    const [stats, setStats] = useState<DownloadStats>({ active: 0, queued: 0, completed: 0, failed: 0 });
    // Removed unused hasActiveDownloads state
    const { socket } = useSocket();

    useEffect(() => {
        if (!socket) return;

        const handleDownloadUpdate = (data: any) => {
            if (data.history && Array.isArray(data.history)) {
                const downloads = data.history;
                
                const newStats = {
                    active: downloads.filter((d: any) => 
                        d.status === 'Downloading' || d.status === 'Processing' || d.status === 'Converting'
                    ).length,
                    queued: downloads.filter((d: any) => 
                        d.status === 'Queued' || d.status === 'Waiting'
                    ).length,
                    completed: downloads.filter((d: any) => 
                        d.status === 'Complete' || d.status === 'Downloaded'
                    ).length,
                    failed: downloads.filter((d: any) => 
                        d.status === 'Error' || d.status === 'Failed'
                    ).length
                };

                setStats(newStats);
            }
        };

        socket.on('update_status', handleDownloadUpdate);
        socket.on('download_started', () => {
            // Download started - stats will be updated via update_status event
        });

        // Request initial status
        socket.emit('get_download_status');

        return () => {
            socket.off('update_status', handleDownloadUpdate);
            socket.off('download_started');
        };
    }, [socket]);

    const getButtonIcon = () => {
        if (stats.active > 0) {
            return <Loader className="animate-spin" size={18} />;
        }
        if (stats.failed > 0) {
            return <AlertCircle size={18} />;
        }
        if (stats.completed > 0 && stats.queued === 0 && stats.active === 0) {
            return <CheckCircle size={18} />;
        }
        return <Download size={18} />;
    };

    const getButtonClass = () => {
        let baseClass = 'download-progress-button';
        
        if (stats.active > 0) {
            baseClass += ' active';
        } else if (stats.failed > 0) {
            baseClass += ' error';
        } else if (stats.completed > 0 && stats.queued === 0 && stats.active === 0) {
            baseClass += ' completed';
        }
        
        return baseClass;
    };

    const getTotalCount = () => {
        return stats.active + stats.queued;
    };

    const getStatusText = () => {
        if (stats.active > 0) {
            return `${stats.active} downloading`;
        }
        if (stats.queued > 0) {
            return `${stats.queued} queued`;
        }
        if (stats.failed > 0) {
            return `${stats.failed} failed`;
        }
        if (stats.completed > 0) {
            return `${stats.completed} completed`;
        }
        return 'Downloads';
    };

    return (
        <>
            <button
                className={getButtonClass()}
                onClick={() => setIsModalOpen(true)}
                title="View download progress"
            >
                <span className="button-icon">
                    {getButtonIcon()}
                </span>
                <span className="button-text">
                    {getStatusText()}
                </span>
                {getTotalCount() > 0 && (
                    <span className="download-count">
                        {getTotalCount()}
                    </span>
                )}
            </button>

            <DownloadProgressModal
                isOpen={isModalOpen}
                onClose={() => setIsModalOpen(false)}
            />
        </>
    );
};

export default DownloadProgressButton;