<script lang="ts">
	import { resolve } from '$app/paths';
	import BookImage from './book-image.svelte';
	import GeneratedCover from './generated-cover.svelte';
	import { getLibraryState } from '$lib/state/library.svelte';
	import { getBookSelectionState } from '$lib/state/bookSelection.svelte';
	import type { Book } from '$lib/schema';

	let { book, class: className = '' }: { book: Book; class?: string } = $props();

	const selectionState = getBookSelectionState();
	const libraryState = getLibraryState();

	let darkened = $derived(selectionState.selectionModeActive);
	let selected = $derived(selectionState.isSelected(book.id));

	function handleClick(e: MouseEvent) {
		if (darkened) {
			e.preventDefault();
			selectionState.toggleSelection(book);
		}
	}
</script>

<div class="flex w-full flex-shrink-0 flex-col gap-1 {className}">
	<!-- Book Cover -->
	<a
		href={resolve('/(root)/(library)/book/[bookId]', { bookId: String(book.id) })}
		class="group relative aspect-9/12 w-full overflow-hidden rounded-sm shadow-lg drop-shadow-lg transition-all duration-200 {selected
			? 'ring-2 ring-star'
			: ''}"
		onclick={handleClick}
	>
		<!--
			Checked rather than left to the image's onerror: with no cover_image the
			src became "/api/undefined", 404'd, and fell back to the generic
			default_cover.jpg — which is what made every coverless book look alike in
			the grid.
		-->
		{#if book.cover_image}
			<BookImage
				src="/api/{book.cover_image}"
				class="h-full w-full rounded-sm object-cover transition-all duration-200 group-hover:brightness-50 {selected ||
				darkened
					? 'brightness-50'
					: ''}"
			/>
		{:else}
			<div
				class="h-full w-full transition-all duration-200 group-hover:brightness-50 {selected ||
				darkened
					? 'brightness-50'
					: ''}"
			>
				<GeneratedCover {book} />
			</div>
		{/if}

		<!-- Inside the anchor, which already clips to rounded-sm, so the bar
		     follows the cover's corners instead of floating below it -->
		{#if book.progress?.percentage && !selected && !darkened}
			<span class="absolute inset-x-0 bottom-0 h-1 bg-black/30">
				<span
					class="block h-full {book.progress.completed ? 'bg-success' : 'bg-flag'}"
					style="width: {Math.min(100, Math.round(book.progress.percentage * 100))}%;"
				></span>
			</span>
		{/if}
	</a>

	<!-- Book Title -->
	<a
		href={resolve('/(root)/(library)/book/[bookId]', { bookId: String(book.id) })}
		class="text-base-content mt-1 line-clamp-2 w-full font-serif text-sm hover:underline"
		>{book.title}</a
	>

	<!-- Authors list -->
	<p class="line-clamp-1 w-full text-xs text-muted-foreground">
		{#each book.authors as author (author.id)}
			<a
				href="{resolve('/(root)/(library)/library/[libraryId]/view', {
					libraryId: String(libraryState.activeLibrary?.id ?? '')
				})}?authors={author.id}"
				class="cs-list hover:underline">{author.name}</a
			> &thinsp;
		{/each}
	</p>
</div>
