// Block `specs_techniques` (produit) — design repris de
// src/components/product/TechnicalSpecs.tsx : grille desktop avec colonne mise
// en avant en élévation navy, cards empilées en mobile, lien fiche technique.

import { ArrowRight, Check, Minus, X } from "lucide-react";
import ScrollReveal from "@/components/ScrollReveal";
import { arr } from "@/lib/wp/mappers";
import type { SpecsTechniquesBlock } from "@/lib/wp/types";
import { SectionHeading } from "./shared";

const Cell = ({ value, dark = false }: { value?: string | null; dark?: boolean }) => {
  const v = (value ?? "").trim().toLowerCase();
  if (v === "oui") {
    return (
      <span
        className={`inline-flex w-6 h-6 rounded-full items-center justify-center ${
          dark ? "bg-white/15" : "bg-primary/15"
        }`}
      >
        <Check className={`w-3.5 h-3.5 ${dark ? "text-white" : "text-primary"}`} strokeWidth={2.5} />
      </span>
    );
  }
  if (v === "non") {
    return <X className={`w-4 h-4 inline ${dark ? "text-white/25" : "text-foreground/30"}`} strokeWidth={1.5} />;
  }
  if (v === "-" || v === "") {
    return <Minus className={`w-4 h-4 inline ${dark ? "text-white/25" : "text-foreground/30"}`} strokeWidth={1.5} />;
  }
  return (
    <span
      className={`text-sm leading-snug whitespace-pre-line font-body ${
        dark ? "text-white" : "text-foreground/80"
      }`}
    >
      {value}
    </span>
  );
};

const SpecsTechniques = (props: SpecsTechniquesBlock & { position?: number }) => {
  const colonnes = arr(props.colonnesSpecs).filter((c) => c.nom);
  const lignes = arr(props.lignesSpecs).filter((l) => l.label);
  // 1-based parmi les colonnes de valeurs.
  const highlight = props.colonneMiseEnAvant ?? null;
  const fiche = props.ficheTechnique?.node;

  if (!lignes.length) return null;

  const gridTemplate = { gridTemplateColumns: `2fr repeat(${Math.max(colonnes.length, 1)}, 1fr)` };

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

        <ScrollReveal>
          {/* ─── Desktop : colonne mise en avant en élévation navy ─── */}
          <div className="hidden sm:block">
            <div className="grid" style={gridTemplate}>
              <div />
              {colonnes.map((c, i) => {
                const isHl = highlight === i + 1;
                return isHl ? (
                  <div
                    key={i}
                    className="bg-foreground rounded-t-2xl px-3 pt-5 pb-5 text-center -mx-1.5 relative z-10 shadow-[0_-6px_20px_rgba(0,0,0,0.06)]"
                  >
                    <p className="text-[11px] font-semibold text-white/70 font-body uppercase tracking-[0.15em] mb-2">
                      {c.nom}
                    </p>
                    <span className="inline-flex items-center bg-teal-vivid/20 text-teal-vivid text-[9px] font-bold uppercase tracking-wider px-2 py-0.5 rounded-full">
                      Recommandé
                    </span>
                  </div>
                ) : (
                  <div key={i} className="px-3 pt-5 pb-4 text-center">
                    <p className="text-[11px] font-semibold text-foreground/55 font-body uppercase tracking-[0.15em]">
                      {c.nom}
                    </p>
                  </div>
                );
              })}
            </div>

            {lignes.map((ligne, i) => (
              <div
                key={i}
                className={`grid items-stretch ${i % 2 === 0 ? "bg-muted/40" : ""}`}
                style={gridTemplate}
              >
                <div className="px-5 py-4 flex items-center">
                  <span className="text-sm text-foreground/80 font-body font-medium">{ligne.label}</span>
                </div>
                {colonnes.map((_, j) => {
                  const isHl = highlight === j + 1;
                  return (
                    <div
                      key={j}
                      className={`px-3 py-4 flex items-center justify-center text-center ${
                        isHl ? "bg-foreground -mx-1.5 relative z-10" : ""
                      }`}
                    >
                      <Cell value={arr(ligne.valeurs)[j]?.texte} dark={isHl} />
                    </div>
                  );
                })}
              </div>
            ))}

            {highlight && highlight >= 1 && highlight <= colonnes.length && (
              <div className="grid" style={gridTemplate}>
                <div style={{ gridColumn: `span ${highlight}` }} />
                <div className="bg-foreground rounded-b-2xl px-3 py-4 -mx-1.5 relative z-10 shadow-[0_6px_20px_rgba(0,0,0,0.06)]" />
              </div>
            )}
          </div>

          {/* ─── Mobile : cards empilées par colonne (cf. TechnicalSpecs) ─── */}
          <div className="sm:hidden space-y-6">
            {colonnes.map((c, j) => {
              const isHl = highlight === j + 1;
              return (
                <div
                  key={j}
                  className={`rounded-2xl overflow-hidden ${
                    isHl
                      ? "bg-foreground shadow-[0_20px_60px_-15px_rgba(26,42,58,0.3)]"
                      : "border border-border bg-white"
                  }`}
                >
                  <div
                    className={`px-5 py-3 text-center ${
                      isHl ? "border-b border-white/10" : "bg-muted/40 border-b border-border"
                    }`}
                  >
                    <p
                      className={`text-[11px] font-semibold font-body uppercase tracking-[0.15em] ${
                        isHl ? "text-white/70" : "text-foreground/55"
                      }`}
                    >
                      {c.nom}
                    </p>
                  </div>
                  <div className={isHl ? "divide-y divide-white/10" : "divide-y divide-border"}>
                    {lignes.map((ligne, i) => (
                      <div key={i} className="px-5 py-3 flex items-start justify-between gap-4">
                        <span
                          className={`text-xs font-body font-medium flex-1 leading-snug ${
                            isHl ? "text-white/70" : "text-foreground/70"
                          }`}
                        >
                          {ligne.label}
                        </span>
                        <div className="text-right max-w-[55%]">
                          <Cell value={arr(ligne.valeurs)[j]?.texte} dark={isHl} />
                        </div>
                      </div>
                    ))}
                  </div>
                </div>
              );
            })}
          </div>

          {fiche?.mediaItemUrl && (
            <div className="mt-8 text-center sm:text-left">
              <a
                href={fiche.mediaItemUrl}
                target="_blank"
                rel="noopener noreferrer"
                className="inline-flex items-center gap-2 text-primary font-semibold hover:gap-3 transition-all text-sm"
              >
                Télécharger la fiche technique{fiche.title ? ` (${fiche.title})` : ""}
                <ArrowRight className="w-4 h-4" />
              </a>
            </div>
          )}
        </ScrollReveal>
      </div>
    </section>
  );
};

export default SpecsTechniques;