import type { Metadata } from "next";
import Markdown from "react-markdown";
import { allReleases, formatDate, releasesPage } from "@/lib/releases";

export const metadata: Metadata = { title: "Changelog" };

// Release notes are Markdown, written by the client's CI: what's in each release.
const markdown = {
  p: (props: React.ComponentProps<"p">) => <p className="text-muted-foreground" {...props} />,
  ul: (props: React.ComponentProps<"ul">) => <ul className="list-disc space-y-1 pl-5 text-muted-foreground" {...props} />,
  ol: (props: React.ComponentProps<"ol">) => <ol className="list-decimal space-y-1 pl-5 text-muted-foreground" {...props} />,
  code: (props: React.ComponentProps<"code">) => <code className="rounded bg-muted px-1 py-0.5 font-mono text-xs break-all" {...props} />,
  a: (props: React.ComponentProps<"a">) => <a className="text-foreground underline underline-offset-4" {...props} />,
  strong: (props: React.ComponentProps<"strong">) => <strong className="font-medium text-foreground" {...props} />,
  h1: (props: React.ComponentProps<"h3">) => <h3 className="font-medium" {...props} />,
  h2: (props: React.ComponentProps<"h3">) => <h3 className="font-medium" {...props} />,
  h3: (props: React.ComponentProps<"h3">) => <h3 className="font-medium" {...props} />,
};

export default async function ChangelogPage() {
  const releases = await allReleases();
  return (
    <div className="max-w-2xl space-y-10">
      <h1 className="text-3xl font-semibold tracking-tight">Changelog</h1>
      {releases === null ? (
        <p className="text-muted-foreground">
          Couldn&apos;t load the releases. They&apos;re on{" "}
          <a href={releasesPage} className="text-foreground underline underline-offset-4">
            git.t5de.dev
          </a>
          .
        </p>
      ) : (
        releases.map((r) => (
          <article key={r.tag} id={r.tag} className="space-y-4 border-t pt-8 first:border-t-0 first:pt-0">
            <header className="flex flex-wrap items-baseline gap-x-3">
              <h2 className="text-xl font-semibold">
                <a href={`#${r.tag}`}>{r.version}</a>
              </h2>
              <time dateTime={r.date} className="text-sm text-muted-foreground">
                {formatDate(r.date)}
              </time>
            </header>
            <div className="space-y-3 text-sm">
              <Markdown components={markdown}>{r.body}</Markdown>
            </div>
          </article>
        ))
      )}
    </div>
  );
}