window.uiResizer = {
    init: function (dotnetRef) {
        let isResizingSidebar = false;
        let isResizingOutput = false;
        let isResizingChart = false;
        let isResizingCol = false;
        let currentColId = null;
        let startX = 0;
        let startWidth = 0;

        document.addEventListener('mousedown', e => {
            const sidebarHandle = e.target.closest('.sidebar-resizer');
            const outputHandle = e.target.closest('.output-resizer');
            const chartHandle = e.target.closest('.chart-resizer');
            const colHandle = e.target.closest('.col-resizer');

            if (sidebarHandle) isResizingSidebar = true;
            if (outputHandle) isResizingOutput = true;
            if (chartHandle) isResizingChart = true;
            if (colHandle) {
                isResizingCol = true;
                currentColId = colHandle.dataset.colId;
                startX = e.clientX;
                startWidth = colHandle.parentElement.offsetWidth;
            }

            if (isResizingSidebar || isResizingOutput || isResizingChart || isResizingCol) {
                document.body.classList.add('resizing');
                document.body.style.userSelect = 'none';
            }
        });

        document.addEventListener('mousemove', e => {
            if (isResizingSidebar) {
                const width = Math.max(150, Math.min(600, e.clientX));
                document.documentElement.style.setProperty('--sidebar-width', width + 'px');
            } else if (isResizingOutput) {
                const maxHeight = window.innerHeight - 100;
                const height = Math.max(40, Math.min(maxHeight, window.innerHeight - e.clientY));
                document.documentElement.style.setProperty('--output-height', height + 'px');
            } else if (isResizingChart) {
                const outputHeight = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--output-height')) || 160;
                // If output is collapsed, height is 0. But for simplicity we can just check the visibility from the element if needed.
                // However, the cleanest way is to just calculate based on the bottom of the chart panel.
                const chartPanel = document.querySelector('.chart-resizer')?.nextElementSibling;
                if (chartPanel) {
                    const rect = chartPanel.getBoundingClientRect();
                    const bottom = rect.bottom;
                    const height = Math.max(40, Math.min(window.innerHeight - 100, bottom - e.clientY));
                    document.documentElement.style.setProperty('--chart-height', height + 'px');
                }
            } else if (isResizingCol && currentColId && dotnetRef) {
                const diff = e.clientX - startX;
                const newWidth = Math.max(40, startWidth + diff);
                dotnetRef.invokeMethodAsync('UpdateColumnWidth', currentColId, newWidth + 'px');
            }
        });

        document.addEventListener('mouseup', () => {
            if (isResizingSidebar || isResizingOutput || isResizingChart || isResizingCol) {
                isResizingSidebar = false;
                isResizingOutput = false;
                isResizingChart = false;
                isResizingCol = false;
                currentColId = null;
                document.body.classList.remove('resizing');
                document.body.style.userSelect = '';

                // 每隔一段时间同步一次状态给后端（可选）
            }
        });

        // Click outside to hide menu
        document.addEventListener('mousedown', e => {
            if (dotnetRef) {
                const menu = document.getElementById('col-config-menu');
                const btn = document.getElementById('col-config-btn');
                if (menu && !menu.contains(e.target) && btn && !btn.contains(e.target)) {
                    dotnetRef.invokeMethodAsync('HideColumnMenu');
                }
            }
        });
    }
};
