<script lang="ts">
	import {
		ExternalLink,
		ListPlus,
		PlayIcon,
		SkipForward,
		Trash2,
	} from "@lucide/svelte";
	import {
		addToQueue,
		hasTrack,
		play,
		playNext,
		removeTrack,
	} from "$lib/player/player.svelte";
	import { type SongType, trackFromSongRow } from "$lib/player/types";
	import { Button } from "./ui/button";

	type SongEntryProps = {
		annSongId: number;
		animeName: string;
		type: SongType;
		number: number;
		songName: string;
		artistName: string | null;
		fileName?: string | null;
		globalPercent: number | null;
	};

	let {
		annSongId,
		animeName,
		type,
		number,
		songName,
		artistName,
		fileName = null,
		globalPercent,
	}: SongEntryProps = $props();

	const typeLabelMap: Record<number, string> = {
		1: "OP",
		2: "ED",
		3: "INS",
	};

	const typeLabel = $derived(typeLabelMap[type] ?? `T${type}`);
	const displayTypeNumber = $derived(`${typeLabel}${number || ""}`);

	const artistDisplay = $derived.by(
		() => artistName?.trim() || "Unknown Artist",
	);

	const track = $derived(
		trackFromSongRow({
			annSongId,
			animeName,
			type,
			number,
			songName,
			artistName,
			fileName,
		}),
	);

	const isQueued = $derived(hasTrack(annSongId));

	function requestGlobalAutoplay() {
		if (typeof window === "undefined") return;
		window.dispatchEvent(new CustomEvent("amqtrain:player:autoplay"));
	}
</script>

<div class="rounded border flex flex-wrap items-center gap-2 px-3 py-2">
	{#if !fileName}
		<button disabled class="btn-icon opacity-50">
			<ExternalLink class="icon-btn bg-muted" />
		</button>
	{:else}
		<a
			aria-disabled={!fileName}
			type="button"
			target="_blank"
			rel="noopener noreferrer"
			class="btn-icon"
			href={`https://nawdist.animemusicquiz.com/${fileName}`}
		>
			<ExternalLink class="icon-btn" />
		</a>
	{/if}
	<div class="flex flex-col">
		<div class="flex flex-wrap w-fit items-baseline gap-x-2 gap-y-1">
			{animeName}
			<span class="rounded bg-muted px-2 py-0.5 text-sm text-muted-foreground"
				>{displayTypeNumber}</span
			>
			<span class=" text-muted-foreground">
				{globalPercent}%
			</span>
		</div>

		<div class="mt-1 w-fit text-foreground/80">
			{songName}
			<span class="text-sm text-muted-foreground">— {artistDisplay}</span>
		</div>
	</div>

	{#if !track}
		<span class="text-xs text-muted-foreground ml-auto">No audio file</span>
	{:else}<div class="mt-2 flex items-center ml-auto gap-2">
			{#if isQueued}
				<span class="text-xs text-muted-foreground">Queued</span>
				<button
					type="button"
					class="btn-icon"
					title="Remove from queue"
					aria-label="Remove from queue"
					onclick={() => removeTrack(annSongId)}
				>
					<Trash2 class="icon-btn" />
				</button>
			{/if}
			<button
				type="button"
				class="btn-icon"
				disabled={!track}
				title="Play"
				aria-label="Play"
				onclick={() => {
					if (!track) return;
					play(track);
					requestGlobalAutoplay();
				}}
			>
				<PlayIcon class="icon-btn" />
			</button>

			<button
				type="button"
				class="btn-icon"
				disabled={!track}
				title="Play next"
				aria-label="Play next"
				onclick={() => {
					if (!track) return;
					playNext(track);
					requestGlobalAutoplay();
				}}
			>
				<SkipForward class="icon-btn" />
			</button>

			<button
				type="button"
				class="btn-icon"
				disabled={!track}
				title="Add to queue"
				aria-label="Add to queue"
				onclick={() => {
					if (!track) return;
					addToQueue(track);
				}}
			>
				<ListPlus class="icon-btn" />
			</button>
		</div>
	{/if}
</div>
