import TitleBar from '@/components/TitleBar/TitleBar'
import ActivityBar from '@/components/ActivityBar/ActivityBar'
import SidePanel from '@/components/SidePanel/SidePanel'
import TabsBar from '@/components/TabsBar/TabsBar'
import Breadcrumbs from '@/components/Breadcrumbs/Breadcrumbs'
import WelcomeScreen from '@/components/Welcome/WelcomeScreen'
import YaceEditor from '@/components/Editor/YaceEditor'
import StatusBar from '@/components/StatusBar/StatusBar'
import CommandPalette from '@/components/CommandPalette/CommandPalette'
import ContextMenu from '@/components/ContextMenu/ContextMenu'
import Toasts from '@/components/Toasts/Toasts'
import { useKeyboard } from '@/hooks/useKeyboard'
import { useLayoutStore } from '@/stores/useLayoutStore'
import { useTabsStore } from '@/stores/useTabsStore'

export default function App() {
  useKeyboard()
  const sidePanelVisible = useLayoutStore((s) => s.sidePanelVisible)
  const activeView = useLayoutStore((s) => s.activeView)
  const activeTabId = useTabsStore((s) => s.activeTabId)

  return (
    <div className="h-screen w-screen flex flex-col overflow-hidden bg-editor-bg" onContextMenu={(e) => e.preventDefault()}>
      <TitleBar />
      <CommandPalette />
      <ContextMenu />
      <Toasts />
      <div className="flex flex-1 overflow-hidden">
        <ActivityBar />
        {sidePanelVisible && activeView && <SidePanel />}
        <div className="flex flex-col flex-1 overflow-hidden min-w-0">
          {activeTabId ? (
            <>
              <TabsBar />
              <Breadcrumbs />
              <YaceEditor />
            </>
          ) : (
            <WelcomeScreen />
          )}
        </div>
      </div>
      <StatusBar />
    </div>
  )
}