import React, { useState, useMemo, useRef, useEffect } from 'react';
import { Song } from '../types';
import { Play, MoreHorizontal, Heart, ThumbsDown, ListPlus, Pause, Search, Filter, Check, Globe, Lock, Loader2, ThumbsUp, Share2, Video, Info, Clock } from 'lucide-react';
import { useAuth } from '../context/AuthContext';
import { SongDropdownMenu } from './SongDropdownMenu';
import { ShareModal } from './ShareModal';
import { AlbumCover } from './AlbumCover';

interface SongListProps {
    songs: Song[];
    currentSong: Song | null;
    selectedSong: Song | null;
    likedSongIds: Set<string>;
    isPlaying: boolean;
    referenceTracks?: { id: string; filename: string; audio_url: string; duration?: number | null; created_at?: string }[];
    onPlay: (song: Song) => void;
    onSelect: (song: Song) => void;
    onToggleLike: (songId: string) => void;
    onAddToPlaylist: (song: Song) => void;
    onOpenVideo?: (song: Song) => void;
    onShowDetails?: (song: Song) => void;
    onNavigateToProfile?: (username: string) => void;
    onReusePrompt?: (song: Song) => void;
    onDelete?: (song: Song) => void;
    onDeleteMany?: (songs: Song[]) => void;
    onUseAsReference?: (song: Song) => void;
    onCoverSong?: (song: Song) => void;
}

// ... existing code ...



// Define Filter Types
type FilterType = 'liked' | 'public' | 'private' | 'generating';

const FILTERS: { id: FilterType; label: string; icon: React.ReactNode }[] = [
    { id: 'liked', label: 'Liked', icon: <ThumbsUp size={16} /> },
    { id: 'public', label: 'Public', icon: <Globe size={16} /> },
    { id: 'private', label: 'Private', icon: <Lock size={16} /> },
    { id: 'generating', label: 'Generating', icon: <Loader2 size={16} /> },
];

export const SongList: React.FC<SongListProps> = ({
    songs,
    currentSong,
    selectedSong,
    likedSongIds,
    isPlaying,
    referenceTracks = [],
    onPlay,
    onSelect,
    onToggleLike,
    onAddToPlaylist,
    onOpenVideo,
    onShowDetails,
    onNavigateToProfile,
    onReusePrompt,
    onDelete,
    onDeleteMany,
    onUseAsReference,
    onCoverSong
}) => {
    const { user } = useAuth();
    const [searchQuery, setSearchQuery] = useState('');
    const [activeFilters, setActiveFilters] = useState<Set<FilterType>>(new Set());
    const [isFilterOpen, setIsFilterOpen] = useState(false);
    const [isSelecting, setIsSelecting] = useState(false);
    const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());
    const filterRef = useRef<HTMLDivElement>(null);

    // Close filter dropdown when clicking outside
    useEffect(() => {
        const handleClickOutside = (event: MouseEvent) => {
            if (filterRef.current && !filterRef.current.contains(event.target as Node)) {
                setIsFilterOpen(false);
            }
        };
        document.addEventListener('mousedown', handleClickOutside);
        return () => document.removeEventListener('mousedown', handleClickOutside);
    }, []);

    useEffect(() => {
        setSelectedIds(prev => {
            if (prev.size === 0) return prev;
            const validIds = new Set(songs.map(song => song.id));
            const next = new Set<string>();
            prev.forEach(id => {
                if (validIds.has(id)) next.add(id);
            });
            return next;
        });
    }, [songs]);

    const toggleFilter = (filterId: FilterType) => {
        setActiveFilters(prev => {
            const newFilters = new Set(prev);
            if (newFilters.has(filterId)) {
                newFilters.delete(filterId);
            } else {
                newFilters.add(filterId);
            }
            return newFilters;
        });
    };

    const filteredSongs = useMemo(() => {
        return songs.filter(song => {
            // 1. Search Logic
            const matchesSearch =
                song.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
                song.style.toLowerCase().includes(searchQuery.toLowerCase()) ||
                song.tags.some(tag => tag.toLowerCase().includes(searchQuery.toLowerCase()));

            if (!matchesSearch) return false;

            // 2. Filter Logic
            if (activeFilters.size === 0) return true;

            if (activeFilters.has('liked') && !likedSongIds.has(song.id)) return false;
            if (activeFilters.has('public') && !song.isPublic) return false;
            if (activeFilters.has('private') && song.isPublic) return false;
            if (activeFilters.has('generating') && !song.isGenerating) return false;

            return true;
        });
    }, [songs, searchQuery, activeFilters, likedSongIds]);

    const filteredUploads = useMemo(() => {
        if (activeFilters.size > 0) return [];
        if (!referenceTracks.length) return [];
        return referenceTracks.filter(track => {
            const title = track.filename.replace(/\.[^/.]+$/, '');
            return title.toLowerCase().includes(searchQuery.toLowerCase());
        });
    }, [referenceTracks, searchQuery, activeFilters]);

    const listItems = useMemo(() => {
        const songItems = filteredSongs.map(song => ({
            type: 'song' as const,
            id: song.id,
            createdAt: song.createdAt,
            song
        }));
        const uploadItems = filteredUploads.map(track => ({
            type: 'upload' as const,
            id: track.id,
            createdAt: new Date(track.created_at || Date.now()),
            track
        }));
        return [...songItems, ...uploadItems].sort((a, b) => b.createdAt.getTime() - a.createdAt.getTime());
    }, [filteredSongs, filteredUploads]);

    const selectableSongs = useMemo(
        () => filteredSongs.filter(song => !song.isGenerating),
        [filteredSongs]
    );

    const allSelected = selectableSongs.length > 0 && selectableSongs.every(song => selectedIds.has(song.id));
    const selectedSongs = selectableSongs.filter(song => selectedIds.has(song.id));

    return (
        <div className="flex-1 bg-white dark:bg-black h-full overflow-y-auto custom-scrollbar p-6 pb-32 transition-colors duration-300">
            <div className="max-w-5xl mx-auto w-full"> {/* Container constraint */}

                {/* Header */}
                <div className="flex flex-col gap-6 mb-8">
                    <div className="flex items-center gap-2 text-sm text-zinc-500 dark:text-zinc-400">
                        <span className="hover:text-black dark:hover:text-white cursor-pointer transition-colors">Workspaces</span>
                        <span className="text-zinc-400 dark:text-zinc-600">›</span>
                        <span className="text-zinc-900 dark:text-white font-medium">My Workspace</span>
                    </div>

                    <div className="flex items-center gap-3">
                        <div className="relative group flex-1">
                            <input
                                type="text"
                                value={searchQuery}
                                onChange={(e) => setSearchQuery(e.target.value)}
                                placeholder="Search your songs..."
                                className="w-full bg-zinc-100 dark:bg-[#121214] border border-zinc-200 dark:border-white/10 rounded-lg pl-10 pr-4 py-2.5 text-sm text-zinc-900 dark:text-white focus:outline-none focus:border-zinc-400 dark:focus:border-white/20 placeholder-zinc-500 dark:placeholder-zinc-600 transition-colors"
                            />
                            <Search className="w-4 h-4 text-zinc-500 absolute left-3 top-3 group-focus-within:text-black dark:group-focus-within:text-white transition-colors" />
                        </div>

                        <div className="relative" ref={filterRef}>
                            <button
                                onClick={() => setIsFilterOpen(!isFilterOpen)}
                                className={`
                        border text-xs font-bold px-4 py-2.5 rounded-lg flex items-center gap-2 transition-all select-none
                        ${isFilterOpen || activeFilters.size > 0
                                        ? 'bg-zinc-900 dark:bg-white text-white dark:text-black border-transparent'
                                        : 'bg-zinc-100 dark:bg-[#121214] hover:bg-zinc-200 dark:hover:bg-white/5 border-zinc-200 dark:border-white/10 text-zinc-700 dark:text-white'
                                    }
                    `}
                            >
                                <Filter size={14} fill={activeFilters.size > 0 ? "currentColor" : "none"} />
                                <span>Filters {activeFilters.size > 0 && `(${activeFilters.size})`}</span>
                            </button>

                            {/* Filter Dropdown */}
                            {isFilterOpen && (
                                <div className="absolute right-0 top-full mt-2 w-56 bg-white dark:bg-[#18181b] border border-zinc-200 dark:border-white/10 rounded-xl shadow-2xl overflow-hidden py-1 z-50 animate-in fade-in zoom-in-95 duration-100 origin-top-right">
                                    <div className="px-3 py-2 text-[10px] font-bold text-zinc-500 uppercase tracking-wider">
                                        Refine By
                                    </div>
                                    {FILTERS.map(filter => (
                                        <button
                                            key={filter.id}
                                            onClick={() => toggleFilter(filter.id)}
                                            className="w-full text-left px-4 py-2.5 flex items-center justify-between hover:bg-zinc-100 dark:hover:bg-white/5 transition-colors group"
                                        >
                                            <div className="flex items-center gap-3 text-sm font-medium text-zinc-700 dark:text-zinc-300 group-hover:text-black dark:group-hover:text-white">
                                                <span className="text-zinc-400 dark:text-zinc-500 group-hover:text-zinc-600 dark:group-hover:text-zinc-300 transition-colors">
                                                    {filter.icon}
                                                </span>
                                                {filter.label}
                                            </div>
                                            <div className={`
                                     w-4 h-4 rounded border flex items-center justify-center transition-all
                                     ${activeFilters.has(filter.id)
                                                    ? 'bg-pink-600 border-pink-600'
                                                    : 'border-zinc-300 dark:border-zinc-600 group-hover:border-zinc-400 dark:group-hover:border-zinc-500'
                                                }
                                 `}>
                                                {activeFilters.has(filter.id) && <Check size={10} className="text-white" strokeWidth={4} />}
                                            </div>
                                        </button>
                                    ))}
                                </div>
                            )}
                        </div>

                        <button
                            onClick={() => {
                                setIsSelecting(prev => !prev);
                                setSelectedIds(new Set());
                            }}
                            className={`border text-xs font-bold px-4 py-2.5 rounded-lg flex items-center gap-2 transition-all select-none ${isSelecting
                                    ? 'bg-zinc-900 dark:bg-white text-white dark:text-black border-transparent'
                                    : 'bg-zinc-100 dark:bg-[#121214] hover:bg-zinc-200 dark:hover:bg-white/5 border-zinc-200 dark:border-white/10 text-zinc-700 dark:text-white'
                                }`}
                        >
                            Select
                        </button>
                    </div>

                    {isSelecting && (
                        <div className="flex items-center justify-between gap-3 rounded-xl border border-zinc-200 dark:border-white/10 bg-zinc-50 dark:bg-white/5 px-4 py-3">
                            <div className="text-sm text-zinc-600 dark:text-zinc-300">
                                {selectedSongs.length} selected
                            </div>
                            <div className="flex items-center gap-2">
                                <button
                                    onClick={() => {
                                        const next = new Set<string>();
                                        if (!allSelected) {
                                            selectableSongs.forEach(song => next.add(song.id));
                                        }
                                        setSelectedIds(next);
                                    }}
                                    className="px-3 py-1.5 rounded-lg text-xs font-semibold border border-zinc-200 dark:border-white/10 text-zinc-600 dark:text-zinc-300 hover:border-zinc-300 dark:hover:border-white/20"
                                >
                                    {allSelected ? 'Clear all' : 'Select all'}
                                </button>
                                <button
                                    onClick={() => {
                                        if (!selectedSongs.length) return;
                                        onDeleteMany?.(selectedSongs);
                                        setSelectedIds(new Set());
                                        setIsSelecting(false);
                                    }}
                                    className={`px-3 py-1.5 rounded-lg text-xs font-semibold border ${selectedSongs.length
                                            ? 'border-red-500 text-red-600 hover:bg-red-50 dark:hover:bg-red-500/10'
                                            : 'border-zinc-200 dark:border-white/10 text-zinc-400 cursor-not-allowed'
                                        }`}
                                    disabled={!selectedSongs.length}
                                >
                                    Delete
                                </button>
                            </div>
                        </div>
                    )}
                </div>

                {/* List */}
                <div className="space-y-2"> {/* Reduced vertical spacing */}
                    {listItems.length === 0 ? (
                        <div className="flex flex-col items-center justify-center h-64 text-zinc-500 space-y-4 border border-dashed border-zinc-200 dark:border-white/5 rounded-2xl bg-zinc-50 dark:bg-white/[0.02]">
                            <div className="w-16 h-16 rounded-full bg-zinc-100 dark:bg-white/5 flex items-center justify-center">
                                <Filter size={32} />
                            </div>
                            <p className="font-medium">No songs match your filters.</p>
                            <button
                                onClick={() => { setActiveFilters(new Set()); setSearchQuery(''); }}
                                className="text-pink-600 dark:text-pink-500 text-sm font-bold hover:underline"
                            >
                                Clear filters
                            </button>
                        </div>
                    ) : (
                        listItems.map((item) => (
                            item.type === 'song' ? (
                                <SongItem
                                    key={item.id}
                                    song={item.song}
                                    isCurrent={currentSong?.id === item.song.id}
                                    isSelected={selectedSong?.id === item.song.id}
                                    isSelectionMode={isSelecting}
                                    isChecked={selectedIds.has(item.song.id)}
                                    isLiked={likedSongIds.has(item.song.id)}
                                    isPlaying={isPlaying}
                                    isOwner={user?.id === item.song.userId}
                                    onPlay={() => onPlay(item.song)}
                                    onSelect={() => onSelect(item.song)}
                                    onToggleSelect={() => {
                                        if (item.song.isGenerating) return;
                                        setSelectedIds(prev => {
                                            const next = new Set(prev);
                                            if (next.has(item.song.id)) next.delete(item.song.id);
                                            else next.add(item.song.id);
                                            return next;
                                        });
                                    }}
                                    onToggleLike={() => onToggleLike(item.song.id)}
                                    onAddToPlaylist={() => onAddToPlaylist(item.song)}
                                    onOpenVideo={() => onOpenVideo && onOpenVideo(item.song)}
                                    onShowDetails={() => onShowDetails && onShowDetails(item.song)}
                                    onNavigateToProfile={onNavigateToProfile}
                                    onReusePrompt={() => onReusePrompt?.(item.song)}
                                    onDelete={() => onDelete?.(item.song)}
                                    onUseAsReference={() => onUseAsReference?.(item.song)}
                                    onCoverSong={() => onCoverSong?.(item.song)}
                                />
                            ) : (
                                <UploadItem
                                    key={`upload_${item.id}`}
                                    track={item.track}
                                    onPlay={(audioUrl, title) => {
                                        onPlay({
                                            id: `upload_${item.id}`,
                                            title,
                                            lyrics: '',
                                            style: 'Upload',
                                            coverUrl: '',
                                            duration: '0:00',
                                            createdAt: item.createdAt,
                                            tags: [],
                                            audioUrl,
                                            isPublic: false,
                                        } as Song);
                                    }}
                                />
                            )
                        ))
                    )}
                </div>
            </div> {/* End container */}
        </div>
    );
};

interface SongItemProps {
    song: Song;
    isCurrent: boolean;
    isSelected: boolean;
    isSelectionMode: boolean;
    isChecked: boolean;
    isLiked: boolean;
    isPlaying: boolean;
    isOwner: boolean;
    onPlay: () => void;
    onSelect: () => void;
    onToggleSelect: () => void;
    onToggleLike: () => void;
    onAddToPlaylist: () => void;
    onOpenVideo?: () => void;
    onShowDetails?: () => void;
    onNavigateToProfile?: (username: string) => void;
    onReusePrompt?: () => void;
    onDelete?: () => void;
    onUseAsReference?: () => void;
    onCoverSong?: () => void;
}

const SongItem: React.FC<SongItemProps> = ({
    song,
    isCurrent,
    isSelected,
    isSelectionMode,
    isChecked,
    isLiked,
    isPlaying,
    isOwner,
    onPlay,
    onSelect,
    onToggleSelect,
    onToggleLike,
    onAddToPlaylist,
    onOpenVideo,
    onShowDetails,
    onNavigateToProfile,
    onReusePrompt,
    onDelete,
    onUseAsReference,
    onCoverSong
}) => {
    const [showDropdown, setShowDropdown] = useState(false);
    const [shareModalOpen, setShareModalOpen] = useState(false);
    const [imageError, setImageError] = useState(false);

    return (
        <>
        <div
            onClick={onSelect}
            draggable={Boolean(song.audioUrl) && !song.isGenerating}
            onDragStart={(e) => {
                if (!song.audioUrl || song.isGenerating) return;
                e.dataTransfer.effectAllowed = 'copy';
                e.dataTransfer.setData('application/x-ace-audio', JSON.stringify({
                    url: song.audioUrl,
                    title: song.title || 'Untitled',
                    source: 'song',
                }));
            }}
            className={`group flex items-center gap-4 p-2 rounded-lg hover:bg-zinc-100 dark:hover:bg-[#18181b] transition-all cursor-pointer border ${isSelected ? 'bg-zinc-100 dark:bg-[#18181b] border-zinc-200 dark:border-white/10' : 'border-transparent bg-transparent'} ${song.audioUrl && !song.isGenerating ? 'cursor-grab active:cursor-grabbing' : ''}`}
        >
            {isSelectionMode && (
                <button
                    type="button"
                    onClick={(e) => {
                        e.stopPropagation();
                        onToggleSelect();
                    }}
                    className={`w-5 h-5 rounded border flex items-center justify-center transition-colors ${isChecked
                            ? 'bg-pink-600 border-pink-600 text-white'
                            : 'border-zinc-300 dark:border-zinc-600 text-transparent hover:border-zinc-400 dark:hover:border-zinc-500'
                        } ${song.isGenerating ? 'opacity-40 cursor-not-allowed' : ''}`}
                    disabled={song.isGenerating}
                    aria-pressed={isChecked}
                >
                    <Check size={12} strokeWidth={3} className={isChecked ? 'text-white' : 'text-transparent'} />
                </button>
            )}

            {/* Cover Art - Reduced size */}
            <div className="relative w-16 h-16 flex-shrink-0 rounded-md bg-zinc-200 dark:bg-zinc-800 overflow-hidden shadow-sm group/image">
                {/* Use gradient fallback if no coverUrl or image fails to load */}
                {(!song.coverUrl || imageError) ? (
                    <AlbumCover seed={song.id || song.title} size="full" className={`w-full h-full ${song.isGenerating ? 'opacity-20 blur-sm' : 'opacity-100'}`} />
                ) : (
                    <img
                        src={song.coverUrl}
                        alt={song.title}
                        className={`w-full h-full object-cover transition-opacity ${song.isGenerating ? 'opacity-20 blur-sm' : 'opacity-100'}`}
                        onError={() => setImageError(true)}
                    />
                )}

                {song.isGenerating ? (
                    <div className="absolute inset-0 bg-black/40 flex flex-col items-center justify-center gap-1">
                        {song.queuePosition ? (
                            /* Queue indicator */
                            <>
                                <div className="w-8 h-8 rounded-full bg-amber-500/20 flex items-center justify-center">
                                    <Clock size={16} className="text-amber-400" />
                                </div>
                                <span className="text-[10px] font-medium text-amber-400">Queue #{song.queuePosition}</span>
                            </>
                        ) : (
                            /* Generating - Music Waveform Animation */
                            <div className="flex items-end gap-1 h-6">
                                <div className="w-1 bg-pink-500 rounded-full music-bar-anim" style={{ animationDelay: '0.0s' }}></div>
                                <div className="w-1 bg-pink-500 rounded-full music-bar-anim" style={{ animationDelay: '0.2s' }}></div>
                                <div className="w-1 bg-pink-500 rounded-full music-bar-anim" style={{ animationDelay: '0.4s' }}></div>
                                <div className="w-1 bg-pink-500 rounded-full music-bar-anim" style={{ animationDelay: '0.1s' }}></div>
                            </div>
                        )}
                    </div>
                ) : (
                    <div
                        className={`absolute inset-0 bg-black/40 flex items-center justify-center backdrop-blur-[1px] cursor-pointer transition-opacity duration-200 ${isCurrent ? 'opacity-100' : 'opacity-0 group-hover/image:opacity-100'}`}
                        onClick={(e) => {
                            e.stopPropagation();
                            onPlay();
                        }}
                    >
                        <div className="w-10 h-10 rounded-full bg-white flex items-center justify-center shadow-lg transform transition-transform hover:scale-105">
                            {isCurrent && isPlaying ? (
                                <Pause fill="black" className="text-black w-5 h-5" />
                            ) : (
                                <Play fill="black" className="text-black ml-1 w-5 h-5" />
                            )}
                        </div>
                    </div>
                )}
            </div>

            {/* Content */}
            <div className="flex-1 min-w-0 flex flex-col justify-between py-1">
                <div className="space-y-1">
                    <div className="flex items-center gap-2">
                        <h3 className={`font-bold text-lg truncate ${isCurrent ? 'text-pink-600 dark:text-pink-500' : 'text-zinc-900 dark:text-white'}`}>
                            {song.title || (song.isGenerating ? (song.queuePosition ? "Queued..." : "Creating...") : "Untitled")}
                        </h3>
                        <span className="inline-flex items-center justify-center text-[9px] font-bold text-white bg-gradient-to-r from-pink-500 to-purple-500 px-1.5 py-0.5 rounded-sm shadow-sm">
                            v1.5
                        </span>
                        {song.isPublic === false && (
                            <Lock size={12} className="text-zinc-400 dark:text-zinc-500" />
                        )}
                    </div>
                    <div className="flex items-center gap-2">
                        <div
                            className="flex items-center gap-1.5 cursor-pointer hover:opacity-80 transition-opacity"
                            onClick={(e) => {
                                e.stopPropagation();
                                if (song.creator && onNavigateToProfile) {
                                    onNavigateToProfile(song.creator);
                                }
                            }}
                        >
                            <div className="w-4 h-4 rounded-full bg-purple-500 text-[8px] flex items-center justify-center font-bold text-white">
                                {(song.creator?.[0] || 'U').toUpperCase()}
                            </div>
                            <span className="text-xs font-medium text-zinc-500 dark:text-zinc-400 hover:text-zinc-700 dark:hover:text-zinc-200 transition-colors hover:underline">
                                {song.creator || 'Unknown'}
                            </span>
                        </div>
                    </div>
                    <p className="text-xs text-zinc-500 dark:text-zinc-500 line-clamp-2 pt-1 font-medium max-w-2xl">
                        {song.style}
                    </p>
                    {song.isGenerating && (
                        <div className="pt-2">
                            <div className="h-1 rounded-full bg-zinc-200/70 dark:bg-white/10 overflow-hidden">
                                <div
                                    className={`h-full bg-gradient-to-r from-pink-500 to-purple-600 transition-all ${song.progress === undefined ? 'opacity-40' : ''}`}
                                    style={{
                                        width: `${Math.min(
                                            100,
                                            Math.max(0, ((song.progress ?? 0) > 1 ? (song.progress ?? 0) / 100 : (song.progress ?? 0)) * 100)
                                        )}%`,
                                    }}
                                />
                            </div>
                        </div>
                    )}
                </div>

                {/* Actions Row - Hidden while generating */}
                {!song.isGenerating && (
                    <div className="flex items-center gap-1 pt-2">
                        <button
                            className={`flex items-center gap-1 px-3 py-1.5 rounded-full hover:bg-white/5 transition-colors ${isLiked ? 'text-pink-600 dark:text-pink-500 bg-pink-100 dark:bg-pink-500/10' : 'text-zinc-400 hover:text-black dark:hover:text-white'}`}
                            onClick={(e) => { e.stopPropagation(); onToggleLike(); }}
                        >
                            <ThumbsUp size={16} fill={isLiked ? "currentColor" : "none"} />
                            {(song.likeCount || 0) > 0 && (
                                <span className="text-xs font-bold">{song.likeCount}</span>
                            )}
                        </button>

                        <button
                            className="p-2 rounded-full hover:bg-zinc-200 dark:hover:bg-white/5 text-zinc-400 hover:text-black dark:hover:text-white transition-colors"
                            onClick={(e) => { e.stopPropagation(); }}
                        >
                            <ThumbsDown size={16} />
                        </button>

                        <button
                            className="p-2 rounded-full hover:bg-zinc-200 dark:hover:bg-white/5 text-zinc-400 hover:text-black dark:hover:text-white transition-colors"
                            onClick={(e) => { e.stopPropagation(); setShareModalOpen(true); }}
                            title="Share"
                        >
                            <Share2 size={16} />
                        </button>

                        <button
                            className="p-2 rounded-full hover:bg-zinc-200 dark:hover:bg-white/5 text-zinc-400 hover:text-black dark:hover:text-white transition-colors"
                            onClick={(e) => { e.stopPropagation(); if (onOpenVideo) onOpenVideo(); }}
                            title="Create Video"
                        >
                            <Video size={16} />
                        </button>

                        <button
                            className="p-2 rounded-full hover:bg-zinc-200 dark:hover:bg-white/5 text-zinc-400 hover:text-black dark:hover:text-white transition-colors ml-auto"
                            onClick={(e) => { e.stopPropagation(); onAddToPlaylist(); }}
                            title="Add to Playlist"
                        >
                            <ListPlus size={16} />
                        </button>

                        {/* Info Button - Visible only on small/medium screens where sidebar is hidden */}
                        <button
                            className="p-2 rounded-full hover:bg-zinc-200 dark:hover:bg-white/5 text-zinc-400 hover:text-black dark:hover:text-white transition-colors xl:hidden"
                            onClick={(e) => { e.stopPropagation(); if (onShowDetails) onShowDetails(); }}
                            title="Song Details"
                        >
                            <Info size={16} />
                        </button>

                        <div className="relative">
                            <button
                                className="p-2 rounded-full hover:bg-zinc-200 dark:hover:bg-white/5 text-zinc-400 hover:text-black dark:hover:text-white transition-colors"
                                onClick={(e) => {
                                    e.stopPropagation();
                                    setShowDropdown(!showDropdown);
                                }}
                            >
                                <MoreHorizontal size={16} />
                            </button>
                            <SongDropdownMenu
                                song={song}
                                isOpen={showDropdown}
                                onClose={() => setShowDropdown(false)}
                                isOwner={isOwner}
                                onCreateVideo={() => onOpenVideo?.(song)}
                                onReusePrompt={() => onReusePrompt?.(song)}
                                onAddToPlaylist={() => onAddToPlaylist?.(song)}
                                onDelete={() => onDelete?.(song)}
                                onShare={() => setShareModalOpen(true)}
                                onUseAsReference={() => onUseAsReference?.()}
                                onCoverSong={() => onCoverSong?.()}
                            />
                        </div>
                    </div>
                )}
            </div>

            {/* Timestamp */}
            <div className="text-xs font-mono text-zinc-500 dark:text-zinc-600 self-start pt-1">
                {song.isGenerating ? (
                    <span className={song.queuePosition ? 'text-amber-500' : 'text-pink-500'}>
                        {song.queuePosition ? `#${song.queuePosition}` : 'Creating...'}
                    </span>
                ) : song.duration}
            </div>
        </div>

        <ShareModal
            isOpen={shareModalOpen}
            onClose={() => setShareModalOpen(false)}
            song={song}
        />
        </>
    );
};

const UploadItem: React.FC<{
    track: { id: string; filename: string; audio_url: string; duration?: number | null };
    onPlay: (audioUrl: string, title: string) => void;
}> = ({ track, onPlay }) => {
    const title = track.filename.replace(/\.[^/.]+$/, '');
    const duration = track.duration
        ? `${Math.floor(track.duration / 60)}:${String(Math.floor(track.duration % 60)).padStart(2, '0')}`
        : '--:--';

    return (
        <div
            className="group flex items-center gap-4 p-2 rounded-lg hover:bg-zinc-100 dark:hover:bg-[#18181b] transition-all cursor-grab active:cursor-grabbing border border-transparent"
            draggable
            onDragStart={(e) => {
                e.dataTransfer.effectAllowed = 'copy';
                e.dataTransfer.setData('application/x-ace-audio', JSON.stringify({
                    url: track.audio_url,
                    title,
                    source: 'upload',
                }));
            }}
        >
            <div className="relative w-16 h-16 flex-shrink-0 rounded-md bg-zinc-200 dark:bg-zinc-800 overflow-hidden shadow-sm">
                <AlbumCover seed={track.id || title} size="full" className="w-full h-full opacity-40" />
                <div
                    className="absolute inset-0 bg-black/40 flex items-center justify-center cursor-pointer transition-opacity"
                    onClick={(e) => {
                        e.stopPropagation();
                        onPlay(track.audio_url, title);
                    }}
                >
                    <div className="w-9 h-9 rounded-full bg-white flex items-center justify-center shadow-lg">
                        <Play fill="black" className="text-black ml-0.5 w-4 h-4" />
                    </div>
                </div>
            </div>

            <div className="flex-1 min-w-0">
                <div className="text-sm font-bold text-zinc-900 dark:text-white truncate">
                    {title}
                </div>
                <div className="text-[11px] text-zinc-400 mt-1">Upload</div>
            </div>

            <div className="text-xs font-mono text-zinc-500 dark:text-zinc-600 self-start pt-1">
                {duration}
            </div>
        </div>
    );
};