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

	let {
		publications,
		latestPosts,
		subscriberCounts
	}: {
		publications: Publication[];
		latestPosts: Promise<LatestPost[]>;
		subscriberCounts: Promise<Record<string, number>>;
	} = $props();

	const INITIAL_COUNT = 4;
	const LOAD_STEP = 2;
	let visibleCount = $state(INITIAL_COUNT);
	const visiblePublications = $derived(publications.slice(0, visibleCount));
	const hasMore = $derived(visibleCount < publications.length);

	function publishedLabel(iso: string | null): string {
		if (!iso) return '';
		const date = new Date(iso);
		if (Number.isNaN(date.getTime())) return '';
		return date.toLocaleDateString('en', { month: 'short', day: 'numeric', year: 'numeric' });
	}
</script>

{#if publications.length > 0}
	<div id="writings" 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">Writings</h1>
			<span class="text-md mt-2 px-2 text-center font-urbanist md:mt-4 md:px-5 md:text-xl">
				My long form writings found across the atmosphere
			</span>
		</div>
		<div class="container mt-10 grid gap-10 p-4 md:grid-cols-2 xl:grid-cols-3">
			{#each visiblePublications as item (item.href)}
				<div class="card bg-base-100 shadow-sm transition duration-300 hover:-translate-y-1">
					{#if item.image}
						<figure>
							<LazyLoadingImg class="h-48 w-full" src={item.image} alt={item.name} />
						</figure>
					{/if}
					<div class="card-body">
						{#await subscriberCounts then counts}
							{#if counts[item.uri] > 0}
								<span class="badge font-urbanist badge-secondary"
									>♥ {counts[item.uri]} subscribers</span
								>
							{/if}
						{/await}
						<h2 class="card-title font-urbanist text-2xl font-black">{item.name}</h2>
						<p class="text-md font-urbanist font-medium opacity-60">{item.description}</p>
						<div class="mt-2 card-actions justify-end">
							<a
								class="btn font-urbanist btn-primary"
								href={item.href}
								target="_blank"
								rel="noopener noreferrer"
							>
								Read
							</a>
						</div>
					</div>
				</div>
			{/each}
		</div>
		{#if hasMore}
			<button
				class="btn mt-10 font-urbanist btn-primary"
				onclick={() => (visibleCount = Math.min(visibleCount + LOAD_STEP, publications.length))}
			>
				Load More
			</button>
		{/if}

		<h2
			class="mt-16 text-center font-urbanist text-xl font-semibold opacity-80 md:mt-24 md:text-3xl"
		>
			Latest Posts
		</h2>
		<span class="text-md mt-2 px-2 text-center font-urbanist md:mt-4 md:px-5 md:text-xl">
			My most recent posts
		</span>
		{#await latestPosts}
			<div class="container mt-10 grid gap-10 p-4 md:grid-cols-2 xl:grid-cols-3">
				{#each Array(2) as _, i (i)}
					<div class="card bg-base-100 shadow-sm">
						<div class="h-48 w-full skeleton"></div>
						<div class="card-body flex flex-col gap-3">
							<div class="h-5 w-28 skeleton"></div>
							<div class="h-7 w-3/4 skeleton"></div>
							<div class="h-4 w-1/3 skeleton"></div>
							<div class="h-4 w-full skeleton"></div>
						</div>
					</div>
				{/each}
			</div>
		{:then posts}
			{#if posts.length > 0}
				<div class="container mt-10 grid gap-10 p-4 md:grid-cols-2 xl:grid-cols-3">
					{#each posts as post (post.postUrl)}
						<div class="card bg-base-100 shadow-sm transition duration-300 hover:-translate-y-1">
							{#if post.coverImage}
								<figure>
									<LazyLoadingImg class="h-48 w-full" src={post.coverImage} alt={post.title} />
								</figure>
							{/if}
							<div class="card-body">
								<div class="flex flex-wrap items-center gap-2">
									<span class="badge font-urbanist badge-primary">{post.publicationName}</span>
									{#if post.recommendCount > 0}
										<span class="badge font-urbanist badge-secondary"
											>★ {post.recommendCount} recommendations</span
										>
									{/if}
								</div>
								<h3 class="mt-2 card-title font-urbanist text-2xl font-black">{post.title}</h3>
								{#if post.publishedAt}
									<p class="font-urbanist text-xs opacity-40">{publishedLabel(post.publishedAt)}</p>
								{/if}
								<p class="text-md font-urbanist font-medium opacity-60">{post.description}</p>
								<div class="mt-2 card-actions justify-end">
									<a
										class="btn font-urbanist btn-primary"
										href={post.postUrl}
										target="_blank"
										rel="noopener noreferrer"
									>
										Read
									</a>
								</div>
							</div>
						</div>
					{/each}
				</div>
			{/if}
		{/await}
	</div>
{/if}
