// Slider antes/depois P&B ↔ Colorido com drag
const { useState: useState_S, useRef: useRef_S, useEffect: useEffect_S } = React;

const ColorSlider = ({ tweaks }) => {
  const [pos, setPos] = useState_S(50);
  const containerRef = useRef_S(null);
  const draggingRef = useRef_S(false);

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

  useEffect_S(() => {
    const onMove = (e) => {
      if (!draggingRef.current) return;
      const x = e.touches ? e.touches[0].clientX : e.clientX;
      handleMove(x);
      e.preventDefault();
    };
    const onUp = () => { draggingRef.current = false; };
    window.addEventListener("mousemove", onMove);
    window.addEventListener("mouseup", onUp);
    window.addEventListener("touchmove", onMove, { passive: false });
    window.addEventListener("touchend", onUp);
    return () => {
      window.removeEventListener("mousemove", onMove);
      window.removeEventListener("mouseup", onUp);
      window.removeEventListener("touchmove", onMove);
      window.removeEventListener("touchend", onUp);
    };
  }, []);

  const startDrag = (e) => {
    draggingRef.current = true;
    const x = e.touches ? e.touches[0].clientX : e.clientX;
    handleMove(x);
  };

  return (
    <div style={{ maxWidth: "300px", margin: "0 auto" }}>
      <div
        ref={containerRef}
        onMouseDown={startDrag}
        onTouchStart={startDrag}
        style={{
          position: "relative",
          width: "100%",
          aspectRatio: "3/4",
          borderRadius: "10px",
          overflow: "hidden",
          cursor: "ew-resize",
          touchAction: "none",
          userSelect: "none",
          boxShadow: `0 20px 50px -15px rgba(60,40,20,0.3), 0 0 0 1px ${tweaks.gold}33`,
        }}
      >
        {/* Imagem colorida (fundo, full) */}
        <div style={{ position: "absolute", inset: 0 }}>
          <Portrait colored={true} blur={0} style={{ borderRadius: "10px" }} />
        </div>
        {/* Imagem P&B (clipada conforme posição) */}
        <div
          style={{
            position: "absolute",
            inset: 0,
            clipPath: `polygon(0 0, ${pos}% 0, ${pos}% 100%, 0 100%)`,
            transition: draggingRef.current ? "none" : "clip-path 200ms ease-out",
          }}
        >
          <Portrait colored={false} blur={0} style={{ borderRadius: "10px" }} />
        </div>

        {/* Labels */}
        <div style={{
          position: "absolute",
          top: "12px",
          left: "12px",
          background: "rgba(10,8,7,0.7)",
          color: "#fff",
          fontSize: "10px",
          letterSpacing: "0.2em",
          padding: "5px 10px",
          borderRadius: "100px",
          fontFamily: "'Inter Tight', sans-serif",
          fontWeight: 600,
          backdropFilter: "blur(4px)",
          opacity: pos > 15 ? 1 : 0,
          transition: "opacity 300ms",
        }}>P&B</div>
        <div style={{
          position: "absolute",
          top: "12px",
          right: "12px",
          background: `${tweaks.gold}ee`,
          color: "#1a1410",
          fontSize: "10px",
          letterSpacing: "0.2em",
          padding: "5px 10px",
          borderRadius: "100px",
          fontFamily: "'Inter Tight', sans-serif",
          fontWeight: 700,
          opacity: pos < 85 ? 1 : 0,
          transition: "opacity 300ms",
        }}>COLORIDO</div>

        {/* Linha + handle */}
        <div
          style={{
            position: "absolute",
            top: 0,
            bottom: 0,
            left: `${pos}%`,
            width: "2px",
            background: "#fff",
            transform: "translateX(-1px)",
            boxShadow: "0 0 12px rgba(0,0,0,0.4)",
            transition: draggingRef.current ? "none" : "left 200ms ease-out",
          }}
        />
        <div
          style={{
            position: "absolute",
            top: "50%",
            left: `${pos}%`,
            transform: "translate(-50%, -50%)",
            width: "44px",
            height: "44px",
            borderRadius: "50%",
            background: "#fff",
            border: `2px solid ${tweaks.gold}`,
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            boxShadow: "0 4px 16px rgba(0,0,0,0.3)",
            transition: draggingRef.current ? "none" : "left 200ms ease-out",
            pointerEvents: "none",
          }}
        >
          <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
            <path d="M7 6 L3 10 L7 14" stroke={tweaks.gold} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
            <path d="M13 6 L17 10 L13 14" stroke={tweaks.gold} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
          </svg>
        </div>
      </div>

      <p style={{
        fontFamily: "'Inter Tight', sans-serif",
        fontSize: "11px",
        color: tweaks.dark ? "#a89888" : "#a89888",
        textAlign: "center",
        margin: "12px 0 0",
        letterSpacing: "0.05em",
      }}>
        ↔ arraste para comparar &nbsp;·&nbsp; <em style={{ fontStyle: "italic" }}>imagem ilustrativa</em>
      </p>
    </div>
  );
};

window.ColorSlider = ColorSlider;