// frontend-react/src/App.jsx
import React, { useCallback, useEffect, useRef } from 'react'; // ✅ 移除 useState
import TopBar from './components/TopBar';
import { ChatBox } from './components/Mid';
import SideBarLeft from './components/SideBarLeft';
import SideBarRight from './components/SideBarRight';
import useAppLayoutStore from './Store/AppLayoutSlice'; // ✅ 新增
import './index.css';

function App() {
  // ✅ 从 AppLayoutStore 获取状态和方法
  const {
    layoutMode,
    sidebarMode,
    isSidebarHovered,
    colorTheme,
    setLayoutMode,
    setSidebarMode,
    setSidebarHovered,
    setColorTheme
  } = useAppLayoutStore();

  // 防抖定时器引用
  const hoverTimeoutRef = useRef(null);
  const leaveTimeoutRef = useRef(null);

  // 处理鼠标进入左侧栏 - 使用 useCallback 优化
  const handleMouseEnter = useCallback(() => {
    if (sidebarMode === 'smart') {
      // 清除之前的离开定时器
      if (leaveTimeoutRef.current) {
        clearTimeout(leaveTimeoutRef.current);
      }
      
      // 设置防抖延迟后展开
      hoverTimeoutRef.current = setTimeout(() => {
        setSidebarHovered(true); // ✅ 使用 store 方法
        setLayoutMode('edit');
      }, 400); // 400ms 防抖
    }
  }, [sidebarMode, setSidebarHovered, setLayoutMode]);

  // 处理鼠标离开左侧栏 - 使用 useCallback 优化
  const handleMouseLeave = useCallback(() => {
    if (sidebarMode === 'smart') {
      // 清除之前的进入定时器
      if (hoverTimeoutRef.current) {
        clearTimeout(hoverTimeoutRef.current);
      }
      
      // 设置延迟收起，给用户反应时间
      leaveTimeoutRef.current = setTimeout(() => {
        setSidebarHovered(false); // ✅ 使用 store 方法
        setLayoutMode('chat');
      }, 250); // 250ms 延迟
    }
  }, [sidebarMode, setSidebarHovered, setLayoutMode]);

  // 清理定时器
  useEffect(() => {
    return () => {
      if (hoverTimeoutRef.current) clearTimeout(hoverTimeoutRef.current);
      if (leaveTimeoutRef.current) clearTimeout(leaveTimeoutRef.current);
    };
  }, []);

  return (
    <div className={`app ${layoutMode}-mode`}>
      {/* ✅ TopBar 不再需要 props，直接从 Store 读取状态 */}
      <TopBar />

      {/* 主内容容器 */}
      <div className="main-container">
        {/* 左侧栏 - 智能模式下悬停展开 */}
        <div 
          className={`sidebar-left-wrapper sidebar-mode-${sidebarMode} ${sidebarMode === 'smart' && isSidebarHovered ? 'sidebar-expanded' : ''}`}
          onMouseEnter={handleMouseEnter}
          onMouseLeave={handleMouseLeave}
        >
          <SideBarLeft />
        </div>

        {/* 中间栏：聊天框 */}
        <div className="chat-area-wrapper">
          <div className="chat-area">
            <ChatBox />
          </div>
        </div>

        {/* 右侧栏 */}
        <div className="sidebar-right-wrapper">
          <SideBarRight />
        </div>
      </div>
    </div>
  );
}

export default App;