import type { Metadata } from "next";

import Industrie from "@/views/Industrie";
import Navbar from "@/components/Navbar";
import Footer from "@/components/Footer";
import StickyMobileCTA from "@/components/StickyMobileCTA";
import JsonLd from "@/components/seo/JsonLd";
import { BlockRenderer } from "@/components/blocks/BlockRenderer";
import { buildMetadata, SITE_URL } from "@/lib/seo";
import {
  INDUSTRIE_DESCRIPTION,
  INDUSTRIE_PAGE_URL,
  INDUSTRIE_TITLE,
  industrieJsonLd,
} from "@/data/industrieSeo";
import { getWpPage } from "@/lib/wp/queries/page";
import { breadcrumbJsonLd, wpSeoToMetadata } from "@/lib/wp/seoToMetadata";
import type { WpPage } from "@/lib/wp/types";

const WP_URI = "/industrie";

// Metas historiques, conservées en fallback si WP est indisponible.
const FALLBACK_META = {
  title: INDUSTRIE_TITLE,
  description: INDUSTRIE_DESCRIPTION,
  canonical: INDUSTRIE_PAGE_URL,
};

async function fetchPage(): Promise<WpPage | null> {
  try {
    const page = await getWpPage(WP_URI);
    if (!page) console.warn(`[wp] page ${WP_URI} introuvable, fallback vue codée.`);
    return page;
  } catch (error) {
    console.error(`[wp] page ${WP_URI} indisponible, fallback vue codée :`, error);
    return null;
  }
}

export async function generateMetadata(): Promise<Metadata> {
  const page = await fetchPage();
  if (!page) return buildMetadata(FALLBACK_META);
  return wpSeoToMetadata(page.seo, FALLBACK_META);
}

export default async function Page() {
  const page = await fetchPage();

  if (!page) {
    return (
      <>
        <JsonLd id="industrie-jsonld" data={industrieJsonLd} />
        <Industrie />
      </>
    );
  }

  return (
    <div className="min-h-screen bg-background">
      <JsonLd
        id="industrie-breadcrumb-jsonld"
        data={breadcrumbJsonLd([
          { name: "Accueil", url: `${SITE_URL}/` },
          { name: "Cool roof industriel", url: INDUSTRIE_PAGE_URL },
        ])}
      />
      <Navbar />
      <main>
        <BlockRenderer sections={page.sections?.sections} />
      </main>
      <Footer />
      <StickyMobileCTA />
    </div>
  );
}