import { useEffect } from 'react';
import { LeftSidebar } from './components/LeftSidebar';
import { Console } from './components/Console';
import { RightSidebar } from './components/RightSidebar';
import { SlideOverViewer } from './components/Modals/SlideOverViewer';
import { NewProjectModal } from './components/Modals/NewProjectModal';
import { InsightPopup } from './components/Modals/InsightPopup';
import { SettingsModal } from './components/Settings/SettingsModal';
import { useAppStore } from './stores/useAppStore';

export default function App() {
  const initConfigs = useAppStore(s => s.initConfigs);
  
  useEffect(() => {
    initConfigs();
  }, [initConfigs]);

  return (
    <div className="flex h-screen w-screen bg-[#FFFFFF] text-[#2D2D2D] font-sans overflow-hidden select-none wails-drag transition-colors duration-300">
      <LeftSidebar />
      <Console />
      <RightSidebar />
      <SlideOverViewer />
      <NewProjectModal />
      <InsightPopup />
      <SettingsModal />
    </div>
  );
}