// js/ui/immersive_layout_logic.js
(function ImmersiveLayoutLogic(global) {
  let toggleBtn, immersiveContainer;
  let mainPageContainer, tocPopupElement, chatbotModalElement, dockElement;
  let immersiveTocArea, immersiveMainArea, immersiveChatbotArea, immersiveDockPlaceholderElement;
  let tocVsDockResizeHandle;
  let isTocDockResizing = false; // Flag to indicate dragging state
  let initialTocDockMouseY, initialTocHeight, initialDockHeight;

  // Original parent and next sibling of the elements to be moved
  let originalMainContainerParent = null;
  let originalMainContainerNextSibling = null;
  let originalTocPopupParent = null;
  let originalTocPopupNextSibling = null;
  let originalChatbotModalParent = null;
  let originalChatbotModalNextSibling = null;
  let originalDockElementParent = null;
  let originalDockElementNextSibling = null;

  let isImmersiveActive = false;
  let isSimpleImmersiveActive = false; // 新增：简单沉浸模式状态
  const LS_IMMERSIVE_KEY = 'immersiveLayoutActive';
  const LS_SIMPLE_IMMERSIVE_KEY = 'simpleImmersiveLayoutActive'; // 新增：简单沉浸模式存储键
  const LS_PANEL_SIZES_KEY = 'immersivePanelSizes';

  function initializeDomElements() {
    toggleBtn = document.getElementById('toggle-immersive-btn');
    immersiveContainer = document.getElementById('immersive-layout-container');

    mainPageContainer = document.querySelector('.container');
    tocPopupElement = document.getElementById('toc-popup');
    chatbotModalElement = document.getElementById('chatbot-modal');
    dockElement = document.getElementById('bottom-left-dock');

    immersiveTocArea = document.getElementById('immersive-toc-area');
    immersiveMainArea = document.getElementById('immersive-main-content-area');
    immersiveChatbotArea = document.getElementById('immersive-chatbot-area');

    // Create the dock placeholder dynamically
    immersiveDockPlaceholderElement = document.createElement('div');
    immersiveDockPlaceholderElement.id = 'toc-dock-placeholder';
    // Basic styles can be applied here if not fully covered by CSS, or rely on CSS.
    // For now, CSS will handle styling based on the ID.

    return toggleBtn && immersiveContainer && mainPageContainer && tocPopupElement && immersiveTocArea && immersiveMainArea && immersiveChatbotArea && dockElement /* && immersiveDockPlaceholderElement (element itself exists, not a check if found in DOM here) */;
  }

  function reQueryDynamicElements() {
    if (!chatbotModalElement) {
        chatbotModalElement = document.getElementById('chatbot-modal');
    }
    if (!mainPageContainer) mainPageContainer = document.querySelector('.container');
    if (!tocPopupElement) tocPopupElement = document.getElementById('toc-popup');
    if (!dockElement) dockElement = document.getElementById('bottom-left-dock');
  }

  function storeOriginalPositions() {
    if (mainPageContainer) {
      originalMainContainerParent = mainPageContainer.parentNode;
      originalMainContainerNextSibling = mainPageContainer.nextSibling;
    }
    if (tocPopupElement) {
      originalTocPopupParent = tocPopupElement.parentNode;
      originalTocPopupNextSibling = tocPopupElement.nextSibling;
    }
    if (chatbotModalElement) {
      originalChatbotModalParent = chatbotModalElement.parentNode;
      originalChatbotModalNextSibling = chatbotModalElement.nextSibling;
    } else {
      console.warn('storeOriginalPositions: chatbotModalElement not found.');
    }
    if (dockElement) {
      originalDockElementParent = dockElement.parentNode;
      originalDockElementNextSibling = dockElement.nextSibling;
    } else {
      console.warn('storeOriginalPositions: dockElement not found.');
    }
  }

  function savePanelSizes() {
    if (!isImmersiveActive || !immersiveContainer || immersiveContainer.style.display === 'none') return;
    if (!immersiveTocArea || !immersiveMainArea || !immersiveChatbotArea) return;

    const tocWidth = immersiveTocArea.style.width;
    const mainWidth = immersiveMainArea.style.width;
    const chatbotWidth = immersiveChatbotArea.style.width;
    localStorage.setItem(LS_PANEL_SIZES_KEY, JSON.stringify({ toc: tocWidth, main: mainWidth, chatbot: chatbotWidth }));
  }

  function loadPanelSizes() {
    if (!immersiveTocArea || !immersiveMainArea || !immersiveChatbotArea) return;

    const savedSizes = localStorage.getItem(LS_PANEL_SIZES_KEY);
    if (savedSizes) {
      try {
        const sizes = JSON.parse(savedSizes);
        if (sizes.toc) immersiveTocArea.style.width = sizes.toc;
        if (sizes.chatbot) immersiveChatbotArea.style.width = sizes.chatbot;
      } catch (e) {
        console.error('Error loading panel sizes:', e);
        immersiveTocArea.style.width = '20%';
        immersiveMainArea.style.flex = '1';
        immersiveMainArea.style.width = '';
        immersiveChatbotArea.style.width = '25%';
      }
    } else {
      immersiveTocArea.style.width = '20%';
      immersiveMainArea.style.flex = '1';
      immersiveMainArea.style.width = '';
      immersiveChatbotArea.style.width = '25%';
    }
  }

  function initializeTocDockResizer() {
    if (!tocVsDockResizeHandle || !tocPopupElement || !immersiveDockPlaceholderElement || !immersiveTocArea) {
      console.warn("TOC vs Dock resizer: Missing one or more elements.");
      return;
    }

    // Ensure event listeners are not duplicated if called multiple times
    tocVsDockResizeHandle.removeEventListener('mousedown', handleTocDockDragStart);
    tocVsDockResizeHandle.addEventListener('mousedown', handleTocDockDragStart);
  }

  function handleTocDockDragStart(event) {
    event.preventDefault();
    isTocDockResizing = true;

    initialTocDockMouseY = event.clientY;
    initialTocHeight = tocPopupElement.offsetHeight;
    initialDockHeight = immersiveDockPlaceholderElement.offsetHeight;

    // Add class to body for global cursor/selection styles
    document.body.classList.add('toc-dock-resizing');

    // Add temporary flex-grow overrides if needed, or rely on flex-basis
    // tocPopupElement.style.flexGrow = '0';
    // immersiveDockPlaceholderElement.style.flexGrow = '0';


    document.addEventListener('mousemove', handleTocDockDragMove);
    document.addEventListener('mouseup', handleTocDockDragEnd);
  }

  function handleTocDockDragMove(event) {
    if (!isTocDockResizing) return;
    event.preventDefault();

    const deltaY = event.clientY - initialTocDockMouseY;
    let newTocHeight = initialTocHeight + deltaY;
    let newDockHeight = initialDockHeight - deltaY;

    const minPanelHeight = 40; // Minimum height for TOC and Dock panels

    // Constrain TOC height
    if (newTocHeight < minPanelHeight) {
      newTocHeight = minPanelHeight;
      // Recalculate dock height based on constrained TOC
      newDockHeight = initialTocHeight + initialDockHeight - newTocHeight;
    }

    // Constrain Dock height
    if (newDockHeight < minPanelHeight) {
      newDockHeight = minPanelHeight;
      // Recalculate TOC height based on constrained Dock
      newTocHeight = initialTocHeight + initialDockHeight - newDockHeight;
    }

    // Ensure total height of tocArea children doesn't exceed tocArea height if it's fixed
    // For flexbox, adjusting flex-basis is usually better.
    // The sum of newTocHeight and newDockHeight should ideally be initialTocHeight + initialDockHeight.
    // The logic above ensures this if one hits minPanelHeight.

    // Apply new heights using flex-basis for better control in a flex container
    tocPopupElement.style.flexBasis = newTocHeight + 'px';
    immersiveDockPlaceholderElement.style.flexBasis = newDockHeight + 'px';

    // If not using flex-basis, and want to force height and disable grow/shrink during drag:
    // tocPopupElement.style.height = newTocHeight + 'px';
    // immersiveDockPlaceholderElement.style.height = newDockHeight + 'px';
    // tocPopupElement.style.flexGrow = '0';
    // immersiveDockPlaceholderElement.style.flexGrow = '0';

  }

  function handleTocDockDragEnd() {
    if (!isTocDockResizing) return;
    isTocDockResizing = false;

    document.body.classList.remove('toc-dock-resizing');
    document.removeEventListener('mousemove', handleTocDockDragMove);
    document.removeEventListener('mouseup', handleTocDockDragEnd);

    // Restore original flex-grow properties if they were changed during drag
    // tocPopupElement.style.flexGrow = ''; // Or to its original value e.g., '10'
    // immersiveDockPlaceholderElement.style.flexGrow = ''; // Or to its original value e.g., '1'
    // However, since we are using flex-basis, the original flex-grow values from CSS should still apply
    // once flex-basis is set, unless grow/shrink are explicitly set to 0.
    // The CSS has flex-grow: 10 for toc and flex-grow: 1 for dock placeholder.
    // Setting flex-basis should work fine with these grow factors if space allows.

    // Optional: Save the new heights/proportions to localStorage
    // const tocAreaHeight = immersiveTocArea.offsetHeight;
    // if (tocAreaHeight > 0) {
    //   const tocRatio = tocPopupElement.offsetHeight / tocAreaHeight;
    //   localStorage.setItem('immersiveTocDockRatio', tocRatio.toFixed(4));
    // }
  }

  function destroyTocDockResizer() {
    if (tocVsDockResizeHandle) {
      tocVsDockResizeHandle.removeEventListener('mousedown', handleTocDockDragStart);
    }
    // Clean up global listeners if somehow left hanging (should be removed by handleTocDockDragEnd)
    document.removeEventListener('mousemove', handleTocDockDragMove);
    document.removeEventListener('mouseup', handleTocDockDragEnd);
    document.body.classList.remove('toc-dock-resizing');
    isTocDockResizing = false; // Reset flag
  }

  function enterImmersiveMode(options = {}) {
    const { silent = false } = options;

    // 检查是否为移动端设备
    if (window.innerWidth <= 700) {
      console.warn('拒绝在移动端（≤700px）进入沉浸式布局');
      // 移动端：显示普通布局
      document.documentElement.classList.remove('immersive-pending');
      document.documentElement.classList.add('immersive-ready');
      document.body.classList.remove('immersive-pending');
      document.body.classList.add('immersive-ready');
      return true; // 移动端算作成功
    }

    reQueryDynamicElements();

    let missingElements = [];
    if (!immersiveContainer) missingElements.push('immersiveContainer');
    if (!mainPageContainer) missingElements.push('mainPageContainer');
    if (!tocPopupElement) missingElements.push('tocPopupElement');
    if (!chatbotModalElement) missingElements.push('chatbotModalElement');
    if (!dockElement) missingElements.push('dockElement');
    if (!immersiveTocArea) missingElements.push('immersiveTocArea');
    if (!immersiveMainArea) missingElements.push('immersiveMainArea');
    if (!immersiveChatbotArea) missingElements.push('immersiveChatbotArea');
    if (!immersiveDockPlaceholderElement) missingElements.push('immersiveDockPlaceholderElement (logic error if this happens)');

    console.log('[enterImmersiveMode] 元素检查:', {
      immersiveContainer: !!immersiveContainer,
      mainPageContainer: !!mainPageContainer,
      tocPopupElement: !!tocPopupElement,
      chatbotModalElement: !!chatbotModalElement,
      dockElement: !!dockElement,
      immersiveTocArea: !!immersiveTocArea,
      immersiveMainArea: !!immersiveMainArea,
      immersiveChatbotArea: !!immersiveChatbotArea
    });

    // 【严格检查】如果元素缺失，返回 false 表示失败，不显示页面
    // 调用者应该重试直到成功
    if (missingElements.length > 0) {
      console.error('[enterImmersiveMode] 严重错误：沉浸模式元素缺失:', missingElements.join(', '));
      console.error('[enterImmersiveMode] 拒绝显示普通布局，等待重试...');
      return false; // 返回失败，不显示页面
    }

    isImmersiveActive = true;
    storeOriginalPositions();

    // 静默模式：跳过动画，直接设置状态
    if (silent) {
      document.body.classList.add('immersive-active', 'no-scroll');
      immersiveContainer.style.display = 'flex';
      immersiveContainer.style.opacity = '1';
      immersiveContainer.style.transform = 'scale(1)';
    } else {
      // 添加进入动画类
      document.body.classList.add('immersive-entering');
      immersiveContainer.style.opacity = '0';
      immersiveContainer.style.transform = 'scale(0.95)';
      immersiveContainer.style.transition = 'opacity 0.4s ease, transform 0.4s ease';
    }

    // Append TOC content first
    if (tocPopupElement && immersiveTocArea) {
        immersiveTocArea.appendChild(tocPopupElement);
    }

    // Create and insert the resize handle between TOC and Dock Placeholder
    if (immersiveTocArea) {
        if (!tocVsDockResizeHandle) { // Create if it doesn't exist
            tocVsDockResizeHandle = document.createElement('div');
            tocVsDockResizeHandle.id = 'toc-vs-dock-resize-handle';
        }
        if (tocPopupElement && tocPopupElement.parentNode === immersiveTocArea) {
            immersiveTocArea.insertBefore(tocVsDockResizeHandle, tocPopupElement.nextSibling);
        } else {
            immersiveTocArea.appendChild(tocVsDockResizeHandle);
        }
    }

    // Then append the dock placeholder to TOC area
    if (immersiveDockPlaceholderElement && immersiveTocArea) {
        if (tocVsDockResizeHandle && tocVsDockResizeHandle.parentNode === immersiveTocArea) {
            immersiveTocArea.insertBefore(immersiveDockPlaceholderElement, tocVsDockResizeHandle.nextSibling);
        } else {
            immersiveTocArea.appendChild(immersiveDockPlaceholderElement);
        }
    }

    // Move other elements
    if (mainPageContainer && immersiveMainArea) {
        immersiveMainArea.appendChild(mainPageContainer);
    }
    if (chatbotModalElement && immersiveChatbotArea) {
        immersiveChatbotArea.appendChild(chatbotModalElement);
    }

    // Move the actual dock into its placeholder
    if (dockElement && immersiveDockPlaceholderElement) {
        immersiveDockPlaceholderElement.appendChild(dockElement);

        // Force Dock to be expanded in immersive mode
        if (dockElement.classList.contains('dock-collapsed')) {
            dockElement.classList.remove('dock-collapsed');
            const dockToggleBtn = document.getElementById('dock-toggle-btn');
            if (dockToggleBtn) {
                dockToggleBtn.innerHTML = '<i class="fa fa-chevron-down"></i>';
                dockToggleBtn.title = '折叠';
            }
            if (typeof window !== 'undefined' && window.docIdForLocalStorage) {
                localStorage.setItem(`dockCollapsed_${window.docIdForLocalStorage}`, 'false');
            }
        }
    }

    // 静默模式下已经设置了 display 和 opacity，跳过动画
    if (!silent) {
      document.body.classList.add('immersive-active', 'no-scroll');
      immersiveContainer.style.display = 'flex';

      // 简单的强制重新计算，修复初始化时的布局问题
      setTimeout(() => {
        if (immersiveContainer) {
          immersiveContainer.offsetHeight; // 触发重新布局
        }
      }, 0);

      // 动画进入效果
      requestAnimationFrame(() => {
        immersiveContainer.style.opacity = '1';
        immersiveContainer.style.transform = 'scale(1)';

        setTimeout(() => {
          document.body.classList.remove('immersive-entering');
          immersiveContainer.style.transition = '';
        }, 400);
      });
    }

    // 显示页面（移除 pending 状态）
    document.documentElement.classList.remove('immersive-pending');
    document.documentElement.classList.add('immersive-ready');
    document.body.classList.remove('immersive-pending');
    document.body.classList.add('immersive-ready');

    if (toggleBtn) {
      toggleBtn.innerHTML = '<i class="fas fa-compress-alt"></i>';
      toggleBtn.classList.add('immersive-exit-btn-active');
      toggleBtn.title = '退出沉浸模式';
    }

    // 其他初始化逻辑保持不变...
    if (typeof window.refreshTocList === 'function') {
      window.refreshTocList();
    }
    if (window.ChatbotUI && typeof window.ChatbotUI.updateChatbotUI === 'function') {
      window.isChatbotOpen = true;
      window.isChatbotFullscreen = false;
      window.forceChatbotWidthReset = true;
      window.ChatbotUI.updateChatbotUI();
    }
    if (window.DockLogic && typeof window.DockLogic.updateStats === 'function' && window.data && window.currentVisibleTabId) {
        dockElement.style.display = '';
        window.DockLogic.updateStats(window.data, window.currentVisibleTabId);
    }

    setTimeout(() => {
        if (window.DockLogic) {
            if (typeof window.DockLogic.unbindScrollForCurrentScrollable === 'function') {
                console.log("[ImmersiveLayout] 进入沉浸模式前，先解绑旧的滚动事件");
                window.DockLogic.unbindScrollForCurrentScrollable();
            }
            if (typeof window.DockLogic.forceUpdateReadingProgress === 'function') {
                console.log("[ImmersiveLayout] 进入沉浸模式后，延迟调用 forceUpdateReadingProgress");
                window.DockLogic.forceUpdateReadingProgress();
            }
        }

        // 为滚动容器添加标记 class，供 JS 查询使用
        if (immersiveMainArea) {
            const container = immersiveMainArea.querySelector('.container');
            if (container) {
                const tabContent = container.querySelector('.tab-content');
                if (tabContent) {
                    // 添加 .js-scroll-container 标记，供 DockLogic 等模块查询
                    // CSS 通过 body.immersive-active 选择器自动控制 overflow
                    tabContent.classList.add('js-scroll-container');
                    console.log("[ImmersiveLayout] 已为 tab-content 添加 js-scroll-container 标记");
                }
            }
        }
    }, 300);

    // Force TOC to be expanded in immersive mode
    if (tocPopupElement && !tocPopupElement.classList.contains('toc-expanded')) {
      const tocExpandBtn = document.getElementById('toc-expand-btn');
      if (tocExpandBtn) {
        tocPopupElement.classList.add('toc-expanded');
        const icon = tocExpandBtn.querySelector('i');
        if (icon) {
          icon.classList.remove('fa-angles-right');
          icon.classList.add('fa-angles-left');
        }
        tocExpandBtn.title = '收起目录';
      }
    }

    loadPanelSizes();
    initializeTocDockResizer();
    localStorage.setItem(LS_IMMERSIVE_KEY, 'true');
    document.dispatchEvent(new CustomEvent('immersiveModeEntered'));

    return true; // 成功进入沉浸模式
  }
  // 禁用退出沉浸模式功能 - 页面始终保持在沉浸式布局
  function exitImmersiveMode() {
    // 已禁用：页面始终保持在沉浸式布局
    console.log('[ImmersiveLayout] 退出沉浸模式功能已禁用');
  }

  function initResizeHandles() {
    const handles = document.querySelectorAll('.immersive-resize-handle');
    let activeHandle = null;
    let startX, startWidthPrev, startWidthNext;

    handles.forEach(handle => {
      handle.addEventListener('mousedown', function(e) {
        activeHandle = this;
        startX = e.clientX;
        const prevPanelId = activeHandle.dataset.targetPrev;
        const nextPanelId = activeHandle.dataset.targetNext;
        const prevPanel = document.getElementById(prevPanelId);
        const nextPanel = document.getElementById(nextPanelId);

        if (!prevPanel || !nextPanel) {
          console.warn(`Resize panels not found: ${prevPanelId} or ${nextPanelId}`);
          activeHandle = null;
          return;
        }

        startWidthPrev = prevPanel.offsetWidth;
        startWidthNext = nextPanel.offsetWidth;

        document.body.classList.add('immersive-dragging');
        document.body.style.userSelect = 'none';
        document.body.style.cursor = 'col-resize';

        e.preventDefault();
      });
    });

    document.addEventListener('mousemove', function(e) {
      if (!activeHandle) return;

      const dx = e.clientX - startX;
      const prevPanel = document.getElementById(activeHandle.dataset.targetPrev);
      const nextPanel = document.getElementById(activeHandle.dataset.targetNext);

      if (!prevPanel || !nextPanel) return;

      const newWidthPrev = startWidthPrev + dx;
      const newWidthNext = startWidthNext - dx;
      const minPanelWidth = parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--immersive-panel-min-width')) || 80;

      if (newWidthPrev >= minPanelWidth && newWidthNext >= minPanelWidth) {
        prevPanel.style.width = newWidthPrev + 'px';
        nextPanel.style.width = newWidthNext + 'px';
        
        // 平滑的过渡动画
        prevPanel.style.transition = 'none';
        nextPanel.style.transition = 'none';
      }
    });

    document.addEventListener('mouseup', function() {
      if (activeHandle) {
        savePanelSizes();

        // 恢复样式
        document.body.classList.remove('immersive-dragging');
        document.body.style.userSelect = '';
        document.body.style.cursor = '';

        // 恢复过渡动画
        const prevPanel = document.getElementById(activeHandle.dataset.targetPrev);
        const nextPanel = document.getElementById(activeHandle.dataset.targetNext);
        if (prevPanel) prevPanel.style.transition = '';
        if (nextPanel) nextPanel.style.transition = '';

        activeHandle = null;
      }
    });
  }

  function mainInit() {
    if (!initializeDomElements()) {
      console.warn('[ImmersiveLayout] 核心静态元素未找到，200ms 后重试...');
      setTimeout(mainInit, 200);
      return;
    }

    reQueryDynamicElements();

    // 按钮已隐藏，退出功能已禁用，页面始终处于沉浸模式
    // 不再需要按钮事件监听器

    initResizeHandles();

    // 禁用：窗口大小变化时不再自动退出沉浸模式
    // function handleWindowResize() {
    //   if (window.innerWidth <= 700 && isImmersiveActive) {
    //     console.log('检测到屏幕缩小到移动端尺寸，自动退出沉浸式布局');
    //     exitImmersiveMode();
    //   }
    // }
    // window.addEventListener('resize', handleWindowResize);

    // 【严格沉浸模式】必须成功进入沉浸模式才显示页面
    console.log('[ImmersiveLayout] 强制进入沉浸模式');

    // 检查是否为移动端，如果是则显示普通布局
    if (window.innerWidth <= 700) {
      console.log('[ImmersiveLayout] 检测到移动端设备，显示普通布局');
      document.documentElement.classList.remove('immersive-pending');
      document.documentElement.classList.add('immersive-ready');
      document.body.classList.remove('immersive-pending');
      document.body.classList.add('immersive-ready');
      return;
    }

    // 尝试进入沉浸模式（静默模式，无动画）
    const success = enterImmersiveMode({ silent: true });

    if (success) {
      console.log('[ImmersiveLayout] 成功进入沉浸模式');
    } else {
      // 失败时持续重试，不显示页面
      console.error('[ImmersiveLayout] 进入沉浸模式失败，300ms 后重试...');
      setTimeout(mainInit, 300);
      return;
    }

    console.log('Immersive layout logic initialized.');
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', mainInit);
  } else {
    mainInit();
  }

  global.ImmersiveLayout = {
    isActive: () => isImmersiveActive,
    isSimpleActive: () => isSimpleImmersiveActive, // 新增：简单沉浸模式状态查询
    enter: enterImmersiveMode,
    exit: exitImmersiveMode
  };

})(window);