---
import { getCollection } from "astro:content";
import * as fs from "node:fs";
import * as path from "node:path";
import { unified } from "unified";
import remarkParse from "remark-parse";
import remarkRehype from "remark-rehype";
import rehypeStringify from "rehype-stringify";

import SinglePage from "../../layouts/SinglePage.astro";
import Header from "../../components/Header.astro";
import Hero from "../../components/Hero.astro";
import AboutSection from "../../components/AboutSection.astro";
import SpecSection from "../../components/SpecSection.astro";
import FAQSection from "../../components/FAQSection.astro";
import { parseSpecContent } from "../../utils/parseSpecContent";
import { config } from "../../config";

export async function getStaticPaths() {
  const specs = await getCollection("spec");
  return specs.map((spec) => ({
    params: { version: spec.data.version },
    props: { spec },
  }));
}

const { spec } = Astro.props;
const version = spec.data.version;

// Read and process the markdown file
const filePath = path.join(
  process.cwd(),
  "src/content/spec",
  `${version}.md`
);
const content = fs.readFileSync(filePath, "utf-8");

// Remove frontmatter
const body = content.replace(/^---[\s\S]*?---\n/, "");

// Process markdown to HTML
const result = await unified()
  .use(remarkParse)
  .use(remarkRehype, { allowDangerousHtml: true })
  .use(rehypeStringify, { allowDangerousHtml: true })
  .process(body);

const html = String(result);

// Parse the content into sections
const parsed = parseSpecContent(html, version);
---

<SinglePage title={spec.data.title} version={version}>
  <Header version={version} />

  <main>
    <Hero version={version} svgPath={parsed.svgPath} />

    <AboutSection
      introduction={parsed.introduction}
      summary={parsed.summary}
      about={parsed.about}
      license={parsed.license}
    />

    <SpecSection
      terminology={parsed.terminology}
      specification={parsed.specification}
      tocItems={parsed.tocItems}
    />

    <FAQSection items={parsed.faq} />
  </main>

  <!-- Footer -->
  <footer
    class="py-8 text-center text-sm
           text-gray-500 dark:text-gray-500
           border-t border-gray-200 dark:border-gray-800"
  >
    <div class="section-container">
      <p>
        Git Common-Flow is authored by
        <a
          href="https://jimeh.me/"
          class="hover:text-sky-600"
          target="_blank"
          rel="noopener noreferrer"
        >
          Jim Myhrberg
        </a>
      </p>
      <p class="mt-2">
        <a
          href="https://creativecommons.org/licenses/by/4.0/"
          class="hover:text-sky-600"
          target="_blank"
          rel="noopener noreferrer"
        >
          CC BY 4.0
        </a>
      </p>
    </div>
  </footer>
</SinglePage>