import { Outlet } from 'react-router-dom'
import { Sidebar } from './Sidebar'
import { Topbar } from './Topbar'
import { Drawer } from '@/components/ui/drawer'
import { useUiStore } from '@/app/store/ui'
import { GlobalRealtime } from './GlobalRealtime'

export function AppLayout() {
  const { mobileNavOpen, setMobileNavOpen } = useUiStore()

  return (
    <div className="flex h-screen overflow-hidden bg-[#f7f9fc]">
      <GlobalRealtime />
      {/* 桌面端固定侧边栏 */}
      <div className="hidden shrink-0 lg:block">
        <Sidebar />
      </div>

      {/* 移动端抽屉导航 */}
      <Drawer open={mobileNavOpen} onOpenChange={setMobileNavOpen} side="left" width="w-64" title="灵犀跨境">
        <div className="h-full">
          <Sidebar />
        </div>
      </Drawer>

      <div className="flex min-w-0 flex-1 flex-col">
        <Topbar />
        <main className="flex-1 overflow-y-auto bg-[#f7f9fc] scrollbar-thin" id="main-scroll">
          <Outlet />
        </main>
      </div>
    </div>
  )
}