---
/**
 * `/changelog`: every topic and review release on one page, newest first — a
 * vertical timeline, the date on the left and one card per release on the
 * right, with no per-release subpages. Replaces Blume's generated changelog
 * (a custom page wins its route); the header links here from
 * `navigation.actions` in blume.config.ts. Data: lib/releases.ts.
 */
import PageLayout from "blume/components/layout/PageLayout.astro";
import data from "blume:data";
import { readReleases } from "../lib/releases.ts";

const { config } = data;
const releases = await readReleases();
const DATE = new Intl.DateTimeFormat("en-US", {
  timeZone: "America/New_York",
  month: "short",
  day: "numeric",
  year: "numeric",
});
const issueUrl = (n: number) => `https://github.com/prdlk/leetcode/issues/${n}`;
// The /progress cards' difficulty palette (--chart-1..3 in theme.css), so a
// Hard reads the same colour here as in the SolvedRing gauge.
const DIFFICULTY: Record<string, { label: string; class: string }> = {
  easy: { label: "Easy", class: "border-chart-1/40 bg-chart-1/10 text-chart-1" },
  medium: { label: "Med.", class: "border-chart-2/40 bg-chart-2/10 text-chart-2" },
  hard: { label: "Hard", class: "border-chart-3/40 bg-chart-3/10 text-chart-3" },
};
const description = "Every topic and review the campaign finished, newest first.";
---

<PageLayout
  site={{ title: config.title, description: config.description }}
  logo={config.logo}
  favicon={config.favicon}
  banner={config.banner}
  analytics={config.analytics}
  navigation={data.navigation}
  fontCssVars={data.fontCssVars}
  themeMode={config.theme.mode}
  searchEnabled={config.search.enabled}
  siteUrl={config.site}
  ogEnabled={config.og.enabled}
  structuredDataEnabled={config.structuredData}
  page={{ title: `Changelog - ${config.title}`, description, route: "/changelog" }}
>
  <section class="mx-auto w-full max-w-4xl px-6 py-16">
    <h1 class="m-0 text-4xl font-semibold tracking-tight text-foreground">Changelog</h1>
    <p class="mt-3 text-lg text-muted-foreground">{description}</p>

    <ol class="relative mt-12 list-none p-0">
      {
        releases.map((r, i) => (
          <li class="relative grid gap-4 pb-14 pl-8 sm:grid-cols-[11rem_1fr] sm:gap-8">
            {/* The rail: a line down the left edge, a ring at each release. */}
            {i < releases.length - 1 && (
              <span class="absolute top-3 bottom-0 left-[5px] w-px bg-border" aria-hidden="true" />
            )}
            <span
              class="absolute top-1.5 left-0 size-[11px] rounded-full border border-emerald-500 bg-background"
              aria-hidden="true"
            />
            <div class="font-mono text-sm">
              <time class="block uppercase tracking-wide text-foreground" datetime={r.finishedAt.toISOString()}>
                {DATE.format(r.finishedAt)}
              </time>
              <a class="mt-1 block text-xs text-muted-foreground no-underline hover:underline" href={r.url}>
                {r.kind} release ↗
              </a>
            </div>
            <article id={`issue-${r.issue}`} class="rounded-lg border border-border bg-muted/30 p-6">
              <header class="flex items-baseline justify-between gap-4">
                <h2 class="m-0 text-lg font-semibold text-foreground">{r.name}</h2>
                <a
                  class="shrink-0 font-mono text-sm text-muted-foreground no-underline hover:underline"
                  href={issueUrl(r.issue)}
                >
                  #{r.issue}
                </a>
              </header>
              <ul class="mt-4 mb-0 list-none space-y-2 p-0">
                {r.problems.map((p) => (
                  <li class="flex items-baseline gap-3 text-base leading-relaxed text-muted-foreground">
                    <span class="select-none text-border" aria-hidden="true">—</span>
                    <span class="min-w-0 flex-1">
                      <span class="mr-2 font-mono text-xs uppercase tracking-wide">{p.set}</span>
                      <a class="text-foreground no-underline hover:underline" href={issueUrl(p.issue)}>
                        {p.title}
                      </a>
                      {p.docs && (
                        <a class="ml-2 font-mono text-xs text-emerald-500 no-underline hover:underline" href={p.docs}>
                          view →
                        </a>
                      )}
                    </span>
                    {/* Its own right-hand column, one width for all three, so the
                        badges line up down the card instead of crowding the link. */}
                    {DIFFICULTY[p.difficulty] && (
                      <span
                        class:list={[
                          "w-12 shrink-0 rounded-full border py-px text-center font-mono text-[11px] leading-4",
                          DIFFICULTY[p.difficulty]!.class,
                        ]}
                      >
                        {DIFFICULTY[p.difficulty]!.label}
                      </span>
                    )}
                  </li>
                ))}
              </ul>
            </article>
          </li>
        ))
      }
    </ol>
  </section>
</PageLayout>