import type { Metadata } from "next";
import { notFound } from "next/navigation";

import BlogArticleHero from "@/components/blogs/BlogArticleHero";
import BlogDetailContent from "@/components/blogs/BlogDetailContent";
import BlogsFinalCTA from "@/components/blogs/BlogsFinalCTA";
import RelatedBlogs from "@/components/blogs/RelatedBlogs";
import JsonLd from "@/components/common/JsonLd";
import { siteConfig } from "@/config/site.config";
import { blogSlugs, getBlog, getBlogPageCopy, getRelatedBlogs, type BlogSlug } from "@/data/blogs.data";
import { getDictionary } from "@/lib/i18n";
import { hasLocale } from "@/lib/locales";
import { createBreadcrumbJsonLd, createMetadata } from "@/lib/seo";

export function generateStaticParams() {
  return blogSlugs.map((slug) => ({ slug }));
}

type BlogDetailPageProps = { params: Promise<{ lang: string; slug: string }> };

export async function generateMetadata({ params }: BlogDetailPageProps): Promise<Metadata> {
  const { lang, slug } = await params;
  if (!hasLocale(lang)) notFound();
  const post = getBlog(lang, slug);
  if (!post) notFound();
  const metadata = createMetadata({ locale: lang, path: `/blogs/${post.slug}`, title: post.seoTitle, description: post.seoDescription });
  return {
    ...metadata,
    openGraph: {
      ...metadata.openGraph,
      type: "article",
      publishedTime: post.date,
      authors: [post.author],
    },
  };
}

export default async function BlogDetailPage({ params }: BlogDetailPageProps) {
  const { lang, slug } = await params;
  if (!hasLocale(lang)) notFound();
  const post = getBlog(lang, slug);
  if (!post) notFound();
  const dictionary = await getDictionary(lang);
  const copy = getBlogPageCopy(lang);
  const related = getRelatedBlogs(lang, post.slug as BlogSlug);
  const url = `${siteConfig.url}/${lang}/blogs/${post.slug}`;
  const image = `${siteConfig.url}/${lang}/opengraph-image`;
  return (
    <>
      <JsonLd
        data={[
          createBreadcrumbJsonLd(lang, [
            { name: "PureSaaS", path: "" },
            { name: copy.eyebrow, path: "/blogs" },
            { name: post.title, path: `/blogs/${post.slug}` },
          ]),
          {
            "@context": "https://schema.org",
            "@type": "BlogPosting",
            headline: post.title,
            description: post.excerpt,
            datePublished: post.date,
            dateModified: post.date,
            inLanguage: lang,
            mainEntityOfPage: {
              "@type": "WebPage",
              "@id": url,
            },
            url,
            image,
            articleSection: post.category,
            author: { "@type": "Organization", name: post.author, url: siteConfig.url },
            publisher: {
              "@type": "Organization",
              name: siteConfig.name,
              url: siteConfig.url,
              logo: {
                "@type": "ImageObject",
                url: `${siteConfig.url}/images/puresaas_logo.webp`,
              },
            },
          },
        ]}
      />
      <BlogArticleHero copy={copy} locale={lang} post={post} />
      <BlogDetailContent copy={copy} locale={lang} post={post} />
      <RelatedBlogs copy={copy} locale={lang} posts={related} />
      <BlogsFinalCTA copy={copy} dictionary={dictionary} locale={lang} />
    </>
  );
}