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

interface DownloadItem {
    id: string;
    name: string;
    status: string;
    progress: number;
    timestamp: string;
    type: string;
    spotify_id?: string;
    track_name?: string;
    artist_name?: string;
    album_name?: string;
    track_number?: number;
    error?: string;
}

interface DownloadProgressModalProps {
    isOpen: boolean;
    onClose: () => void;
}

const DownloadProgressModal: React.FC<DownloadProgressModalProps> = ({ isOpen, onClose }) => {
    const [downloads, setDownloads] = useState<DownloadItem[]>([]);
    const [activeDownloads, setActiveDownloads] = useState<DownloadItem[]>([]);
    const [completedDownloads, setCompletedDownloads] = useState<DownloadItem[]>([]);
    const [queuedDownloads, setQueuedDownloads] = useState<DownloadItem[]>([]);
    const { socket } = useSocket();

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

        const handleDownloadUpdate = (data: any) => {
            console.log('📥 Download Progress Modal - Update received:', data);
            
            if (data.history && Array.isArray(data.history)) {
                const allDownloads = data.history.map((item: any) => ({
                    id: item.id || `download_${Date.now()}`,
                    name: item.name || `${item.track_name || 'Unknown'} by ${item.artist_name || 'Unknown'}`,
                    status: item.status || 'Unknown',
                    progress: item.progress || 0,
                    timestamp: item.timestamp || new Date().toISOString(),
                    type: item.type || 'Track',
                    spotify_id: item.spotify_id,
                    track_name: item.track_name,
                    artist_name: item.artist_name,
                    album_name: item.album_name,
                    track_number: item.track_number,
                    error: item.error
                }));

                setDownloads(allDownloads);

                // Categorize downloads
                const active = allDownloads.filter((d: DownloadItem) => 
                    d.status === 'Downloading' || d.status === 'Processing' || d.status === 'Converting'
                );
                const queued = allDownloads.filter((d: DownloadItem) => 
                    d.status === 'Queued' || d.status === 'Waiting'
                );
                const completed = allDownloads.filter((d: DownloadItem) => 
                    d.status === 'Complete' || d.status === 'Downloaded'
                );

                setActiveDownloads(active);
                setQueuedDownloads(queued);
                setCompletedDownloads(completed);
            }
        };

        const handleDownloadStarted = (data: any) => {
            console.log('🚀 Download started:', data);
        };

        const handleDownloadError = (data: any) => {
            console.log('❌ Download error:', data);
        };

        const handleAlbumDownloadStarted = (data: any) => {
            console.log('🎵 Album download started:', data);
        };

        socket.on('update_status', handleDownloadUpdate);
        socket.on('download_started', handleDownloadStarted);
        socket.on('download_error', handleDownloadError);
        socket.on('album_download_started', handleAlbumDownloadStarted);

        // Request current status when modal opens
        socket.emit('get_download_status');

        return () => {
            socket.off('update_status', handleDownloadUpdate);
            socket.off('download_started', handleDownloadStarted);
            socket.off('download_error', handleDownloadError);
            socket.off('album_download_started', handleAlbumDownloadStarted);
        };
    }, [socket, isOpen]);

    const getStatusIcon = (status: string) => {
        switch (status.toLowerCase()) {
            case 'downloading':
            case 'processing':
            case 'converting':
                return <Loader className="animate-spin" size={16} />;
            case 'queued':
            case 'waiting':
                return <Clock size={16} />;
            case 'complete':
            case 'downloaded':
                return <CheckCircle size={16} className="text-green-500" />;
            case 'error':
            case 'failed':
                return <AlertCircle size={16} className="text-red-500" />;
            default:
                return <Download size={16} />;
        }
    };

    const getStatusColor = (status: string) => {
        switch (status.toLowerCase()) {
            case 'downloading':
            case 'processing':
            case 'converting':
                return 'text-blue-500';
            case 'queued':
            case 'waiting':
                return 'text-yellow-500';
            case 'complete':
            case 'downloaded':
                return 'text-green-500';
            case 'error':
            case 'failed':
                return 'text-red-500';
            default:
                return 'text-gray-500';
        }
    };

    const formatTimestamp = (timestamp: string) => {
        try {
            return new Date(timestamp).toLocaleTimeString();
        } catch {
            return 'Unknown time';
        }
    };

    if (!isOpen) return null;

    return (
        <div className="download-progress-modal-overlay">
            <div className="download-progress-modal">
                <div className="modal-header">
                    <div className="header-content">
                        <Download size={24} />
                        <h2>Download Progress</h2>
                    </div>
                    <button onClick={onClose} className="close-button">
                        <X size={20} />
                    </button>
                </div>

                <div className="modal-body">
                    {/* Active Downloads */}
                    {activeDownloads.length > 0 && (
                        <div className="download-section">
                            <h3 className="section-title">
                                <Loader className="animate-spin" size={18} />
                                Active Downloads ({activeDownloads.length})
                            </h3>
                            <div className="download-list">
                                {activeDownloads.map((download) => (
                                    <div key={download.id} className="download-item active">
                                        <div className="download-info">
                                            <div className="download-header">
                                                <span className="download-icon">
                                                    {getStatusIcon(download.status)}
                                                </span>
                                                <div className="download-details">
                                                    <div className="download-name">{download.name}</div>
                                                    <div className="download-meta">
                                                        <span className={`download-status ${getStatusColor(download.status)}`}>
                                                            {download.status}
                                                        </span>
                                                        <span className="download-time">
                                                            {formatTimestamp(download.timestamp)}
                                                        </span>
                                                        {download.album_name && (
                                                            <span className="download-album">
                                                                Album: {download.album_name}
                                                            </span>
                                                        )}
                                                    </div>
                                                </div>
                                                <div className="download-progress-info">
                                                    <span className="progress-percentage">
                                                        {download.progress}%
                                                    </span>
                                                </div>
                                            </div>
                                            <div className="progress-bar">
                                                <div 
                                                    className="progress-fill"
                                                    style={{ width: `${download.progress}%` }}
                                                />
                                            </div>
                                        </div>
                                    </div>
                                ))}
                            </div>
                        </div>
                    )}

                    {/* Queued Downloads */}
                    {queuedDownloads.length > 0 && (
                        <div className="download-section">
                            <h3 className="section-title">
                                <Clock size={18} />
                                Queue ({queuedDownloads.length})
                            </h3>
                            <div className="download-list">
                                {queuedDownloads.map((download, index) => (
                                    <div key={download.id} className="download-item queued">
                                        <div className="download-info">
                                            <div className="download-header">
                                                <span className="download-icon">
                                                    {getStatusIcon(download.status)}
                                                </span>
                                                <div className="download-details">
                                                    <div className="download-name">{download.name}</div>
                                                    <div className="download-meta">
                                                        <span className={`download-status ${getStatusColor(download.status)}`}>
                                                            Position #{index + 1}
                                                        </span>
                                                        <span className="download-time">
                                                            {formatTimestamp(download.timestamp)}
                                                        </span>
                                                        {download.album_name && (
                                                            <span className="download-album">
                                                                Album: {download.album_name}
                                                            </span>
                                                        )}
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                ))}
                            </div>
                        </div>
                    )}

                    {/* Recent Completed Downloads */}
                    {completedDownloads.length > 0 && (
                        <div className="download-section">
                            <h3 className="section-title">
                                <CheckCircle size={18} />
                                Recently Completed ({completedDownloads.slice(0, 10).length})
                            </h3>
                            <div className="download-list">
                                {completedDownloads.slice(0, 10).map((download) => (
                                    <div key={download.id} className="download-item completed">
                                        <div className="download-info">
                                            <div className="download-header">
                                                <span className="download-icon">
                                                    {getStatusIcon(download.status)}
                                                </span>
                                                <div className="download-details">
                                                    <div className="download-name">{download.name}</div>
                                                    <div className="download-meta">
                                                        <span className={`download-status ${getStatusColor(download.status)}`}>
                                                            {download.status}
                                                        </span>
                                                        <span className="download-time">
                                                            {formatTimestamp(download.timestamp)}
                                                        </span>
                                                        {download.album_name && (
                                                            <span className="download-album">
                                                                Album: {download.album_name}
                                                            </span>
                                                        )}
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                ))}
                            </div>
                        </div>
                    )}

                    {/* Empty State */}
                    {downloads.length === 0 && (
                        <div className="empty-state">
                            <Music size={48} />
                            <h3>No Downloads</h3>
                            <p>Your downloads will appear here with real-time progress updates.</p>
                        </div>
                    )}
                </div>
            </div>
        </div>
    );
};

export default DownloadProgressModal;