"use client";

// Block `compatibilite_supports` — rendu `tabs` repris (simplifié) de
// src/components/product/CompatibilityTabs.tsx : onglets thumbnails à gauche,
// panneau image + détail à droite, strip horizontal en mobile. Rendu `grille`
// : cards simples. L'entête est pilotée par le clone WP (pas de productName).

import { useState } from "react";
import { Check } from "lucide-react";
import ScrollReveal from "@/components/ScrollReveal";
import WpImage from "@/components/ui/WpImage";
import { arr, mapImage } from "@/lib/wp/mappers";
import type { CompatibiliteSupportsBlock } from "@/lib/wp/types";
import { SectionHeading } from "./shared";

const CompatibiliteSupports = (props: CompatibiliteSupportsBlock & { position?: number }) => {
  const supports = arr(props.supports)
    .filter((s) => s.type)
    .map((s) => ({ type: s.type ?? "", detail: s.detail ?? "", image: mapImage(s.image) }));
  const [active, setActive] = useState(0);

  if (!supports.length) return null;
  const current = supports[Math.min(active, supports.length - 1)];
  const isGrid = props.rendu === "grille";

  return (
    <section className="relative py-16 lg:py-24 bg-teal-light overflow-hidden">
      <div className="relative container mx-auto px-4 lg:px-8 max-w-5xl">
        <ScrollReveal>
          <SectionHeading entete={props.entete} centered={false} className="mb-8 lg:mb-14" />
          {props.noteCouverture && (
            <p className="text-xs text-foreground/55 font-body italic -mt-8 mb-10 max-w-2xl">
              {props.noteCouverture}
            </p>
          )}
        </ScrollReveal>
      </div>

      {isGrid ? (
        <div className="relative container mx-auto px-4 lg:px-8 max-w-5xl">
          <ScrollReveal stagger>
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5">
              {supports.map((s, i) => (
                <div
                  key={i}
                  className="rounded-xl border border-foreground/10 bg-white p-3 shadow-[0_4px_20px_rgba(26,42,58,0.06)]"
                >
                  {s.image && (
                    <div className="relative aspect-[4/3] rounded-lg overflow-hidden bg-foreground/5 mb-4">
                      <WpImage
                        image={s.image}
                        alt={s.image.altText || `Illustration ${s.type}`}
                        fill
                        className="w-full h-full object-cover"
                      />
                    </div>
                  )}
                  <div className="px-2 pb-2">
                    <p className="inline-flex items-center gap-1.5 text-[10px] font-bold uppercase tracking-[0.15em] text-teal-vivid mb-1.5">
                      <Check className="w-3 h-3" strokeWidth={2.75} />
                      Compatible
                    </p>
                    <p className="font-satoshi text-base font-bold text-foreground leading-snug">{s.type}</p>
                    {s.detail && (
                      <p className="text-sm text-foreground/70 font-body leading-relaxed mt-1.5">
                        {s.detail}
                      </p>
                    )}
                  </div>
                </div>
              ))}
            </div>
          </ScrollReveal>
        </div>
      ) : (
        <>
          {/* Mobile — strip horizontal (cf. CompatibilityTabs) */}
          <div className="lg:hidden">
            <div className="flex overflow-x-auto gap-2.5 px-4 pb-3 snap-x" style={{ scrollbarWidth: "none" }}>
              {supports.map((s, i) => {
                const isActive = i === active;
                return (
                  <button
                    key={i}
                    onClick={() => setActive(i)}
                    aria-pressed={isActive}
                    className={`group shrink-0 flex flex-col items-center snap-start transition-all ${
                      isActive ? "" : "opacity-60"
                    }`}
                  >
                    <div
                      className={`w-[72px] h-[72px] rounded-xl overflow-hidden relative border-2 bg-foreground/5 ${
                        isActive ? "border-foreground" : "border-transparent"
                      }`}
                    >
                      {s.image && (
                        <WpImage
                          image={s.image}
                          alt={s.image.altText || `Illustration ${s.type}`}
                          fill
                          sizes="72px"
                          className="w-full h-full object-cover"
                        />
                      )}
                    </div>
                    <span
                      className={`mt-1.5 text-[11px] font-satoshi font-bold leading-tight max-w-[80px] text-center line-clamp-2 ${
                        isActive ? "text-foreground" : "text-foreground/60"
                      }`}
                    >
                      {s.type}
                    </span>
                  </button>
                );
              })}
            </div>
          </div>

          {/* Tabs desktop + panneau actif */}
          <div className="relative container mx-auto px-4 lg:px-8 max-w-5xl mt-4 lg:mt-0">
            <div className="grid grid-cols-1 lg:grid-cols-[4fr_6fr] gap-6 lg:gap-10 items-start">
              <div className="hidden lg:flex flex-col gap-2">
                {supports.map((s, i) => {
                  const isActive = i === active;
                  return (
                    <button
                      key={i}
                      onClick={() => setActive(i)}
                      className={`group flex items-center gap-4 text-left rounded-xl p-3 border transition-all ${
                        isActive
                          ? "border-foreground bg-white shadow-[0_4px_20px_rgba(26,42,58,0.06)]"
                          : "border-foreground/10 bg-white/60 hover:border-foreground/25 hover:bg-white"
                      }`}
                    >
                      <div className="shrink-0 w-14 h-14 rounded-lg overflow-hidden bg-foreground/5 relative">
                        {s.image && (
                          <WpImage
                            image={s.image}
                            alt={s.image.altText || `Illustration ${s.type}`}
                            fill
                            sizes="56px"
                            className="w-full h-full object-cover"
                          />
                        )}
                      </div>
                      <div className="flex-1 min-w-0">
                        <span className="text-[10px] font-mono font-bold tabular-nums text-foreground/45 block mb-0.5">
                          {String(i + 1).padStart(2, "0")}
                        </span>
                        <p className="text-sm font-satoshi font-bold leading-snug truncate text-foreground">
                          {s.type}
                        </p>
                      </div>
                    </button>
                  );
                })}
              </div>

              <div>
                <div className="relative aspect-[4/3] rounded-2xl overflow-hidden mb-4 lg:mb-5 bg-foreground/5">
                  {current.image && (
                    <WpImage
                      image={current.image}
                      alt={current.image.altText || `Illustration ${current.type}`}
                      fill
                      className="w-full h-full object-cover"
                    />
                  )}
                  <div className="absolute top-3 left-3 lg:top-4 lg:left-4">
                    <span className="inline-flex items-center gap-1.5 bg-teal-vivid text-white text-[10px] lg:text-[11px] font-bold uppercase tracking-[0.15em] px-2.5 lg:px-3 py-1 lg:py-1.5 rounded-full shadow-[0_4px_16px_rgba(58,173,173,0.30)]">
                      <Check className="w-3 h-3 lg:w-3.5 lg:h-3.5" strokeWidth={2.75} />
                      Compatible
                    </span>
                  </div>
                </div>

                <h3
                  className="font-satoshi text-xl lg:text-3xl font-black mb-2 lg:mb-3 !leading-[1.1] text-foreground"
                  style={{ letterSpacing: "-0.02em" }}
                >
                  {current.type}
                </h3>
                {current.detail && (
                  <p className="text-sm lg:text-base font-body leading-relaxed text-foreground/70">
                    {current.detail}
                  </p>
                )}
              </div>
            </div>
          </div>
        </>
      )}
    </section>
  );
};

export default CompatibiliteSupports;