"use client";

// Block `references_grille` — design des cards repris de src/views/References.tsx
// (card image + badge secteur + metrics + lien "Voir le cas").
// - mode `toutes` / `secteur` : alimente la grille depuis les données statiques
//   du repo (@/data/references), filtrées par le terme `secteur` et `limite`.
// - mode `manuel` : rend les nodes relationship reçus (cards simplifiées,
//   les nodes n'exposant que id/slug/title).
// - `filtres` : boutons de filtre par secteur (pattern References.tsx).

import { useState } from "react";
import { ArrowRight, Filter } from "lucide-react";
import ScrollReveal from "@/components/ScrollReveal";
import WpImage from "@/components/ui/WpImage";
import {
  getGridReferencesBySector,
  gridReferences,
  referenceSectors,
  sectorBySlug,
  type ReferenceSector,
  type ReferenceSectorSlug,
} from "@/data/references";
import { referenceCanonicalPath } from "@/lib/frProdRoutes";
import { arr } from "@/lib/wp/mappers";
import type { ReferencesGrilleBlock } from "@/lib/wp/types";
import { SectionHeading } from "./shared";

const sectorsWithAll = ["Tous", ...referenceSectors] as const;
type ActiveSector = (typeof sectorsWithAll)[number];

const ReferencesGrille = (props: ReferencesGrilleBlock & { position?: number }) => {
  const [activeSector, setActiveSector] = useState<ActiveSector>("Tous");

  // --- Mode manuel : nodes relationship --------------------------------------
  const manualNodes = arr(props.referencesManuel?.nodes).filter((n) => n.title);
  if (props.mode === "manuel" && manualNodes.length) {
    return (
      <section className="bg-background py-16 lg:py-24">
        <div className="container mx-auto px-4 lg:px-8">
          <ScrollReveal>
            <SectionHeading entete={props.entete} centered={false} />
          </ScrollReveal>
          <ScrollReveal stagger>
            <div className="grid gap-6 md:grid-cols-2 xl:grid-cols-3">
              {manualNodes.map((node) => (
                <a
                  key={node.id}
                  href={node.slug ? referenceCanonicalPath(node.slug) : "/references"}
                  className="group flex flex-col justify-between overflow-hidden rounded-lg border border-border bg-card p-6 lg:p-7 shadow-sm transition-all hover:-translate-y-0.5 hover:shadow-lg"
                >
                  <h3 className="font-satoshi text-2xl font-black leading-tight tracking-tight text-foreground">
                    {node.title}
                  </h3>
                  <span className="mt-6 inline-flex items-center gap-2 font-body text-sm font-bold text-primary transition-all group-hover:gap-3">
                    Voir le cas <ArrowRight className="h-4 w-4" />
                  </span>
                </a>
              ))}
            </div>
          </ScrollReveal>
        </div>
      </section>
    );
  }

  // --- Modes toutes / secteur : données statiques du repo ---------------------
  const termSlug = props.secteur?.nodes?.[0]?.slug as ReferenceSectorSlug | undefined;
  const lockedSector: ReferenceSector | "Tous" =
    props.mode === "secteur" && termSlug && sectorBySlug[termSlug] ? sectorBySlug[termSlug] : "Tous";

  const showFilters = Boolean(props.filtres) && lockedSector === "Tous";
  const baseSector = showFilters ? activeSector : lockedSector;
  const limit = props.limite && props.limite > 0 ? props.limite : undefined;
  const references = getGridReferencesBySector(baseSector).slice(0, limit);

  const sectorCounts = gridReferences.reduce<Record<string, number>>(
    (acc, reference) => ({ ...acc, [reference.sector]: (acc[reference.sector] ?? 0) + 1 }),
    { Tous: gridReferences.length }
  );

  return (
    <section className="bg-background py-16 lg:py-24">
      <div className="container mx-auto px-4 lg:px-8">
        <ScrollReveal>
          <SectionHeading entete={props.entete} centered={false} />
        </ScrollReveal>

        {showFilters && (
          <div className="mb-10 flex flex-wrap items-center gap-3">
            <span className="inline-flex items-center gap-2 rounded-full border border-border bg-card px-4 py-2 font-body text-sm font-bold text-foreground/55">
              <Filter className="h-4 w-4 text-primary" />
              Secteurs
            </span>
            {sectorsWithAll.map((sector) => (
              <button
                key={sector}
                type="button"
                onClick={() => setActiveSector(sector)}
                className={`rounded-full px-4 py-2 font-body text-sm font-semibold transition-colors ${
                  activeSector === sector
                    ? "bg-primary text-white"
                    : "bg-card text-foreground/62 hover:bg-primary/8 hover:text-primary"
                }`}
              >
                {sector} <span className="opacity-60">{sectorCounts[sector] ?? 0}</span>
              </button>
            ))}
          </div>
        )}

        <ScrollReveal stagger>
          <div className="grid gap-6 md:grid-cols-2 xl:grid-cols-3">
            {references.map((reference) => (
              <article
                key={reference.id}
                className="group flex overflow-hidden rounded-lg border border-border bg-card shadow-sm transition-all hover:-translate-y-0.5 hover:shadow-lg"
              >
                <div className="flex w-full flex-col">
                  <div className="relative aspect-[16/10] overflow-hidden bg-navy">
                    <WpImage
                      image={{
                        sourceUrl: reference.image ?? "/placeholder.svg",
                        altText: reference.title,
                        width: null,
                        height: null,
                      }}
                      alt={reference.title}
                      fill
                      className="h-full w-full object-cover transition-transform duration-700 group-hover:scale-105"
                    />
                    <div className="absolute inset-0 bg-gradient-to-t from-navy/78 via-transparent to-transparent" />
                    <div className="absolute bottom-5 left-5">
                      <span className="rounded-full bg-white px-3 py-1 font-body text-xs font-bold text-primary">
                        {reference.sector}
                      </span>
                    </div>
                  </div>
                  <div className="flex flex-1 flex-col p-6 lg:p-7">
                    <h3 className="font-satoshi text-2xl font-black leading-tight tracking-tight text-foreground">
                      {reference.title}
                    </h3>
                    <p className="mt-4 font-body text-sm leading-relaxed text-foreground/62">
                      {reference.description}
                    </p>
                    {reference.metrics?.length ? (
                      <div className="mt-5 grid grid-cols-2 gap-2">
                        {reference.metrics.slice(0, 2).map((metric) => (
                          <span
                            key={`${reference.id}-${metric.value}`}
                            className="rounded-lg border border-primary/12 bg-primary/6 px-3 py-2 text-primary"
                          >
                            <span className="block font-satoshi text-lg font-bold leading-none">
                              {metric.value}
                            </span>
                            <span className="mt-1 block font-body text-[11px] leading-tight opacity-75">
                              {metric.label}
                            </span>
                          </span>
                        ))}
                      </div>
                    ) : null}
                    {reference.detailSlug ? (
                      <a
                        href={referenceCanonicalPath(reference.detailSlug)}
                        className="group/link mt-auto inline-flex items-center gap-2 pt-6 font-body text-sm font-bold text-primary transition-all hover:gap-3"
                      >
                        Voir le cas <ArrowRight className="h-4 w-4" />
                      </a>
                    ) : null}
                  </div>
                </div>
              </article>
            ))}
          </div>
        </ScrollReveal>
      </div>
    </section>
  );
};

export default ReferencesGrille;