---
import { getCollection } from "astro:content";
import BaseLayout from "@/layouts/BaseLayout.astro";
import { collectionSlug, getLinks } from "@/lib/collections";

const posts = (await getCollection("blog", ({ data }) => !data.draft)).map(
  (p) => ({
    title: p.data.title,
    date: p.data.publishDate,
    url: `/blog/${p.id}`,
    type: "post" as const,
  }),
);

const notes = (await getCollection("notes", ({ data }) => !data.draft)).map(
  (n) => ({
    title: n.data.title,
    date: n.data.publishDate,
    url: `/notes/${n.id}`,
    type: "note" as const,
  }),
);

const photoSets = (
  await getCollection(
    "collections_photos",
    ({ data }) => data.set && !data.draft && !!data.publishDate,
  )
).map((c) => ({
  title: c.data.title,
  date: c.data.publishDate as Date,
  url: `/photos/collections/${collectionSlug(c)}`,
  type: "photos" as const,
}));

const links = (await getLinks()).map((l) => ({
  title: l.data.title,
  date: l.data.publishDate,
  url: `/links/${l.id}`,
  type: "link" as const,
}));

const all = [...posts, ...notes, ...photoSets, ...links].sort(
  (a, b) => b.date.valueOf() - a.date.valueOf(),
);

// Group by year
const byYear = new Map<number, typeof all>();
for (const entry of all) {
  const year = entry.date.getFullYear();
  if (!byYear.has(year)) byYear.set(year, []);
  byYear.get(year)?.push(entry);
}
const years = [...byYear.keys()].sort((a, b) => b - a);

function formatDate(date: Date) {
  return date.toLocaleDateString("de-DE", { month: "2-digit", day: "2-digit" });
}

const typeLabel: Record<string, string> = {
  post: "Article",
  note: "Note",
  photos: "Photo Collection",
  link: "Link",
};
---

<BaseLayout
  title="Archives"
  description="Chronologisches Archiv aller Posts und Notizen von Adrian Altner."
>
  <div class="page">
    <main class="main">
      <a href="/" class="back">← Home</a>
      <h1 class="heading">Archives</h1>
      {
        years.length === 0 ? (
          <p class="empty">Noch keine Inhalte vorhanden.</p>
        ) : (
          years.map((year) => (
            <section class="year">
              <h2 class="year__heading">{year}</h2>
              <ul class="list">
                {byYear.get(year)!.map((entry) => (
                  <li class="item">
                    <time class="item__date" datetime={entry.date.toISOString()}>
                      {formatDate(entry.date)}
                    </time>
                    <a href={entry.url} class="item__title">
                      {entry.title}
                    </a>
                    <span class={`item__type item__type--${entry.type}`}>
                      {typeLabel[entry.type]}
                    </span>
                  </li>
                ))}
              </ul>
            </section>
          ))
        )
      }
    </main>
  </div>
</BaseLayout>

<style>
  .page {
    display: grid;
    grid-template-rows: auto 1fr auto;
    min-height: 100dvh;
    background: #f5f5f3;
    color: #111;
  }

  .main {
    max-width: var(--width-prose);
    margin: 0 auto;
    padding: 2rem 2rem 4rem;
    width: 100%;
  }

  .back {
    display: inline-block;
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
    color: #555;
    text-decoration: none;
  }

  .back:hover {
    color: var(--accent);
  }

  .heading {
    font-size: 1.75rem;
    font-weight: 400;
    letter-spacing: -0.02em;
    margin-bottom: 2.5rem;
  }

  .empty {
    color: #888;
    font-size: 0.95rem;
  }

  .year {
    margin-bottom: 2.5rem;
  }

  .year__heading {
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #888;
    margin-bottom: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #111;
  }

  .list {
    list-style: none;
    padding: 0;
  }

  .item {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    padding: 0.55rem 0;
    border-bottom: 1px solid #e8e8e6;
  }

  .item__date {
    font-size: 0.8rem;
    color: #888;
    white-space: nowrap;
    flex-shrink: 0;
    width: 3.5rem;
  }

  .item__title {
    font-size: 0.95rem;
    color: #111;
    text-decoration: none;
    flex: 1;
  }

  .item__title:hover {
    color: var(--accent);
  }

  .item__type {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.15rem 0.4rem;
    border-radius: 3px;
    flex-shrink: 0;
  }

  .item__type--post {
    background: #e8e8e6;
    color: #555;
  }

  .item__type--note {
    background: #e8f0e8;
    color: #4a7a4a;
  }

  .item__type--photos {
    background: #e8eef5;
    color: #3a5f8a;
  }

  .item__type--link {
    background: #f5ece8;
    color: #8a4a3a;
  }
</style>
