'use client';

import { useState, useEffect } from 'react';
import Image from 'next/image';
import { ScrollArea, ScrollBar } from '@/components/ui/scroll-area';
import { Separator } from '@/components/ui/separator';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { AlbumArtwork } from '@/app/components/album-artwork';
import { ArtistIcon } from '@/app/components/artist-icon';
import { useNavidrome } from '@/app/components/NavidromeContext';
import { getNavidromeAPI, Artist, Album, Song } from '@/lib/navidrome';
import { useAudioPlayer } from '@/app/components/AudioPlayerContext';
import { TrackContextMenu, AlbumContextMenu, ArtistContextMenu } from '@/app/components/ContextMenus';
import { Search, Play, Plus } from 'lucide-react';

export default function SearchPage() {
  const { search2 } = useNavidrome();
  const { addToQueue, playTrack } = useAudioPlayer();
  const [searchQuery, setSearchQuery] = useState('');
  const [searchResults, setSearchResults] = useState<{
    artists: Artist[];
    albums: Album[];
    songs: Song[];
  }>({ artists: [], albums: [], songs: [] });
  const [isSearching, setIsSearching] = useState(false);
  const api = getNavidromeAPI();

  const handleSearch = async (query: string) => {
    if (query.trim() === '') {
      setSearchResults({ artists: [], albums: [], songs: [] });
      return;
    }

    try {
      setIsSearching(true);
      const results = await search2(query);
      // Limit results to 5 of each type
      setSearchResults({
        artists: results.artists.slice(0, 5),
        albums: results.albums.slice(0, 5),
        songs: results.songs.slice(0, 5)
      });
    } catch (error) {
      console.error('Search failed:', error);
      setSearchResults({ artists: [], albums: [], songs: [] });
    } finally {
      setIsSearching(false);
    }
  };

  useEffect(() => {
    const timeoutId = setTimeout(() => {
      handleSearch(searchQuery);
    }, 300);

    return () => clearTimeout(timeoutId);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [searchQuery]);

  // Focus search input when component mounts (for keyboard shortcut navigation)
  useEffect(() => {
    const searchInput = document.querySelector('input[type="text"]') as HTMLInputElement;
    if (searchInput) {
      searchInput.focus();
    }
  }, []);
  const createTrackFromSong = (song: Song) => {
    if (!api) return null;
    
    return {
      id: song.id,
      name: song.title,
      url: api.getStreamUrl(song.id),
      artist: song.artist,
      album: song.album,
      duration: song.duration,
      coverArt: song.coverArt ? api.getCoverArtUrl(song.coverArt, 300) : undefined,
      albumId: song.albumId,
      artistId: song.artistId,
      starred: !!song.starred
    };
  };

  const handlePlaySong = (song: Song) => {
    if (!api) {
      console.error('Navidrome API not available');
      return;
    }
    
    const track = {
      id: song.id,
      name: song.title,
      url: api.getStreamUrl(song.id),
      artist: song.artist,
      album: song.album,
      duration: song.duration,
      coverArt: song.coverArt ? api.getCoverArtUrl(song.coverArt, 300) : undefined,
      albumId: song.albumId,
      artistId: song.artistId,
      starred: !!song.starred
    };

    playTrack(track);
  };
  const handleAddToQueue = (song: Song) => {
    if (!api) {
      console.error('Navidrome API not available');
      return;
    }
    
    const track = {
      id: song.id,
      name: song.title,
      url: api.getStreamUrl(song.id),
      artist: song.artist,
      album: song.album,
      duration: song.duration,
      coverArt: song.coverArt ? api.getCoverArtUrl(song.coverArt, 300) : undefined,
      albumId: song.albumId,
      artistId: song.artistId,
      starred: !!song.starred
    };

    addToQueue(track);
  };

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

  return (
    <div className="p-6 pb-32 w-full">
      <div className="space-y-6">
        {/* Header */}
        <div className="space-y-1">
          <h1 className="text-3xl font-bold tracking-tight">Search</h1>
          <p className="text-muted-foreground">
            Search for artists, albums, and songs in your music library
          </p>
        </div>

        {/* Search Input */}
        <div className="space-y-4">
          <div className="relative max-w-lg">
            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground w-4 h-4" />
            <Input
              placeholder="What do you want to listen to?"
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
              className="pl-10 text-lg h-12"
            />
          </div>
          {isSearching && <div className="text-sm text-muted-foreground">Searching...</div>}
        </div>

        {/* Search Results */}
        {searchQuery && (
          <div className="space-y-6">
            {searchResults.artists.length === 0 && searchResults.albums.length === 0 && searchResults.songs.length === 0 && !isSearching && (
              <div className="text-center py-12">
                <p className="text-muted-foreground text-lg">No results found for &quot;{searchQuery}&quot;</p>
                <p className="text-muted-foreground text-sm mt-2">Try different keywords or check your spelling</p>
              </div>
            )}

            {/* Artists */}
            {searchResults.artists.length > 0 && (
              <div>
                <h2 className="text-2xl font-bold mb-4">Artists</h2>
                <ScrollArea className="w-full">
                  <div className="flex space-x-4 pb-4">
                    {searchResults.artists.map((artist) => (
                      <ArtistContextMenu 
                        key={artist.id}
                        artistId={artist.id}
                        artistName={artist.name}
                      >
                        <ArtistIcon
                          artist={artist}
                          className="shrink-0 overflow-hidden"
                          size={190}
                        />
                      </ArtistContextMenu>
                    ))}
                  </div>
                  <ScrollBar orientation="horizontal" />
                </ScrollArea>
              </div>
            )}

            {/* Albums */}
            {searchResults.albums.length > 0 && (
              <div>
                <h2 className="text-2xl font-bold mb-4">Albums</h2>
                <ScrollArea className="w-full">
                  <div className="flex space-x-4 pb-4">
                    {searchResults.albums.map((album) => (
                      <AlbumContextMenu 
                        key={album.id}
                        albumId={album.id}
                        albumName={album.name}
                      >
                        <AlbumArtwork 
                          album={album} 
                          className="shrink-0 w-48" 
                          aspectRatio="square"
                          width={192}
                          height={192}
                        />
                      </AlbumContextMenu>
                    ))}
                  </div>
                  <ScrollBar orientation="horizontal" />
                </ScrollArea>
              </div>
            )}

            {/* Songs */}
            {searchResults.songs.length > 0 && (
              <div>
                <h2 className="text-2xl font-bold mb-4">Songs</h2>
                <div className="space-y-2">
                  {searchResults.songs.slice(0, 10).map((song, index) => {
                    const track = createTrackFromSong(song);
                    if (!track) return null;

                    return (
                      <TrackContextMenu key={song.id} track={track}>
                        <div className="group flex items-center space-x-3 p-3 hover:bg-accent rounded-lg transition-colors cursor-pointer">
                          <div className="w-8 text-center text-sm text-muted-foreground">
                            <span className="group-hover:hidden">{index + 1}</span>
                            <Button
                              variant="ghost"
                              size="sm"
                              onClick={() => handlePlaySong(song)}
                              className="hidden group-hover:flex h-8 w-8 p-0"
                            >
                              <Play className="w-4 h-4" />
                            </Button>
                          </div>
                          
                          {/* Song Cover */}
                          <div className="shrink-0">
                            <Image
                              src={song.coverArt && api ? api.getCoverArtUrl(song.coverArt, 300) : '/default-user.jpg'}
                              alt={song.album}
                              width={48}
                              height={48}
                              className="w-12 h-12 rounded-md object-cover"
                            />
                          </div>
                          
                          {/* Song Info */}
                          <div className="flex-1 min-w-0">
                            <p className="font-medium truncate">{song.title}</p>
                            <p className="text-sm text-muted-foreground truncate">{song.artist} • {song.album}</p>
                          </div>
                          
                          {/* Duration */}
                          <div className="text-sm text-muted-foreground">
                            {formatDuration(song.duration)}
                          </div>
                          
                          {/* Actions */}
                          <div className="flex items-center space-x-2 opacity-0 group-hover:opacity-100 transition-opacity">
                            <Button
                              variant="ghost"
                              size="sm"
                              onClick={() => handleAddToQueue(song)}
                              className="h-8 w-8 p-0"
                            >
                              <Plus className="w-4 h-4" />
                            </Button>
                          </div>
                        </div>
                      </TrackContextMenu>
                    );
                  })}
                  
                  {searchResults.songs.length > 10 && (
                    <div className="text-center pt-4">
                      <p className="text-sm text-muted-foreground">
                        Showing first 10 of {searchResults.songs.length} songs
                      </p>
                    </div>
                  )}
                </div>
              </div>
            )}
          </div>
        )}

        {/* Empty State */}
        {!searchQuery && (
          <div className="text-center py-24">
            <Search className="w-16 h-16 text-muted-foreground mx-auto mb-4" />
            <h3 className="text-xl font-semibold mb-2">Search your music</h3>
            <p className="text-muted-foreground">
              Find your favorite artists, albums, and songs
            </p>
          </div>
        )}
      </div>
    </div>
  );
}
