import type { Metadata } from "next";
import { notFound } from "next/navigation";
import { ArrowRight, BookOpenText } from "lucide-react";

import Navbar from "@/components/Navbar";
import Footer from "@/components/Footer";
import StickyMobileCTA from "@/components/StickyMobileCTA";
import JsonLd from "@/components/seo/JsonLd";
import { buildMetadata, SITE_URL } from "@/lib/seo";
import { HUB_CONFIGS, isHubSlug, type HubSlug } from "@/lib/frProdRoutes";
import { toBlogCard } from "@/lib/blog/content";
import { getAllPosts, type WpPostCard } from "@/lib/wp/queries/post";
import { breadcrumbJsonLd } from "@/lib/wp/seoToMetadata";

export function generateStaticParams() {
  return Object.keys(HUB_CONFIGS).map((slug) => ({ slug }));
}

export async function generateMetadata({
  params,
}: {
  params: Promise<{ slug: string }>;
}): Promise<Metadata> {
  const { slug } = await params;
  if (!isHubSlug(slug)) return {};
  const config = HUB_CONFIGS[slug];
  return buildMetadata({
    title: config.title,
    description: config.description,
    canonical: `${SITE_URL}/hub/${slug}`,
  });
}

const normalize = (value: string): string =>
  value
    .normalize("NFD")
    .replace(/[\u0300-\u036f]/g, "")
    .toLowerCase();

const stripHtml = (value: string | null | undefined): string =>
  (value ?? "").replace(/<[^>]+>/g, " ");

const matchesHub = (post: WpPostCard, hub: HubSlug): boolean => {
  const config = HUB_CONFIGS[hub];
  const categories = post.categories?.nodes?.map((category) => category.name).join(" ") ?? "";
  const haystack = normalize(`${post.slug} ${post.title ?? ""} ${stripHtml(post.excerpt)} ${categories}`);
  return config.keywords.some((keyword) => haystack.includes(normalize(keyword)));
};

export default async function Page({
  params,
}: {
  params: Promise<{ slug: string }>;
}) {
  const { slug } = await params;
  if (!isHubSlug(slug)) notFound();

  const config = HUB_CONFIGS[slug];
  let cards = [] as ReturnType<typeof toBlogCard>[];
  try {
    cards = (await getAllPosts()).filter((post) => matchesHub(post, slug)).map(toBlogCard);
  } catch (error) {
    console.error("[wp] articles hub indisponibles :", error);
  }

  const pageUrl = `${SITE_URL}/hub/${slug}`;
  const jsonLd = {
    "@context": "https://schema.org",
    "@type": "CollectionPage",
    name: config.title,
    url: pageUrl,
    description: config.description,
    mainEntity: cards.slice(0, 12).map((article) => ({
      "@type": "BlogPosting",
      headline: article.title,
      url: `${SITE_URL}${article.href}`,
      ...(article.image ? { image: article.image.sourceUrl } : {}),
    })),
  };

  return (
    <div className="min-h-screen bg-background">
      <JsonLd
        id={`hub-${slug}-jsonld`}
        data={[
          jsonLd,
          breadcrumbJsonLd([
            { name: "Accueil", url: `${SITE_URL}/` },
            { name: "Guides", url: `${SITE_URL}/guides` },
            { name: config.title, url: pageUrl },
          ]),
        ]}
      />
      <Navbar />
      <main>
        <section className="relative overflow-hidden bg-navy pb-16 pt-28 text-white lg:pb-20 lg:pt-36">
          <div className="absolute inset-0 opacity-36">
            <img
              src="/images/qui-sommes-nous/hero-pulverisation.jpg"
              alt=""
              className="h-full w-full object-cover"
              aria-hidden="true"
            />
            <div className="absolute inset-0 bg-gradient-to-r from-navy via-navy/86 to-navy/46" />
          </div>
          <div className="container relative z-10 mx-auto px-4 lg:px-8">
            <p className="mb-5 font-body text-[10px] font-bold uppercase tracking-[0.24em] text-white/58">
              Hub ressources
            </p>
            <h1 className="max-w-4xl font-satoshi text-5xl font-black leading-[0.96] tracking-tight md:text-6xl lg:text-7xl">
              {config.title}
            </h1>
            <p className="mt-6 max-w-2xl font-body text-lg leading-relaxed text-white/72">
              {config.description}
            </p>
          </div>
        </section>

        <section className="bg-offwhite py-16 lg:py-24">
          <div className="container mx-auto px-4 lg:px-8">
            {cards.length > 0 ? (
              <div className="grid gap-6 md:grid-cols-2 xl:grid-cols-3">
                {cards.map((article) => (
                  <a
                    key={article.href}
                    href={article.href}
                    className="group flex min-h-[350px] flex-col overflow-hidden rounded-lg border border-border bg-card shadow-sm transition-all duration-300 hover:-translate-y-1 hover:border-primary/20 hover:shadow-[0_18px_58px_rgba(25,42,58,0.12)]"
                  >
                    <div className="aspect-[16/10] overflow-hidden bg-muted">
                      <img
                        src={article.image?.sourceUrl || "/images/prime-cee/revetement-reflectif-toiture.jpg"}
                        alt={article.image?.altText || ""}
                        className="h-full w-full object-cover transition-transform duration-700 group-hover:scale-105"
                        loading="lazy"
                      />
                    </div>
                    <div className="flex flex-1 flex-col p-5">
                      <span className="w-fit rounded-full bg-primary/10 px-3 py-1 font-body text-[11px] font-bold uppercase tracking-[0.12em] text-primary">
                        {article.category}
                      </span>
                      <h2 className="mt-4 font-satoshi text-xl font-black leading-tight tracking-tight text-foreground transition-colors group-hover:text-primary">
                        {article.title}
                      </h2>
                      <span className="mt-auto inline-flex items-center gap-2 pt-7 font-body text-sm font-semibold text-primary">
                        Lire le guide <ArrowRight className="h-4 w-4" />
                      </span>
                    </div>
                  </a>
                ))}
              </div>
            ) : (
              <div className="rounded-lg border border-border bg-card p-8 text-center">
                <BookOpenText className="mx-auto h-10 w-10 text-primary" />
                <p className="mt-4 font-satoshi text-xl font-black text-foreground">Aucun article trouvé.</p>
                <p className="mt-2 font-body text-sm text-foreground/56">
                  Les articles WordPress ne contiennent pas encore de ressource associée à cette thématique.
                </p>
              </div>
            )}
          </div>
        </section>
      </main>
      <Footer />
      <StickyMobileCTA />
    </div>
  );
}