import type { Metadata } from "next";

import CallToAction from "@/components/CallToAction";
import SectionHeading from "@/components/SectionHeading";
import Image from "next/image";
import FadeIn from "@/components/animations/FadeIn";
import { TrainingsGrid } from "@/components/training/TrainingsGrid";
import { AccreditationsGrid } from "@/components/training/AccreditationsGrid";
import {
  getTrainingPageContent,
  getTrainingPageTrainings,
  getTrainingPageAccreditations,
  getTrainingPageSeo,
} from "@/services/pages/public/training";

export const revalidate = 1800;

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

  if (!seo) {
    return {
      title: "Training | Petro-Base Group",
      description: "Professional training and certification programs",
    };
  }

  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/training",
      siteName: "Petro-Base Group",
      images: seo.og_image_url
        ? [
            {
              url: seo.og_image_url,
              width: 1200,
              height: 630,
              alt: seo.og_title,
            },
          ]
        : [],
      type: "website",
    },
  };
}

const TrainingPage = async () => {
  const [content, { data: trainings, meta }, { data: accreditations, meta: accMeta }, seo] = await Promise.all([
    getTrainingPageContent(),
    getTrainingPageTrainings(1),
    getTrainingPageAccreditations(1),
    getTrainingPageSeo(),
  ]);

  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="min-h-screen bg-background">

      {/* Hero */}
      <section className="relative h-[50vh] min-h-[400px] flex items-end">
        {hero?.image_url ? (
          <Image src={hero.image_url} width={1920} height={1080} alt={hero.image_alt ?? "Petro-Base Training Center"} className="absolute inset-0 w-full h-full object-cover" />
        ) : (
          <Image src="/training-center.jpg" width={1920} height={1080} alt="Petro-Base Training Center" className="absolute inset-0 w-full h-full object-cover" />
        )}
        <div className="absolute inset-0 bg-gradient-to-t from-primary via-primary/60 to-transparent" />
        <div className="relative z-10 text-center petro-container pb-16">
          <FadeIn y={30} duration={0.6}>
            <div className="flex items-center justify-center gap-4 mb-4">
              <div className="w-12 h-[2px] bg-accent" />
              <span className="petro-section-label-light">{hero?.label ?? "Training & Certification"}</span>
              <div className="w-12 h-[2px] bg-accent" />
            </div>
            <h1 className="text-4xl md:text-5xl font-bold text-primary-foreground mb-4">
              {hero?.title ?? "Training Center"}
            </h1>
            <p className="text-primary-foreground/70 max-w-2xl text-lg">
              {hero?.description ?? "Internationally accredited operator certification and safety training programs for the oil & gas, construction, and maritime industries."}
            </p>
          </FadeIn>
        </div>
      </section>

      {/* Accreditations */}
      <section className="petro-section bg-secondary">
        <div className="petro-container">
          <SectionHeading
            title={content?.section_heading ?? "Accreditations & Memberships"}
            subtitle={content?.section_subtitle ?? "Our programs are recognized by leading international bodies, ensuring globally accepted certifications."}
          />
          <AccreditationsGrid initialData={accreditations} initialMeta={accMeta} />
        </div>
      </section>

      {/* Programs Grid */}
      <section className="petro-section">
        <div className="petro-container">
          <SectionHeading
            title={content?.training_section_heading ?? "Training Programs"}
            subtitle={content?.training_section_subtitle ?? "Comprehensive operator certification courses designed to international safety standards."}
          />
          <TrainingsGrid initialData={trainings} initialMeta={meta} />
        </div>
      </section>

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

export default TrainingPage;