/* global React */
const { useEffect: gUseEffect, useRef: gUseRef, useState: gUseState, useCallback: gUseCallback } = React;

/**
 * BeforeAfter
 * - Slider arrastrable (mouse + touch) y por scroll.
 * - Múltiples pares de proyectos seleccionables con tabs.
 * - Fotos reales de antes y después de obras propias.
 */
function BeforeAfter() {
  const pairs = [
    {
      key: 'suelo',
      tab: 'Suelo',
      loc: 'Cambio de solería',
      name: 'Salón · Suelo nuevo',
      after:  'imagenes/ba-suelo-despues.jpeg',
      before: 'imagenes/ba-suelo-antes.jpeg',
    },
    {
      key: 'habitacion',
      tab: 'Habitación',
      loc: 'Reforma integral',
      name: 'Habitación · Llave en mano',
      after:  'imagenes/ba-habitacion-despues.jpeg',
      before: 'imagenes/ba-habitacion-antes.jpeg',
    },
    {
      key: 'pladur',
      tab: 'Pladur',
      loc: 'Acabados de pladur',
      name: 'Dormitorio · Pladur',
      after:  'imagenes/ba-pladur-despues.jpeg',
      before: 'imagenes/ba-pladur-antes.jpeg',
    },
  ];

  const [active, setActive] = gUseState(0);
  const [pos, setPos] = gUseState(50);
  const [dragging, setDragging] = gUseState(false);
  const wrapRef = gUseRef(null);
  const draggingRef = gUseRef(false);

  const onMove = gUseCallback((clientX) => {
    if (!wrapRef.current) return;
    const r = wrapRef.current.getBoundingClientRect();
    const p = ((clientX - r.left) / r.width) * 100;
    setPos(Math.max(0, Math.min(100, p)));
  }, []);

  gUseEffect(() => {
    const move = (e) => { if (draggingRef.current) onMove(e.clientX); };
    const touch = (e) => { if (draggingRef.current && e.touches[0]) onMove(e.touches[0].clientX); };
    const up = () => {
      if (draggingRef.current) {
        draggingRef.current = false;
        setDragging(false);
      }
    };
    window.addEventListener('mousemove', move);
    window.addEventListener('touchmove', touch, { passive: true });
    window.addEventListener('mouseup', up);
    window.addEventListener('touchend', up);
    return () => {
      window.removeEventListener('mousemove', move);
      window.removeEventListener('touchmove', touch);
      window.removeEventListener('mouseup', up);
      window.removeEventListener('touchend', up);
    };
  }, [onMove]);

  // Animación sutil de presentación: la primera vez que entra en pantalla, mueve la línea para dejar claro que se arrastra.
  const animatedRef = gUseRef(false);
  gUseEffect(() => {
    if (animatedRef.current) return;
    const el = wrapRef.current;
    if (!el) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting && !animatedRef.current) {
          animatedRef.current = true;
          // pequeño "barrido" para invitar a interactuar
          const seq = [60, 70, 50, 40, 50];
          seq.forEach((v, i) => setTimeout(() => setPos(v), 600 + i * 420));
          io.disconnect();
        }
      });
    }, { threshold: 0.4 });
    io.observe(el);
    return () => io.disconnect();
  }, []);

  const current = pairs[active];

  const onTouchStartKnob = (e) => {
    draggingRef.current = true;
    setDragging(true);
    if (e.touches && e.touches[0]) onMove(e.touches[0].clientX);
  };
  const onMouseDownKnob = (e) => {
    draggingRef.current = true;
    setDragging(true);
    e.preventDefault();
  };

  // Tap-to-move también en la stage para mejor UX en mobile
  const onStageClick = (e) => {
    if (e.target.closest('.ba-handle')) return;
    onMove(e.clientX);
  };

  return (
    <div>
      <div className="ba-header">
        <div className="ba-meta">
          <span className="ba-loc">{current.loc}</span>
          <span className="ba-name">{current.name}</span>
        </div>
        <div className="ba-tabs" role="tablist">
          {pairs.map((p, i) => (
            <button
              key={p.key}
              role="tab"
              aria-selected={i === active}
              className={i === active ? 'active' : ''}
              onClick={() => { setActive(i); setPos(50); }}
            >
              {p.tab}
            </button>
          ))}
        </div>
      </div>

      <div className="ba-wrap reveal" ref={wrapRef}>
        <div className="ba-stage" onClick={onStageClick}>
          {/* DESPUÉS (capa de fondo) */}
          <div className="ba-layer">
            <img src={current.after} alt={`Después · ${current.name}`} loading="lazy" />
          </div>
          {/* ANTES (recortado desde la izquierda) */}
          <div className="ba-after-clip" style={{ clipPath: `inset(0 ${100 - pos}% 0 0)` }}>
            <div className="ba-layer is-before">
              <img src={current.before} alt={`Antes · ${current.name}`} loading="lazy" />
            </div>
          </div>
          <span className="ba-label before">Antes</span>
          <span className="ba-label after">Después</span>
          <div
            className={"ba-handle " + (dragging ? 'dragging' : '')}
            style={{ left: `${pos}%` }}
            onMouseDown={onMouseDownKnob}
            onTouchStart={onTouchStartKnob}
            role="slider"
            aria-label="Comparar antes y después"
            aria-valuemin={0}
            aria-valuemax={100}
            aria-valuenow={Math.round(pos)}
          >
            <div className="ba-handle-knob" aria-hidden="true">
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
                <polyline points="15 18 9 12 15 6" />
                <polyline points="9 6 15 12 9 18" transform="translate(2 0)" />
              </svg>
            </div>
          </div>
          <span className="ba-hint">Desliza para comparar</span>
        </div>
      </div>
    </div>
  );
}

function Gallery() {
  const items = [
    { img: 'https://malaga.reparamostuhogar.com/wp-content/uploads/2026/01/WhatsApp-Image-2026-01-19-at-18.30.50-1.jpeg', loc: 'Reforma integral', name: 'Llave en mano en Málaga', cls: 'gi-l' },
    { img: 'https://malaga.reparamostuhogar.com/wp-content/uploads/2026/01/WhatsApp-Image-2026-01-19-at-18.30.50.jpeg', loc: 'Acabados profesionales', name: 'Detalles que marcan la diferencia', cls: 'gi-s' },
    { img: 'https://malaga.reparamostuhogar.com/wp-content/uploads/2026/01/WhatsApp-Image-2026-01-19-at-18.30.49.jpeg', loc: 'Calidad garantizada', name: 'Materiales de primera calidad', cls: 'gi-m' },
    { img: 'https://malaga.reparamostuhogar.com/wp-content/uploads/2026/01/WhatsApp-Image-2026-01-19-at-18.21.38-1.jpeg', loc: 'Proyecto finalizado', name: 'Entrega llave en mano', cls: 'gi-m' },
    { img: 'https://malaga.reparamostuhogar.com/wp-content/uploads/2026/01/WhatsApp-Image-2026-01-19-at-18.21.38.jpeg', loc: 'Reforma completada', name: 'Costa del Sol', cls: 'gi-m' },
  ];

  return (
    <section id="proyectos">
      <SectionHead
        eyebrow="Galería"
        title="Proyectos terminados en Málaga."
        subtitle="Una selección de las últimas reformas entregadas en Málaga y Costa del Sol."
      />
      <div className="container-wide">
        <div className="gallery-grid">
          {items.map((it, i) => (
            <div key={i} className={"gallery-item reveal " + it.cls} style={{ transitionDelay: `${i * 0.05}s` }}>
              <img src={it.img} alt={it.name} loading="lazy" className="gi-img" />
              <div className="gi-meta">
                <div className="loc">{it.loc}</div>
                <div className="name">{it.name}</div>
              </div>
            </div>
          ))}
        </div>
        <div className="ba-section">
          <div className="reveal ba-intro">
            <Eyebrow>Antes / Después</Eyebrow>
            <h3 className="title" style={{ marginTop: 12, maxWidth: '22ch' }}>El mismo espacio, después de la reforma.</h3>
            <p className="subhead" style={{ marginTop: 12, maxWidth: '48ch' }}>
              Desliza la línea blanca para ver la transformación. Cambia de proyecto con las pestañas.
            </p>
          </div>
          <BeforeAfter />
        </div>
      </div>
    </section>
  );
}

window.Gallery = Gallery;