<script lang="ts">
	import { goto } from '$app/navigation';
	import type { PageData } from './$types';
	import * as m from '$lib/paraglide/messages.js';

	let { data }: { data: PageData } = $props();

	const feed = $derived(data.feed);
</script>

<svelte:head>
	<title>{m.feed_page_title()}</title>
</svelte:head>

<!-- Header -->
<div class="mb-6">
	<h1 class="text-2xl font-bold text-(--color-text)">{m.feed_heading()}</h1>
	<p class="text-(--color-muted) text-sm mt-1">{m.feed_subheading()}</p>
</div>

{#if feed.length === 0}
	<!-- Empty state -->
	<div class="flex flex-col items-center justify-center py-24 gap-4 text-center">
		<div class="w-16 h-16 rounded-full bg-(--color-surface-2) flex items-center justify-center">
			<svg class="w-8 h-8 text-(--color-muted)" fill="none" stroke="currentColor" viewBox="0 0 24 24">
				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
					d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z" />
			</svg>
		</div>
		<div>
			<p class="text-lg font-semibold text-(--color-text)">{m.feed_empty_heading()}</p>
			<p class="text-sm text-(--color-muted) mt-1 max-w-xs">{m.feed_empty_body()}</p>
		</div>
		<div class="flex gap-3 mt-2">
			<a
				href="/catalogue"
				class="px-4 py-2 rounded bg-(--color-brand) text-(--color-surface) text-sm font-semibold hover:bg-(--color-brand-dim) transition-colors"
			>
				{m.feed_browse_cta()}
			</a>
			<a
				href="/catalogue"
				class="px-4 py-2 rounded bg-(--color-surface-2) border border-(--color-border) text-(--color-text) text-sm hover:border-zinc-500 transition-colors"
			>
				{m.feed_find_users_cta()}
			</a>
		</div>
	</div>
{:else}
	<!-- Feed grid -->
	<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
		{#each feed as item}
			{@const book = item.book}
			{@const genres = Array.isArray(book.genres) ? book.genres : (book.genres ? [book.genres] : [])}
			<!-- Use div + onclick to avoid nested <a> with the username link inside -->
			<div
				role="link"
				tabindex="0"
				onclick={() => goto(`/books/${book.slug}`)}
				onkeydown={(e) => { if (e.key === 'Enter') goto(`/books/${book.slug}`); }}
				class="group flex gap-3 bg-(--color-surface-2) border border-(--color-border) rounded-lg p-3 hover:border-zinc-500 transition-colors cursor-pointer"
			>
				<!-- Cover -->
				<div class="w-16 shrink-0 aspect-[2/3] rounded overflow-hidden bg-(--color-surface)">
					{#if book.cover}
						<img
							src={book.cover}
							alt={book.title}
							class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
							loading="lazy"
						/>
					{:else}
						<div class="w-full h-full flex items-center justify-center text-(--color-muted)">
							<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
								<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
									d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
							</svg>
						</div>
					{/if}
				</div>

				<!-- Info -->
				<div class="flex flex-col gap-1 min-w-0 flex-1">
					<h2 class="text-sm font-semibold text-(--color-text) line-clamp-2 leading-snug group-hover:text-(--color-brand) transition-colors">
						{book.title}
					</h2>
					{#if book.author}
						<p class="text-xs text-(--color-muted) truncate">{book.author}</p>
					{/if}

					<!-- Reader attribution -->
					<div class="flex items-center gap-1 mt-auto pt-1">
						<span class="w-5 h-5 rounded-full bg-(--color-brand)/20 text-(--color-brand) text-xs font-bold flex items-center justify-center shrink-0">
							{item.readerUsername[0].toUpperCase()}
						</span>
						<a
							href="/users/{item.readerUsername}"
							onclick={(e) => e.stopPropagation()}
							class="text-xs text-(--color-brand) hover:underline truncate font-medium"
						>
							{item.readerUsername}
						</a>
						<span class="text-xs text-(--color-muted) shrink-0">{m.feed_reader_label()}</span>
					</div>

					<!-- Meta chips -->
					<div class="flex items-center gap-1.5 flex-wrap mt-0.5">
						{#if book.status}
							<span class="text-xs px-1.5 py-0.5 rounded bg-(--color-surface-3) text-(--color-muted)">{book.status}</span>
						{/if}
						{#if book.total_chapters}
							<span class="text-xs text-(--color-muted)">{m.feed_chapters_label({ n: String(book.total_chapters) })}</span>
						{/if}
						{#each genres.slice(0, 2) as genre}
							<span class="text-xs px-1 py-0.5 rounded bg-(--color-surface) text-(--color-muted)">{genre}</span>
						{/each}
					</div>
				</div>
			</div>
		{/each}
	</div>
{/if}
