import type { Metadata } from "next";
import Link from "next/link";
import { notFound } from "next/navigation";
import { Container, Pill } from "@/src/components/site";
import { NOTES } from "@/src/content/notes";
import { SITE_NAME, SITE_URL } from "@/src/content/site";
import { findNoteBySlug } from "@/src/domain/notes";

type PageProps = { readonly params: Promise<{ readonly slug: string }> };

export const dynamicParams = false;

export function generateStaticParams() {
  return NOTES.map((note) => ({ slug: note.slug }));
}

export async function generateMetadata({
  params,
}: PageProps): Promise<Metadata> {
  const found = findNoteBySlug(NOTES, (await params).slug);
  if (!found.ok) return {};
  const { title, summary, slug, publishedOn } = found.value;
  const path = `/notes/${slug}`;
  return {
    title,
    description: summary,
    alternates: { canonical: path },
    openGraph: {
      type: "article",
      title,
      description: summary,
      url: path,
      publishedTime: publishedOn,
    },
  };
}

export default async function Page({ params }: PageProps) {
  const found = findNoteBySlug(NOTES, (await params).slug);
  if (!found.ok) notFound();
  const { Body, title, summary, slug, publishedOn, readingMinutes, tags } =
    found.value;

  const jsonLd = {
    "@context": "https://schema.org",
    "@type": "Article",
    headline: title,
    description: summary,
    datePublished: publishedOn,
    url: `${SITE_URL}/notes/${slug}`,
    author: { "@type": "Person", name: SITE_NAME, url: SITE_URL },
    keywords: tags.join(", "),
  };

  return (
    <Container className="py-16 md:py-24">
      <article className="mx-auto max-w-[70ch]">
        <script
          type="application/ld+json"
          dangerouslySetInnerHTML={{
            __html: JSON.stringify(jsonLd).replace(/</g, "\\u003c"),
          }}
        />
        <Link
          href="/notes"
          className="font-mono text-xs uppercase tracking-widest text-accent"
        >
          &larr; Notes
        </Link>
        <header className="mt-6">
          <h1 className="!mb-4 !text-3xl !leading-tight text-fg md:!text-5xl">
            {title}
          </h1>
          <p className="!mb-4 font-mono text-xs text-muted">
            <time dateTime={publishedOn}>{publishedOn}</time>
            {" · "}
            {readingMinutes} min read
          </p>
          <span className="flex flex-wrap gap-2">
            {tags.map((tag) => (
              <Pill key={tag}>{tag}</Pill>
            ))}
          </span>
        </header>
        <div className="mt-10">
          <Body />
        </div>
      </article>
    </Container>
  );
}