export function initResizablePanels() {
  const handle = document.getElementById('resize-handle-h');
  const container = document.getElementById('workspace-container');
  const blocklyArea = document.getElementById('blockly-area');
  const bottomPanels = document.getElementById('bottom-panels');

  if (!handle || !container || !blocklyArea || !bottomPanels) return;

  let dragging = false;

  handle.addEventListener('mousedown', (e) => {
    dragging = true;
    e.preventDefault();
  });

  document.addEventListener('mousemove', (e) => {
    if (!dragging) return;
    const containerRect = container.getBoundingClientRect();
    const offset = e.clientY - containerRect.top;
    const totalHeight = containerRect.height;
    const topPercent = Math.max(20, Math.min(80, (offset / totalHeight) * 100));

    blocklyArea.style.flex = `0 0 ${topPercent}%`;
    bottomPanels.style.flex = `0 0 ${100 - topPercent}%`;

    window.dispatchEvent(new Event('resize'));
  });

  document.addEventListener('mouseup', () => {
    dragging = false;
  });
}