<script module lang="ts">
	import type { Track } from "$lib/player/types";

	export type GlobalPlayerNowPlaying = Track | null;

	export type QueueDisplayItem = {
		track: Track;
		queueIndex: number;
		isCurrent: boolean;
	};

	export type TrackLabel = {
		primary: string;
		secondary: string | null;
	};
</script>

<script lang="ts">
	import { browser } from "$app/environment";
	import { onDestroy, onMount } from "svelte";
	import {
		jumpToTrack,
		next,
		nowPlayingLabel,
		prev,
		removeTrack,
		schedulePersistNow,
		setUiOpen,
		setVolume,
		subscribe,
		toggleShuffle,
		toggleUiOpen,
		toggleWrap,
		type PlayerSnapshot,
	} from "$lib/player/player.svelte";
	import { createMediaSessionBindings } from "$lib/player/media-session";

	let audioEl: HTMLAudioElement | null = null;

	// Best-effort preload of the upcoming track's URL
	let nextPreloadHref = $state<string | null>(null);

	// Dedicated preloader element to warm the connection / decode pipeline a bit
	let preloadEl = $state<HTMLAudioElement | null>(null);

	let isPlaying = $state(false);
	let currentTime = $state(0);
	let duration = $state(0);

	// local UI derived from viewport; not persisted
	let isMobile = $state(false);

	// IMPORTANT: Do not read `window` during SSR. Start with a safe snapshot and let
	// the player module + subscription populate the real values on mount.
	let snap = $state<PlayerSnapshot>({
		queue: [],
		currentIndex: null,
		currentTrack: null,
		shuffleEnabled: false,
		wrapEnabled: false,
		order: [],
		history: [],
		cursor: 0,
		volume: 1,
		uiOpen: false,
	});

	let unsubscribe: (() => void) | null = null;

	function updateIsMobile() {
		if (!browser) return;
		isMobile = window.matchMedia?.("(max-width: 1023px)")?.matches ?? false;
	}

	// Media Session bindings
	const media = createMediaSessionBindings({
		play: () => void audioEl?.play(),
		pause: () => audioEl?.pause(),
		next: () => {
			next();
			void syncAndAutoplay();
		},
		prev: () => {
			prev(currentTime);
			void syncAndAutoplay();
		},
		seekTo: (t) => {
			if (!audioEl) return;
			audioEl.currentTime = Math.max(0, t);
		},
		seekBy: (d) => {
			if (!audioEl) return;
			audioEl.currentTime = Math.max(0, audioEl.currentTime + d);
		},
	});

	function syncAudioToCurrentTrack() {
		if (!audioEl) return;

		const track = snap.currentTrack;
		if (!track) return;

		const desired = track.src;
		const desiredAbs = new URL(desired, window.location.href).href;

		if (audioEl.currentSrc !== desiredAbs) {
			audioEl.src = desired;
			audioEl.load();
			audioEl.currentTime = 0;
		}

		audioEl.volume = snap.volume;
	}

	function computeNextTrackToPreload(): Track | null {
		// Prefer to preload the "linear next" item. For shuffle mode, we can still
		// best-effort preload the first item in the upcoming order.
		if (snap.queue.length === 0) return null;

		if (snap.shuffleEnabled) {
			const nextIdx = snap.order[0];
			if (typeof nextIdx === "number") return snap.queue[nextIdx] ?? null;
			return null;
		}

		if (snap.currentIndex == null) return snap.queue[0] ?? null;
		const nextIdx = snap.currentIndex + 1;
		return nextIdx >= 0 && nextIdx < snap.queue.length
			? snap.queue[nextIdx]
			: null;
	}

	function updatePreloadTargets() {
		const nextTrack = computeNextTrackToPreload();
		nextPreloadHref = nextTrack?.src ?? null;

		// Also warm via an offscreen <audio> element. This may or may not help depending
		// on browser caching policies, but it's safe and often reduces first-buffer delay.
		if (!preloadEl) return;

		if (nextTrack?.src) {
			preloadEl.src = nextTrack.src;
			preloadEl.load();
		} else {
			preloadEl.removeAttribute("src");
			preloadEl.load();
		}
	}

	async function waitForEvent(el: HTMLMediaElement, eventName: string) {
		await new Promise<void>((resolve) => {
			const onEvent = () => {
				el.removeEventListener(eventName, onEvent);
				resolve();
			};
			el.addEventListener(eventName, onEvent, { once: true });
		});
	}

	async function syncAndAutoplay() {
		const el = audioEl;
		if (!el) return;

		// Capture current src BEFORE syncing so we can detect changes reliably.
		const beforeSrc = el.currentSrc;

		syncAudioToCurrentTrack();

		const afterSrc = el.currentSrc;

		if (afterSrc !== beforeSrc) {
			if (el.readyState < 1) {
				await waitForEvent(el, "loadedmetadata");
			}
			if (el.readyState < 3) {
				await waitForEvent(el, "canplay");
			}
		} else {
			await Promise.resolve();
		}

		try {
			await el.play();
		} catch {
			// Autoplay may be blocked; bail out quietly.
			return;
		}

		if (el.paused) {
			if (el.readyState < 3) {
				await waitForEvent(el, "canplay");
			}
			await Promise.race([waitForEvent(el, "playing"), Promise.resolve()]);
			try {
				await el.play();
			} catch {
				// ignore
			}
		}
	}

	function onAudioPlay() {
		isPlaying = true;
		media.setPlaybackState("playing");
	}
	function onAudioPause() {
		isPlaying = false;
		media.setPlaybackState("paused");
	}
	function onAudioTimeUpdate() {
		if (!audioEl) return;
		currentTime = audioEl.currentTime || 0;
		media.updatePositionState({
			duration,
			position: currentTime,
			playbackRate: audioEl.playbackRate || 1,
		});
	}
	function onAudioLoadedMetadata() {
		if (!audioEl) return;
		duration = Number.isFinite(audioEl.duration) ? audioEl.duration : 0;
		media.updatePositionState({
			duration,
			position: currentTime,
			playbackRate: audioEl.playbackRate || 1,
		});
	}
	function onAudioEnded() {
		next();
		void syncAndAutoplay();
	}

	function formatTime(seconds: number) {
		if (!Number.isFinite(seconds) || seconds < 0) return "0:00";
		const s = Math.floor(seconds);
		const m = Math.floor(s / 60);
		const r = s % 60;
		return `${m}:${String(r).padStart(2, "0")}`;
	}

	function typeNumberLabel(t: Track) {
		const type = t.type;
		const n = Number(t.number ?? 0);

		let typeLabel: string | null = null;
		if (typeof type === "number") {
			if (type === 1) typeLabel = "OP";
			else if (type === 2) typeLabel = "ED";
			else if (type === 3) typeLabel = "INS";
			else typeLabel = `T${type}`;
		}

		if (!typeLabel) return null;
		return `${typeLabel}${n ? String(n) : ""}`;
	}

	function trackLabel(t: Track): TrackLabel {
		const title = (t.title ?? "").trim() || "Unknown title";
		const artist = (t.artist ?? "").trim() || "Unknown Artist";
		const primary = `${title} — ${artist}`;

		const anime = (t.animeName ?? t.album ?? "").trim();
		const typeNo = typeNumberLabel(t);

		const secondary = [anime, typeNo].filter(Boolean).join(" • ") || null;

		return { primary, secondary };
	}

	function computeQueueDisplay(): QueueDisplayItem[] {
		const q = snap.queue;

		if (q.length === 0) return [];

		const current = snap.currentIndex;

		// Non-shuffle: display stable queue order.
		if (!snap.shuffleEnabled) {
			return q.map((track, queueIndex) => ({
				track,
				queueIndex,
				isCurrent: current === queueIndex,
			}));
		}

		// Shuffle: display play order (history up to cursor + future order).
		// This prevents the UI's "current position" from appearing to jump around.
		//
		// Invariants we try to preserve:
		// - Past (history[0..cursor]) stays in the same order.
		// - Current item is history[cursor] when available, otherwise currentIndex.
		// - Future comes from `order` (already excludes visited indices).
		const out: QueueDisplayItem[] = [];
		const seen = new Set<number>();

		const pushIndex = (queueIndex: number) => {
			if (!Number.isInteger(queueIndex)) return;
			if (queueIndex < 0 || queueIndex >= q.length) return;
			if (seen.has(queueIndex)) return;
			seen.add(queueIndex);

			out.push({
				track: q[queueIndex]!,
				queueIndex,
				isCurrent: current === queueIndex,
			});
		};

		// Past + current
		const hist = snap.history;
		const cursor = snap.cursor;

		for (let i = 0; i < hist.length; i += 1) {
			// Only show "past" up through current cursor; the rest would be "future via history"
			// and is confusing to duplicate (future is represented by `order`).
			if (i > cursor) break;
			pushIndex(hist[i]!);
		}

		// If history is empty or cursor doesn't match currentIndex, ensure currentIndex is shown.
		if (current != null) pushIndex(current);

		// Future
		for (const i of snap.order) pushIndex(i);

		// Any remaining items (not yet visited nor scheduled) go at the end (rare but possible after edits).
		for (let i = 0; i < q.length; i += 1) pushIndex(i);

		return out;
	}

	const queueDisplay = $derived(computeQueueDisplay());

	const canPrev = $derived(
		snap.queue.length > 0 &&
			snap.currentIndex != null &&
			(snap.wrapEnabled || snap.currentIndex > 0 || snap.shuffleEnabled),
	);
	const canNext = $derived(
		snap.queue.length > 0 &&
			(snap.wrapEnabled ||
				(snap.currentIndex != null &&
					snap.currentIndex < snap.queue.length - 1) ||
				snap.shuffleEnabled),
	);

	const uiVisible = $derived(isMobile ? snap.uiOpen : true);

	$effect(() => {
		media.setTrack(snap.currentTrack);
		schedulePersistNow();

		// Keep preload targets updated as the queue/traversal state changes
		updatePreloadTargets();

		if (!audioEl) return;

		audioEl.volume = snap.volume;
		syncAudioToCurrentTrack();
	});

	onMount(() => {
		updateIsMobile();
		if (browser) {
			window.addEventListener("resize", updateIsMobile);
		}

		// Create the offscreen preloader audio element in the browser
		if (browser) {
			preloadEl = new Audio();
			preloadEl.preload = "auto";
			preloadEl.muted = true;
		}

		// Subscribe to player changes instead of polling
		unsubscribe = subscribe((s) => {
			snap = s;
		});

		// Listen for play requests dispatched from anywhere (e.g. SongEntry buttons).
		// This ensures "Play" behaves like Next/Prev: it will reliably sync the new
		// source and start playback.
		if (browser) {
			const onAutoplayRequest = () => {
				void syncAndAutoplay();
			};
			window.addEventListener("amqtrain:player:autoplay", onAutoplayRequest);

			return () => {
				window.removeEventListener(
					"amqtrain:player:autoplay",
					onAutoplayRequest,
				);
			};
		}

		media.setPlaybackState("paused");
	});

	onDestroy(() => {
		if (browser) {
			window.removeEventListener("resize", updateIsMobile);
		}
		if (unsubscribe) unsubscribe();
		media.destroy();
	});
</script>

<svelte:head>
	<!-- Preload the next track (best-effort). We set this href reactively below. -->
	{#if nextPreloadHref}
		<link rel="preload" as="audio" href={nextPreloadHref} />
	{/if}
</svelte:head>

{#if isMobile}
	<!-- Mobile: mini bar + expandable drawer -->
	<div
		class="fixed bottom-0 left-0 right-0 z-50 border-t bg-background/95 backdrop-blur"
	>
		<div class="mx-auto flex max-w-4xl items-center gap-2 px-3 py-2">
			<button
				class="rounded border px-2 py-1 text-sm"
				type="button"
				onclick={() => toggleUiOpen()}
				aria-label={snap.uiOpen ? "Close player" : "Open player"}
			>
				{snap.uiOpen ? "Close" : "Player"}
			</button>

			<div class="min-w-0 flex-1">
				<div class="truncate text-sm font-medium">
					{#if snap.currentTrack}
						{trackLabel(snap.currentTrack).primary}
					{:else}
						{nowPlayingLabel()}
					{/if}
				</div>
				{#if snap.currentTrack && trackLabel(snap.currentTrack).secondary}
					<div class="truncate text-xs text-muted-foreground">
						{trackLabel(snap.currentTrack).secondary}
					</div>
				{/if}
				<div class="text-xs text-muted-foreground">
					{formatTime(currentTime)} / {formatTime(duration)}
				</div>
			</div>

			<button
				class="rounded border px-2 py-1 text-sm"
				type="button"
				disabled={!canPrev}
				onclick={() => {
					prev(currentTime);
					void syncAndAutoplay();
				}}
			>
				Prev
			</button>

			<button
				class="rounded border px-2 py-1 text-sm"
				type="button"
				onclick={() => {
					if (!audioEl) return;
					if (audioEl.paused) void audioEl.play();
					else audioEl.pause();
				}}
				disabled={!snap.currentTrack}
			>
				{isPlaying ? "Pause" : "Play"}
			</button>

			<button
				class="rounded border px-2 py-1 text-sm"
				type="button"
				disabled={!canNext}
				onclick={() => {
					next();
					void syncAndAutoplay();
				}}
			>
				Next
			</button>
		</div>

		{#if snap.uiOpen}
			<div class="border-t px-3 py-3">
				<div class="mx-auto max-w-4xl space-y-3">
					<div class="flex flex-wrap items-center gap-2">
						<button
							class="rounded border px-2 py-1 text-sm"
							type="button"
							onclick={() => toggleShuffle()}
						>
							Shuffle: {snap.shuffleEnabled ? "On" : "Off"}
						</button>
						<button
							class="rounded border px-2 py-1 text-sm"
							type="button"
							onclick={() => toggleWrap()}
						>
							Wrap: {snap.wrapEnabled ? "On" : "Off"}
						</button>

						<label class="ml-auto flex items-center gap-2 text-sm">
							<span class="text-muted-foreground">Vol</span>
							<input
								type="range"
								min="0"
								max="1"
								step="0.01"
								value={snap.volume}
								oninput={(e) =>
									setVolume(
										Number((e.currentTarget as HTMLInputElement).value),
									)}
							/>
						</label>
					</div>

					<div class="space-y-1">
						<div class="text-sm font-semibold">Queue ({snap.queue.length})</div>

						{#if snap.queue.length === 0}
							<p class="text-sm text-muted-foreground">Queue is empty.</p>
						{:else}
							<ul class="max-h-64 overflow-auto rounded border">
								{#each queueDisplay as item (item.track.id)}
									<li
										class="flex items-center gap-2 border-b px-2 py-2 last:border-b-0"
									>
										<button
											class="min-w-0 flex-1 truncate text-left text-sm hover:underline"
											type="button"
											onclick={() => {
												jumpToTrack(item.track.id);
												void syncAndAutoplay();
											}}
										>
											{#if item.isCurrent}
												<span class="text-muted-foreground">▶ </span>
											{/if}
											<div class="min-w-0 flex-1">
												<div class="truncate text-left text-sm">
													{trackLabel(item.track).primary}
												</div>
												{#if trackLabel(item.track).secondary}
													<div
														class="truncate text-left text-xs text-muted-foreground"
													>
														{trackLabel(item.track).secondary}
													</div>
												{/if}
											</div>
										</button>

										<button
											class="rounded border px-2 py-1 text-xs"
											type="button"
											onclick={() => removeTrack(item.track.id)}
										>
											Remove
										</button>
									</li>
								{/each}
							</ul>
						{/if}
					</div>
				</div>
			</div>
		{/if}
	</div>
{:else}
	<!-- Desktop: sticky, in-flow sidebar (sticks vertically, flows horizontally in the layout column) -->
	<aside class="sticky top-4 h-[calc(100dvh-2rem)] overflow-auto bg-background">
		<div class="flex items-center gap-2 border-b px-3 py-3">
			<div class="min-w-0 flex-1">
				<div class="truncate text-sm font-semibold">Player</div>
				<div class="truncate text-xs text-muted-foreground">
					{#if snap.currentTrack}
						{trackLabel(snap.currentTrack).primary}
					{:else}
						{nowPlayingLabel()}
					{/if}
				</div>
			</div>

			<button
				class="rounded border px-2 py-1 text-sm"
				type="button"
				onclick={() => toggleUiOpen()}
				aria-label={snap.uiOpen ? "Hide player sidebar" : "Show player sidebar"}
			>
				{snap.uiOpen ? "Hide" : "Show"}
			</button>
		</div>

		{#if snap.uiOpen}
			<div class="flex h-[calc(100dvh-49px)] flex-col">
				<div class="space-y-2 px-3 py-3">
					<div class="flex items-center justify-between gap-2">
						<div class="text-xs text-muted-foreground">
							{formatTime(currentTime)} / {formatTime(duration)}
						</div>
						<div class="flex items-center gap-2">
							<button
								class="rounded border px-2 py-1 text-sm"
								type="button"
								onclick={() => toggleShuffle()}
							>
								Shuffle: {snap.shuffleEnabled ? "On" : "Off"}
							</button>
							<button
								class="rounded border px-2 py-1 text-sm"
								type="button"
								onclick={() => toggleWrap()}
							>
								Wrap: {snap.wrapEnabled ? "On" : "Off"}
							</button>
						</div>
					</div>

					<div class="flex items-center gap-2">
						<button
							class="rounded border px-2 py-1 text-sm"
							type="button"
							disabled={!canPrev}
							onclick={() => {
								prev(currentTime);
								void syncAndAutoplay();
							}}
						>
							Prev
						</button>

						<button
							class="rounded border px-2 py-1 text-sm"
							type="button"
							onclick={() => {
								if (!audioEl) return;
								if (audioEl.paused) void audioEl.play();
								else audioEl.pause();
							}}
							disabled={!snap.currentTrack}
						>
							{isPlaying ? "Pause" : "Play"}
						</button>

						<button
							class="rounded border px-2 py-1 text-sm"
							type="button"
							disabled={!canNext}
							onclick={() => {
								next();
								void syncAndAutoplay();
							}}
						>
							Next
						</button>

						<label class="ml-auto flex items-center gap-2 text-sm">
							<span class="text-muted-foreground">Vol</span>
							<input
								type="range"
								min="0"
								max="1"
								step="0.01"
								value={snap.volume}
								oninput={(e) =>
									setVolume(
										Number((e.currentTarget as HTMLInputElement).value),
									)}
							/>
						</label>
					</div>

					<div class="border-t pt-2">
						<div class="text-sm font-semibold">Queue ({snap.queue.length})</div>
					</div>
				</div>

				<div class="min-h-0 flex-1 overflow-auto px-3 pb-3">
					{#if snap.queue.length === 0}
						<p class="text-sm text-muted-foreground">Queue is empty.</p>
					{:else}
						<ul class="rounded border">
							{#each queueDisplay as item (item.track.id)}
								<li
									class="flex items-center gap-2 border-b px-2 py-2 last:border-b-0"
								>
									<button
										class="min-w-0 flex-1 truncate text-left text-sm hover:underline"
										type="button"
										onclick={() => {
											jumpToTrack(item.track.id);
											void syncAndAutoplay();
										}}
									>
										{#if item.isCurrent}
											<span class="text-muted-foreground">▶ </span>
										{/if}
										<div class="min-w-0 flex-1">
											<div class="truncate text-left text-sm">
												{trackLabel(item.track).primary}
											</div>
											{#if trackLabel(item.track).secondary}
												<div
													class="truncate text-left text-xs text-muted-foreground"
												>
													{trackLabel(item.track).secondary}
												</div>
											{/if}
										</div>
									</button>

									<button
										class="rounded border px-2 py-1 text-xs"
										type="button"
										onclick={() => removeTrack(item.track.id)}
									>
										Remove
									</button>
								</li>
							{/each}
						</ul>
					{/if}
				</div>
			</div>
		{/if}
	</aside>
{/if}

<!-- Single global audio element (hidden but functional) -->
<audio
	bind:this={audioEl}
	class="hidden"
	preload="metadata"
	onplay={onAudioPlay}
	onpause={onAudioPause}
	ontimeupdate={onAudioTimeUpdate}
	onloadedmetadata={onAudioLoadedMetadata}
	onended={onAudioEnded}
></audio>
