import { BlogCardVertical } from "@/components/blog/blog-card";
import { allBlogs } from "content-collections";
import type { Metadata } from "next";
import { notFound } from "next/navigation";
import { siteConfig } from "@/lib/site";
import { GRAPH_IDS, JsonLd } from "@/lib/json-ld";

const VALID_CATEGORIES = [
  "actualites",
  "guides",
  "reglementation",
  "cas-clients",
] as const;

type Category = (typeof VALID_CATEGORIES)[number];

const SITE_URL = siteConfig.url;

const CATEGORY_META: Record<
  Category,
  { title: string; description: string; label: string; seoContent: string[] }
> = {
  actualites: {
    title: "Actualités Énergie",
    description:
      "Suivez les dernières actualités du marché de l'énergie : prix, tendances, évolutions réglementaires et analyses sectorielles.",
    label: "Actualités",
    seoContent: [
      "Le marché de l'énergie évolue rapidement : tensions géopolitiques, réformes réglementaires et volatilité des prix de gros impactent directement les factures des entreprises. Nos analyses décryptent chaque événement pour vous aider à anticiper.",
      "De la fin de l'ARENH aux évolutions du TURPE, en passant par les crises d'approvisionnement et les tendances du marché EEX, nos ingénieurs traduisent l'actualité en actions concrètes pour votre stratégie énergétique.",
    ],
  },
  guides: {
    title: "Guides Pratiques Énergie",
    description:
      "Découvrez nos guides pratiques pour optimiser vos contrats d'énergie, réduire vos coûts et comprendre le marché de l'électricité et du gaz.",
    label: "Guides",
    seoContent: [
      "Nos guides pratiques sont rédigés par des ingénieurs spécialisés en courtage énergie B2B. Chaque article couvre un sujet en profondeur : négociation de contrats, optimisation TURPE et CSPE, stratégies d'achat par tranches, comparatifs fournisseurs.",
      "Que vous soyez dirigeant de PME, responsable achats ou energy manager, ces ressources vous donnent les clés pour réduire durablement vos coûts énergétiques et prendre des décisions éclairées face aux fournisseurs.",
    ],
  },
  reglementation: {
    title: "Réglementation Énergie",
    description:
      "Restez informé des évolutions réglementaires du secteur de l'énergie : lois, normes, obligations et implications pour votre entreprise.",
    label: "Réglementation",
    seoContent: [
      "La réglementation énergétique française et européenne impose des obligations croissantes aux entreprises : décret tertiaire, décret BACS, audit énergétique obligatoire, fin des tarifs réglementés. Chaque évolution impacte vos coûts et votre conformité.",
      "Nos articles réglementaires détaillent les obligations, les échéances et les stratégies d'adaptation pour transformer ces contraintes en opportunités d'optimisation de vos contrats d'électricité et de gaz.",
    ],
  },
  "cas-clients": {
    title: "Cas Clients & Témoignages",
    description:
      "Découvrez comment nos clients ont optimisé leurs contrats d'énergie et réalisé des économies significatives grâce à notre accompagnement.",
    label: "Cas clients",
    seoContent: [
      "Nos études de cas illustrent concrètement les résultats obtenus par les entreprises accompagnées par Acieb Énergie : réduction de 15 à 30% sur les factures d'électricité et de gaz, optimisation de la puissance souscrite, récupération de taxes.",
      "Chaque témoignage détaille le contexte initial, la méthodologie d'analyse de nos ingénieurs et les économies réalisées. Des résultats mesurables, secteur par secteur.",
    ],
  },
};

interface PageProps {
  params: Promise<{ category: string }>;
}

export async function generateMetadata({
  params,
}: PageProps): Promise<Metadata> {
  const { category } = await params;

  if (!VALID_CATEGORIES.includes(category as Category)) {
    return {};
  }

  const meta = CATEGORY_META[category as Category];
  const canonicalUrl = `${SITE_URL}/${category}/`;

  return {
    title: meta.title,
    description: meta.description,
    alternates: {
      canonical: canonicalUrl,
    },
    openGraph: {
      title: meta.title,
      description: meta.description,
      type: "website",
      url: canonicalUrl,
    },
  };
}

export default async function CategoryPage({ params }: PageProps) {
  const { category } = await params;

  // Validate category
  if (!VALID_CATEGORIES.includes(category as Category)) {
    notFound();
  }

  const meta = CATEGORY_META[category as Category];

  // Filter blogs by category and sort by date
  const blogs = allBlogs
    .filter((blog) => blog.category === category)
    .sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime());

  // JSON-LD for category page + BreadcrumbList
  const jsonLd = {
    "@context": "https://schema.org",
    "@graph": [
      {
        "@type": "CollectionPage",
        name: meta.title,
        description: meta.description,
        url: `${SITE_URL}/${category}`,
        isPartOf: { "@id": GRAPH_IDS.website },
        mainEntity: {
          "@type": "ItemList",
          itemListElement: blogs.map((blog, index) => ({
            "@type": "ListItem",
            position: index + 1,
            url: `${SITE_URL}/${category}/${blog.slug}`,
            name: blog.title,
          })),
        },
      },
      {
        "@type": "BreadcrumbList",
        itemListElement: [
          { "@type": "ListItem", position: 1, name: "Accueil", item: SITE_URL },
          {
            "@type": "ListItem",
            position: 2,
            name: meta.label,
            item: `${SITE_URL}/${category}`,
          },
        ],
      },
    ],
  };

  return (
    <div className="relative overflow-hidden py-20 md:py-0">
      <JsonLd data={jsonLd} />

      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pb-20">
        {/* Breadcrumb UI */}
        <nav aria-label="Fil d'ariane" className="relative z-20 pt-10 md:pt-32 text-sm text-gray-500">
          <ol className="flex items-center gap-1.5">
            <li>
              <a href="/" className="hover:text-orange-700 transition-colors">Accueil</a>
            </li>
            <li aria-hidden="true">/</li>
            <li className="text-gray-900 font-medium">{meta.label}</li>
          </ol>
        </nav>

        <div className="relative z-20 py-6 md:pt-8 text-center">
          <h1 className="text-3xl md:text-5xl font-bold text-gray-900 mb-4">
            {meta.label}
          </h1>
          <p className="text-lg md:text-xl text-gray-600 max-w-3xl mx-auto">
            {meta.description}
          </p>
        </div>

        {/* Contenu textuel SEO (doc Obsidian : 2-3 paragraphes obligatoires) */}
        <div className="max-w-3xl mx-auto mb-12 space-y-4 text-gray-600 text-base leading-relaxed">
          {meta.seoContent.map((paragraph, i) => (
            <p key={i}>{paragraph}</p>
          ))}
        </div>

        {blogs.length === 0 ? (
          <p className="text-gray-500 text-center">
            Aucun article dans cette catégorie pour le moment.
          </p>
        ) : (
          <>
            <div className="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">
              {blogs.slice(0, 15).map((blog) => (
                <BlogCardVertical
                  key={blog.slug}
                  blog={{
                    ...blog,
                    href: `/${category}/${blog.slug}`,
                  }}
                />
              ))}
            </div>
            {blogs.length > 15 && (
              <div className="mt-12 text-center">
                <a
                  href="/ressources/"
                  className="inline-flex items-center gap-2 rounded-lg border border-gray-300 px-6 py-3 text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors"
                >
                  Voir les {blogs.length} articles
                </a>
              </div>
            )}
          </>
        )}
      </div>
    </div>
  );
}

export async function generateStaticParams() {
  return VALID_CATEGORIES.map((category) => ({
    category,
  }));
}