import { useState, useEffect, useRef } from 'react';
import { useSocket } from '../hooks/useSocket';
import { useDebounce } from '../hooks/useDebounce';
import { SearchIcon, DownloadingIcon } from '../components/SvgIcons';
import { toast } from 'sonner';
import { useDownloadContext } from '../context/DownloadContext/DownloadContext';
import './OnlineSearch.css';

// Modal component for displaying detailed information
const DetailModal = ({ item, onClose }: { item: SearchResult | null; onClose: () => void }) => {
    if (!item) return null;

    return (
        <div className="modal-overlay" onClick={onClose}>
            <div className="modal-content" onClick={(e) => e.stopPropagation()}>
                <div className="modal-header">
                    <img src={item.image} alt={item.name} className="modal-image" />
                    <div className="modal-info">
                        <h2>{item.name}</h2>
                        <p className="modal-artist">{item.artist}</p>
                        {item.album && <p className="modal-album">Album: {item.album}</p>}
                        <span className="modal-type">{item.type.toUpperCase()}</span>
                    </div>
                    <button className="modal-close" onClick={onClose}>×</button>
                </div>
                <div className="modal-body">
                    <div className="info-section">
                        <h3>Details</h3>
                        {item.duration && (
                            <p><strong>Duration:</strong> {Math.floor(item.duration / 60000)}:{String(Math.floor((item.duration % 60000) / 1000)).padStart(2, '0')}</p>
                        )}
                        {item.total_tracks && (
                            <p><strong>Total Tracks:</strong> {item.total_tracks}</p>
                        )}
                        {item.release_date && (
                            <p><strong>Release Date:</strong> {item.release_date}</p>
                        )}
                    </div>
                    <div className="modal-actions">
                        <a href={item.url} target="_blank" rel="noopener noreferrer" className="spotify-link">
                            🎵 Open in Spotify
                        </a>
                    </div>
                </div>
            </div>
        </div>
    );
};

interface SearchResult {
    id: string;
    name: string;
    artist: string;
    album: string;
    image: string;
    type: 'track' | 'album' | 'playlist' | 'artist';
    duration?: number;
    url: string;
    total_tracks?: number;
    release_date?: string;
}

interface DownloadStatus {
    status: string;
    progress?: number;
    id?: string;
    name?: string;
}

export const OnlineSearch = () => {
    const [query, setQuery] = useState('');
    const [searchType, setSearchType] = useState<'track' | 'album' | 'playlist' | 'artist'>('track');
    const [results, setResults] = useState<SearchResult[]>([]);
    const [loading, setLoading] = useState(false);
    const [downloadStatus, setDownloadStatus] = useState<{ [key: string]: DownloadStatus }>({});
    const [selectedItem, setSelectedItem] = useState<SearchResult | null>(null);

    const { socket, isConnected, connectionError } = useSocket();
    const downloadContext = useDownloadContext();

    const containerRef = useRef<HTMLDivElement>(null);

    const searchTimeoutRef = useRef<NodeJS.Timeout | null>(null);

    const handleSearch = () => {
        if (!query.trim()) {
            toast.error('Please enter a search query.');
            return;
        }

        if (!socket) {
            toast.error('Not connected to the server.');
            return;
        }

        if (searchTimeoutRef.current) {
            clearTimeout(searchTimeoutRef.current);
        }

        setLoading(true);
        socket.emit('search', { query, type: searchType });

        searchTimeoutRef.current = setTimeout(() => {
            setLoading(false);
            toast.error('Search timed out. Please try again.');
            searchTimeoutRef.current = null;
        }, 10000);
    };

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

        const handleSearchResults = (data: { results: SearchResult[] }) => {
            if (searchTimeoutRef.current) {
                clearTimeout(searchTimeoutRef.current);
                searchTimeoutRef.current = null;
            }
            setResults(data.results || []);
            setLoading(false);
        };

        const handleSearchError = (error: any) => {
            if (searchTimeoutRef.current) {
                clearTimeout(searchTimeoutRef.current);
                searchTimeoutRef.current = null;
            }
            toast.error(error.message || 'An error occurred during search.');
            setLoading(false);
        };

        const handleDownloadUpdate = (data: any) => {
            console.log('Download update received:', data);
            
            if (data.id && data.status) {
                setDownloadStatus(prev => ({
                    ...prev,
                    [data.id]: {
                        status: data.status,
                        progress: data.progress || 0,
                        id: data.id,
                        name: data.name
                    }
                }));
                
                // Update the MediaItem offlineState in DownloadContext
                if (downloadContext && downloadContext.updateDownloadStatus) {
                    // Map the status to the offlineState values
                    let offlineState: string | undefined = 'downloading';
                    switch (data.status) {
                        case 'Downloading':
                        case 'downloading':
                            offlineState = 'downloading';
                            break;
                        case 'Downloading...':
                            offlineState = 'processing';
                            break;
                        case 'Complete':
                            offlineState = 'finished';
                            break;
                        case 'downloaded':
                            offlineState = 'downloaded';
                            break;
                        case 'Failed':
                            offlineState = undefined;
                            break;
                        case 'Accepted':
                        case 'accepted':
                            offlineState = 'accepted';
                            break;
                        case 'Uploading':
                        case 'uploading':
                            offlineState = 'uploading';
                            break;
                        default:
                            offlineState = data.status;
                    }
                    
                    // Call updateDownloadStatus with the download ID and status
                    downloadContext.updateDownloadStatus(data.id, offlineState, data.progress || 0);
                }
                
                // Show live progress updates in toast for better feedback
                if (data.status === 'Downloading...' && data.progress) {
                    // Only show progress updates every 10% to avoid spam
                    const progress = Math.floor(data.progress);
                    if (progress % 10 === 0 || progress === 100) {
                        toast.info(`${data.name || 'Item'}: ${progress}% downloaded`, {
                            duration: 2000,
                            position: 'bottom-center' // More visible position
                        });
                    }
                    // Always update the toast with latest progress for smooth experience
                    if (progress > 0 && progress < 100) {
                        toast.info(`${data.name || 'Item'}: ${progress}% downloaded`, {
                            id: `download-${data.id}`, // Use consistent ID to update same toast
                            duration: 2000,
                            position: 'bottom-center'
                        });
                    }
                } else if (data.status === 'Complete') {
                    toast.success(`${data.name || 'Item'} downloaded successfully!`, {
                        position: 'bottom-center'
                    });
                } else if (data.status === 'Failed') {
                    toast.error(`${data.name || 'Item'} failed to download.`, {
                        position: 'bottom-center'
                    });
                }
            }
        };

        socket.on('search_results', handleSearchResults);
        socket.on('search_error', handleSearchError);
        socket.on('update_status', handleDownloadUpdate);

        return () => {
            socket.off('search_results', handleSearchResults);
            socket.off('search_error', handleSearchError);
            socket.off('update_status', handleDownloadUpdate);
        };
    }, [socket]);

    const debouncedSearch = useDebounce(handleSearch, 500);

    useEffect(() => {
        if (query.trim() !== '') {
            debouncedSearch();
        } else {
            setResults([]);
            setLoading(false);
        }
    }, [query, searchType]); // Remove debouncedSearch to prevent infinite loops

    const handleDownload = (result: SearchResult) => {
        if (!socket) {
            toast.error('Not connected to the server.');
            return;
        }
        
        console.log('🔽 Starting download for:', result);
        toast.info(`Downloading ${result.name}...`);
        
        // Use URL as key if ID is not available (fallback for backend compatibility)
        const downloadKey = result.id || result.url;
        
        socket.emit('download', { 
            url: result.url, 
            searchResult: result,
            name: result.name,
            artist: result.artist,
            type: result.type,
            id: result.id
        });

        setDownloadStatus(prevStatus => ({ 
            ...prevStatus, 
            [downloadKey]: {
                status: 'Downloading...',
                progress: 0,
                id: result.id,
                name: result.name
            }
        }));
    };

    const formatDuration = (duration: number) => {
        const minutes = Math.floor(duration / 60000);
        const seconds = ((duration % 60000) / 1000).toFixed(0);
        return `${minutes}:${seconds.padStart(2, '0')}`;
    };

    return (
        <div className="online-search-page" ref={containerRef}>
            <div className="section">
                <div className="section-header">
                    <div className="container">
                        <h1 className="section_title">Search & Download</h1>
                        <p className="section_desc">Find and add music from Spotify to your library</p>
                    </div>
                </div>
                
                <div className="search-input-container">
                    <div className="search-input-wrapper">
                        <SearchIcon className="search-icon" />
                        <input
                            type="text"
                            value={query}
                            onChange={(e) => setQuery(e.target.value)}
                            placeholder="Search for music..."
                            className="search-input"
                            onKeyPress={(e) => e.key === 'Enter' && handleSearch()}
                        />
                    </div>
                    <div className="search-filters">
                        {(['track', 'album', 'artist', 'playlist'] as const).map((type) => (
                            <button
                                key={type}
                                onClick={() => setSearchType(type)}
                                className={`filter-chip ${searchType === type ? 'active' : ''}`}
                            >
                                {type.charAt(0).toUpperCase() + type.slice(1)}
                            </button>
                        ))}
                    </div>
                </div>
                
                {!isConnected && (
                    <div className="connection-status-banner">
                        Not connected to the server. Please check your connection.
                    </div>
                )}
            </div>

            <div className="search-results">
                {loading && query.trim() !== '' && (
                    <div className="loading-overlay">
                        <div className="spinner"></div>
                        <p>Searching...</p>
                    </div>
                )}
                {!loading && results.length > 0 ? (
                    results.map((result) => (
                        <div key={result.id} className="result-item">
                            <img 
                                src={result.image} 
                                alt={result.name} 
                                className="result-image clickable" 
                                loading="lazy" 
                                onClick={() => setSelectedItem(result)}
                                title={`${result.name} by ${result.artist}`}
                            />
                            <div className="result-info">
                                <h3 className="result-name">{result.name}</h3>
                                <p className="result-artist">{result.artist}</p>
                                {result.duration && <p className="result-duration">{formatDuration(result.duration)}</p>}
                            </div>
                            <button 
                                onClick={() => handleDownload(result)} 
                                className={`download-button ${downloadStatus[result.id || result.url]?.status === 'Downloading...' ? 'downloading' : ''}`} 
                                disabled={!isConnected || downloadStatus[result.id || result.url]?.status === 'Downloading...'}
                                title={downloadStatus[result.id || result.url]?.status || 'Download'}
                            >
                                {downloadStatus[result.id || result.url]?.status === 'Downloading...' ? (
                                    <div className="download-progress">
                                        <div className="progress-bar-container">
                                            <div 
                                                className="progress-bar" 
                                                style={{ 
                                                    width: `${downloadStatus[result.id || result.url]?.progress || 0}%`,
                                                    transition: 'width 0.3s ease' // Smooth progress animation
                                                }}
                                            ></div>
                                        </div>
                                        <span>{Math.round(downloadStatus[result.id || result.url]?.progress || 0)}%</span>
                                    </div>
                                ) : downloadStatus[result.id || result.url]?.status === 'Complete' ? (
                                    <div className="download-complete">
                                        <span>✓</span>
                                    </div>
                                ) : downloadStatus[result.id || result.url]?.status === 'Failed' ? (
                                    <div className="download-failed">
                                        <span>✗</span>
                                    </div>
                                ) : (
                                    <DownloadingIcon />
                                )}
                            </button>
                        </div>
                    ))
                ) : (
                    !loading && query.trim() !== '' && <div className="no-results">No results found.</div>
                )}
            </div>
            
            <DetailModal 
                item={selectedItem} 
                onClose={() => setSelectedItem(null)} 
            />
        </div>
    );
};