---
import BaseLayout from "../layouts/BaseLayout.astro";
import { SITE } from "../lib/blog-data.js";
import { getChangelogByDay } from "../lib/changelog.js";

const days = await getChangelogByDay();

const TYPE_LABEL = {
  added: "Added",
  updated: "Updated",
  fixed: "Fixed",
  bug: "Bug found",
  removed: "Removed",
  note: "Note",
};

const time = (iso) => iso.slice(11, 16); // HH:MM

const jsonLd = {
  "@context": "https://schema.org",
  "@type": "CollectionPage",
  name: `Changelog — ${SITE.name}`,
  description: "A running log of how this site is built and changed.",
  url: `${SITE.url}/changelog`,
};
---

<BaseLayout
  title={`Changelog — ${SITE.name}`}
  description="A running, human-friendly log of how this site is built, updated, and fixed — an agentic website that documents its own evolution."
  canonical="/changelog"
  jsonLd={jsonLd}
>
  <section class="mx-auto w-full max-w-3xl px-5 pt-20 pb-12 md:pt-28">
    <p class="font-mono text-xs tracking-[0.18em] text-muted-foreground uppercase">
      Changelog
    </p>
    <h1
      class="mt-6 max-w-[18ch] font-serif text-[clamp(2.2rem,5.6vw,4rem)] leading-[1.05] tracking-tight text-balance"
    >
      This site, <span class="ca-brushed">as it&rsquo;s built.</span>
    </h1>
    <p class="mt-6 max-w-[54ch] text-base leading-relaxed text-muted-foreground">
      An agentic website that documents its own evolution. Every change &mdash; added,
      updated, fixed, and the odd bug caught along the way &mdash; logged as it happens.
    </p>
  </section>

  <section class="mx-auto w-full max-w-3xl px-5 pb-24">
    <div class="ca-log">
      {
        days.map((day) => (
          <div class="ca-log-group">
            <h2 class="ca-log-date">
              <time datetime={day.dateKey}>{day.dateLabel}</time>
              <span class="ca-log-count">{day.items.length}</span>
            </h2>
            <ol class="ca-log-list">
              {day.items.map((e) => (
                <li class="ca-log-entry">
                  <span class="ca-log-node" data-type={e.type} aria-hidden="true" />
                  <div class="ca-log-body">
                    <div class="ca-log-head">
                      <span class="ca-log-type" data-type={e.type}>
                        {TYPE_LABEL[e.type] ?? e.type}
                      </span>
                      <time class="ca-log-time" datetime={e.entry_at}>
                        {time(e.entry_at)}
                      </time>
                    </div>
                    <p class="ca-log-summary">{e.summary}</p>
                    {e.detail && <p class="ca-log-detail">{e.detail}</p>}
                  </div>
                </li>
              ))}
            </ol>
          </div>
        ))
      }
    </div>
  </section>
</BaseLayout>