<script lang="ts">
	import { reveal } from '$lib/actions/reveal';
	import LazyLoadingImg from './LazyLoadingImg.svelte';
	import type { CurrentlyReading, NowPlaying } from '$lib/types';

	let {
		currentlyReading,
		nowPlaying
	}: {
		currentlyReading: Promise<CurrentlyReading | null>;
		nowPlaying: Promise<NowPlaying | null>;
	} = $props();

	// Hide the album art and reveal the music-note fallback if Cover Art Archive
	// has no front cover for this release (the URL 404s).
	let coverArtFailed = $state(false);
</script>

<div id="freetime" class="mt-10 flex flex-col items-center justify-center md:mt-20" use:reveal>
	<div class="flex flex-col items-center justify-center">
		<h1 class="text-center font-urbanist text-2xl font-semibold md:text-5xl">Free Time</h1>
		<span class="text-md mt-2 px-2 text-center font-urbanist md:mt-4 md:px-5 md:text-xl">
			What I'm reading &amp; listening to right now
		</span>
	</div>
	<div class="container mt-10 grid gap-10 p-4 md:grid-cols-2">
		{#await currentlyReading}
			<div class="card bg-base-100 shadow-sm">
				<div class="card-body flex-row items-start gap-5">
					<div class="h-40 w-28 flex-none skeleton rounded-md"></div>
					<div class="flex flex-1 flex-col gap-3">
						<div class="h-5 w-24 skeleton"></div>
						<div class="h-6 w-3/4 skeleton"></div>
						<div class="h-4 w-1/2 skeleton"></div>
					</div>
				</div>
			</div>
		{:then currentlyReading}
			{#if currentlyReading}
				<div class="card bg-base-100 shadow-sm transition duration-300 hover:-translate-y-1">
					<div class="card-body flex-row items-start gap-5">
						{#if currentlyReading.cover}
							<LazyLoadingImg
								class="h-40 w-28 flex-none rounded-md shadow-sm"
								src={currentlyReading.cover}
								alt={currentlyReading.title}
							/>
						{/if}
						<div class="flex flex-col">
							<span class="badge font-urbanist badge-primary">Currently reading</span>
							<h2 class="mt-2 card-title font-urbanist text-2xl font-black">
								{currentlyReading.title}
							</h2>
							<p class="text-md font-urbanist font-medium opacity-60">
								{currentlyReading.authors}
							</p>
							<div class="mt-3 card-actions">
								<a
									class="btn font-urbanist btn-sm btn-primary"
									href={currentlyReading.bookUrl}
									target="_blank"
									rel="noopener noreferrer"
								>
									View
								</a>
							</div>
							<a class="mt-3 link font-urbanist text-sm link-accent" href="/history/books">
								Recent books →
							</a>
						</div>
					</div>
				</div>
			{/if}
		{/await}
		{#await nowPlaying}
			<div class="card bg-base-100 shadow-sm">
				<div class="card-body flex-row items-start gap-5">
					<div class="h-32 w-32 flex-none skeleton rounded-md"></div>
					<div class="flex flex-1 flex-col gap-3">
						<div class="h-5 w-24 skeleton"></div>
						<div class="h-6 w-3/4 skeleton"></div>
						<div class="h-4 w-1/2 skeleton"></div>
					</div>
				</div>
			</div>
		{:then nowPlaying}
			{#if nowPlaying}
				<div class="card bg-base-100 shadow-sm transition duration-300 hover:-translate-y-1">
					<div class="card-body flex-row items-start gap-5">
						{#if nowPlaying.coverArt && !coverArtFailed}
							<LazyLoadingImg
								class="h-32 w-32 flex-none rounded-md shadow-sm"
								src={nowPlaying.coverArt}
								alt={nowPlaying.releaseName ?? nowPlaying.trackName}
								onerror={() => (coverArtFailed = true)}
							/>
						{:else}
							<div
								class="flex h-32 w-32 flex-none items-center justify-center rounded-md bg-base-300"
							>
								<svg
									xmlns="http://www.w3.org/2000/svg"
									class="h-12 w-12 opacity-60"
									viewBox="0 0 24 24"
									fill="currentColor"
								>
									<path
										d="M12 3v10.55A4 4 0 1 0 14 17V7h4V3h-6zm-2 16a2 2 0 1 1 0-4 2 2 0 0 1 0 4z"
									/>
								</svg>
							</div>
						{/if}
						<div class="flex flex-col">
							<span class="badge font-urbanist badge-secondary">
								{nowPlaying.playedTime ? 'Last listened' : 'Now listening'}
							</span>
							<h2 class="mt-2 card-title font-urbanist text-2xl font-black">
								{nowPlaying.trackName}
							</h2>
							<p class="text-md font-urbanist font-medium opacity-60">{nowPlaying.artists}</p>
							{#if nowPlaying.releaseName}
								<p class="font-urbanist text-sm font-medium opacity-40">{nowPlaying.releaseName}</p>
							{/if}
							{#if nowPlaying.url}
								<div class="mt-3 card-actions">
									<a
										class="btn font-urbanist btn-sm btn-primary"
										href={nowPlaying.url}
										target="_blank"
										rel="noopener noreferrer"
									>
										Listen
									</a>
								</div>
							{/if}
							<a class="mt-3 link font-urbanist text-sm link-accent" href="/history/music">
								Recent music →
							</a>
						</div>
					</div>
				</div>
			{/if}
		{/await}
	</div>
</div>
