// 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 PlaceholderPage from './components/PlaceholderPage';
import useAppLayoutStore from './Store/AppLayoutSlice'; // ✅ 新增
import useApiConfigStore from './Store/SideBarLeft/ApiConfigSlice'; // ✅ 引入 API 配置 Store
import usePresetStore from './Store/SideBarLeft/PresetSlice'; // ✅ 引入预设 Store
import useCharacterStore from './Store/SideBarLeft/CharacterSlice'; // ✅ 引入角色卡 Store
import useWorldBookStore from './Store/SideBarLeft/WorldBookSlice'; // ✅ 引入世界书 Store
import './index.css';

function App() {
  // ✅ 从 AppLayoutStore 获取状态和方法
  const {
    layoutMode,
    sidebarMode,
    isSidebarHovered,
    colorTheme,
    activePage,
    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);
    };
  }, []);

  // ✅ 初始化时应用主题到 DOM（确保页面加载时就显示正确的主题）
  useEffect(() => {
    document.documentElement.setAttribute('data-theme', colorTheme);
    document.documentElement.setAttribute('data-color-theme', colorTheme);
  }, [colorTheme]);

  // ✅ 应用启动时自动加载必要的配置数据
  useEffect(() => {
    // console.log('[App] 🚀 应用启动，开始加载默认配置...');
    const startTime = Date.now();
    
    // 获取各个 Store 的方法
    const apiConfigStore = useApiConfigStore.getState();
    const presetStore = usePresetStore.getState();
    const characterStore = useCharacterStore.getState();
    const worldBookStore = useWorldBookStore.getState();
    
    // 并行加载所有必要的数据
    Promise.allSettled([
      // 1. 加载 API 配置文件列表
      (async () => {
        try {
          await apiConfigStore.fetchProfiles();
          // console.log('[App] ✅ API 配置文件列表加载完成');
          
          // ✅ 如果有持久化的配置 ID，优先使用；否则加载第一个
          const persistedProfileId = apiConfigStore.currentProfileId;
          const currentProfile = apiConfigStore.currentProfile;
          
          if (persistedProfileId && !currentProfile) {
            // 有持久化 ID 但没有详情，加载详情
            // console.log(`[App] 🔄 恢复上次选中的配置: ${persistedProfileId}`);
            await apiConfigStore.fetchProfile(persistedProfileId);
            console.log('[App] ✅ API 配置详情加载完成');
          } else if (!currentProfile) {
            // 没有持久化配置，加载第一个
            const profiles = useApiConfigStore.getState().profiles;
            if (profiles.length > 0) {
              const firstProfile = profiles[0];
              // console.log(`[App] 📝 自动加载第一个配置文件: ${firstProfile.name}`);
              await apiConfigStore.fetchProfile(firstProfile.id);
              // console.log('[App] ✅ API 配置详情加载完成');
            } else {
              // console.warn('[App] ⚠️ 没有可用的 API 配置文件，请先到 API 配置页面创建');
            }
          } else {
            // 从缓存恢复
          }
        } catch (err) {
          // console.error('[App] ❌ API 配置加载失败:', err);
        }
      })(),
      
      // 2. 加载预设列表
      (async () => {
        try {
          await presetStore.fetchPresets();
          console.log('[App] ✅ 预设列表加载完成');
          
          // ✅ 如果有持久化的预设，优先使用
          const persistedPreset = presetStore.selectedPreset;
          
          if (persistedPreset) {
            console.log(`[App] 🔄 恢复上次选中的预设: ${persistedPreset}`);
            // 重新加载预设详情以获取最新配置
            await presetStore.setSelectedPreset(persistedPreset);
            console.log('[App] ✅ 预设详情加载完成');
          } else {
            // 没有持久化预设，选择第一个
            const presets = usePresetStore.getState().presets;
            if (presets.length > 0) {
              const firstPreset = presets[0];
              console.log(`[App] 📝 自动选择第一个预设: ${firstPreset.name}`);
              presetStore.selectPreset(firstPreset.name);
            } else {
              // console.warn('[App] ⚠️ 没有可用的预设');
            }
          }
        } catch (err) {
          // console.error('[App] ❌ 预设列表加载失败:', err);
        }
      })(),
      
      // 3. 加载角色卡列表
      (async () => {
        try {
          await characterStore.fetchCharacters();
          // console.log('[App] ✅ 角色卡列表加载完成');
        } catch (err) {
          // console.error('[App] ❌ 角色卡列表加载失败:', err);
        }
      })(),
      
      // 4. 加载世界书列表
      (async () => {
        try {
          await worldBookStore.fetchWorldBooks();
          // console.log('[App] ✅ 世界书列表加载完成');
        } catch (err) {
          // console.error('[App] ❌ 世界书列表加载失败:', err);
        }
      })()
    ]).then((results) => {
      const endTime = Date.now();
      const duration = ((endTime - startTime) / 1000).toFixed(2);
      
      // 统计加载结果
      const successCount = results.filter(r => r.status === 'fulfilled').length;
      const failCount = results.filter(r => r.status === 'rejected').length;
      
      // console.log(`[App] 🎉 配置加载完成 (${duration}s)`);
      // console.log(`[App] 📊 成功: ${successCount}, 失败: ${failCount}`);
      
      // if (failCount > 0) {
      //   console.warn('[App] ⚠️ 部分配置加载失败，但应用仍可正常使用');
      // }
    });
  }, []); // 仅在应用启动时执行一次

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

      {/* 主内容容器 */}
      {activePage === 'chat' ? (
        <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 className="main-container placeholder-container">
          <PlaceholderPage page={activePage} />
        </div>
      )}
    </div>
  );
}

export default App;
