import { useState, useEffect } from 'react';
import './index.css';
import { Sidebar } from './components/Sidebar';
import { ChatArea } from './components/ChatArea';
import { RightPanel } from './components/RightPanel';
import { SettingsLayout } from './components/Settings/SettingsLayout';
import { useGatewayStore } from './store/gatewayStore';

type View = 'main' | 'settings';

function App() {
  const [view, setView] = useState<View>('main');
  const { connect, connectionState } = useGatewayStore();

  // Auto-connect to Gateway on startup
  useEffect(() => {
    if (connectionState === 'disconnected') {
      connect().catch(() => {
        // Silent fail — user can manually connect via Settings
      });
    }
  }, []);

  if (view === 'settings') {
    return <SettingsLayout onBack={() => setView('main')} />;
  }

  return (
    <div className="h-screen flex overflow-hidden text-gray-800 text-sm">
      {/* 左侧边栏 */}
      <Sidebar onOpenSettings={() => setView('settings')} />
      
      {/* 中间对话区域 */}
      <main className="flex-1 flex flex-col bg-white relative">
        <ChatArea />
      </main>
      
      {/* 右侧边栏 */}
      <RightPanel />
    </div>
  );
}

export default App;