import { useState, useEffect, useRef, useMemo } from 'react';
import { useSocket } from '../hooks/useSocket';
import { useDebounce } from '../hooks/useDebounce';
import { SearchIcon } from '../components/SvgIcons';
import { toast } from 'sonner';
import { useDownloadContext } from '../context/DownloadContext/DownloadContext';
import { MediaItem } from '../api/jellyfin';
import { MediaList } from '../components/MediaList';
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 } = useSocket();
    const downloadContext = useDownloadContext();
    const { downloads: contextDownloads } = downloadContext || { downloads: {} };

    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

    // Custom download handler for Spotify tracks
    const handleSpotifyDownload = (item: MediaItem) => {
        if (!socket) {
            toast.error('Not connected to the server.');
            return;
        }
        
        const originalResult = (item as any).searchResult;
        if (!originalResult) {
            toast.error('Invalid search result.');
            return;
        }
        
        console.log('🔽 Starting Spotify download for:', originalResult);
        toast.info(`Downloading ${originalResult.name}...`);
        
        socket.emit('download', { 
            url: originalResult.url, 
            searchResult: originalResult,
            name: originalResult.name,
            artist: originalResult.artist,
            type: originalResult.type,
            id: originalResult.id
        });

        // Update local download status for immediate UI feedback
        const downloadKey = originalResult.id || originalResult.url;
        setDownloadStatus(prevStatus => ({ 
            ...prevStatus, 
            [downloadKey]: {
                status: 'Downloading...',
                progress: 0,
                id: originalResult.id,
                name: originalResult.name
            }
        }));
        
        // Also update the MediaItem's offlineState immediately for UI feedback
        if (downloadContext && downloadContext.updateDownloadStatus) {
            downloadContext.updateDownloadStatus(downloadKey, 'downloading', 0);
        }
    };

    // Convert search results to MediaItem format for MediaList component
    const convertToMediaItems = (searchResults: SearchResult[]): MediaItem[] => {
        return searchResults.map(result => {
            const downloadKey = result.id || result.url;
            const currentDownloadStatus = downloadStatus[downloadKey];
            const contextDownloadStatus = contextDownloads[downloadKey];
            
            // Use context download status if available, otherwise use local status
            const activeStatus = contextDownloadStatus || currentDownloadStatus;
            
            // Map download status to offlineState
            let offlineState: MediaItem['offlineState'] = undefined;
            if (activeStatus) {
                const status = activeStatus.status || activeStatus;
                switch (status) {
                    case 'Downloading...':
                    case 'Downloading':
                    case 'downloading':
                        offlineState = 'downloading';
                        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 = undefined;
                }
            }
            
            
            return {
                Id: result.id || result.url, // Use URL as fallback ID
                Name: result.name,
                Type: 'Audio', // Use BaseItemKind.Audio
                ServerId: 'spotify-search',
                RunTimeTicks: result.duration ? result.duration * 10000 : 0,
                IsFolder: false,
                MediaType: 'Audio',
                // Use both AlbumArtist and Artists for compatibility
                AlbumArtist: result.artist || 'Unknown Artist',
                Artists: result.artist ? [result.artist] : ['Unknown Artist'],
                Album: result.album || 'Unknown Album',
                UserData: { 
                    Played: false,
                    IsFavorite: false 
                },
                // Spotify-specific fields for Discover mode
                SpotifyId: result.id,
                SpotifyUrl: result.url,
                SpotifyImage: result.image,
                // Store original search result data for download
                searchResult: result,
                // Add download status from our local state
                offlineState,
                downloadProgress: activeStatus?.progress || 0
            } as MediaItem;
        });
    };

    const mediaItems = useMemo(() => convertToMediaItems(results), [results, downloadStatus, contextDownloads]);

    return (
        <div className="home-page" ref={containerRef}>
            {/* Search Header Section */}
            <div className="section">
                <div className="section-header">
                    <div className="container">
                        <div className="section_title">Search & Download</div>
                        <div className="section_desc">Find and add music from Spotify to your library</div>
                    </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>

            {/* Search Results Section - Styled like Home page */}
            {query.trim() !== '' && (
                <div className="section">
                    <div className="section-header">
                        <div className="container">
                            <div className="section_title">
                                {loading ? 'Searching...' : `Search Results for "${query}"`}
                            </div>
                            <div className="section_desc">
                                {loading ? 'Finding music...' : 
                                 results.length > 0 ? `Found ${results.length} results` : 'No results found'}
                            </div>
                        </div>
                    </div>
                    
                    {loading ? (
                        <div className="loading-container">
                            <div className="loading-spinner"></div>
                        </div>
                    ) : results.length > 0 ? (
                        <MediaList 
                            items={mediaItems}
                            infiniteData={{ pageParams: [1], pages: [mediaItems] }}
                            isLoading={false}
                            type="song"
                            title="Search Results"
                            discoverMode={true}
                            onDiscoverDownload={handleSpotifyDownload}
                        />
                    ) : (
                        <div className="no-results">
                            <p>No results found for "{query}". Try a different search term.</p>
                        </div>
                    )}
                </div>
            )}
            
            <DetailModal 
                item={selectedItem} 
                onClose={() => setSelectedItem(null)} 
            />
        </div>
    );
};