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

import CaseStudySlug from "@/components/pages/client/services/sections/case-study-slug";
import { fetchPostBySlug } from "@/services/blogActions";
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) notFound();

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

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

  if (!data) notFound();

  const jsonLdArticle: WithContext<Article> = {
    "@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"
      />
      <CaseStudySlug post={data} />
    </>
  );
}