"use client";

import { useState, useRef, type ReactNode } from 'react';
import { ArrowRight, ChevronDown } from 'lucide-react';
import coolRoofLayers from '@/assets/cool-roof-layers.webp';
import WpImage from './ui/WpImage';
import { localizedUri } from '@/config/i18nRoutes';
import { useLocale } from '@/components/blocks/localeContext';
import { MICROCOPY } from '@/components/blocks/microcopy';
import { pickAlt, type AltDict } from '@/components/blocks/altText';

const FOUNDER_LABEL: Record<string, string> = { fr: 'fondateur', en: 'founder', es: 'fundador' };

const SYSTEM_ALT: AltDict = {
  fr: 'Coupe du système Cool Roof Covalba',
  en: 'Cross-section of the Covalba Cool Roof system',
  es: 'Sección del sistema Cool Roof Covalba',
};

export const defaultLayers = [
  {
    id: 'primer',
    num: '01',
    title: "Primaire d'accroche",
    description:
      "S'adapte au support existant. Chaque toiture a sa chimie, chaque chimie demande son primaire. C'est cette couche invisible qui garantit l'adhérence de tout le système. Le primaire crée un pont chimique entre votre étanchéité existante et la résine réfléchissante. Sans lui, rien ne tient. Avec le bon primaire, le système est soudé à votre toiture pour 10 ans minimum.",
    expert: "Un primaire inadapté, c'est un système qui cloque et se décolle en quelques mois. C'est la première cause d'échec des cool roof low-cost : ils mettent le même primaire sur tout. Nous, on a un primaire spécifique par type de support.",
    pillColor: 'bg-terracotta text-white',
    dotColor: 'bg-terracotta',
    borderColor: 'border-terracotta',
    chevronColor: 'text-terracotta',
  },
  {
    id: 'resin',
    num: '02',
    title: 'Résine réfléchissante',
    description:
      "Le coeur du système. C'est elle qui réfléchit le rayonnement solaire au lieu de l'absorber. La surface du toit passe de 70°C à 35°C. La chaleur ne rentre plus dans votre bâtiment. Toutes les résines cool roof ne se valent pas. Il y a deux familles : les résines acryliques (comme la peinture de vos murs) et les résines polyuréthane (chimie technique, plus résistante). Le choix de la résine détermine tout : performance, durabilité, résistance aux intempéries.",
    expert: "90% du marché vend de l'acrylique généraliste à 10€/m². Ça tient 2 à 5 ans. Nous, on formule des résines polyuréthane qui tiennent 8 à 10 ans. SRI 118 après vieillissement : record européen. La différence, c'est la chimie.",
    pillColor: 'bg-foreground text-white',
    dotColor: 'bg-foreground',
    borderColor: 'border-foreground',
    chevronColor: 'text-foreground',
  },
  {
    id: 'topcoat',
    num: '03',
    title: 'Vernis de protection',
    description:
      "Un top coat transparent qui protège la résine des UV, de la pollution et du vieillissement prématuré. C'est le bouclier invisible du système. Les UV détruisent tout : plastiques, peintures, résines. En toiture, l'exposition est maximale : 12h par jour, 365 jours par an. Le vernis de finition absorbe les UV à la place de la résine et préserve sa réflectivité dans le temps. C'est ce qui fait la différence entre 5 ans et 20 ans de performance.",
    expert: "Sans protection, même une bonne résine finit par jaunir après 3-4 ans. Le CovaTherm 20 avec vernis de finition, c'est 20 ans de performance mesurée. C'est pour ça qu'on est les seuls à avoir un SRI de 118 après vieillissement.",
    pillColor: 'bg-primary text-white',
    dotColor: 'bg-primary',
    borderColor: 'border-primary',
    chevronColor: 'text-primary',
  },
];

const positions: Record<string, { top: string; left: string }> = {
  base: { top: '67.0%', left: '36.8%' },
  primer: { top: '56.7%', left: '36.5%' },
  resin: { top: '48.2%', left: '36.5%' },
  topcoat: { top: '36.3%', left: '35.6%' },
};

export type SystemLayer = (typeof defaultLayers)[number];

interface SystemSectionProps {
  badge?: string;
  titre?: ReactNode;
  intro?: string;
  layers?: SystemLayer[];
  imageSrc?: string;
  imageAlt?: string;
  imageWidth?: number;
  imageHeight?: number;
}

const SystemSection = ({
  badge = 'Comment ça marche',
  titre,
  intro = 'Un primaire, une résine, un vernis qui garantit 10 ans de performance pour votre toiture.',
  layers = defaultLayers,
  imageSrc = coolRoofLayers.src,
  imageAlt,
  imageWidth = coolRoofLayers.width,
  imageHeight = coolRoofLayers.height,
}: SystemSectionProps = {}) => {
  const locale = useLocale();
  const founderLabel = FOUNDER_LABEL[locale];
  const resolvedImageAlt = pickAlt(locale, imageAlt, SYSTEM_ALT);
  const [active, setActive] = useState<string>('primer');
  const itemRefs = useRef<Record<string, HTMLDivElement | null>>({});
  const accordionRef = useRef<HTMLDivElement | null>(null);

  const toggle = (id: string) => {
    setActive((prev) => (prev === id ? '' : id));
    // On desktop, scroll so the top of the accordion is always visible (with navbar offset)
    const isDesktop = window.innerWidth >= 1024;
    if (isDesktop && accordionRef.current) {
      setTimeout(() => {
        const rect = accordionRef.current!.getBoundingClientRect();
        const navbarHeight = 80;
        window.scrollTo({ top: window.scrollY + rect.top - navbarHeight, behavior: 'smooth' });
      }, 50);
    }
  };

  return (
    <section className="relative bg-white pt-0 lg:pt-0">
      <div className="container mx-auto px-4 lg:px-8">
        {/* Title */}
        <div className="pt-16 lg:pt-32 pb-10 lg:pb-16 flex flex-col lg:flex-row lg:items-end lg:gap-16">
          <div className="lg:w-2/3">
            <p className="text-[10px] uppercase tracking-[0.25em] font-semibold text-muted-foreground font-body mb-6">
              {badge}
            </p>
            <h2
              className="font-satoshi text-3xl sm:text-4xl lg:text-[3rem] font-black text-foreground !leading-[1.05]"
              style={{ letterSpacing: '-0.03em' }}
            >
              {titre ?? (<><span className="text-foreground/30">3 couches de technologie conçues pour </span>réfléchir, protéger et durer.</>)}
            </h2>
          </div>
          <div className="lg:w-1/3 mt-5 lg:mt-0 lg:pb-1 flex flex-col lg:items-end gap-5">
            <p className="text-foreground/50 text-base lg:text-lg font-body leading-relaxed lg:text-right">
              {intro}
            </p>
            <a
              href={localizedUri(locale, '/diagnostic')}
              className="group inline-flex items-center gap-2 cta-gradient text-white font-semibold text-sm pl-6 pr-2 py-2 rounded-full active:scale-[0.97] whitespace-nowrap"
            >
              {MICROCOPY[locale].demanderDevis}
              <span className="flex items-center justify-center w-8 h-8 rounded-full bg-white/20 transition-transform duration-700 ease-[cubic-bezier(0.32,0.72,0,1)] group-hover:translate-x-0.5 group-hover:scale-105">
                <ArrowRight className="w-3.5 h-3.5" />
              </span>
            </a>
          </div>
        </div>

        {/* 2-col grid */}
        <div className="flex flex-col lg:flex-row gap-12 lg:gap-16 pb-24 lg:pb-32">

          {/* Mobile image */}
          <div className="lg:hidden rounded-2xl overflow-hidden shadow-[0_20px_60px_-15px_rgba(0,0,0,0.08)]">
            <WpImage
              image={{ sourceUrl: imageSrc, altText: resolvedImageAlt, width: imageWidth, height: imageHeight }}
              className="w-full"
            />
          </div>

          {/* Left : accordion */}
          <div ref={accordionRef} className="lg:w-1/2 lg:sticky lg:top-[20vh] lg:self-start">
            {layers.map((layer) => {
              const isOpen = active === layer.id;
              return (
                <div
                  key={layer.id}
                  ref={(el) => { itemRefs.current[layer.id] = el; }}
                  className={`border-b border-border last:border-b-0`}
                >
                  {/* Header */}
                  <button
                    onClick={() => toggle(layer.id)}
                    className="w-full flex items-center gap-4 py-6 text-left group"
                  >
                    <span
                      className={`inline-flex items-center justify-center w-8 h-8 rounded-full text-[11px] font-bold font-body flex-shrink-0 transition-all duration-300 ${
                        isOpen ? layer.pillColor : 'bg-muted text-muted-foreground'
                      }`}
                    >
                      {layer.num}
                    </span>
                    <h3
                      className={`font-satoshi text-xl lg:text-2xl font-bold flex-1 transition-colors duration-300 ${
                        isOpen ? 'text-foreground' : 'text-foreground/50 group-hover:text-foreground/80'
                      }`}
                    >
                      {layer.title}
                    </h3>
                    <ChevronDown
                      className={`w-5 h-5 flex-shrink-0 transition-all duration-300 ${
                        isOpen ? `${layer.chevronColor} rotate-180` : 'text-foreground/25'
                      }`}
                      strokeWidth={2}
                    />
                  </button>

                  {/* Body — grid trick for smooth animation */}
                  <div
                    className={`grid transition-all duration-500 ease-[cubic-bezier(0.32,0.72,0,1)] ${
                      isOpen ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'
                    }`}
                  >
                    <div className="overflow-hidden">
                      <div className="pl-6 lg:pl-12 pb-8">
                        <p className="text-base lg:text-lg font-body leading-relaxed text-foreground/65 mb-6">
                          {layer.description}
                        </p>
                        <div className="flex gap-3 items-start rounded-xl p-4 bg-foreground/[0.03]">
                          <WpImage
                            image={{ sourceUrl: '/maxime-bourassin.jpg', altText: `Maxime Bourassin, ${founderLabel} Covalba`, width: 36, height: 36 }}
                            className="w-9 h-9 rounded-full object-cover flex-shrink-0 mt-0.5"
                          />
                          <div>
                            <p className="text-foreground/65 text-[15px] lg:text-base font-body leading-relaxed italic">
                              "{layer.expert}"
                            </p>
                            <p className="text-foreground/50 text-xs font-body mt-2 font-semibold">
                              Maxime Bourassin, {founderLabel}
                            </p>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              );
            })}
          </div>

          {/* Right : image */}
          <div className="hidden lg:block lg:w-1/2">
            <div className="relative rounded-2xl overflow-hidden shadow-[0_30px_80px_-15px_rgba(0,0,0,0.08)]">
              <WpImage
                image={{ sourceUrl: imageSrc, altText: resolvedImageAlt, width: imageWidth, height: imageHeight }}
                className="w-full"
              />
              {layers.map((layer) => {
                const pos = positions[layer.id];
                if (!pos) return null;
                const isActive = active === layer.id;
                return (
                  <div key={layer.id} className="absolute" style={{ top: pos.top, left: pos.left }}>
                    <div
                      className={`absolute -translate-x-1/2 -translate-y-1/2 transition-all duration-500 ease-[cubic-bezier(0.32,0.72,0,1)] ${
                        isActive ? 'scale-125' : 'scale-75 opacity-40'
                      }`}
                    >
                      <div
                        className={`w-3.5 h-3.5 rounded-full ${
                          isActive ? layer.dotColor : 'bg-foreground/20'
                        } shadow-lg ring-2 ring-white transition-colors duration-500`}
                      />
                      {isActive && (
                        <div
                          className={`absolute inset-0 w-3.5 h-3.5 rounded-full ${layer.dotColor} animate-ping opacity-30`}
                        />
                      )}
                    </div>
                    <div
                      className={`absolute top-1/2 -translate-y-1/2 right-5 pointer-events-none transition-all duration-500 ease-[cubic-bezier(0.32,0.72,0,1)] ${
                        isActive ? 'opacity-100 translate-x-0' : 'opacity-0 translate-x-2'
                      }`}
                    >
                      <span
                        className={`rounded-full px-4 py-1.5 text-[13px] font-bold font-body whitespace-nowrap shadow-lg ${layer.pillColor}`}
                      >
                        {layer.title}
                      </span>
                    </div>
                  </div>
                );
              })}
            </div>
          </div>

        </div>
      </div>
    </section>
  );
};

export default SystemSection;