import Link from "next/link";
import { notFound } from "next/navigation";
import type { Metadata } from "next";
import { PageShell, PageHeading } from "../../components/PageShell";
import { DocBody } from "../../components/DocBody";
import { findDoc, listDocs, readDoc } from "../../lib/docs";

// `dynamicParams = false` + params from the same existence-filtered list means a
// manifest entry with a missing file is a 404, never a build crash.
export const dynamicParams = false;

export function generateStaticParams() {
  return listDocs().map((doc) => ({ slug: doc.slug }));
}

export async function generateMetadata({
  params,
}: {
  params: Promise<{ slug: string }>;
}): Promise<Metadata> {
  const { slug } = await params;
  const doc = findDoc(slug);
  if (!doc) return {};
  return { title: doc.title, description: doc.blurb };
}

export default async function DocPage({
  params,
}: {
  params: Promise<{ slug: string }>;
}) {
  const { slug } = await params;
  const doc = findDoc(slug);
  if (!doc) notFound();

  const docs = listDocs();
  const i = docs.findIndex((d) => d.slug === doc.slug);
  const prev = i > 0 ? docs[i - 1] : null;
  const next = i >= 0 && i < docs.length - 1 ? docs[i + 1] : null;

  return (
    <PageShell className="flex flex-col gap-8">
      <Link
        href="/docs/"
        className="label-machine hover:text-[var(--foreground)] transition-colors w-fit"
      >
        ← All docs
      </Link>
      <PageHeading title={doc.title} standfirst={doc.blurb} />
      <DocBody source={readDoc(doc)} />

      {(prev || next) && (
        <nav
          aria-label="Document"
          className="doc-measure mt-6 flex flex-col gap-4 border-t border-[var(--border)] pt-6 sm:flex-row sm:justify-between"
        >
          {prev ? (
            <Link href={`/docs/${prev.slug}/`} className="flex flex-col gap-1">
              <span className="label-machine">Previous</span>
              <span className="text-sm text-[var(--muted-foreground)] hover:text-[var(--foreground)] transition-colors">
                {prev.title}
              </span>
            </Link>
          ) : (
            <span />
          )}
          {next && (
            <Link
              href={`/docs/${next.slug}/`}
              className="flex flex-col gap-1 sm:items-end"
            >
              <span className="label-machine">Next</span>
              <span className="text-sm text-[var(--muted-foreground)] hover:text-[var(--foreground)] transition-colors">
                {next.title}
              </span>
            </Link>
          )}
        </nav>
      )}
    </PageShell>
  );
}