veza/apps/web/src/features/player/components/PlayerQueue.tsx

import React from 'react';
import { usePlayerStore } from '../store/playerStore';
import { useUIStore } from '@/stores/ui';
import { cn } from '@/lib/utils';
import { X, GripVertical, AlertCircle } from 'lucide-react';
import { Badge } from '@/components/ui/badge';
import { ScrollArea } from '@/components/ui/scroll-area';

interface PlayerQueueProps {
    isOpen: boolean;
    onClose: () => void;
    currentTrackId?: string;
    onPlay: (track: any) => void;
}

export function PlayerQueue({ isOpen, onClose, currentTrackId, onPlay }: PlayerQueueProps) {
    const { queue, currentIndex, removeFromQueue, clearQueue } = usePlayerStore();
    const { sidebarOpen } = useUIStore();

    if (!isOpen) return null;

    return (
        <div
            className={cn(
                "fixed bottom-24 left-4 right-4 z-40 transition-all duration-[var(--duration-normal)] ease-[var(--ease-out)] transform",
                sidebarOpen ? "lg:left-main-expanded" : "lg:left-main-collapsed",
                "lg:right-4",
                isOpen ? "translate-y-0 opacity-100" : "translate-y-10 opacity-0 pointer-events-none"
            )}
        >
            <div className="max-w-4xl mx-auto bg-black/80 backdrop-blur-2xl border border-white/10 rounded-2xl shadow-2xl overflow-hidden max-h-layout-drawer flex flex-col">
                {/* Header */}
                <div className="flex items-center justify-between p-4 border-b border-white/5 bg-white/5">
                    <div className="flex items-center gap-2">
                        <h3 className="text-white font-bold font-display tracking-wide">Play Queue</h3>
                        <Badge variant="outline" className="border-primary/20 text-primary bg-primary/10">
                            {queue.length} Tracks
                        </Badge>
                    </div>
                    <div className="flex items-center gap-2">
                        <button
                            onClick={clearQueue}
                            className="px-3 py-1.5 text-xs text-muted-foreground hover:text-white hover:bg-white/10 rounded-md transition-colors duration-[var(--duration-fast)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:ring-offset-2 focus-visible:ring-offset-background"
                        >
                            Clear
                        </button>
                        <button
                            onClick={onClose}
                            className="p-1.5 text-muted-foreground hover:text-white hover:bg-white/10 rounded-full transition-colors duration-[var(--duration-fast)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:ring-offset-2 focus-visible:ring-offset-background"
                        >
                            <X className="w-5 h-5" />
                        </button>
                    </div>
                </div>

                {/* Content */}
                <div className="flex-1 overflow-hidden relative">
                    {queue.length === 0 ? (
                        <div className="flex flex-col items-center justify-center h-48 text-muted-foreground p-8 text-center">
                            <AlertCircle className="w-8 h-8 mb-3 opacity-20" />
                            <p>Your queue is empty.</p>
                            <p className="text-xs opacity-50 mt-1">Add tracks to keep the vibe going.</p>
                        </div>
                    ) : (
                        <ScrollArea className="h-full max-h-layout-list">
                            <div className="p-2 space-y-1">
                                {queue.map((track, index) => {
                                    const isCurrent = index === currentIndex;
                                    const isPast = index < currentIndex;

                                    return (
                                        <div
                                            key={`${track.id}-${index}`}
                                            className={cn(
                                                "group flex items-center gap-3 p-2 rounded-lg transition-all duration-[var(--duration-fast)] border border-transparent",
                                                isCurrent
                                                    ? "bg-primary/10 border-primary/20 shadow-queue-item-current"
                                                    : "hover:bg-white/5 hover:border-white/5",
                                                isPast && "opacity-50"
                                            )}
                                        >
                                            {/* Drag Handle (Simulated) */}
                                            <div className="text-white/20 group-hover:text-white/40 cursor-grab px-1">
                                                <GripVertical className="w-4 h-4" />
                                            </div>

                                            {/* Number/Status */}
                                            <div className="w-6 text-center text-xs font-mono text-muted-foreground">
                                                {isCurrent ? (
                                                    <div className="w-2 h-2 rounded-full bg-primary mx-auto animate-pulse shadow-queue-item-current" />
                                                ) : (
                                                    index + 1
                                                )}
                                            </div>

                                            {/* Info */}
                                            <div
                                                className="flex-1 min-w-0 cursor-pointer"
                                                onClick={() => !isCurrent && onPlay(track)}
                                            >
                                                <h4 className={cn(
                                                    "text-sm font-medium truncate transition-colors",
                                                    isCurrent ? "text-primary" : "text-white group-hover:text-white"
                                                )}>
                                                    {track.title}
                                                </h4>
                                                <p className="text-xs text-muted-foreground truncate opacity-70 group-hover:opacity-100">
                                                    {track.artist}
                                                </p>
                                            </div>

                                            {/* Actions */}
                                            <button
                                                onClick={(e) => {
                                                    e.stopPropagation();
                                                    removeFromQueue(index);
                                                }}
                                                className="opacity-0 group-hover:opacity-100 p-2 text-muted-foreground hover:text-destructive hover:bg-destructive/10 rounded-full transition-all duration-[var(--duration-fast)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:ring-offset-2 focus-visible:ring-offset-background"
                                            >
                                                <X className="w-3 h-3" />
                                            </button>
                                        </div>
                                    );
                                })}
                            </div>
                        </ScrollArea>
                    )}
                </div>
            </div>

            {/* Backdrop for explicit dismissal on mobile if needed */}
            <div
                className="fixed inset-0 bg-black/20 -z-10 backdrop-blur-sm md:hidden"
                onClick={onClose}
            />
        </div>
    );
}