import { readFileSync } from "node:fs";
import type { Metadata } from "next";
import { getPaths } from "yt-dlp-transcript-common/lib/paths";
import { Changelog } from "yt-dlp-transcript-common/components/Changelog";
import {
  extractUnreleasedSection,
  getLatestChangelogDate,
  getLatestReleasedVersion,
  suggestNextVersion,
} from "yt-dlp-transcript-common/lib/changelog";
import { MarkChangelogSeen } from "../components/MarkChangelogSeen";
import { CutReleaseForm } from "../sites/components/CutReleaseForm";

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

function loadChangelog(): string {
  // Must be the same file cutReleaseAction rewrites, or the page renders one
  // changelog while the form edits another.
  return readFileSync(getPaths().editorChangelogFile, "utf8");
}

export default function ChangelogPage() {
  const source = loadChangelog();
  const latestDate = getLatestChangelogDate(source);
  const lastVersion = getLatestReleasedVersion(source);
  const suggestedVersion = suggestNextVersion(lastVersion);
  const unreleased = extractUnreleasedSection(source);
  const hasUnreleased = unreleased.length > 0;
  return (
    <div className="flex flex-col gap-6 max-w-3xl">
      <h1 className="text-2xl font-semibold">Changelog</h1>
      <Changelog source={source} />
      <section className="flex flex-col gap-3 border-t border-border pt-6">
        <div>
          <h2 className="text-lg font-semibold">Cut release</h2>
          <p className="text-sm text-muted-foreground">
            Turns the current <code>## [Unreleased]</code> heading into a
            dated semver heading.
          </p>
        </div>
        <CutReleaseForm
          workspace="editor"
          lastVersion={lastVersion}
          suggestedVersion={suggestedVersion}
          hasUnreleased={hasUnreleased}
        />
      </section>
      <MarkChangelogSeen latestDate={latestDate} />
    </div>
  );
}