<script lang="ts">
	import { Play, X } from "@lucide/svelte";
	import { Button } from "$lib/components/ui/button";
	import { player } from "$lib/player/store.svelte";
	import type { Track } from "$lib/player/types";

	function onRemove(id: number) {
		player.remove(id);
	}

	function onJump(track: Track) {
		player.playNext(track);
		// Wait, jump usually means play immediately?
		// "Jump to track" -> set as current.
		// If it's in the queue, we can just set currentId.
		player.playId(track.id);
	}
</script>

<div
    class="flex flex-col h-full w-full bg-background/50 backdrop-blur rounded-lg border overflow-hidden"
>
    <div
        class="px-4 py-3 border-b flex justify-between items-center bg-muted/20"
    >
        <h3 class="font-semibold text-sm">Up Next</h3>
        <Button
            variant="ghost"
            size="sm"
            class="h-6 w-6 p-0"
            onclick={() => player.clearQueue()}
        >
            <span class="sr-only">Clear</span>
            <X class="h-3 w-3" />
        </Button>
    </div>

    <div class="flex-1 overflow-y-auto p-2 space-y-1">
        {#if player.displayQueue.length === 0}
            <div class="text-center py-8 text-muted-foreground text-sm">
                Queue is empty
            </div>
        {:else}
            {#each player.displayQueue as track (track.id)}
                <div
                    role="button"
                    tabindex="0"
                    onclick={() => onJump(track)}
                    onkeydown={(e) => e.key === "Enter" && onJump(track)}
                    class="group flex items-center gap-2 px-3 py-2 rounded-md hover:bg-muted/50 transition-colors cursor-pointer text-sm"
                    class:active={player.currentId === track.id}
                >
                    <div
                        class="w-8 flex-shrink-0 text-center text-xs text-muted-foreground/60 font-mono"
                    >
                        {#if player.currentId === track.id}
                            <div
                                class="w-2 h-2 bg-primary rounded-full mx-auto animate-pulse"
                            ></div>
                        {:else}
                            <span class="group-hover:hidden">#</span>
                            <Play
                                class="hidden group-hover:block mx-auto h-3 w-3 text-muted-foreground"
                            />
                        {/if}
                    </div>

                    <div class="flex-1 min-w-0">
                        <div
                            class="font-medium truncate"
                            class:text-primary={player.currentId === track.id}
                        >
                            {track.title}
                        </div>
                        <div class="text-xs text-muted-foreground truncate">
                            {track.artist}
                        </div>
                    </div>

                    <Button
                        variant="ghost"
                        size="icon"
                        class="h-6 w-6 opacity-0 group-hover:opacity-100 transition-opacity"
                        onclick={(e) => {
                            e.stopPropagation();
                            onRemove(track.id);
                        }}
                    >
                        <X class="h-3 w-3" />
                    </Button>
                </div>
            {/each}
        {/if}
    </div>
</div>

<style>
    @reference "../../../routes/layout.css";
    .active {
        @apply bg-muted/40;
    }
</style>
