---
import { createMarkdownRenderer } from "@/utils";
import { POSTS_API } from "@/data/constants";

const md = await createMarkdownRenderer();

interface Post {
	short_id: string;
	title: string | null;
	slug: string;
	published_date: string | null;
	meta_description: string | null;
	meta_image: string | null;
	canonical_url: string | null;
	lang: string;
	tags: string | null;
	content: string;
	created_at: string;
	updated_at: string;
}

interface PostsListResponse {
	posts: Post[];
}

let posts: Post[] = [];
let error = false;

try {
	const res = await fetch(`${POSTS_API}/posts`);

	if (res.ok) {
		const data = (await res.json()) as PostsListResponse;
		posts = (data.posts || []).slice().sort((a, b) => {
			const dateA = a.published_date ? new Date(a.published_date).getTime() : 0;
			const dateB = b.published_date ? new Date(b.published_date).getTime() : 0;
			return dateB - dateA;
		});
	} else {
		error = true;
	}
} catch (err) {
	console.error("Error fetching updates:", err);
	error = true;
}
---

{error && <p>Error loading recent updates.</p>}

{!error && posts.length === 0 && <p>No recent updates found.</p>}

{!error && posts.length > 0 && (
	<div class="space-y-4">
		{posts.map((post) => {
			const publishedAt = post.published_date
				? new Date(post.published_date).toLocaleDateString()
				: "";

			const contentHTML = post.content
				? md.render(post.content).trim()
					.replace(/<img\s([^>]*?)>/g, (_, attrs) => {
						const hasLoading = /loading\s*=/.test(attrs);
						const hasDecoding = /decoding\s*=/.test(attrs);
						const hasWidth = /width\s*=/.test(attrs);
						const extra = `${hasLoading ? "" : ' loading="lazy"'}${hasDecoding ? "" : ' decoding="async"'}${hasWidth ? "" : ' width="800"'}`;
						return `<img ${attrs}${extra} style="height:auto">`;
					})
				: "";

			return (
				<article class="border-b pb-6 mb-6 last:border-b-0">
					{post.title && (
						<a
							href={`/now/${post.slug}`}
							class="block hover:opacity-80 transition-opacity"
						>
							<h3 class="text-lg font-semibold mb-3">{post.title}</h3>
						</a>
					)}
					<div
						class="prose prose-invert max-w-none mb-3"
						set:html={contentHTML}
					/>
					<div class="flex items-center gap-2 text-sm text-zinc-500">
						<time>{publishedAt}</time>
					</div>
				</article>
			);
		})}
	</div>
)}