import { SearchIcon, SearchClearIcon } from './SvgIcons'
import { useState, useRef, useEffect, ChangeEvent } from 'react'
import { useJellyfinContext } from '../context/JellyfinContext/JellyfinContext'
import { MediaItem } from '../api/jellyfin'
import { BaseItemKind } from '@jellyfin/sdk/lib/generated-client'
import { useNavigate } from 'react-router-dom'
import { AlbumIcon, ArtistsIcon, TrackIcon } from './SvgIcons'
import { BookmarkFillIcon } from '@primer/octicons-react'

export const HeaderSearchBar = () => {
    const api = useJellyfinContext()
    const searchInputRef = useRef<HTMLInputElement>(null)
    const navigate = useNavigate()
    
    const [isExpanded, setIsExpanded] = useState(false)
    const [searchQuery, setSearchQuery] = useState('')
    const [searchResults, setSearchResults] = useState<MediaItem[]>([])
    const [searchLoading, setSearchLoading] = useState(false)
    
    useEffect(() => {
        const debounceTimer = setTimeout(() => {
            const fetchSearchResults = async () => {
                if (!searchQuery || !api.auth.serverUrl || !api.auth.token || !api.auth.userId) {
                    setSearchResults([])
                    return
                }

                setSearchLoading(true)

                try {
                    // Fetch artists from /Artists endpoint
                    const [artistResponse, itemsResponse] = await Promise.all([
                        api.searchArtists(searchQuery, 5),
                        api.searchItems(searchQuery, 10),
                    ])

                    // Combine results
                    const artists = artistResponse
                    const items = itemsResponse
                    
                    // Combine and limit results
                    const combinedResults = [...artists, ...items].slice(0, 10)
                    
                    setSearchResults(combinedResults)
                } catch (err) {
                    console.error('Search error:', err)
                    setSearchResults([])
                } finally {
                    setSearchLoading(false)
                }
            }

            fetchSearchResults()
        }, 300)

        return () => clearTimeout(debounceTimer)
    }, [searchQuery, api])
    
    const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
        const value = e.target.value
        setSearchQuery(value)
        setIsExpanded(value.length > 0)
    }
    
    const handleClear = () => {
        setSearchQuery('')
        setIsExpanded(false)
        if (searchInputRef.current) {
            searchInputRef.current.focus()
        }
    }
    
    const handleSearchIconClick = () => {
        setIsExpanded(true)
        if (searchInputRef.current) {
            searchInputRef.current.focus()
        }
    }
    
    const handleResultClick = (item: MediaItem) => {
        setSearchQuery('')
        setIsExpanded(false)
        
        // Navigate to the appropriate page based on item type
        if (item.Type === BaseItemKind.Audio) {
            navigate(`/search/${encodeURIComponent(searchQuery)}`)
        } else if (item.Type === BaseItemKind.MusicAlbum) {
            navigate(`/album/${item.Id}`)
        } else if (item.Type === BaseItemKind.MusicArtist) {
            navigate(`/artist/${item.Id}`)
        } else {
            navigate(`/search/${encodeURIComponent(searchQuery)}`)
        }
    }
    
    const handleSearchSubmit = (e: React.FormEvent) => {
        e.preventDefault()
        if (searchQuery.trim()) {
            setIsExpanded(false)
            navigate(`/search/${encodeURIComponent(searchQuery)}`)
        }
    }
    
    return (
        <div className={`search-bar ${isExpanded ? 'expanded' : ''}`}>
            <form className="search-container" onSubmit={handleSearchSubmit}>
                <div className={`search-input-container ${searchQuery ? 'active' : ''}`}>
                    <div className="search-icon-wrapper" onClick={handleSearchIconClick}>
                        <SearchIcon width={16} height={16} />
                    </div>
                    <input
                        ref={searchInputRef}
                        type="text"
                        value={searchQuery}
                        onChange={handleInputChange}
                        onFocus={() => setIsExpanded(true)}
                        onBlur={() => {
                            // Delay collapse to allow for click events on search results
                            setTimeout(() => {
                                if (!searchQuery) {
                                    setIsExpanded(false)
                                }
                            }, 150)
                        }}
                        placeholder="Search music..."
                        className="search-input"
                    />
                    {searchQuery && (
                        <div className="search-clear" onClick={handleClear}>
                            <SearchClearIcon width={16} height={16} />
                        </div>
                    )}
                    {searchLoading && (
                        <div className="search-loading">
                            <div className="spinner" />
                        </div>
                    )}
                </div>
            </form>
            
            {isExpanded && searchResults.length > 0 && (
                <div className="search-dropdown">
                    <div className="search-results">
                        <div className="results">
                            {searchResults.map((item, index) => {
                                const isArtist = item.Type === BaseItemKind.MusicArtist
                                const isAlbum = item.Type === BaseItemKind.MusicAlbum
                                const isTrack = item.Type === BaseItemKind.Audio
                                
                                return (
                                    <div 
                                        key={`${item.Id}-${index}`}
                                        className="result"
                                        onClick={() => handleResultClick(item)}
                                    >
                                        <div className="type">
                                            <div className="icon">
                                                {isArtist && <ArtistsIcon width={16} height={16} className="artist-icon" />}
                                                {isAlbum && <AlbumIcon width={16} height={16} className="album-icon" />}
                                                {isTrack && <TrackIcon width={16} height={16} className="song-icon" />}
                                                {!isArtist && !isAlbum && !isTrack && (
                                                    <BookmarkFillIcon size={16} className="default-icon" />
                                                )}
                                            </div>
                                        </div>
                                        <div className="info">
                                            <div className="name">{item.Name}</div>
                                            {item.AlbumArtist && (
                                                <div className="artist">{item.AlbumArtist}</div>
                                            )}
                                            {item.ProductionYear && (
                                                <div className="year">{item.ProductionYear}</div>
                                            )}
                                        </div>
                                    </div>
                                )
                            })}
                        </div>
                    </div>
                </div>
            )}
        </div>
    )
}