// Block `tableau_comparatif` — design repris du tableau comparatif de
// SEOContent.tsx (thead navy, lignes alternées, cards empilées en mobile) avec
// la colonne mise en avant traitée comme la colonne Covalba de
// PriceComparisonSection. Conventions de cellules : `oui` / `non` / `-`.

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

const CellValue = ({ value, highlighted }: { value?: string | null; highlighted?: boolean }) => {
  const v = (value ?? "").trim().toLowerCase();
  if (v === "oui") {
    return (
      <span
        className={`inline-flex w-6 h-6 rounded-full items-center justify-center ${
          highlighted ? "bg-white/20" : "bg-primary/15"
        }`}
      >
        <Check className={`w-3.5 h-3.5 ${highlighted ? "text-white" : "text-primary"}`} strokeWidth={2.5} />
      </span>
    );
  }
  if (v === "non") {
    return (
      <span
        className={`inline-flex w-6 h-6 rounded-full items-center justify-center ${
          highlighted ? "bg-white/10" : "bg-terracotta/10"
        }`}
      >
        <X className={`w-3.5 h-3.5 ${highlighted ? "text-white/40" : "text-terracotta/60"}`} strokeWidth={2} />
      </span>
    );
  }
  if (v === "-" || v === "") {
    return <Minus className={`w-4 h-4 inline ${highlighted ? "text-white/25" : "text-foreground/30"}`} strokeWidth={1.5} />;
  }
  return (
    <span className={`text-sm font-body ${highlighted ? "text-white font-semibold" : "text-foreground/70"}`}>
      {value}
    </span>
  );
};

const TableauComparatif = (props: TableauComparatifBlock & { position?: number }) => {
  const headers = arr(props.entetesColonnes);
  // GraphQL expose `lignesComparatif` (cf. SCHEMA.md, piège WPGraphQL ACF) ;
  // fallback `lignes` tant que types.ts n'est pas resynchronisé.
  const lignes = arr(
    props.lignesComparatif
  );
  // `colonne_mise_en_avant` : index 1-based de la colonne à mettre en avant.
  const highlight = props.colonneMiseEnAvant ?? null;

  if (!lignes.length) return null;

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

        {/* Desktop / tablette : table scrollable si étroite */}
        <ScrollReveal>
          <div className="hidden sm:block max-w-5xl mx-auto overflow-x-auto">
            <table className="w-full text-sm border-collapse">
              {headers.length > 0 && (
                <thead>
                  <tr className="bg-foreground text-white">
                    {headers.map((h, i) => (
                      <th
                        key={i}
                        className={`text-left font-satoshi font-bold px-4 py-3 ${
                          i === 0 ? "rounded-tl-xl" : ""
                        } ${i === headers.length - 1 ? "rounded-tr-xl" : ""} ${
                          highlight === i + 1 ? "bg-primary" : ""
                        }`}
                      >
                        {h.texte}
                      </th>
                    ))}
                  </tr>
                </thead>
              )}
              <tbody>
                {lignes.map((ligne, i) => (
                  <tr key={i} className={i % 2 === 0 ? "bg-white" : "bg-foreground/[0.03]"}>
                    {arr(ligne.cellules).map((cell, j) => (
                      <td
                        key={j}
                        className={`px-4 py-3 border-b border-foreground/5 ${
                          j === 0 ? "font-semibold text-foreground" : ""
                        } ${highlight === j + 1 ? "bg-foreground" : ""}`}
                      >
                        <CellValue value={cell.texte} highlighted={highlight === j + 1} />
                      </td>
                    ))}
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </ScrollReveal>

        {/* Mobile : cards empilées par ligne (cf. SEOContent mobile) */}
        <ScrollReveal>
          <div className="sm:hidden space-y-3">
            {lignes.map((ligne, i) => {
              const cells = arr(ligne.cellules);
              return (
                <div key={i} className="rounded-xl border border-foreground/10 bg-white p-4">
                  <p className="text-xs uppercase tracking-wider font-bold text-foreground/50 mb-3">
                    {cells[0]?.texte}
                  </p>
                  <div className="space-y-2 text-sm">
                    {cells.slice(1).map((cell, j) => {
                      const isHighlighted = highlight === j + 2;
                      return (
                        <div
                          key={j}
                          className={`flex justify-between items-center gap-3 px-3 ${
                            isHighlighted ? "bg-foreground text-white rounded-lg py-2" : ""
                          }`}
                        >
                          <span
                            className={`text-xs ${
                              isHighlighted ? "text-teal-vivid font-semibold" : "text-foreground/55"
                            }`}
                          >
                            {headers[j + 1]?.texte ?? `Option ${j + 1}`}
                          </span>
                          <span className="text-right">
                            <CellValue value={cell.texte} highlighted={isHighlighted} />
                          </span>
                        </div>
                      );
                    })}
                  </div>
                </div>
              );
            })}
          </div>
        </ScrollReveal>

        {(props.texteApres || props.cta?.label) && (
          <ScrollReveal>
            <div className="max-w-3xl mx-auto mt-10 text-center">
              {props.texteApres && (
                <p className="text-foreground/60 text-base font-body leading-relaxed mb-6">
                  {props.texteApres}
                </p>
              )}
              <BlockCta cta={props.cta} />
            </div>
          </ScrollReveal>
        )}
      </div>
    </section>
  );
};

export default TableauComparatif;