import { WithContext, Article as ArticleSchema } from "schema-dts";
import { notFound } from "next/navigation";

import { fetchPostBySlug } from "@/services/blogActions";
import Article from "@/components/pages/participant/how-it-works/article";
import { jsonForScript } from "@/utils/json-for-script";

export const revalidate = 60;

type Params = Promise<{ slug: string; section: string }>;

export async function generateMetadata({ params }: { params: Params }) {
  const { slug } = await params;
  const postData = await fetchPostBySlug(slug);
  const data = postData["posts"][0];

  if (!data) return {};

  return {
    title: `${data.title} | How it works`,
    description: data.excerpt || "",
    openGraph: {
      title: `${data.title} | How it works`,
      description: data.excerpt || "",
      type: "website",
      images: [
        {
          url: data.feature_image || "",
          alt: data.feature_image_alt || "",
        },
      ],
    },
    twitter: {
      card: "summary_large_image",
      title: `${data.title} | How it works`,
      description: data.excerpt || "",
      images: data.feature_image || "",
    },
  };
}

export default async function SlugArticlePage({ params }: { params: Params }) {
  const { section, slug } = await params;
  const postData = await fetchPostBySlug(slug);
  const data = postData["posts"][0];

  if (!data) notFound();

  const jsonLdArticle: WithContext<ArticleSchema> = {
    "@context": "https://schema.org",
    "@type": "Article",
    headline: data.title,
    image: data.feature_image || "",
    datePublished: data.published_at,
    dateModified: data.updated_at,
    author: [
      {
        "@type": "Organization",
        name: "People for Research",
        url: "https://peopleforresearch.co.uk",
      },
    ],
  };

  return (
    <>
      <script
        dangerouslySetInnerHTML={{ __html: jsonForScript(jsonLdArticle) }}
        type="application/ld+json"
      />
      <div className="flex flex-col min-h-screen bg-participant-light dark:bg-participant-dark">
        <Article post={data} section={section} />
      </div>
    </>
  );
}