import Link from "next/link";
import type { Metadata } from "next";
import { Header, Footer } from "@/components/Shell";
import { ReleaseNotes } from "@/components/ReleaseNotes";
import { ChangelogRefresh } from "@/components/ChangelogRefresh";
import { getChangelog } from "@/lib/changelog";
import { getI18n } from "@/lib/i18n";

export const metadata: Metadata = {
  title: "Changelogs",
  description: "The latest MineGeo releases, improvements, and bug fixes.",
};

export default async function ChangelogsPage({
  searchParams,
}: {
  searchParams: Promise<{ before?: string }>;
}) {
  const params = await searchParams;
  const before =
    typeof params.before === "string" && /^\d{17,20}$/.test(params.before)
      ? params.before
      : undefined;
  const [{ t, formatDate }, feed] = await Promise.all([
    getI18n(),
    getChangelog(before),
  ]);
  return (
    <>
      <Header />
      <main className="section page-content changelog-page" id="main-content" tabIndex={-1}>
        {!before && <ChangelogRefresh />}
        <span className="eyebrow">{t("WHAT'S NEW")}</span>
        <h1>{t("Changelogs")}</h1>
        <p className="lead">
          {t("New releases, improvements, and fixes from MineGeo.")}
        </p>
        {before && <Link href="/changelogs">{t("Latest releases")}</Link>}
        {feed.unavailable ? (
          <div className="empty-state">
            <h2>{t("Release notes are temporarily unavailable")}</h2>
            <p>{t("Please check back soon.")}</p>
          </div>
        ) : feed.entries.length === 0 ? (
          <p className="muted">{t("No releases on this page yet.")}</p>
        ) : (
          <div className="changelog-list">
            {feed.entries.map((entry) => (
              <article
                className="changelog-entry"
                key={entry.id}
                id={`release-${entry.id}`}
              >
                <div className="changelog-meta">
                  <span className="tag">{t(entry.kind)}</span>
                  <time dateTime={entry.publishedAt}>
                    {formatDate(entry.publishedAt)}
                  </time>
                </div>
                <h2>{entry.title}</h2>
                <div className="release-notes">
                  <ReleaseNotes body={entry.body} />
                </div>
              </article>
            ))}
          </div>
        )}
        {!feed.unavailable && "before" in feed && feed.before && (
          <Link className="button" href={`/changelogs?before=${feed.before}`}>
            {t("Older posts")}
          </Link>
        )}
      </main>
      <Footer />
    </>
  );
}