import { createFileRoute, Outlet, redirect } from "@tanstack/react-router"

import { ConnectionBanner } from "@/components/Common/ConnectionBanner"
import { Footer } from "@/components/Common/Footer"
import { useFlowSocket } from "@/components/Flow/useFlowSocket"
import AppSidebar from "@/components/Sidebar/AppSidebar"
import {
  SidebarInset,
  SidebarProvider,
  SidebarTrigger,
} from "@/components/ui/sidebar"
import { isLoggedIn } from "@/hooks/useAuth"

export const Route = createFileRoute("/_layout")({
  component: Layout,
  beforeLoad: async () => {
    if (!isLoggedIn()) {
      throw redirect({
        to: "/login",
      })
    }
  },
})

function Layout() {
  // Dashboards live in this shell and read live values, so the socket belongs
  // here rather than only inside the editor.
  useFlowSocket()

  return (
    <SidebarProvider className="bg-card">
      {/* Renders nothing unless this page is served through a portal. */}
      <ConnectionBanner />
      <AppSidebar />
      <SidebarInset className="bg-card">
        {/* The sidebar carries its own collapse control; a phone has no
            sidebar on screen to carry it. */}
        <header className="sticky top-0 z-10 flex h-16 shrink-0 items-center gap-2 px-4 md:hidden">
          <SidebarTrigger className="-ml-1 text-muted-foreground" />
        </header>
        <main className="flex-1 p-4 sm:p-6 md:p-8">
          <div className="mx-auto max-w-7xl">
            <Outlet />
          </div>
        </main>
        <Footer />
      </SidebarInset>
    </SidebarProvider>
  )
}

export default Layout