---
export const prerender = false;

import PageLayout from "@/layouts/Base.astro";
import LinkCard from "@/components/page/LinkCard.astro";

type Link = {
	id: number;
	short_id: string;
	title: string;
	url: string;
	category_id: number;
	created_at: number;
	favicon_url?: string | null;
};

const meta = {
	title: "/bookmarks",
	description: "Links I've saved and want to read",
};

let categories: [string, Link[]][] = [];
let error: string | null = null;
try {
	const res = await fetch("https://bookmarks.stevedylan.dev/api/links");
	if (res.ok) {
		const data: Record<string, Link[]> = await res.json();
		categories = Object.entries(data).filter(([, links]) => links.length > 0);
	} else {
		error = `API returned ${res.status}`;
	}
} catch (e) {
	error = e instanceof Error ? e.message : "Failed to reach bookmarks API";
}
---

<PageLayout meta={meta}>
	<div class="flex min-h-screen flex-col items-start justify-start gap-6">
    <h1 class="title">/bookmarks</h1>
		{error ? (
			<p class="text-red-400 text-sm">Could not load bookmarks: {error}</p>
		) : categories.length === 0 ? (
			<p class="text-zinc-400 text-sm">no bookmarks yet</p>
		) : (
			<div class="flex flex-col w-full gap-8">
				{categories.map(([name, links]) => (
					<div class="flex flex-col w-full">
						<h2 class="text-sm font-semibold uppercase tracking-widest opacity-50 mb-2">{name}</h2>
						{links.map((link) => (
							<LinkCard link={link} />
						))}
					</div>
				))}
			</div>
		)}
	</div>
</PageLayout>