"use client";

import { useCallback, useRef, useState } from 'react';
import type { ReactNode } from 'react';
import { MoveHorizontal } from 'lucide-react';
import ScrollReveal from '@/components/ScrollReveal';

import avantImg from '@/assets/produits/covatherm-light-avant.jpg';
import apresImg from '@/assets/produits/covatherm-light-apres.jpg';

interface CovaThermLightBeforeAfterProps {
  badge?: string;
  titre?: ReactNode;
  intro?: ReactNode;
  imageAvant?: string;
  imageApres?: string;
  altAvant?: string;
  altApres?: string;
  legendeAvant?: string;
  legendeApres?: string;
}

const CovaThermLightBeforeAfter = ({
  badge = 'Avant / après',
  titre,
  intro,
  imageAvant = avantImg.src,
  imageApres = apresImg.src,
  altAvant = 'Lanterneau non traité : lumière abondante mais éblouissement et chaleur radiante sous les postes de travail',
  altApres = 'Lanterneau traité avec CovaTherm Light : lumière naturelle préservée, éblouissement supprimé, gain de 5°C en moyenne',
  legendeAvant = 'La lumière est abondante mais le matériau translucide provoque éblouissement et chaleur. Les postes de travail situés dessous sont inconfortables.',
  legendeApres = "La lumière est préservée, l'éblouissement disparaît et la chaleur est bloquée. Gain moyen de 5°C sous les surfaces traitées.",
}: CovaThermLightBeforeAfterProps = {}) => {
  const [position, setPosition] = useState(50);
  const containerRef = useRef<HTMLDivElement>(null);
  const isDraggingRef = useRef(false);

  const updateFromClientX = useCallback((clientX: number) => {
    const el = containerRef.current;
    if (!el) return;
    const rect = el.getBoundingClientRect();
    const pct = ((clientX - rect.left) / rect.width) * 100;
    setPosition(Math.min(100, Math.max(0, pct)));
  }, []);

  const handlePointerDown = (e: React.PointerEvent) => {
    isDraggingRef.current = true;
    (e.target as HTMLElement).setPointerCapture?.(e.pointerId);
    updateFromClientX(e.clientX);
  };
  const handlePointerMove = (e: React.PointerEvent) => {
    if (!isDraggingRef.current) return;
    updateFromClientX(e.clientX);
  };
  const handlePointerUp = () => {
    isDraggingRef.current = false;
  };

  return (
    <section className="py-16 lg:py-24 bg-cream">
      <div className="container mx-auto px-4 lg:px-8 max-w-5xl">
        <ScrollReveal>
          <div className="mb-10 lg:mb-14 max-w-2xl">
            <p className="text-[10px] uppercase tracking-[0.25em] font-semibold text-primary/65 font-body mb-3">
              {badge}
            </p>
            <h2
              className="font-satoshi text-3xl sm:text-4xl lg:text-5xl font-black text-foreground !leading-[1.05] mb-5"
              style={{ letterSpacing: '-0.03em' }}
            >
              {titre ?? (<>
              Le confort,
              <br />
              <span className="text-foreground/45">avant et après CovaTherm Light.</span>
              </>)}
            </h2>
            <p className="text-foreground/70 text-base font-body leading-relaxed">
              {intro ?? (<>
              Glissez la poignée pour comparer l'ambiance sous un lanterneau en
              polycarbonate avant et après application de la laque solaire. La lumière
              naturelle reste au rendez-vous, mais l'éblouissement et la chaleur
              radiante disparaissent.
              </>)}
            </p>
          </div>
        </ScrollReveal>

        <ScrollReveal>
          <div
            ref={containerRef}
            className="relative w-full aspect-[4/3] sm:aspect-[16/10] rounded-2xl overflow-hidden shadow-[0_20px_60px_rgba(26,42,58,0.15)] select-none touch-none"
            onPointerDown={handlePointerDown}
            onPointerMove={handlePointerMove}
            onPointerUp={handlePointerUp}
            onPointerCancel={handlePointerUp}
          >
            {/* Après (dessous, entière) */}
            <img
              src={imageApres}
              alt={altApres}
              className="absolute inset-0 w-full h-full object-cover"
              draggable={false}
              loading="lazy"
            />

            {/* Avant (dessus, clippée) */}
            <img
              src={imageAvant}
              alt={altAvant}
              className="absolute inset-0 w-full h-full object-cover"
              style={{ clipPath: `inset(0 ${100 - position}% 0 0)` }}
              draggable={false}
              loading="lazy"
            />

            {/* Étiquettes */}
            <div className="absolute top-4 left-4 bg-foreground/80 backdrop-blur-sm text-white text-[10px] font-bold uppercase tracking-[0.2em] px-3 py-1.5 rounded-full">
              Avant
            </div>
            <div className="absolute top-4 right-4 bg-teal-vivid text-white text-[10px] font-bold uppercase tracking-[0.2em] px-3 py-1.5 rounded-full">
              Après
            </div>

            {/* Barre verticale + poignée */}
            <div
              className="absolute top-0 bottom-0 w-0.5 bg-white pointer-events-none"
              style={{ left: `${position}%`, transform: 'translateX(-50%)' }}
            >
              <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-11 h-11 rounded-full bg-white shadow-[0_4px_20px_rgba(0,0,0,0.35)] flex items-center justify-center">
                <MoveHorizontal className="w-5 h-5 text-foreground" strokeWidth={2.25} />
              </div>
            </div>

            {/* Range accessible pour clavier */}
            <input
              type="range"
              min={0}
              max={100}
              value={position}
              onChange={(e) => setPosition(Number(e.target.value))}
              aria-label="Position du comparateur avant / après"
              className="absolute inset-0 w-full h-full opacity-0 cursor-ew-resize"
            />
          </div>
        </ScrollReveal>

        <ScrollReveal>
          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 mt-6">
            <p className="text-sm text-foreground/65 font-body leading-relaxed">
              <strong className="text-foreground">Avant.</strong> {legendeAvant}
            </p>
            <p className="text-sm text-foreground/65 font-body leading-relaxed sm:text-right">
              <strong className="text-foreground">Après.</strong> {legendeApres}
            </p>
          </div>
        </ScrollReveal>
      </div>
    </section>
  );
};

export default CovaThermLightBeforeAfter;