// Block `fiche_chantier` (reference) — rend les données du groupe
// `ficheReference` du post courant (passé en prop `fiche` par le template
// reference). Design repris de src/views/ReferenceDetail.tsx : chips d'infos
// chantier, grille de metrics, blockquote, embed vidéo.

import { MapPin } from "lucide-react";
import ScrollReveal from "@/components/ScrollReveal";
import { arr } from "@/lib/wp/mappers";
import type { FicheChantierBlock, WpFicheReference } from "@/lib/wp/types";
import { getEmbedUrl } from "./shared";

const FicheChantier = (
  props: FicheChantierBlock & { fiche?: WpFicheReference; position?: number }
) => {
  if (props.afficher === false) return null;
  const fiche = props.fiche;
  if (!fiche) return null;

  const metrics = arr(fiche.metrics).filter((m) => m.value);
  const produit = arr(fiche.produit?.nodes)[0];
  const chips = [
    fiche.location ? { icon: true, label: fiche.location } : null,
    produit?.title ? { icon: false, label: produit.title } : null,
    fiche.support ? { icon: false, label: fiche.support } : null,
    fiche.surface ? { icon: false, label: fiche.surface } : null,
  ].filter(Boolean) as { icon: boolean; label: string }[];

  return (
    <>
      {/* Infos chantier — bandeau navy (cf. hero ReferenceDetail) */}
      {(fiche.clientName || chips.length > 0) && (
        <section className="bg-navy py-10 lg:py-14 text-white">
          <div className="container mx-auto px-4 lg:px-8">
            {fiche.clientName && (
              <p className="font-satoshi text-2xl lg:text-3xl font-black leading-tight tracking-tight mb-5">
                {fiche.clientName}
              </p>
            )}
            {chips.length > 0 && (
              <div className="flex flex-wrap gap-3 font-body text-sm text-white/58">
                {chips.map((chip, i) => (
                  <span
                    key={i}
                    className="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/[0.06] px-4 py-2"
                  >
                    {chip.icon && <MapPin className="h-4 w-4 text-teal-vivid" />}
                    {chip.label}
                  </span>
                ))}
              </div>
            )}
          </div>
        </section>
      )}

      {/* Metrics (cf. ReferenceDetail) */}
      {metrics.length > 0 && (
        <section className="bg-white py-14 lg:py-20">
          <div className="container mx-auto px-4 lg:px-8">
            <ScrollReveal stagger>
              <div className="grid gap-5 md:grid-cols-2 lg:grid-cols-4">
                {metrics.map((metric, i) => (
                  <div key={i} className="rounded-lg border border-border bg-[#F6FAFB] p-6">
                    <p className="font-satoshi text-4xl font-black leading-none text-primary">
                      {metric.value}
                    </p>
                    <p className="mt-3 font-body text-sm font-semibold leading-snug text-foreground/62">
                      {metric.label}
                    </p>
                  </div>
                ))}
              </div>
            </ScrollReveal>
          </div>
        </section>
      )}

      {/* Quote + vidéo (cf. ReferenceDetail) */}
      {(fiche.quote?.texte || fiche.videoUrl) && (
        <section className="bg-background py-14 lg:py-20">
          <div className="container mx-auto px-4 lg:px-8">
            <div
              className={`grid gap-10 ${
                fiche.quote?.texte && fiche.videoUrl ? "lg:grid-cols-[0.8fr_1fr] lg:items-start" : ""
              }`}
            >
              {fiche.quote?.texte && (
                <ScrollReveal>
                  <blockquote className="rounded-lg border border-border bg-white p-6 shadow-sm">
                    <p className="font-satoshi text-xl font-bold leading-snug text-foreground">
                      “{fiche.quote.texte}”
                    </p>
                    {fiche.quote.auteur && (
                      <footer className="mt-4 font-body text-sm text-foreground/55">
                        {fiche.quote.auteur}
                        {fiche.quote.role ? ` · ${fiche.quote.role}` : ""}
                      </footer>
                    )}
                  </blockquote>
                </ScrollReveal>
              )}

              {fiche.videoUrl && (
                <ScrollReveal>
                  <div className="overflow-hidden rounded-lg border border-border bg-navy shadow-[0_18px_70px_rgba(25,42,58,0.14)]">
                    <div className="aspect-video">
                      <iframe
                        title={`Vidéo ${fiche.clientName ?? "chantier"}`}
                        src={getEmbedUrl(fiche.videoUrl)}
                        className="h-full w-full"
                        loading="lazy"
                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                        referrerPolicy="strict-origin-when-cross-origin"
                        allowFullScreen
                      />
                    </div>
                  </div>
                </ScrollReveal>
              )}
            </div>
          </div>
        </section>
      )}
    </>
  );
};

export default FicheChantier;