import Head from "next/head";
import Script from "next/script";
import { URL } from "@/components/url";
import NewsDetails from "@/components/NewsDetails/NewsDetails";

/* ================= PAGE ================= */
export default function NewsDetailPage({
  news,
  categoriesList,
  newsList,
  seo,
}) {
  if (!news) return <h1>❌ News Not Found</h1>;

  return (
    <>
      {/* ================= SEO META TAGS ================= */}
      <Head>
        <title>{seo.title}</title>
        <meta name="description" content={seo.description} />
        <link rel="canonical" href={seo.canonical} />

        {/* Open Graph (WhatsApp / Facebook) */}
        <meta property="og:type" content="article" />
        <meta property="og:title" content={seo.title} />
        <meta property="og:description" content={seo.description} />
        <meta property="og:url" content={seo.canonical} />
        <meta property="og:image" content={seo.image} />
        <meta property="og:image:width" content="1200" />
        <meta property="og:image:height" content="630" />

        {/* Twitter */}
        <meta name="twitter:card" content="summary_large_image" />
        <meta name="twitter:title" content={seo.title} />
        <meta name="twitter:description" content={seo.description} />
        <meta name="twitter:image" content={seo.image} />
      </Head>

      {/* ================= JSON-LD (Google only) ================= */}
      <Script
        id="ld-json"
        type="application/ld+json"
        dangerouslySetInnerHTML={{
          __html: JSON.stringify({
            "@context": "https://schema.org",
            "@type": "NewsArticle",
            headline: news.title,
            description: news.summary,
            image: [seo.image],
            author: {
              "@type": "Organization",
              name: "Update Bharat",
            },
            publisher: {
              "@type": "Organization",
              name: "Update Bharat",
              logo: {
                "@type": "ImageObject",
                url: "https://updatebharat.com/logo.png",
              },
            },
            datePublished: news.createdAt,
            dateModified: news.updatedAt,
          }),
        }}
      />

      <div className="max-w-6xl mx-auto p-6">
        <NewsDetails
          news={news}
          newsList={newsList}
          categoriesList={categoriesList}
        />
      </div>
    </>
  );
}

/* ================= SERVER SIDE ================= */
export async function getServerSideProps({ params }) {
  const { id } = params;

  const res = await fetch(URL.API_BASE_URL + "/publicApi/getNewDetails", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ slug: id }),
  });

  const json = await res.json();
  const news = json?.data?.newsDetails;

  if (!news) return { notFound: true };

  const seo = {
    title: `${news.title} | Update Bharat`,
    description:
      news.meta_description ||
      "Read the latest news updates on Update Bharat.",
    canonical: `https://updatebharat.com/news/${news.slug}`,
    image: news.feature_image
      ? URL.API_BASE_URL + news.feature_image
      : "https://updatebharat.com/default-news-image.jpg",
  };

  return {
    props: {
      news,
      categoriesList: json?.data?.categoryList || [],
      newsList: json?.data?.relatedNews || [],
      seo,
    },
  };
}
