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

import { usePlayerStore } from '../store/playerStore';
import { useUIStore } from '@/stores/ui';
import { cn } from '@/lib/utils';
import { X, GripVertical, ListMusic, Sparkles } from 'lucide-react';
import { Badge } from '@/components/ui/badge';
import { ScrollArea } from '@/components/ui/scroll-area';
import { EmptyState } from '@/components/ui/empty-state';
import { useQuery } from '@tanstack/react-query';
import { useAuthStore } from '@/features/auth/store/authStore';
import { tracksApi } from '@/services/api/tracks';
import { getHLSMasterPlaylistURL } from '@/features/streaming/services/hlsService';
import type { Track as PlayerTrack } from '../types';
import type { Track as ApiTrack } from '@/features/tracks/types/track';

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

function mapApiTrackToPlayerTrack(t: ApiTrack): PlayerTrack {
  const apiTrack = t as ApiTrack & { stream_manifest_url?: string; cover_art_path?: string };
  return {
    id: t.id,
    title: t.title,
    artist: t.artist,
    duration: t.duration ?? 0,
    url: apiTrack.stream_manifest_url ?? getHLSMasterPlaylistURL(t.id),
    cover: apiTrack.cover_art_path,
    genre: t.genre,
    like_count: t.like_count,
  };
}

export function PlayerQueue({ isOpen, onClose, onPlay }: PlayerQueueProps) {
    const { queue, currentIndex, removeFromQueue, clearQueue } = usePlayerStore();
    const { sidebarOpen } = useUIStore();
    const isAuthenticated = useAuthStore((s) => s.isAuthenticated);
    const { data: recommendations = [], isLoading: recommendationsLoading } = useQuery({
        queryKey: ['track-recommendations'],
        queryFn: () => tracksApi.getRecommendations({ limit: 10 }),
        enabled: isOpen && isAuthenticated && queue.length === 0,
        staleTime: 60_000,
    });
    const playerTracks = recommendations.map(mapApiTrackToPlayerTrack);

    if (!isOpen) return null;

    return (
        <div
            className={cn(
                "fixed bottom-24 left-4 right-4 z-40 transition-all duration-[var(--sumi-duration-normal)] ease-[var(--sumi-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-foreground font-bold font-heading tracking-wide">Play Queue</h3>
                        <Badge variant="secondary" 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-foreground 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-foreground 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 gap-4 p-4">
                            {playerTracks.length > 0 ? (
                                <>
                                    <h4 className="text-sm font-medium text-muted-foreground flex items-center gap-2">
                                        <Sparkles className="w-4 h-4 text-primary" />
                                        À écouter ensuite
                                    </h4>
                                    <ScrollArea className="max-h-layout-list">
                                        <div className="space-y-1">
                                            {playerTracks.map((track) => (
                                                <div
                                                    key={track.id}
                                                    className="group flex items-center gap-3 p-2 rounded-lg hover:bg-white/5 transition-colors cursor-pointer border border-transparent hover:border-white/5"
                                                    onClick={() => onPlay(track)}
                                                >
                                                    <div className="w-6 text-center text-xs font-mono text-muted-foreground">—</div>
                                                    <div className="flex-1 min-w-0">
                                                        <h4 className="text-sm font-medium truncate text-foreground">{track.title}</h4>
                                                        <p className="text-xs text-muted-foreground truncate">{track.artist}</p>
                                                    </div>
                                                </div>
                                            ))}
                                        </div>
                                    </ScrollArea>
                                    <p className="text-xs text-muted-foreground">Cliquez pour lire</p>
                                </>
                            ) : recommendationsLoading ? (
                                <div className="flex items-center justify-center py-8 text-muted-foreground text-sm">Chargement des suggestions…</div>
                            ) : (
                                <EmptyState
                                    icon={<ListMusic className="w-full h-full" />}
                                    title="Your queue is empty"
                                    description="Add tracks to keep the vibe going."
                                    size="sm"
                                    className="border-0 shadow-none bg-transparent"
                                />
                            )}
                        </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-foreground group-hover:text-foreground"
                                                )}>
                                                    {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>
    );
}