import { usePlayerStore } from '@/features/player/store/playerStore';
import { Button } from '@/components/ui/button';
import { ScrollArea } from '@/components/ui/scroll-area';
import { X, Trash2, MoveUp, MoveDown } from 'lucide-react';

interface QueuePanelProps {
  onClose: () => void;
}

export function QueuePanel({ onClose }: QueuePanelProps) {
  const { queue, currentIndex, removeFromQueue, reorderQueue } =
    usePlayerStore();

  return (
    <div className="fixed bottom-16 right-4 w-96 bg-background border border-border rounded-lg shadow-lg z-40 max-h-[400px] flex flex-col">
      <div className="p-4 border-b border-border flex items-center justify-between">
        <h3 className="font-semibold">Queue</h3>
        <Button variant="ghost" size="icon" onClick={onClose}>
          <X className="h-4 w-4" />
        </Button>
      </div>

      <ScrollArea className="flex-1 p-4">
        {queue.length === 0 ? (
          <p className="text-sm text-muted-foreground text-center py-8">
            Queue is empty
          </p>
        ) : (
          <div className="space-y-2">
            {queue.map((track, index) => (
              <div
                key={`${track.id}-${index}`}
                className={`flex items-center gap-3 p-2 rounded hover:bg-accent ${
                  index === currentIndex ? 'bg-accent' : ''
                }`}
              >
                <div className="flex-1 min-w-0">
                  <p className="text-sm font-medium truncate">
                    {index === currentIndex && '▶ '}
                    {track.title}
                  </p>
                  <p className="text-xs text-muted-foreground truncate">
                    {track.artist}
                  </p>
                </div>

                <div className="flex items-center gap-1">
                  {index > 0 && (
                    <Button
                      variant="ghost"
                      size="icon"
                      onClick={() => reorderQueue(index, index - 1)}
                    >
                      <MoveUp className="h-4 w-4" />
                    </Button>
                  )}

                  {index < queue.length - 1 && (
                    <Button
                      variant="ghost"
                      size="icon"
                      onClick={() => reorderQueue(index, index + 1)}
                    >
                      <MoveDown className="h-4 w-4" />
                    </Button>
                  )}

                  <Button
                    variant="ghost"
                    size="icon"
                    onClick={() => removeFromQueue(index)}
                  >
                    <Trash2 className="h-4 w-4" />
                  </Button>
                </div>
              </div>
            ))}
          </div>
        )}
      </ScrollArea>
    </div>
  );
}
