import BlogPage from "@/components/blog";
import Layout from "@/components/layout/StLayout";
import { fetchReq } from "@/lib/req";
import { getStateInfo } from "@/lib/getStateInfo";

export async function generateMetadata({ params }) {
  const { slug } = await params;
  const API_URL = process.env.NEXT_PUBLIC_API_URL;
  const { matchedCity } = await getStateInfo();
  const siteName = matchedCity?.site_name || "نوبت 724";

  try {
    const blog = await fetchReq(`${API_URL}/api/v1/blog/${slug}`);
    if (!blog) return {};

    const title = `${blog.title} | ${siteName}`;
    const rawText = blog.body ? blog.body.replace(/<[^>]*>/g, "").trim() : "";
    const description = rawText.slice(0, 160) || blog.title;

    return {
      title,
      description,
      openGraph: {
        title,
        description,
        type: "article",
        ...(blog.created && { publishedTime: blog.created }),
        images: blog.images?.[0]
          ? [blog.images[0]]
          : ["https://www.nobat724.com/assets/images/logo.png"],
      },
      twitter: {
        card: "summary_large_image",
        title,
        description,
        images: blog.images?.[0]
          ? [blog.images[0]]
          : ["https://www.nobat724.com/assets/images/logo.png"],
      },
    };
  } catch {
    return {};
  }
}

async function Blog({ params }) {
  const { slug } = await params;
  const API_URL = process.env.NEXT_PUBLIC_API_URL;

  const blog = await fetchReq(`${API_URL}/api/v1/blog/${slug}`);

  let relatedBlogs = [];
  if (blog?.tag?.[0]?.id) {
    const tagId = blog.tag[0].id;
    const relatedResponse = await fetchReq(
      `${API_URL}/api/v1/blogs?page=1&limit=12&tag=${tagId}`
    );
    relatedBlogs = relatedResponse?.blogs || [];
  }

  const jsonLd = blog
    ? {
        "@context": "https://schema.org",
        "@type": "Article",
        headline: blog.title,
        ...(blog.images?.[0] && { image: blog.images[0] }),
        ...(blog.created && { datePublished: blog.created }),
        ...(blog.author && { author: { "@type": "Person", name: blog.author } }),
      }
    : null;

  return (
    <>
      {jsonLd && (
        <script
          type="application/ld+json"
          dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
        />
      )}
      <Layout>
        <BlogPage blog={blog} blogs={relatedBlogs} />
      </Layout>
    </>
  );
}

export default Blog;