import type { Metadata } from "next";
import Link from "next/link";
import { getNewsroomList } from "@/api/newsroom";
import { PageContainer } from "@/components/layout/PageContainer";
import { SiteFooter } from "@/components/layout/SiteFooter";
import { NewsfeedContent } from "@/components/newsfeed/NewsfeedContent";
import { NewsroomHeader } from "@/components/newsroom/NewsroomHeader";
import { ROUTES } from "@/lib/routes";
import { env } from "@/config/env";

export const metadata: Metadata = {
  title: "Newsfeed & Breaking Intelligence | Sterling Protection Partners",
  description:
    "Real-time newsfeed, official bulletins, and global security developments from Sterling Protection Partners.",
  openGraph: {
    title: "Newsfeed & Breaking Intelligence | Sterling Protection Partners",
    description:
      "Real-time newsfeed, official bulletins, and global security developments from Sterling Protection Partners.",
    type: "website",
    url: "/newsfeed",
  },
  twitter: {
    card: "summary_large_image",
    title: "Newsfeed & Breaking Intelligence | Sterling Protection Partners",
    description:
      "Real-time newsfeed, official bulletins, and global security developments from Sterling Protection Partners.",
  },
  alternates: {
    canonical: "/newsfeed",
  },
};

export const instant = false;

export default async function NewsfeedPage() {
  // Fetch initial 20 records on the server
  const { pagination } = await getNewsroomList({
    page: 1,
    limit: 20,
    category: "",
  });

  // Schema.org Structured Data (JSON-LD) for Newsfeed
  const newsfeedSchema = {
    "@context": "https://schema.org",
    "@type": "LiveBlogPosting",
    headline: "Newsfeed & Breaking Intelligence | Sterling Protection Partners",
    description:
      "Real-time newsfeed, official bulletins, and global security developments from Sterling Protection Partners.",
    url: `${env.siteUrl}/newsfeed`,
    publisher: {
      "@type": "Organization",
      name: "Sterling Protection Partners",
      url: env.siteUrl,
      logo: {
        "@type": "ImageObject",
        url: `${env.siteUrl}/icon.svg`,
      },
    },
    liveBlogUpdate: pagination.docs.map((item) => ({
      "@type": "BlogPosting",
      headline: item.t,
      description: item.st || "",
      image: item.bi ? [item.bi] : undefined,
      datePublished: item.d || item.createdAt,
      url: `${env.siteUrl}/newsroom/${item.sl || item._id}`,
      author: {
        "@type": "Person",
        name: item.author || item.cat_name || "Sterling Protection Partners",
      },
    })),
  };

  const breadcrumbSchema = {
    "@context": "https://schema.org",
    "@type": "BreadcrumbList",
    itemListElement: [
      {
        "@type": "ListItem",
        position: 1,
        name: "Home",
        item: `${env.siteUrl}/`,
      },
      {
        "@type": "ListItem",
        position: 2,
        name: "Newsroom",
        item: `${env.siteUrl}/newsroom`,
      },
      {
        "@type": "ListItem",
        position: 3,
        name: "Newsfeed",
        item: `${env.siteUrl}/newsfeed`,
      },
    ],
  };

  return (
    <PageContainer>
      {/* Schema.org Structured Data */}
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(newsfeedSchema) }}
      />
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(breadcrumbSchema) }}
      />

      <NewsroomHeader />

      <main className="w-full pt-4 pb-16 sm:pt-6 sm:pb-24">
        {/* Breadcrumb & Section Header */}
        <div className="mx-auto  w-full max-w-[1280px] px-5 sm:px-8 md:px-[60px]">
          {/* Breadcrumb */}
          <nav
            aria-label="Breadcrumbs"
            className="mb-4 flex items-center gap-2 text-xs font-medium text-gray-500 sm:text-sm"
          >
            <Link
              href={ROUTES.home}
              className="transition-colors hover:text-accent"
            >
              Home
            </Link>
            <span className="text-gray-400">/</span>
            <Link
              href={ROUTES.newsroom}
              className="transition-colors hover:text-accent"
            >
              Newsroom
            </Link>
            <span className="text-gray-400">/</span>
            <span className="font-semibold text-gray-900">News latest</span>
          </nav>

          {/* Header Title with LIVE Pill Badge */}
          <div className="flex flex-col gap-2.5 sm:flex-row sm:items-center sm:justify-between">
            <div>

              <h1 className="text-2xl font-normal tracking-tight text-[#0d2440] sm:text-3xl lg:text-4xl mt-6">

                <span className="font-bold text-accent  tracking-wider ">The Latest</span>
              </h1>

            </div>
          </div>
        </div>

        {/* Newsfeed Content */}
        <NewsfeedContent initialPagination={pagination} />
      </main>

      <SiteFooter />
    </PageContainer>
  );
}