import Image from "next/image";
import SectionHeading from "@/components/SectionHeading";
import FadeIn from "@/components/animations/FadeIn";
import CallToAction from "@/components/CallToAction";
import { NewsGrid } from "@/components/news/NewsGrid";
import { 
  getNewsPageContent, 
  getNewsPageArticles,
  getNewsPageSeo,
} from "@/services/pages/public/news";
import { Metadata } from "next";

export const revalidate = 1800;

export async function generateMetadata(): Promise<Metadata> {
  const seo = await getNewsPageSeo();

  if(!seo) {
    return {
      title: "News & Insights | Petro-Base Group",
      description: "Stay up to date with Petro-Base Group's latest projects, milestones, and industry updates.",
    };
  }

  return {
    title: seo.meta_title,
    description: seo.meta_description,
    robots: seo.no_index ? "noindex, nofollow" : "index, follow",
    alternates: seo.canonical_url ? { canonical: seo.canonical_url } : {},
    openGraph: {
      title: seo.og_title,
      description: seo.og_description,
      url: "https://petrobasegroup.com/news",
      siteName: "Petro-Base Group",
      images: seo.og_image_url
        ? [
            {
              url: seo.og_image_url,
              width: 1200,
              height: 630,
              alt: seo.og_title,
            },
          ]
        : [],
      type: "website",
    },
  };


}


export default async function NewsPage() {
  const [content, articlesResult, seo] = await Promise.all([
    getNewsPageContent(),
    getNewsPageArticles(),
    getNewsPageSeo(),
  ]);

  const hero = content?.hero;

  const schemaJson = seo?.schema_json
    ? typeof seo.schema_json === "object"
      ? JSON.stringify(seo.schema_json)
      : seo.schema_json
    : null;

  return (
    <>
      {schemaJson && (
        <script
          type="application/ld+json"
          dangerouslySetInnerHTML={{ __html: schemaJson }}
        />
      )}
      <div className="bg-background text-foreground">
        {/* Hero */}
        <section className="relative h-[50vh] min-h-[360px] flex items-center justify-center overflow-hidden">
          {hero?.image_url ? (
            <Image
              src={hero.image_url}
              width={1920}
              height={1080}
              alt={hero.image_alt ?? "News hero"}
              className="absolute inset-0 w-full h-full object-cover"
            />
          ) : null}
          <div className="absolute inset-0 bg-primary/80" />
          <FadeIn y={30} duration={0.7} className="relative z-10 text-center petro-container">
            <div className="flex items-center justify-center gap-3 mb-6">
              <div className="w-12 h-[2px] bg-accent" />
              <span className="petro-section-label-light">
                {hero?.label ?? "Latest Updates"}
              </span>
              <div className="w-12 h-[2px] bg-accent" />
            </div>
            <h1 className="text-4xl md:text-6xl font-bold text-primary-foreground mb-4 tracking-tight">
              {hero?.title ?? "News & Insights"}
            </h1>
            <p className="text-primary-foreground/70 text-lg max-w-2xl mx-auto">
              {hero?.description ??
                "Stay up to date with Petro-Base Group's latest projects, milestones, and industry updates."}
            </p>
          </FadeIn>
        </section>

        {/* Article Grid */}
        <section className="bg-secondary petro-section">
          <div className="petro-container">
            <SectionHeading
              title={content?.section_heading ?? "Latest Stories"}
              subtitle={content?.section_subtitle}
            />
            <NewsGrid
              initialData={articlesResult.data}
              initialMeta={articlesResult.meta}
            />
          </div>
        </section>

        <CallToAction />
      </div>
    </>
  );
}