// pastel-column.jsx — same scroller, pastel fade + a brief touch glow
const { useEffect: pcUseEffect, useRef: pcUseRef, useLayoutEffect: pcLE, useState: pcUseState } = React;

function PColumn({ direction = 'up', speed = 22, paused = false, w = 130, children, bg = '#F4E9D1' }) {
  const wrapRef = pcUseRef(null);
  const innerRef = pcUseRef(null);
  const yRef = pcUseRef(null);
  const hRef = pcUseRef(0);
  const draggingRef = pcUseRef(false);
  const lastTouchY = pcUseRef(0);
  const dragVel = pcUseRef(0);
  const dragVelDecayUntil = pcUseRef(0);
  const [touching, setTouching] = pcUseState(false);

  pcLE(() => {
    const measure = () => {
      if (!innerRef.current) return;
      hRef.current = innerRef.current.scrollHeight / 2;
      if (yRef.current === null) {
        yRef.current = direction === 'down' ? -hRef.current : 0;
      }
    };
    measure();
    const ro = new ResizeObserver(measure);
    if (innerRef.current) ro.observe(innerRef.current);
    return () => ro.disconnect();
  }, [direction]);

  pcUseEffect(() => {
    let raf;
    let lastT = performance.now();
    const step = (t) => {
      const dt = Math.min(0.05, (t - lastT) / 1000);
      lastT = t;
      const h = hRef.current;
      if (h > 0 && innerRef.current && yRef.current !== null) {
        let dy = 0;
        if (!paused && !draggingRef.current) {
          dy += (direction === 'up' ? -speed : speed) * dt;
        }
        if (!draggingRef.current && performance.now() < dragVelDecayUntil.current) {
          dy += dragVel.current * dt;
          dragVel.current *= 0.93;
          if (Math.abs(dragVel.current) < 1) dragVel.current = 0;
        }
        yRef.current += dy;
        while (yRef.current <= -h) yRef.current += h;
        while (yRef.current >= 0)  yRef.current -= h;
        innerRef.current.style.transform = `translate3d(0, ${yRef.current}px, 0)`;
      }
      raf = requestAnimationFrame(step);
    };
    raf = requestAnimationFrame(step);
    return () => cancelAnimationFrame(raf);
  }, [direction, speed, paused]);

  const onPointerDown = (e) => {
    draggingRef.current = true;
    lastTouchY.current = e.clientY;
    dragVel.current = 0;
    setTouching(true);
    e.currentTarget.setPointerCapture?.(e.pointerId);
  };
  const onPointerMove = (e) => {
    if (!draggingRef.current) return;
    const dy = e.clientY - lastTouchY.current;
    lastTouchY.current = e.clientY;
    if (yRef.current !== null) yRef.current += dy;
    dragVel.current = dy * 60;
  };
  const onPointerUp = () => {
    draggingRef.current = false;
    dragVelDecayUntil.current = performance.now() + 1200;
    setTouching(false);
  };

  // Hex to rgba helper
  const fade = (alpha) => {
    const m = /^#([0-9a-f]{6})$/i.exec(bg);
    if (!m) return bg;
    const r = parseInt(m[1].slice(0,2),16);
    const g = parseInt(m[1].slice(2,4),16);
    const b = parseInt(m[1].slice(4,6),16);
    return `rgba(${r},${g},${b},${alpha})`;
  };

  return (
    <div
      ref={wrapRef}
      onPointerDown={onPointerDown}
      onPointerMove={onPointerMove}
      onPointerUp={onPointerUp}
      onPointerCancel={onPointerUp}
      style={{
        flex:1, height:'100%', overflow:'hidden', position:'relative',
        touchAction:'none', cursor: paused ? 'default' : 'ns-resize',
        background: touching ? 'rgba(215,123,111,0.06)' : 'transparent',
        transition:'background 320ms ease',
        contain:'layout paint',
      }}
    >
      <div ref={innerRef} style={{
        position:'absolute', top:0, left:0, right:0,
        willChange:'transform', transform:'translateZ(0)',
        backfaceVisibility:'hidden',
      }}>
        {children}
        {children}
      </div>
      {/* fade top/bottom in bg color */}
      <div style={{
        position:'absolute', top:0, left:0, right:0, height:40, pointerEvents:'none',
        background:`linear-gradient(${bg}, ${fade(0)})`,
      }}/>
      <div style={{
        position:'absolute', bottom:0, left:0, right:0, height:40, pointerEvents:'none',
        background:`linear-gradient(${fade(0)}, ${bg})`,
      }}/>
    </div>
  );
}

// memoize: App'in dokunma/ripple kaynaklı render'larında ağır kart listesi
// (her sütunda ~yüzlerce düğüm) yeniden reconcile edilmesin
PColumn = React.memo(PColumn);
window.PColumn = PColumn;