---
import { getCollection } from 'astro:content';
import Layout from '../layouts/Layout.astro';
import { getApprovedEntries, type GuestbookEntry } from '../lib/db';
import { formatDate, extractDomain, formatListItem } from '../lib/format';
import { organizePostsByCategory, getSlug } from '../lib/md';
import { getTxtFiles } from '../lib/txt';

const posts = await getCollection('md', ({ data }) => data.draft !== true);
const { grouped, categories: sortedCategories } = organizePostsByCategory(posts);

const bookmarksCollection = await getCollection('bookmarks');
const bookmarks = bookmarksCollection
  .sort((a, b) => b.data.date.getTime() - a.data.date.getTime());

const txtFiles = getTxtFiles();

let guestbookEntries: GuestbookEntry[] = [];
try {
  guestbookEntries = await getApprovedEntries();
} catch {
  // DB not available during dev without env vars
}
---
<Layout title="lewis m.w." isHome>

{sortedCategories.map(category => {
  const categoryPosts = grouped[category];
  return (
<details open>
  <summary>{category}</summary>
<pre set:html={[
  ...categoryPosts.slice(0, 10).map(post => formatListItem(post.data.date, `/md/${getSlug(post.id)}`, post.data.title, { pinned: post.data.pinned })),
  ...(categoryPosts.length > 10 ? [`<a href="/md/">+${categoryPosts.length - 10} more</a>`] : [])
].join('\n')} />
</details>
  );
})}

<details open>
  <summary>txt</summary>
<pre set:html={[
  ...txtFiles.slice(0, 10).map(f => formatListItem(f.date, `/txt/${f.name}`, f.name, { pinned: f.pinned })),
  ...(txtFiles.length > 10 ? [`<a href="/txt/">+${txtFiles.length - 10} more</a>`] : [])
].join('\n')} />
</details>

<details open>
  <summary>bookmarks</summary>
<pre set:html={[
  ...bookmarks.slice(0, 10).map(b => formatListItem(b.data.date, b.data.url, b.data.title, { suffix: `<span class="muted">(${extractDomain(b.data.url)})</span>` })),
  ...(bookmarks.length > 10 ? [`<a href="/bookmarks/">+${bookmarks.length - 10} more</a>`] : [])
].join('\n')} />
</details>

<details open>
  <summary>guestbook</summary>
  <div class="guestbook-entries">
    {guestbookEntries.slice(0, 10).map(e => (
      <div class="guestbook-entry">
        <span class="muted">{formatDate(e.createdAt)}</span>
        <span><b set:html={e.url ? `<a href="${e.url}">${e.name}</a>` : e.name} /> {e.message}</span>
      </div>
    ))}
    <div class="guestbook-entry">
      <span>{guestbookEntries.length > 10 && <a href="/guestbook/">+{guestbookEntries.length - 10} more</a>}</span>
      <span><a href="#" id="sign-guestbook">sign</a><span id="guestbook-status"></span></span>
    </div>
  </div>
</details>

<script>
  import { initGuestbookSign } from '../scripts/guestbook-sign';
  initGuestbookSign();
</script>
</Layout>