// Shared Before/After slider — two stacked images with a draggable vertical
// divider. Used by image tools that show the user "what changed".

window.BeforeAfterSlider = function BeforeAfterSlider({ before, after, labelBefore = 'Before', labelAfter = 'After', height = 340, caption }) {
  const [pos, setPos] = React.useState(50);  // percent from left
  const wrapRef = React.useRef(null);
  const dragging = React.useRef(false);

  const updateFromClient = (clientX) => {
    const rect = wrapRef.current?.getBoundingClientRect();
    if (!rect) return;
    const pct = ((clientX - rect.left) / rect.width) * 100;
    setPos(Math.max(0, Math.min(100, pct)));
  };

  const onDown = (e) => {
    dragging.current = true;
    updateFromClient((e.touches ? e.touches[0].clientX : e.clientX));
    e.preventDefault();
  };
  const onMove = (e) => {
    if (!dragging.current) return;
    updateFromClient((e.touches ? e.touches[0].clientX : e.clientX));
  };
  const onUp = () => { dragging.current = false; };

  React.useEffect(() => {
    window.addEventListener('mousemove', onMove);
    window.addEventListener('mouseup', onUp);
    window.addEventListener('touchmove', onMove, { passive: true });
    window.addEventListener('touchend', onUp);
    return () => {
      window.removeEventListener('mousemove', onMove);
      window.removeEventListener('mouseup', onUp);
      window.removeEventListener('touchmove', onMove);
      window.removeEventListener('touchend', onUp);
    };
  }, []);

  if (!before || !after) return null;

  return (
    <div className="bas-wrap" ref={wrapRef}
         style={{ height }}
         onMouseDown={onDown} onTouchStart={onDown}>
      <img src={after} alt="" className="bas-img" draggable={false} />
      <div className="bas-clip" style={{ width: pos + '%' }}>
        <img src={before} alt="" className="bas-img"
             style={{ width: wrapRef.current?.clientWidth + 'px' || '100%' }}
             draggable={false} />
      </div>

      <div className="bas-label bas-label-l">{labelBefore}</div>
      <div className="bas-label bas-label-r">{labelAfter}</div>

      <div className="bas-divider" style={{ left: pos + '%' }}>
        <div className="bas-handle">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <polyline points="15 18 9 12 15 6" /><polyline points="9 18 15 12 9 6" />
          </svg>
        </div>
      </div>

      {caption && <div className="bas-caption">{caption}</div>}

      <style>{`
        .bas-wrap {
          position: relative; width: 100%;
          border-radius: 12px; overflow: hidden;
          background: var(--id-surface-alt);
          border: 1px solid var(--id-border);
          user-select: none; cursor: ew-resize;
          touch-action: none;
        }
        .bas-img {
          position: absolute; inset: 0;
          width: 100%; height: 100%; object-fit: contain;
          display: block; pointer-events: none;
        }
        .bas-clip {
          position: absolute; top: 0; bottom: 0; left: 0;
          overflow: hidden;
        }
        .bas-clip .bas-img { width: auto; max-width: none; }
        .bas-label {
          position: absolute; top: 10px;
          font-family: var(--id-font-mono); font-size: 10.5px;
          letter-spacing: .14em; text-transform: uppercase; font-weight: 700;
          padding: 4px 10px; border-radius: 999px;
          background: rgba(0, 0, 0, 0.72); color: #fff;
          backdrop-filter: blur(6px); pointer-events: none;
        }
        .bas-label-l { left: 10px; }
        .bas-label-r { right: 10px; }
        .bas-divider {
          position: absolute; top: 0; bottom: 0;
          width: 2px; background: #fff;
          box-shadow: 0 0 0 1px rgba(0,0,0,.25), 0 4px 16px rgba(0,0,0,.35);
          transform: translateX(-1px);
          pointer-events: none;
        }
        .bas-handle {
          position: absolute; top: 50%; left: 50%;
          transform: translate(-50%, -50%);
          width: 40px; height: 40px; border-radius: 50%;
          background: #fff; color: var(--id-text);
          display: flex; align-items: center; justify-content: center;
          box-shadow: 0 4px 16px rgba(0,0,0,.35), 0 0 0 1px rgba(0,0,0,.08);
        }
        .bas-caption {
          position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%);
          font-size: 11px; color: #fff; background: rgba(0,0,0,.65);
          padding: 4px 10px; border-radius: 999px; white-space: nowrap;
          pointer-events: none;
        }
      `}</style>
    </div>
  );
};