(function () {
    window.AgentFrontendModules = window.AgentFrontendModules || {};

    window.AgentFrontendModules.createLayoutShellModule = function createLayoutShellModule(deps) {
        const themeStorageKey = 'agent_theme';
        const panelWidthStorageKey = 'agent_panel_width';
        const historyPanelWidthStorageKey = 'explore_history_panel_width';
        const panelMinWidth = 280;
        const panelMaxWidth = 760;
        const historyPanelMin = 220;
        const historyPanelMax = 560;

        function applyTheme(theme) {
            document.documentElement.setAttribute('data-theme', theme);
            if (deps.refs.themeIconSun && deps.refs.themeIconMoon) {
                deps.refs.themeIconSun.style.display = theme === 'dark' ? 'none' : '';
                deps.refs.themeIconMoon.style.display = theme === 'dark' ? '' : 'none';
            }
            localStorage.setItem(themeStorageKey, theme);
        }

        function initTheme() {
            const saved = localStorage.getItem(themeStorageKey);
            if (saved === 'dark' || saved === 'light') {
                applyTheme(saved);
            } else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
                applyTheme('dark');
            } else {
                applyTheme('light');
            }

            if (deps.refs.themeToggleBtn) {
                deps.refs.themeToggleBtn.addEventListener('click', () => {
                    const current = document.documentElement.getAttribute('data-theme') || 'light';
                    applyTheme(current === 'dark' ? 'light' : 'dark');
                });
            }
        }

        function clampPanelWidth(width) {
            const maxByViewport = Math.max(panelMinWidth, Math.min(panelMaxWidth, window.innerWidth - 520));
            return Math.max(panelMinWidth, Math.min(maxByViewport, width));
        }

        function applyPanelWidth(width) {
            if (!deps.refs.appShell) return;
            const clamped = clampPanelWidth(width);
            deps.refs.appShell.style.setProperty('--agent-panel-w', `${clamped}px`);
        }

        function initResizablePanels() {
            if (!deps.refs.paneResizer || !deps.refs.agentPanel || !deps.refs.appShell) return;

            const saved = Number(localStorage.getItem(panelWidthStorageKey));
            if (Number.isFinite(saved) && saved > 0) {
                applyPanelWidth(saved);
            }

            let dragStartX = 0;
            let dragStartWidth = 0;

            const onPointerMove = (event) => {
                const deltaX = event.clientX - dragStartX;
                const nextWidth = dragStartWidth - deltaX;
                applyPanelWidth(nextWidth);
            };

            const onPointerUp = () => {
                document.body.classList.remove('pane-resizing');
                window.removeEventListener('pointermove', onPointerMove);
                window.removeEventListener('pointerup', onPointerUp);
                const applied = parseFloat(getComputedStyle(deps.refs.appShell).getPropertyValue('--agent-panel-w'));
                if (Number.isFinite(applied) && applied > 0) {
                    localStorage.setItem(panelWidthStorageKey, String(Math.round(applied)));
                }
            };

            deps.refs.paneResizer.addEventListener('pointerdown', (event) => {
                event.preventDefault();
                dragStartX = event.clientX;
                dragStartWidth = deps.refs.agentPanel.getBoundingClientRect().width;
                document.body.classList.add('pane-resizing');
                window.addEventListener('pointermove', onPointerMove);
                window.addEventListener('pointerup', onPointerUp);
            });

            window.addEventListener('resize', () => {
                const applied = parseFloat(getComputedStyle(deps.refs.appShell).getPropertyValue('--agent-panel-w'));
                if (Number.isFinite(applied) && applied > 0) {
                    applyPanelWidth(applied);
                }
            });
        }

        function clampHistoryPanelWidth(width) {
            const maxByViewport = Math.max(historyPanelMin, Math.min(historyPanelMax, window.innerWidth - 700));
            return Math.max(historyPanelMin, Math.min(maxByViewport, width));
        }

        function applyHistoryPanelWidth(width) {
            if (!deps.refs.explorationLayout) return;
            const clamped = clampHistoryPanelWidth(width);
            deps.refs.explorationLayout.style.setProperty('--explore-history-w', `${clamped}px`);
        }

        function initHistoryResizer() {
            if (!deps.refs.historyResizer || !deps.refs.explorationLayout || !deps.refs.explorationHistory) return;

            const saved = Number(localStorage.getItem(historyPanelWidthStorageKey));
            if (Number.isFinite(saved) && saved > 0) {
                applyHistoryPanelWidth(saved);
            }

            let dragStartX = 0;
            let dragStartWidth = 0;

            const onPointerMove = (event) => {
                const deltaX = event.clientX - dragStartX;
                const nextWidth = dragStartWidth + deltaX;
                applyHistoryPanelWidth(nextWidth);
            };

            const onPointerUp = () => {
                document.body.classList.remove('history-resizing');
                window.removeEventListener('pointermove', onPointerMove);
                window.removeEventListener('pointerup', onPointerUp);
                const applied = parseFloat(getComputedStyle(deps.refs.explorationLayout).getPropertyValue('--explore-history-w'));
                if (Number.isFinite(applied) && applied > 0) {
                    localStorage.setItem(historyPanelWidthStorageKey, String(Math.round(applied)));
                }
            };

            deps.refs.historyResizer.addEventListener('pointerdown', (event) => {
                event.preventDefault();
                dragStartX = event.clientX;
                dragStartWidth = deps.refs.explorationHistory.getBoundingClientRect().width;
                document.body.classList.add('history-resizing');
                window.addEventListener('pointermove', onPointerMove);
                window.addEventListener('pointerup', onPointerUp);
            });

            window.addEventListener('resize', () => {
                const applied = parseFloat(getComputedStyle(deps.refs.explorationLayout).getPropertyValue('--explore-history-w'));
                if (Number.isFinite(applied) && applied > 0) {
                    applyHistoryPanelWidth(applied);
                }
            });
        }

        function init() {
            initTheme();
            initResizablePanels();
            initHistoryResizer();
        }

        return {
            init,
        };
    };
})();