/* splitter.jsx — Resizable Split component (row or col) with drag handles */
function Splitter({ direction = "row", initialSizes = [50, 50], minSizes = [120, 120], children, style }) {
  const [sizes, setSizes] = React.useState(initialSizes);
  const containerRef = React.useRef(null);
  const draggingRef = React.useRef(null);

  const onMouseDown = (idx) => (e) => {
    e.preventDefault();
    const rect = containerRef.current.getBoundingClientRect();
    const total = direction === "row" ? rect.width : rect.height;
    draggingRef.current = { idx, startX: e.clientX, startY: e.clientY, startSizes: [...sizes], total };
    document.body.style.cursor = direction === "row" ? "col-resize" : "row-resize";
    document.body.style.userSelect = "none";
    const onMove = (ev) => {
      const d = draggingRef.current;
      if (!d) return;
      const delta = direction === "row" ? ev.clientX - d.startX : ev.clientY - d.startY;
      const deltaPct = (delta / d.total) * 100;
      const next = [...d.startSizes];
      next[d.idx] += deltaPct;
      next[d.idx + 1] -= deltaPct;
      // enforce mins
      const minPctLeft = (minSizes[d.idx] / d.total) * 100;
      const minPctRight = (minSizes[d.idx + 1] / d.total) * 100;
      if (next[d.idx] < minPctLeft || next[d.idx + 1] < minPctRight) return;
      setSizes(next);
    };
    const onUp = () => {
      draggingRef.current = null;
      document.body.style.cursor = "";
      document.body.style.userSelect = "";
      window.removeEventListener("mousemove", onMove);
      window.removeEventListener("mouseup", onUp);
    };
    window.addEventListener("mousemove", onMove);
    window.addEventListener("mouseup", onUp);
  };

  const items = React.Children.toArray(children);

  return (
    <div ref={containerRef}
         className={`split split--${direction}`}
         style={style}>
      {items.map((child, i) => (
        <React.Fragment key={i}>
          <div className="split__pane" style={{ flex: `${sizes[i]} 0 0`, minWidth: 0, minHeight: 0 }}>
            {child}
          </div>
          {i < items.length - 1 && (
            <div className="split__handle"
                 onMouseDown={onMouseDown(i)} />
          )}
        </React.Fragment>
      ))}
    </div>
  );
}

window.Splitter = Splitter;